使用JavaScript提交HTML表单

Question

i want to have a button to submit a form, but it doesnt seem to work. when the button is clicked, nothing happens.

HTML

<form method="post" action="process.php">
   <select name="taskOption" id="taskOption2">
    <option value="Select">Please select a site</option>
    <option value="http://www.Itslearning.com">Itslearning</option>
    <option value="http://www.NDLA.no">NDLA</option>
   </select>
</form>

<button onclick="FormSubmit()" class="button button1 button1:hover">Take me there</button>

JavaScript

function FormSubmit() {
document.getElementById("taskOption").submit();
}

PHP

<?php
$option = isset($_POST['taskOption2']) ? $_POST['taskOption2'] : false;
if ($option) {
header("Location: $option");

}
else {
   echo "Venligst velg en side.";
  exit; 
}
?>

Answer 1

Your function is wrong.

document.getElementById("taskOption").submit(); // this is wrong

taskOption it is the id of select box not your forms

<form name="F1">// give a name to your form
    .....
</form> 

   function FormSubmit() {     

    document.F1.submit();
    }

or

  <form id="formid">// give a id to your form
        .....
    </form> 
  function FormSubmit() {    
document.getElementById('formid').submit(); 
}

Answer 2

You must write id of Form, like instead of below:

<form method="post" action="process.php" id="taskOption2">
                <select name="taskOption" >
                <option value="Select">Please select a site</option>
                <option value="http://www.Itslearning.com">Itslearning</option>
                <option value="http://www.NDLA.no">NDLA</option>
            </select>
    </form>

Answer 3

Use:

Javascript:

function FormSubmit() {
  document.taskform.submit();
}

HTML:

<form method="post" name="taskform" action="process.php">
                <select name="taskOption" id="taskOption2">
                <option value="Select">Please select a site</option>
                <option value="http://www.Itslearning.com">Itslearning</option>
                <option value="http://www.NDLA.no">NDLA</option>
            </select>
    </form>

<button onclick="FormSubmit()" class="button button1 button1:hover">Take me there</button>

Answer 4

first you gave a name to form here form1 is name then onclick you call the form

   <form method="post" name="form1" action="process.php">
           <select name="taskOption" id="taskOption2">
            <option value="Select">Please select a site</option>
            <option value="http://www.Itslearning.com">Itslearning</option>
            <option value="http://www.NDLA.no">NDLA</option>
           </select>
        </form>

        <button onclick="FormSubmit()" class="button button1 button1:hover">Take me there</button>


    function FormSubmit() {
    document.form1.submit();
    }

Answer 5

Seems to me you just want a submit button in a form:

In that case, by far the easiest solution is move the <button> to inside the form tags, and make its type="submit" . There's no Javascript required at all:

<form method="post" action="process.php">
   <select name="taskOption" id="taskOption2">
        <option value="Select">Please select a site</option>
        <option value="http://www.Itslearning.com">Itslearning</option>
        <option value="http://www.NDLA.no">NDLA</option>
   </select>
    <button type="submit" class="button button1 button1:hover">Take me there</button>
</form>

Answer 6

Try this

  function submitMyForm()
  {   
    alert("Test");
    document.getElementById("myForm").submit();
  }

<form id="myform" method="post" action="process.php">
   <select name="taskOption" id="taskOption2">
    <option value="Select">Please select a site</option>
    <option value="http://www.Itslearning.com">Itslearning</option>
    <option value="http://www.NDLA.no">NDLA</option>
   </select>
</form>


<button onclick="submitMyForm()">The time is?</button>

Answer 7

It will not work because you forgot to add the id in the form and you are calling submit function on a form with id taskOption .

 <form method="post" action="process.php">

there is no id in the form tag, add the id as:

 <form method="post" action="process.php" id="taskOption">

Answer 8

You have wrong call submit , only form id or element can use submit() . So call form element first

function FormSubmit() {
document.getElementById("taskOption2").parentNode.submit(); //must call id not name (parentNode is getting for parent form element)
}

In your php you have wrong access with select id ,the correct thing is access by element name

$option = isset($_POST['taskOption']) ? $_POST['taskOption'] : false; //element name is valid call