CODEWITHSUNDEEP
javascript
heyitsmyusername
heyitsmyusername

Reputation: 651

JavaScript: Make 'enter' key on selected textbox do same function as form button

I have a form that has a textbox and a working submit button that runs a jquery/ajax function. I want the exact same function to run when the textbox is selected and the user hits 'enter' key.

I've tried making the textbox run the function, but either I make the text input no longer work, or it doesnt actually call the function (For example, it just puts a parameter in the url and refreshes the page...not what the function does). How can I make this work?

Here is my form code:

<form style="border: 1px solid;border-radius:5px;" >
    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
        <input type="text" class="form-control" id="mytextbox" placeholder="ID #" name="parcel">
        <span class="input-group-btn">
            <button class="btn btn-success" id="btnSearch3" type="button" onclick="foo('parcel',document.getElementsByName('parcel')[0].value,'Wizard')">Search</button>
        </span>
    </div>
</form>

Upvotes: 0

Views: 43

Answers (2)

Ren
Ren

Reputation: 51

To run javascript when a form submits, you can use onsubmit

If you also want to prevent the form from submitting in the regular way, you can use event.PreventDefault.

I made a fiddle, I've given the form an id and made an onsubmit function for it. https://jsfiddle.net/qwza104q/.

If the button and form are going to run the same function, you should remove the button's onclick and add type="submit".

Upvotes: 2

Scott Marcus
Scott Marcus

Reputation: 65806

You need to set up the textbox to respond to keypress events so that you can check the input for the ENTER key press (keyCode 13).

Also, you shouldn't use inline HTML event handling attributes (on...) because they:

  • Create spaghetti code that is hard to read and leads to code duplication.
  • Create global anonymous wrapper functions around your attribute values that alter the this binding in the callback.
  • Don't follow W3C Event Handling standards

Use object.addEventListener("eventName", callback) instead:

// Get DOM references:
var btn = document.querySelector("#btnSearch3");
var txt = document.querySelector("#mytextbox");
var parcel = document.getElementsByName('parcel')[0];

// Set up event handlers:
btn.addEventListener("click", doFoo);

txt.addEventListener("keypress", function(evt){
  console.log(evt.keyCode);
  // Check for the ENTER key
  if(evt.keyCode === 13){
    doFoo();
  }
});

// General function to be called by both handlers:
function doFoo(){
  console.log("Callback called.");
  //foo('parcel', parcel.value, 'Wizard');
}
<form style="border: 1px solid;border-radius:5px;" >
    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
        <input type="text" class="form-control" id="mytextbox" placeholder="ID #" name="parcel">
        <span class="input-group-btn">
            <button class="btn btn-success" id="btnSearch3" type="button">Search</button>
        </span>
    </div>
</form>

Upvotes: -1

Related Questions