表单标签中的按钮不会提交或响应 Javascript/Jquery

Posted 2023-03-21

【中文标题】表单标签中的按钮不会提交或响应 Javascript/Jquery

【英文标题】：Button in Form tag will not submit or respond to Javascript/Jquery

【发布时间】：2019-08-19 23:48:03

【问题描述】：

我正在尝试提交一个使用条纹的表单（带有“提交”类型的按钮标签）并且我做了一些调试（尝试），我知道我的表单中的其他元素正在工作，否则我不会能够看到我使用 javascript (card.mount) 安装到我的表单中的输入。该按钮实际上是该表单中唯一我不能以任何方式使用的元素，也不会提交。

无论我使用什么方法，无论是 jquery 还是普通的 vanilla javascript，我都无法让这个按钮对我分配给我的任何事件做出反应（点击时，我希望它提交表单）。它拒绝听。

<form action=" route('checkout') " method="post" id="payment-form">
    <div class="form-row">
        <label for="card-element">
            Credit or debit card
        </label><hr>
        <div id="card-element">
            <!-- A Stripe Element will be inserted here. -->
        </div>

        <!-- Used to display Element errors. -->
        <div id="card-errors" role="alert"></div>
    </div>
     csrf_field() 
    <button type="submit" id="button2" class="btn btn-success">Buy Now</button>
</form>

<script>
//in my javascript file

// Custom styling can be passed to options when creating an Element.
    var style = 
        base: 
            color: '#32325d',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': 
                color: '#aab7c4'
            
        ,
        invalid: 
            color: '#fa755a',
            iconColor: '#fa755a'
        
    ;

// Create an instance of the card Element.
    var card = elements.create('card', 
        style: style
    );

// Add an instance of the card Element into the `card-element` <div>.
    card.mount('#card-element'); //this portion works otherwise I would not be able to type anything within the form. and I can use javascript to manipulate it,

    var form = document.getElementById('payment-form');
    form.addEventListener('submit', function (event) 
        event.preventDefault();
        // here is the problem, I can't get a submit because the button I have in the form refuses to actually submit anything. It justs works like a regular button and randomly submits, ignoring the fact that it is inside the form

        stripe.createToken(card).then(function (result) 
            if (result.error) 
                // Inform the customer that there was an error.
                var errorElement = document.getElementById('card-errors');
                errorElement.textContent = result.error.message;
             else 
                // Send the token to your server.
                stripeTokenHandler(result.token);
            
        );
    );
</script>

【问题讨论】：

为了测试，我只是在下面添加了一个脚本标签并添加了以下内容： $("#button2").click(function (e) e.preventDefault(); console.log('does这项工作'); );这仍然没有影响任何事情，工作

如果您要向按钮添加事件监听器，然后设置按钮类型按钮，您可以提交基于表单的条带回调，您可以提交表单$('#payment-form').sumit()

现在我只是这样做了，当我使用按钮提交时，就好像它忽略了事件监听器。没有 preventDefault 传播，什么都没有。老实说，现在只是试图将令牌获取到控制台日志，我可以从那里继续并设置其余的后端内容，但这只是不想响应

alert() 在 form.addEventListener 内部工作吗？并放置按钮类型提交

没有，很遗憾，什么都没有。就像我设置按钮独立发送东西一样，它仍然不去。

【参考方案1】：

我不确定是不是因为在整个项目中，我混合了 jQuery，或者我的代码只是错误的，但我做了三件事来解决这种情况：

将我所有的 javascript 包装在 $(document).on('ready', function()) 和。 从我的按钮元素中删除了名称、类型以及除类之外的几乎所有内容。 我没有将表单id放入变量中，而是使用jQuery直接分配表单。例如：$('#payment-form').on('submit', function())，我必须这样做，因为当我不管其他所有东西都使用变量时，它仍然没有不行。

如果有人对此有实际的解释，那就太好了，但我设法解决了这个问题，并且实际上正在记录提交。希望如果其他人遇到这个问题，他们可以提供帮助。