CODEWITHSUNDEEP
phpjavascript
Sirojan Gnanaretnam
Sirojan Gnanaretnam

Reputation: 611

Drop Down List Form Submission

I am trying to submit the Form when select a option from the dropdown list. But It's not working. can any one please help me to fix this issue. I have attached My Code Below.

Thanks in Advance,

<div class="main" id="main">
  <h2>Sell / Rent Advertisments</h2>
  <form id="form1" name="form1" method="post" action="form.php">
  <table width="531" height="121" border="0">
    <tr>
      <td width="81"><div>
        <label>I wish to:</label>
      </div></td>
      <td width="76">
        <label for="mediaId"></label>
        <select name="mediaId" id="mediaId">


          <option selected value="Sale">Sale</option>
          <option value="Rent">Rent</option>
        </select>
      </td>
      <td width="360"><label for="type"></label>
        <select name="type" id="type">
        <option value="_Any" selected="selected">- - Not Specified - -</option>
<option value="1" onChange="document.forms['form1'].submit()">Apartment</option>
<option value="3" onChange="document.forms['form1'].submit()">Building</option>
<option value="4" onChange="document.forms['form1'].submit()">Hotels/Guest Houses</option>
<option value="5" onChange="document.forms['form1'].submit()">House</option>
<option value="6" onChange="document.forms['form1'].submit()">Land</option>
      </select></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  </form>
</div>

Upvotes: 0

Views: 3440

Answers (4)

Abhilash
Abhilash

Reputation: 1610

HTML

<form id="form1" ...>
    <select name="type" id="type">
        <option value="_Any" selected="selected">- - Not Specified - -</option>
        <option value="1">Apartment</option>
        <option value="3">Building</option>
        <option value="4">Hotels/Guest Houses</option>
        <option value="5">House</option>
        <option value="6">Land</option>
    </select>
</form>

No jquery, just javascript

Put the onchange in the select tag, not in each individual option tags 

<select name="type" id="type" onChange="document.forms['form1'].submit()">

jQuery

Separate functionality from markup, and put this text in $.ready()

$('#type').change( function(){
    $('#form1').submit();
});

Upvotes: 1

jihchuan
jihchuan

Reputation: 307

The onChange should be place on the tag, you 'change' the select's option but not changing anything on the options..

<select name="type" id="type" onChange="document.forms['form1'].submit()">

Upvotes: 0

Dr. Dan
Dr. Dan

Reputation: 2288

Try

<select name="type" id="type"  onChange="document.forms['form1'].submit()">
    <option value="_Any" selected="selected">- - Not Specified - -</option>
    <option value="1">Apartment</option>
    <option value="3" >Building</option>
    <option value="4" >Hotels/Guest Houses</option>
    <option value="5" >House</option>
    <option value="6" >Land</option>
    </select>

That is, apply onChange event to select instead of option

Upvotes: 2

polin
polin

Reputation: 2835

Use onClick instead of onChange like

<option value="1" onclick="document.forms['form1'].submit()">Apartment</option>

Upvotes: -2

Related Questions