CODEWITHSUNDEEP
javascripthtmlforms
slevin
slevin

Reputation: 3888

html form does not respond to hitting "enter" button

I have this html form, which does not actually sends data to a php file, buts sends data to a javascipt function.

Works fine if I hit the "Go" button, but if I choose something and hit "enter", does not work. Does not send the data to the function, that is.

I have made other forms with the same pattern, to send data to a javascript function in the same file and they work . This one refuses.

How do I fix this? Thanks

<form id="boroughform" enctype="multipart/form-data" method="post" action="#" onSubmit="return goborough(this); return false;" >
Choose borough:<br/>
 <select name="boroughselect" id="boroughselect" >
  <option selected value=" ">Choose...</option>
//fill the options with the results of a query performed eariler - works
    <?php 
        for ($v=0; $v< sizeof($borough) ; $v++)
                {echo '"<option value="'.$bid[$v].','.$bboxa[$v].','.$bboxb[$v].','.$bboxc[$v].','.$bboxd[$v].'" >'.$borough[$v].'</option>';}
       ?>
 </select><br/>  
<input type="submit"  value="Go" name="postbor" class="formButton">
</form>



//the js
function goborough(g){

          var binfo=g.elements['boroughselect'].value;
          if(binfo!=" "){
                  //some cool openlayers staff here
          return false;
          }
          else{alert('You have not chosen a borough !!! ');return false;}

}

Upvotes: 1

Views: 3549

Answers (4)

Anshad Vattapoyil
Anshad Vattapoyil

Reputation: 23463

In your form element (the select) try this,

onkeypress="if(event.keyCode==13) {this.submit();}"

Or use jquery,

$(document).ready(function() {
  $("input").keypress(function(event) {
    if (event.which == 13) {
        event.preventDefault();
        $("#broughtform").submit();
    }
  });
});

Upvotes: 2

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

If you're sure that everything is fine and it should go. Then you might use this: 

onkeydown(submitform)

In the form tag, and in the function you should use this:

function submitform () {
  if(event.keyCode == 13) {
    // submit the form.. as enter key code is 13.
  }
}

I am not sure why its not working. You should try to read and look at the console from the browser, it must tell you what is the error. Try doing that by pressing F12 in your Browser. You will get an error code there, try Googling it, or sharing it in the Question.

Upvotes: 1

The Alpha
The Alpha

Reputation: 146191

You should return true to submit the form but you are always returning false, return false and it prevents the submission.

JS:

function goborough(g){
    var binfo=g.elements['boroughselect'].value;
    if(binfo!=" "){
          //some cool openlayers staff here
          return true;
    }
    else{
        alert('You have not chosen a borough !!! ');
        return false;
    }
}

HTML:

You have this

onSubmit="return goborough(this); return false;"

but, it should be

onSubmit="return goborough(this);"

Upvotes: 0

Niels Keurentjes
Niels Keurentjes

Reputation: 41958

Your problem is not in the code, but in that the select element has reserved the enter key for other purposes, see why doesn't hitting enter when a SELECT is focused submit the form?

Apply an onkeypress event to the select element to change this default behaviour.

Upvotes: 1

Related Questions