Data February 2016

How can I capture form options on submit?

How can I capture form options on submit?

I have a plain html form which I can call a JavaScript function from on exit, But how do I capture the chosen option from the <select> element?

Please see code below:

 <legend>Administration:</legend>
<script type="text/javascript">
  function handleIt(m){
      alert("hello");
      }

</script>
</head>
<body>
  <form action="javascript:handleIt(select.name)"/>
  <select name="num" required>
  <option value="1">Add Anouncment</option>
  <option value="2">Del Anouncment</option>
  <option value="3">Aprove </option>
  <option value="4">unAprove </option>
  </select> 
<input name="Anouncement" type="text" required> 
  <input name="Submit"  type="submit" value="Update"/>
</form>

Answers


Haring10 February 2016

First of all, there are errors in your HTML syntax.

This will get the data when the 'submit' button is pressed (jsfiddle):

$('#submit_btn').on('click', function(e) {
    e.preventDefault();
  console.log($('[name="num"]').val());
});

<form id="main-form" method="get">
  <select name="num" required>
  <option value="1">Add Anouncment</option>
  <option value="2">Del Anouncment</option>
  <option value="3">Aprove </option>
  <option value="4">unAprove </option>
  </select> 
  <input name="Anouncement" type="text" required> 
  <input name="Submit"  type="button" value="Update" id="submit_btn"/>
</form>


abhay vyas February 2016

you can use this to retrieve selected option

<script type="text/javascript">
  function handleIt(){
      var v=document.getElementById("s1");
       alert(v.options[v.selectedIndex].text) ;   
      }

</script>
</head>
<body>
  <form action="javascript:handleIt()"/>
  <select name="num" id="s1" required>
  <option value="1">Add Anouncment</option>
  <option value="2">Del Anouncment</option>
  <option value="3">Aprove </option>
  <option value="4">unAprove </option>
  </select> 
<input name="Anouncement" type="text" required> 
  <input name="Submit"  type="submit" value="Update"/>
</form>

Post Status

Asked in February 2016
Viewed 1,251 times
Voted 10
Answered 2 times

Search




Leave an answer