获取点击提交按钮的值

时间:2016-10-11 19:11:55

标签: javascript jquery html

我尝试从我的公式中获取两个提交按钮之一的值,但我在每次尝试都失败了。

希望,有人可以帮助我并告诉我如何做到这一点。

这是html表单

<form id="new_contact" class="save_form" action="kontaktdetails.php?art='.$_POST['art'].'" method="post" > 
   <button class="btn" id="submit1" type="submit" name="save_close">Save and close<i class="fa fa-save-right"></i></button>
   <button class="btn" id="submit2" type="submit" name="save_next">Save and next one<i class="fa fa-save-right"></i></button>
</form>

这是JS代码,这里我需要点击按钮的名称或ID

$(document).on('submit', '.save_form', function (event) {
  event.preventDefault();      
//    var submitbutton = !????
  var formID = $(this).attr('id');
  var formDetails = $('#'+formID);   
  var fileurl = $(this).attr('action');
  ...

3 个答案:

答案 0 :(得分:2)

有很多方法可以做到这一点,一种方法是向按钮添加一个事件处理程序,因为点击发生在提交之前,然后使用类或其他东西来识别在提交处理程序中单击了哪个按钮。登记/> 这样你仍然可以捕获并阻止未通过按钮启动的提交。

如果您不需要专门捕获提交,则可以使用按钮的事件处理程序而不是表单提交

$(document).on('click', '.save_form button', function() {
    $('.save_form button').removeClass('clicked');
    $(this).addClass('clicked');
});

$(document).on('submit', '.save_form', function(event) {
    event.preventDefault();
    var formID = $(this).attr('id');
    var formDetails = $('#' + formID);
    var fileurl = $(this).attr('action');

    var id = $(this).find('button.clicked').prop('id');
    alert(id)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="new_contact" class="save_form" action="kontaktdetails.php?art='.$_POST['art'].'" method="post">
  <button class="btn" id="submit1" type="submit" name="save_close">Save and close<i class="fa fa-save-right"></i>
  </button>
  <button class="btn" id="submit2" type="submit" name="save_next">Save and next one<i class="fa fa-save-right"></i>
  </button>
</form>

答案 1 :(得分:2)

尝试将事件绑定到提交按钮,如下所示:

$('.save_form').on('click', '[type=submit]', function(event) {
  event.preventDefault();
  var submitbutton = $(this).attr('id');
  var formDetails = $(this).closest('form');
  var formID = formDetails.attr('id');
  var fileurl = formDetails.attr('action');
  console.log(submitbutton);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="new_contact" class="save_form" action="kontaktdetails.php?art='.$_POST['art'].'" method="post">
  <button class="btn" id="submit1" type="submit" name="save_close">Save and close<i class="fa fa-save-right"></i>
  </button>
  <button class="btn" id="submit2" type="submit" name="save_next">Save and next one<i class="fa fa-save-right"></i>
  </button>
</form>

答案 2 :(得分:0)

假设你有以下形式,

<form id="sForm">
      <input type="text" name="toSearch" id="toSearch" />
      <input type="submit" id="mysubmit"/>
 </form>

并且您希望在提交表单时检索到值。在我的示例中,输入的ID名为&#34; toSearch&#34;。请执行以下操作。

$('#sForm').on("submit",function(e){
var myvar = $('#toSearch').val();
//Now you can do anything you wish with the variable myvar
//  Put more code here.

  e.preventDefault();

});

该值将在提交时检索,但您可以将其更改为Onclick或任何其他类型的操作。

希望它会有所帮助