Question

我有一个带隐藏字段的html表单和2个提交按钮。根据点击的按钮（试用或购买），我需要设置促销代码字段（使用＆＃34;试用＆＃34;作为试用按钮的促销代码和＆＃34;购买＆＃34;作为促销代码购买按钮。

我不确定如何阅读java脚本中单击的按钮。我已经有一个java脚本，它正在点击提交时将电子邮件ID复制到另一个字段。我想将java脚本与现有脚本集成。

HTML code：

<form>Email:
    <input type="text" name="email">
    <br>
    </label><input type ="hidden" name="retype-email">
    <br>

    <input type="hidden" name="PromoCode" value="" method="post">

    <input class="Orange_button" type="submit" value="Start my free trial"> 
    <input class="green_button" type="submit" value="Buy it now"> 
</form>

JS小提琴：http://jsfiddle.net/x1bdgvyt/3/

Answer 1

看起来最好的解决方案是通过订阅他们的＆＃34;点击＆＃34;来手动跟踪点击了哪个按钮。事件

Working Example here (jsFiddle)

HTML

<form>Email:
    <input type="text" name="email">
    <br>
        </label><input type ="hidden" name="retype-email">
    <br>

    <input id="promo-code" type="hidden" name="PromoCode" value="" method="post">

        <input class="Orange_button" type="submit" value="Start my free trial" data-code="trial"/> 
        <input class="green_button" type="submit" value="Buy it now" data-code="buy"/> 
</form>

的JavaScript

$('form').on('submit', function(e){
    $('[name="retype-email"]').val($('[name="email"]').val());
    var value = $("input[type=submit][clicked=true]").data("code");
    $("#promo-code").val(value);
    alert(value);
    e.preventDefault()
});

$("form input[type=submit]").click(function() {
    $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
    $(this).attr("clicked", "true");
});

请注意，我在提交按钮中添加了data attribute，以便我们可以存储应添加的代码。

来源： jQuery: how to get which button was clicked upon form submission?

Answer 2

首先，添加＆＃39;数据类型＆＃39; （或任何名称，最重要的是前缀data-）到您的输入：

<强> HTML

<input data-type="trial" class="Orange_button" type="submit" value="Start my free trial">
<input data-type="buy" class="green_button" type="submit" value="Buy it now">

然后，更改一下您的javascript以获取data-type值并使用它填充您的字段：

<强>的Javascript

$('[type="submit"]').on('click', function(e) {
    // populate your duplicated 'email' field
    $('[name="retype-email"]').val($('[name="email"]').val());
    // populate your 'code' field : grab the data-type attribute added in your HTML
    $('[name="PromoCode"]').val($(this).data('type'));
    // finally, submit the form
    $('form').submit();
});

快速警告：您应该考虑使用ID或类而不是使用[attr]这样的广泛选择器，如果您的页面中有多个表单，则可能会出现问题（并且这是一个更好的做法反正）

Answer 3

这是我的解决方案：

$('#usuario_form').submit(function(e){   
   console.log($('#'+e.originalEvent.submitter.id));
   e.preventDefault();
});

您可以访问OriginalEvent提交者ID来确定单击了哪个按钮

根据单击的按钮填充字段值

3 个答案:

HTML

的JavaScript