javascript - 使用 javascript 单击后更改按钮的文本

Question

这个问题已经有答案了:

Why does Jquery only affect the first div element? [duplicate] (4 个回答)

已关闭 7 年前。

我是 JavaScript 新手，我遇到了代码问题:

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<form id="add-to-cart-form">
    <div class="cart">
        <input type="hidden" name="product_code" value="prince"/>
        <input type="text" name="name" value="First Form"/>
        <button id="btn_add" type="submit">Add to Cart</button>
    </div>
</form>

<form id="add-to-cart-form">
    <div class="cart">
        <input type="hidden" name="product_code" value="lionel"/>
        <input type="text" name="name" value="Second Form"/>
        <button id="btn_add" type="submit">Add to Cart</button>
    </div>
</form>

   
<script>
    $(document).ready(function(){
        $("#add-to-cart-form").submit(function(e) {

            $("#btn_add").html('Good');
            $("input[name='name']").val('Input change');

            e.preventDefault(); // avoid to execute the actual submit of the form.
        });
    });
</script>

我的代码的目的是在提交表单时更改提交按钮并更改 value所提交表格的输入。但是用我的代码，提交第一个表单后，提交按钮发生变化(这是正常的)，第二个表单的输入字段的值发生变化(不正常)。同样提交第二个表单后，根本不起作用。

抱歉，我已尽力使帖子清晰。我的母语不是英语。

Answer 1

每个页面的 ID 应该是唯一的
尝试一下:

<form id="add-to-cart-form-first">
    <div class="cart">
        <input type="hidden" name="product_code" value="prince"/>
        <input type="text" name="name" value="First Form"/>
        <button id="btn_add_first" type="submit">Add to Cart</button>
    </div>
</form>

<form id="add-to-cart-form-second">
    <div class="cart">
        <input type="hidden" name="product_code" value="lionel"/>
        <input type="text" name="name" value="Second Form"/>
        <button id="btn_add_second" type="submit">Add to Cart</button>
    </div>
</form>


<script>
    $(document).ready(function(){
        $("form").submit(function(e) {

            $(this).find("[type=submit]").html('Good');
            $(this).find("input[name='name']").val('Input change');

            e.preventDefault(); // avoid to execute the actual submit of the form.
        });
    });
</script>