Submit on Enter key in textbox

Question

I want to submit my form on enter key when it is text box. This is my HTML code:

<form class="locationform" id="locationform" method="get">
  <fieldset class="col-md-12 center" id="Searchform">
    <h4><b>Job Search</b></h4>
    <div>
      <label for="Locationtxt" style="padding-right:5px"><b>Location:</b></label>
      <input id="Locationtxt" name="name" type="text" placeholder="Zip Code or City, State"  runat="server" required>
      <asp:Button CssClass="BtnSubmit" ID="BtnSubmit" runat="server" Text="Submit" OnClick="BtnSubmit_Click" />
    </div>
  </fieldset>
</form>

This is the code I tried in Jquery:

$("#Locationtxt").keyup(function (event) {
    if (event.keyCode == 13) {
        $("#BtnSubmit").click();
    }
});

This is what html rendered after page load

<form class="locationform" id="locationform" method="get">
  <fieldset class="col-md-12 center" id="Searchform">
    <h4><b>Store Job Search</b></h4>
    <div>
      <label for="Locationtxt" style="padding-right:5px"><b>Location:</b></label>
      <input name="dnn$ctr2781$View$Locationtxt" type="text" id="dnn_ctr2781_View_Locationtxt" placeholder="Zip Code or City, State" required="" />
      <input type="submit" name="dnn$ctr2781$View$BtnSubmit" value="Submit" id="dnn_ctr2781_View_BtnSubmit" class="BtnSubmit" style="color:White;background-color:Black;font-weight:bold;" />
    </div>
  </fieldset>
</form>
<div id="dnn_ctr2781_View_storedetails"></div>
<script>
    function LoadMap(obj) {
        var fsid = obj;
        $('#Iframe_' + fsid).attr('src', $('#hdn_' + fsid).attr('value'));
    }
    $(document).ready(function () {
        $("input").keyup(function (event) {
            if (event.keyCode == 13) {
                $("[id$='BtnSubmit']").click();
            }
        });
    });

</script>

This doesn't worked out to me. Can someone suggest me on this?

You need to take care that this event is bound _after_ the DOM has been initialized, otherwise it won't work. Please add that section of your client side code. — arkascha, Oct 13 '16 at 15:54
@arkascha - This is the complete client side code what I have — Jaggi, Oct 13 '16 at 19:24
Ok, that cannot work just like that. Maybe you want to work through a few gettings started tutorials about jquery and event handling... The approaches in the two answers below look fine, not sure what the actual issue is. Oh, you _did_ load the jquery library? Please open your browsers development console and check for javascript errors! — arkascha, Oct 13 '16 at 19:41
Your button is an ASP.NET control and the ID you assign to it in your code is not what actually gets rendered and served to the browser. By the time the browser gets the rendered HTML your button's ID will be something like `ctl00_Content_SomeOtherSection_BtnSubmit`. This means `$("#BtnSubmit")` doesn't find any matching elements and invoking `.click()` on nothing does...well...nothing. Change to `$("[id$='BtnSubmit']").click()` and it should work. — Bryan, Oct 13 '16 at 20:06
Not exactly a duplicate, but closely related and potentially useful: http://stackoverflow.com/questions/641280/reference-asp-net-control-by-id-in-javascript — Bryan, Oct 13 '16 at 20:13
@arkascha - I don't see any errors related to jquery in console window — Jaggi, Oct 13 '16 at 20:26
@Bryan - The way you explained was correct and modified my line with your code, but it doesn't seems working. I don't even see any errors related to it. — Jaggi, Oct 13 '16 at 20:33
@Jaggi, interesting. It would probably help if you edit your question and include the actual html rendered in the browser. — Bryan, Oct 13 '16 at 20:39
@Bryan - I have added the html rendered after page load in my question. — Jaggi, Oct 13 '16 at 20:44

score 3 · Answer 1 · answered Oct 13 '16 at 15:55

3

Have you try to add your code when the document is ready ?

$(document).ready(function() {
  $("#Locationtxt").keyup(function (event) {
    if (event.keyCode == 13) {
        $("#BtnSubmit").click();
    }
  });
});

answered Oct 13 '16 at 15:55

Sylvain B

550
3
9

score 1 · Answer 2 · answered Oct 13 '16 at 15:56

1

Try this.

$("#Locationtxt").keyup(function (event) {
  if (event.keyCode == 13) {
    $("#locationform").submit();
  }
});

answered Oct 13 '16 at 15:56

Deepak Gangore

343
1
13

score 1 · Accepted Answer · answered Oct 13 '16 at 20:51

Instead of giving ID name $("#Locationtxt").keyup(function (event) I gave Element name $("input").keyup(function (event).

This solved my problem.

$(document).ready(function () {
        $("input").keyup(function (event) {
            if (event.keyCode == 13) {
                $("[id$='BtnSubmit']").click();
            }
        });
    });

Submit on Enter key in textbox

3 Answers3