html form does not respond to hitting "enter" button

Question

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;}

}

I think u have to add code for hitting enter button function... — Shumail, Oct 06 '13 at 19:10
@ShumailMohy-ud-Din it will work fine like this for `input` elements, just not for `select`. — Niels Keurentjes, Oct 06 '13 at 19:16

Anshad Vattapoyil · Accepted Answer · 2013-10-06T19:18:32.577

2

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();
    }
  });
});

edited Oct 06 '13 at 19:18

answered Oct 06 '13 at 19:12

Anshad Vattapoyil

23,145
18
84
132

1

It should be applied to the `select`, not the `form`. – Niels Keurentjes Oct 06 '13 at 19:15
Yes, I said form element that means the ``select`` – Anshad Vattapoyil Oct 06 '13 at 19:15

score 1 · Answer 2 · edited May 23 '17 at 12:21

1

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.

edited May 23 '17 at 12:21

Community

1
1

answered Oct 06 '13 at 19:14

Niels Keurentjes

41,402
9
98
136

score 1 · Answer 3 · answered Oct 06 '13 at 19:14

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.

score 0 · Answer 4 · answered Oct 06 '13 at 19:14

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);"

It's the whole point, he wants to submit to JS and not do an actual callback. — Niels Keurentjes, Oct 06 '13 at 19:15

html form does not respond to hitting "enter" button

4 Answers4