Question

是否可以做类似的事情：

$(".T1C1butn").click(function() {
        $(this).closest("form").attr("action", "/article/" + $(".T1C1Fetch").innerHTML);        
});

但不是根据按下的按钮修改表单的操作，而是修改发送的数据，即如果用户按下按钮'Testbtn'，然后<input type="text" class="form-control" name="url">按下值“www.example.com”在邮件请求中提交，如果他们按下不同的按钮，则url的值不同。

Answer 1

为了根据单击的按钮使用特定值填充输入，您可以将事件处理程序绑定到每个按钮单击，并使用jQuery的.val()分配输入值。

我还建议分离填充和提交表单的功能，以便用户可以确保在提交之前填充正确的值。在下面的示例中，点击按钮Data 1/2/3填充字段，点击“提交”按钮提交表单。

演示：http://jsfiddle.net/BenjaminRay/oatyz6md/

HTML：

<form action="your url" method="post">
    <button id="T1C1butn1">Data 1</button>
    <button id="T1C1butn2">Data 2</button>
    <button id="T1C1butn3">Data 3</button><br />
    <input id="name" name="name" /><br />
    <input id="dob" name="dob" /><br />
    <input id="email" name="email" /><br />
    <button id="submit">Submit</button>
</form>

JavaScript的：

$(function () {

    $("#T1C1butn1").click(function (event) {
        event.preventDefault();
        $('#name').val('John');
        $('#dob').val('8 October');
        $('#email').val('john@example.com');
    });

    $("#T1C1butn2").click(function (event) {
        event.preventDefault();
        $('#name').val('Steve');
        $('#dob').val('12 September');
        $('#email').val('steve@example.com');
    });

    $("#T1C1butn3").click(function (event) {
        event.preventDefault();
        $('#name').val('Mike');
        $('#dob').val('1 January');
        $('#email').val('mike@example.com');
    });

});

Answer 2

不清楚为什么你需要这样做。也就是说，最简单的方法可能是将值存储在按钮本身的自定义数据属性中，然后在单击时获取存储的值并将其加载到元素中：

＆＃13;

$(function () {
     
    $(".btn").click(function () {
      // get info from button
      var info = $(this).data('info').split(',');
      // set info to the inputs
      $.each(info, function(i,e){
        $('#myForm input').eq(i).val(e);
      });
      // submit form
      // $('#myForm').submit(); // commented out because submit doesnt work in SO snippets
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="mypage.php" method="post" id="myForm">
    <input type="text" class="form-control" id="name" name="name" value="name"/><br />
    <input type="text" class="form-control" id="dob" name="dob" value="dob" /><br />
    <input type="text" class="form-control" id="email" name="email" value="email" /><br />
</form>

<button class="btn" data-info="John,8 October,john@example.com">Data 1</button>
<button class="btn" data-info="Steve,12 September,steve@example.com">Data 2</button>
<button class="btn" data-info="Mike,1 January,mike@example.com">Data 3</button><br />

＆＃13;

其他表单内容取决于按下的按钮

2 个答案: