Going directly with another input box

JavaScript
1 
<script type='text/javascript'>
window.onload = function()
{
  document.getElementById('goDirect').onchange = ddmOnChange;
}
function ddmOnChange()
{
  var url = this.options[this.selectedIndex].value;

  document.location = url;
}
</script>

<form>
<select id='goDirect'>
<option>select</option>
<option value='pg1.php'>Page 1</option>
<option value='pg2.php'>Page 2</option>
</select>
</form>

With the code above, if a user selects Page1, it will go directly to pg1.php without any clicking a submit button.

I like to make it goes to pg1.php with another input text data without any clicking a submit button.

The would-be code below doesn’t work correctly, but I hope it show what I want.

<script type='text/javascript'>
window.onload = function()
{
  document.getElementById('goDirect').onchange = ddmOnChange;
}
function ddmOnChange()
{
  var url = this.options[this.selectedIndex].value;

  document.location = url;
}
</script>

<form [COLOR="#FF0000"]method="post"[/COLOR]>

[COLOR="#FF0000"]<input type="text" name="myText" value="[SIZE=5]myText[/SIZE]">[/COLOR]
<select id='goDirect'>
<option>select</option>
<option value='pg1.php'>Page 1</option>
<option value='pg2.php'>Page 2</option>
</select>
</form>

In pg1.php I have the code below and I like to get my target result below.

[b]code in pg1.php[/b]
<?php
echo $_POST['myText'];
?>

[b]target result of pg1.php[/b]

[SIZE=5]myText[/SIZE]
2

Yup, seeing what you want to do here. If you want to post data from a form, you’ll have to submit the form to a page that will accept its data, for example pg1.php.

One way to do it would be to change the “action” attribute of the form on the fly and then calling the submit method.
e.g.:


//set the form action
var myForm = document.getElementById("theForm"); //assuming you added the id="theForm" to your form
myForm.action = url;
//and submit the form. This will make sure that form field data will get passed along
myForm.submit();
3

Should I put your code in function ddmOnChange() like the below?

<script type='text/javascript'>
window.onload = function()
{
  document.getElementById('goDirect').onchange = ddmOnChange;
}
function ddmOnChange()
{
  var url = this.options[this.selectedIndex].value;

  document.location = url;

[COLOR="#FF0000"]var myForm = document.getElementById("theForm"); //assuming you added the id="theForm" to your form
myForm.action = url;
//and submit the form. This will make sure that form field data will get passed along
myForm.submit();[/COLOR]

}
</script>


<form method="post">

<input type="text" name="theForm" value="myText">
<select id='goDirect'>
<option>select</option>
<option value='pg1.php'>Page 1</option>
<option value='pg2.php'>Page 2</option>
</select>

</form>

However, the code above seems not to pass the form data to pg1.php or pg2.php.

4

You need to make sure that the form has the id of theForm.

Additionally, the document.location line will need to be removed, it will be redirecting users before the form has a chance to be submitted.

Once you’ve done that, it should work :slight_smile: