Trigger Button Click on Enter in HTML

Question

I have researched this through Stack, W3, and others but the solutions that I fiond there don't work. Below is part of my html code, I did my best to try and keep it neat (not an expert by any means).

<select name="ctl00$ContentPlaceHolder1$ddlSearchCriteria" id="ctl00_ContentPlaceHolder1_ddlSearchCriteria" style="width:150px;">
                        <option value="LastName">Last Name</option>
                        <option value="FirstName">First Name</option>
                        <option value="Phone">Phone Number</option>
                        <option value="Department">Department</option>
                        <option value="Division">Division</option>
                        <option value="Location">Location</option>
                        <option value="Title">Title</option>
                        <option value="Email">Email Address</option>
                        <option value="Keywords">Keywords</option>
                    </select>
                    <div style="height:10px"></div>
                    <input name="ctl00$ContentPlaceHolder1$txtSearchString" type="text" id="ctl00_ContentPlaceHolder1_txtSearchString" style="width:160px;">
                    <button type="button" name="ctl00$ContentPlaceHolder1$Button1" id="ctl00_ContentPlaceHolder1_Button1" style="position: absolute; height:22px; " onclick="myFunction()">Go</button>
                    <div style="height:5px;"></div>
                    </td>
                <td style="width:48%; height: 27px;">&nbsp;</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
     var GoToURL = 'http://bccportal01/webapps/agency/epdsearch/Search.aspx?op=' + dropDownChoice + '&str=' + inputText;
       function myFunction() 
         {
           var dropDownChoice = document.getElementById("ctl00_ContentPlaceHolder1_ddlSearchCriteria").value;
           var inputText = document.getElementById("ctl00_ContentPlaceHolder1_txtSearchString").value;
           var GoToURL = 'http://bccportal01/webapps/agency/epdsearch/Search.aspx?op=' + dropDownChoice + '&str=' + inputText;
           window.open(GoToURL);
         }
    </script>

I'm trying to make it so that when you click enter the submit button activates. I have tried https://www.w3schools.com/howto/howto_js_trigger_button_enter.asp and Trigger function on Enter keypress as examples.

But this isn't working, all it does is break my code. Not sure if I'm putting it in the wrong spot. I added it right below var inputText in the Function.

This answer may help: https://stackoverflow.com/questions/979662/how-to-detect-pressing-enter-on-keyboard-using-jquery — rileyjsumner, Aug 01 '18 at 18:42
Unrelated, but I feel obligated to point out that W3schools is **not** the W3C. — jhpratt, Aug 01 '18 at 19:33

score 0 · Answer 1 · answered Aug 01 '18 at 18:49

You need to add keyup event listener on the input textfield

Add this to your javascript

var input = document.getElementById("ctl00_ContentPlaceHolder1_txtSearchString");
input.addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("ctl00_ContentPlaceHolder1_Button1").click();
    } 
});

Working Example

score 0 · Answer 2 · answered Aug 01 '18 at 20:52

Replace type="button" with type="submit"

Add a <form onsubmit="myFunction">

Wrap your <select> with the <form>:

<form onsubmit="myFunction">
    <select>...</select>
</form>

Here's what your function should do to prevent the form from submitting (we didn't include an "action" so it will submit to itself)

function myFunction(event){
    // Stop the form from submitting (default functionality)
    event.preventDefault();
    ...
}

Your code should look similar to this (added a fix for obtaining the select list value the proper way)

<form onsubmit="myFunction">
    <select id="mySelect">
        <option value="LastName">Last Name</option>
        <option value="FirstName">First Name</option>
        <option value="Phone">Phone Number</option>
        <option value="Department">Department</option>
        <option value="Division">Division</option>
        <option value="Location">Location</option>
        <option value="Title">Title</option>
        <option value="Email">Email Address</option>
        <option value="Keywords">Keywords</option>
    </select>
    <input type="text" id="myInput">
</form>

<script type="text/javascript">
    function myFunction(event){
        // Prevent the form from submitting (default functionality)
        event.preventDefault();

        var myUrl = "http://bccportal01/webapps/agency/epdsearch/Search.aspx?",
            selectEl = document.getElementById('mySelect'),
            inputEl = document.getElementById('myInput');

        // Append the selected value
        myUrl += "op=" + selectEl.options[selectEl.selectedIndex].value;

        myUrl += "&str=" + inputEl.value;

        window.open(myURL);
    }
</script>

Trigger Button Click on Enter in HTML

2 Answers2