'can I control which submit button would be triggered when I press Enter?

I have a form. It has a few divs. Each contains a textbox and a submit button.

when I insert text to one of the textboxes I want that the enter key will trigger the button that is inside the same div which contains this textbox.

Enter always triggers the first submit button! can it be fixed? (Maybe by Jquery?) you can see a working example here:

https://codepen.io/elic55/pen/LYELQrP

<form>
        <div id="div1">
          div1
            <input id="Text1" type="text" />
            <input id="Submit1" type="submit" value="submit" />
        </div>

        <div id="div2">
          div2
            <input id="Text2" type="text" />
            <input id="Submit2" type="submit" value="submit" />
        </div>

        <div id="div3">
          div3
            <input id="Text3" type="text" />
            <input id="Submit3" type="submit" value="submit" />
        </div>
    </form>





$(function () {
            $('#Submit1').on('click', function () {
                alert("1");
            })
            $('#Submit2').on('click', function () {
                alert("2");
            })
            $('#Submit3').on('click', function () {
                alert("3");
            })
        })

I prefer a sokution that won't change the structue because: I am using asp.net - there must be a form! The asp buttons are rendered as a submit buttons.

javascriptjqueryhtmlasp.net


Solution 1:[1]

with using jquery and $(":input");

$(function () {

            $(":input").on('click', function () {
                    alert("3");
            });
            //if you also want Enter 
           $(document).on('keyup', function (e) {
            if (e.keyCode === 13) {
             alert("3"); // or anything you want to happen
               }
           e.preventDefault();
           return false;
            });
            })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
        <div id="div1">
          div1
            <input id="Text1" type="text" />
            <input id="Submit1" type="submit" value="submit" />
        </div>

        <div id="div2">
          div2
            <input id="Text2" type="text" />
            <input id="Submit2" type="submit" value="submit" />
        </div>

        <div id="div3">
          div3
            <input id="Text3" type="text" />
            <input id="Submit3" type="submit" value="submit" />
        </div>
    </form>

Solution 2:[2]

As what you want This code detects Enter keyboard placed and log the next button:

$("input").on('keyup', function (e) {
    if (e.keyCode === 13) {
        console.log($(this).next().attr("id"));
    }
  e.preventDefault();
  return false;
});
// prevent form submit (or change button type from submit into button)
$("form").submit(function(e){
   e.preventDefault();
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<form>
        <div id="div1">
          div1
            <input id="Text1" type="text" />
            <input id="Submit1" type="submit" value="submit" />
        </div>

        <div id="div2">
          div2
            <input id="Text2" type="text" />
            <input id="Submit2" type="submit" value="submit" />
        </div>

        <div id="div3">
          div3
            <input id="Text3" type="text" />
            <input id="Submit3" type="submit" value="submit" />
        </div>
    </form>

Solution 3:[3]

I guess the pure HTML solution is to split the form up in to three forms:

<form>
  <div id="div1">
    div1
    <input id="Text1" type="text" />
    <input id="Submit1" type="submit" value="submit" />
  </div>
</form>
<form>
  <div id="div2">
    div2
    <input id="Text2" type="text" />
    <input id="Submit2" type="submit" value="submit" />
  </div>
</form>
<form>
  <div id="div3">
    div3
    <input id="Text3" type="text" />
    <input id="Submit3" type="submit" value="submit" />
  </div>
</form>

(It might not be a good solution if you care a lot about screenreaders, but having multiple submit buttons probably isn't either.)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 bert bruynooghe

Related Questions