CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
jle
jle

Reputation: 269

Change Bootstrap Default Button to Current Panel

Using Bootstrap, an application has a page with one form and multiple panels, each with a submit button. The first panel's button is the form default button whenever the Enter key is pressed. When a user fills in text inputs in the second panel and hits Enter, the second panel's button value should be sent to the Controller, but the first panel button's value, the form default button, is always sent instead.

I've tried adding a script to trigger focus or activation on the appropriate panel button when that panel is clicked or activated, to no avail. Does anyone know how to target a panel button for submission when it's panel is the one being used by the User? Thanks in advance!

Snippet:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-lg-12">
    <div class="panel panel-default" id="basicsPanel">
      <div class="panel-heading">Basic Info</div>
      <div class="panel-body">
        <div class="row">
          <!-- Text boxes and such -->
        </div>
        <div class="row">
          <!-- This is always the default button upon pressing Enter key -->
          <button type="submit" id="saveBasics" name="buttonCommand" class="btn btn-success pull-right" value="Save Basics">Save Basics</button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-lg-12">
    <div class="panel panel-info" id="ownerPanel">
      <div class="panel-heading">Owner</div>
      <div class="panel-body">
        <div class="row">
          <div class="col-lg-4">
            <!-- Other text boxes and such -->
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12 text-right">
            <!-- This button should be the one used when a User presses the Enter key while filling in data in this panel -->
            <button type="submit" id="saveOwner" name="buttonCommand" class="btn btn-success" value="Save Owner">Save Owner</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Example of attempted script, which does indeed focus on the correct button when a panel is activated, but prevents the user from actually entering information into the panel's text boxes:

$("#ownerPanel").click(function () {
    $("#saveOwner").focus();
});

$("#basicsPanel").click(function () {
    $("#saveBasics").focus();
});

Upvotes: 0

Views: 1430

Answers (1)

Kristj&#225;n
Kristj&#225;n

Reputation: 18803

As of HTML5, the default button is the first button defined. You have a couple options to handle multiple buttons with enter presses:

  • Define multiple forms, each with one submit button. That way each panel is tied directly to the button you want it to use. This is nice and clean if the forms are independent, but if you still want the data from all forms, you'd need to catch the submission in JavaScript and pull the other forms' data into the payload.
  • Capture the keypress event in JavaScript and use the currently focused field to determine which button should be pressed. This lets you keep a single form with all the data in one place. A simple strategy for picking the button to use might be to traverse from the focused field to .closest('panel') and then back down to children('input[type=submit]').

Upvotes: 1

Related Questions