javascript - jquery onclick提交和jquery函数

Question

我有一个按钮，当点击时，它会执行一个 jquery 函数并提交表单。

这是我的 HTML 代码:

<?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();?>

这是我的 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');
    }
}

我试过:

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

这种方式允许我提交表单，但我的 Controller 无法获取attribute name="adv_search"，所以我的功能不起作用。

我已经尝试了 preventDefault() 和 $('#btn_submit').click(false)。但是它们都阻止了所有提交和 jquery 功能。

有没有一种方法可以提交表单，但在我点击提交按钮时仅阻止jquery函数？

Answer 1

您可以使用 e.target.name 找出元素的名称。因此，基于此，您可以有条件地触发方法 showAdvancedForm() 。

e.target - 获取触发特定事件的元素

$('.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>