Jquery onclick submit and jquery function

Question

I have a button, when click, it do a jquery function and submit form too.

This is my HTML code:

<?php echo Form::open(array("class"=>"form-horizontal","method"=>"POST" ,"id"=>"frmMainOrders","enctype" => "multipart/form-data" )); ?>
    <div class="search">
        <tr class="tblAdvancedSearch">
            <th scope="row">備考</th>
            <td>
                <input class="input_text_search" type="text" name="multi_column" id="multi_column_search" value=""/>
            </td>
        </tr>
        <input type="submit" id="btn_submit" value="検 索" name="adv_search">
    </div>
<?php echo Form::close();?>

This is my script jquery:

$('.search').on('click', function() {
    showAdvancedForm(); // when click in div class=search, it do a jquery function name showAdvanceForm().
});

function showAdvancedForm() {
    if($(".tblAdvancedSearch").css('display') == 'none') {
        $(".tblAdvancedSearch").css('display', 'table-row');
    } else {
        $(".tblAdvancedSearch").css('display', 'none');
    }
}

I have tried:

<input type="submit" id="btn_submit" value="検 索" name="adv_search" onclick="$('form').submit()">

This way allow me submit form, but my controller can not get attribute name="adv_search", so my function doesn't work.

I have tried preventDefault() and $('#btn_submit').click(false). But both of them prevent all submit and jquery function.

Is there a way to submit the form but prevent ONLY jquery function when I click submit button?

Answer 1

You can use e.target.name to find out the name of the element. So based on that you can conditionally fire the method showAdvancedForm() .

e.target - Get the element that triggered a specific event

$('.search').on('click', function(e) {

  if (e.target.name == "multi_column") {
    console.log('calling method : showAdvancedForm');
    showAdvancedForm(); // when click in div class=search, it do a jquery function name showAdvanceForm().
  }
});

function showAdvancedForm() {
  if ($(".tblAdvancedSearch").css('display') == 'none') {
    $(".tblAdvancedSearch").css('display', 'table-row');
  } else {
    $(".tblAdvancedSearch").css('display', 'none');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="page.html" class="form-horizontal">
  <div class="search">
    <tr class="tblAdvancedSearch">
      <th scope="row">備考</th>
      <td>
        <input class="input_text_search" type="text" name="multi_column" id="multi_column_search" value="" />
      </td>
    </tr>
    <input type="submit" id="btn_submit" value="検 索" name="adv_search">
  </div>
</form>