基于单击的按钮填充字段值

populating a field value based on the button clicked

本文关键字：按钮 填充 字段 于单击 单击      更新时间：2023-09-26

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

我不知道我怎么能读懂java脚本中点击的按钮。我已经有了一个java脚本，它在点击提交时将电子邮件ID复制到另一个字段中。我想将java脚本与现有脚本集成。

HTML代码：

<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 Fiddle：http://jsfiddle.net/x1bdgvyt/3/

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

此处的工作示例（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");
});

请注意，我为提交按钮添加了一个数据属性，这样我们就可以存储应该添加的代码。

来源：jQuery：如何获取表单提交时点击的按钮？

首先，在输入中添加"数据类型"（或任何名称，最重要的是前缀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]这样的宽选择器，如果您的页面中有多个表单（无论如何，这是一种更好的做法），则可能会出现问题。

这是我的解决方案：

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

您可以访问OriginalEvent Submitter Id，以识别点击的按钮

相关文章：