Search code examples
htmlaccordion

Enter the value of state after press the enter key, opening the country accordion

Enter the value of state after press the enter key, opening the country accordion but my requirement is enter the value of state after press the enter key collapse should be hide or off please suggest me any one.

1

2

<!--1 pannel starts-->
<div class="panel panel-default">
    <div class="panel-heading row">
        <div class="col-md-4">Country</div>
        <div class="col-md-4" id="ccountry"><?php
            if (isset($c_country)) {
                echo $c_country;
            }
            ?>
        </div>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> 
            <div class="profile-edit col-sm-4 col-xs-4 col-md-4 aj-textbone"> 
                <?php if (empty($c_country[0]) || empty($c_country)): ?> 
                    Add 
                <?php else: ?> 
                    <i class="fa fa-pencil"></i> Edit 
                <?php endif; ?> 
            </div> 
        </a> 
    </div>
    <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">
            <div class="row">
                <div class="col-md-7 col-md-offset-2 text-center">

                    <label class="col-md-4">Country</label> 
                    <div class="col-md-8">
                        <input name="country" id="country" type ="text" class="form-control"  
                               value="<?= (isset($c_country)) ? $c_country : null; ?>"/><br> 
                        <input type="hidden" name="save_bcountry" id="save_bcountry" value="<?= (empty($c_country[0]) || empty($c_country)) ? 'Save' : 'Update'; ?>"> 
                        <?php if (empty($c_country[0]) || empty($c_country)): ?> 
                            <button type="submit" class="btn btn-success aj-text-btnbone" data-target="#collapse1" data-toggle="collapse">Save</button> 
                        <?php else: ?> 
                            <button type="submit" class="btn btn-success aj-text-btnbone" data-target="#collapse1" data-toggle="collapse">Update</button> 
                        <?php endif; ?> 
                        <button type="button" data-target="#collapse1" data-toggle="collapse" class="btn btn-warning cancel-name">Cancel</button> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--1 pannel ends-->

<!--2 pannel starts-->
<div class="panel panel-default">
    <div class="panel-heading row">
        <div class="col-md-4">State</div>
        <div class="col-md-4" id="cstate">
            <?php
            if (isset($c_state)) {
                echo $c_state;
            }
            ?>
        </div>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> 
            <div class="profile-edit col-sm-4 col-xs-4 col-md-4 aj-textbtwo"> 
                <?php if (empty($c_state[0]) || empty($c_state)): ?> 
                    Add 
                <?php else: ?> 
                    <i class="fa fa-pencil"></i> Edit 
                <?php endif; ?> 
            </div> 
        </a> 
    </div>
    <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">
            <div class="row">
                <div class="col-md-7 col-md-offset-2 text-center">

                    <label class="col-md-4">State</label> 
                    <div class="col-md-8">
                        <input name="state" id="state" type ="text" class="form-control"  
                               value="<?= (isset($c_state)) ? $c_state : null; ?>"/><br> 
                        <input type="hidden" name="save_bstate" id="save_bstate" value="<?= (empty($c_state[0]) || empty($c_state)) ? 'Save' : 'Update'; ?>"> 
                        <?php if (empty($c_state[0]) || empty($c_state)): ?> 
                            <button type="submit" class="btn btn-success aj-text-btnbtwo" data-target="#collapse2" data-toggle="collapse">Save</button> 
                        <?php else: ?> 
                            <button type="submit" class="btn btn-success aj-text-btnbtwo" data-target="#collapse2" data-toggle="collapse">Update</button> 
                        <?php endif; ?> 
                        <button type="button" data-target="#collapse2" data-toggle="collapse" class="btn btn-warning cancel-name">Cancel</button> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--2 pannel ends-->
Solution

  • Add the following in your script

    $('input').keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      $(this).closest("div").find(".btn-success").trigger('click');
      return false;
    }
});

    Explanation

    1. First track the keydown for enter
    2. Then find the closest submit button to trigger the submit function

    Hope this will work for you. If is there anything else let us know...