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()">

这种方式允许我提交表单，但我的控制器无法获取attribute name="adv_search"，因此我的功能无法正常工作。

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

当我点击提交按钮时，是否有提交表单但阻止仅 jquery功能的方法？

Answer 1

如果你有一个表单而你想通过Ajax发送数据，你应该这样做：

$('#formID').submit(function(e) {
            e.preventDefault();
             var submitButtonValue=$(this).children('input[type=submit]').val(); //This is 検 索

             var data=$(this).serialize()+ "&adv_search="+submitButtonValue;
          //probably your ajax call here...     
})

Serialize是一个函数，您可以通过它获取表单中的所有输入值，并且您也可以通过Ajax轻松发送它

你应该使用submit，因为它也会检查验证和更多

Answer 2

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Jquery onclick提交和jquery函数

2 个答案: