Simple submit form to go to a page-CodePudding

I have some numbered pages:

1.php
2.php
3.php
etc.

I want to create a textbox that the user enter any number: 2 for example, and hit enter or Go button, and they will go to the page 2.php depending on the number entered.

I know how to link to a specific page as in form action="....", but I am not sure how to echo the user input and translate it as link (whether using html or php).

Ex:

<form method="POST">
<input type="number" value="" />
<input type="submit" value="Go" />
</form>

CodePudding user response：

I think, the best available option in your case would be the one using client-side javascript to dynamically change the form's action attribute base on the number entered in the input box.

A quick and dirty solution to fulfil such a task might look like this

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

function submitAction(formElement) {
   var // get the input box element
       el = document.getElementById('form-action-number'),
       // get a number specified by user in the input box
       num = parseInt(el.value), 
       // validate that it's really a number and is greater than zero
       // (you don't want someone to request -666.php right? :)
       // build a page url using the correct number
       page = !isNaN(num) && num > 0 ? num.toFixed(0).toString()   '.php' : undefined;

   if (page) { // the page url is valid
      // set form's action attribute to an url specified by page variable
      formElement.setAttribute('action', page);
      // returning true will allow the form to be submitted
      return true; 
   }

   // you might think of a better way to notify user that the input number is invalid :)
   console.error('INVALID NUMBER SPECIFIED!');
   // returning false will prevent form submission
   return false;
}
</script>
</head>
<body>
  <!-- When user clicks Go, the return value of submitAction function will be used to decide if the form should be submitted or not -->
  <form method="POST" onsubmit="return submitAction(this)">
    <input id="form-action-number" type="number" value="" />
    <input type="submit" value="Go" />
  </form>
</body>
</html>

CodePudding user response：

You need to add an action attribute to your form and a name attribute to your number input. The file from your action attribute will "catch" the POST variables and do the logic needed to redirect your user. Change your form tag to:

<form method="POST" action="redirect.php">
  <input type="number" value="" name="redirect" />
  <input type="submit" value="Go" />
</form>

Then create the redirect.php file that gets the POST variables and does the redirection:

<?php

$redirectPage = (int) $_POST['redirect'];
$redirectUrl = "http://www.example.com/{$redirectPage}.php";
header("Location: $redirectUrl");
printf('<a href="%s">moved</a>.', $redirectUrl);

Beware that there's no input validation nor error handling included.

CodePudding user response：

With PHP you can do something like this:

<?php
// Check if the POST value has been set
if(isset($_POST['my_number'])) {
    // Redirect to the corresponding page
    header('Location: ' . $_POST['my_number'] . '.php');
}
?>

<form method="POST">
    <input name="my_number" type="number" value="" />
    <input type="submit" value="Go" />
</form>

CodePudding user response：

This is like DaMeGeX's answer but uses javascript to go to the new page.

<?php
// Check if the POST value has been set
if(isset($_POST['my_number'])) {
    // Redirect to the corresponding page
    echo "<script> window.location.href = '".$_POST['number'].".php' </script>";
}
?>

<form method="POST">
    <input name="my_number" type="number" value="" />
    <input type="submit" value="Go" />
</form>