Question

我正在开发站点上使用嵌入式应用程序，当我单击iframe中的提交按钮时，我在该页面上的其他表单（不是iframe）中触发了手动提交事件。如果我手动单击该表单的“提交”按钮，则我的数据将发布，并且一切正常。但是，我想消除用户的额外单击，并在用户在iframe内内部提交其他表单时自动提交外部表单。

我在基本级别上都能正常工作。当用户单击iframe中的“提交”按钮时，我正在使用JQuery从iframe内部获取值并以此外部形式设置值。然后，使用jquery的“ submit（）”事件，可以提交该外部表单。问题是，页面刷新并且数据没有到任何地方。如果我删除了“ submit（）”事件并手动单击“提交”按钮，则该表单将发布，在这种情况下，会将具有自定义数据的产品添加到产品购物车中。

作为概念证明，这是我的“ iframe” HTML。

<b-table .... :items="cptItems"></b-table>

这是我在iFrame之外的页面表单。

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <h1>Proof of Concept</h1>
        <p>Total cost: $<span id="cust_price">222.22</span> plus shipping.</p>
        <p>Quote number: <span id="quot_num">1546751962211</p>

        <form method="POST" enctype="multipart/form-data" id="newQuoteForm">
            <button type="submit" class="btn btn-primary" name="new-app-btn">Add to Cart</button>
        </form>
    </body>
    <footer>
    </footer>
</html>

然后，我让JQuery抓取iframed值并将其放在外部形式中。之后，它将在该表单上触发一个“ submit（）”事件。

<form method="POST" enctype="multipart/form-data" id="outer-quote-form" action="/checkout/">
    <label class="quote_number">Quote Number: 
        <input type="text" id="quote_number" name="quote_number" value="">
    </label>
    <label class="custom_price">price:
        <input type="text" id="custom_price" name="custom_price" value="">
    </label>
    <button type="submit" class="btn btn-primary" name="ws-add-to-cart">Add to Cart</button>
</form>

除了触发jquery Submit（）事件时外，该表单似乎正在提交并且页面刷新，但是没有数据发布，就像我手动提交表单时一样。这里是否有额外的步骤，或者有一种更好的方法来激发带有帖子数据的表单提交？

编辑：添加未在上下文的jquery commit（）上触发的PHP函数。

<script>    
    jQuery('#newQuoteApp').load(function() {
        var iFrameDOM = jQuery("iframe#newQuoteApp").contents();
        jQuery('#newQuoteApp').contents().find('#newQuoteForm').submit(function() { 
            jQuery("input#custom_price").val(jQuery('#newQuoteApp').contents().find('#cust_price').text()); // updated
            jQuery("input#quote_number").val(jQuery('#newQuoteApp').contents().find('#quot_num').text());

            jQuery("#outer-quote-form").submit();
            return true; //return false prevents submit
        });
    }); 
</script>

Answer 1

尝试从您的js代码中删除return true
如果这不起作用，请尝试将<form method="POST"更改为<form method="GET"以调试url中的值，以检查表单是否实际启动了值

替代方法：旧式方法

iframe外部页面的代码

<script>
  function enterVals($val){
    var price = $val.price;
    document.getElementById("quote_number").value = $val.num
    document.getElementById("custom_price").value = $val.price
    document.getElementById("outer-quote-form").submit();
  }
</script>

iframe文件的代码

<script type="text/javascript">
    $('#newQuoteForm').on('submit', function(event) {
        var Page = window.parent;
        var allVals = {
            price:$('#cust_price').text(),
            num:$('#quot_num').text()
        }
        Page.enterVals(allVals);
        event.preventDefault();
    });
</script>

说明

window.parent指的是加载iframe的父窗口，与此相关的是，我们可以触发父窗口中的函数，因此，我们创建了一个变量，并添加了由窗口中的功能enterVals()
enterVals()函数仅放置值并提交表单，而无需使用任何jQuery。

使用JS提交表单的正确方法是什么？

这可能不是用js提交表单的“最佳”方法，但它是跨浏览器的，很好

Answer 2

之所以不提交表单，是因为您提交的是整个表单，而没有提交按钮（
<button type="submit" class="btn btn-primary" name="ws-add-to-cart">Add to Cart</button>
，您已经在php中声明了这样的发帖请求< / p>

if (isset($_POST['ws-add-to-cart'])) {...

当您调用Submit（）时；通过get方法在表单上看到
'/new-quote/?quote_number=1546751962211&custom_price=222.22'
但是ws-add-to-cart在哪里，它没有提交，这就是php无法收到您的请求的原因

解决方法是在提交按钮上添加.click()而不是提交表单

<script>
  function enterVals($val){
    var price = $val.price;
    document.getElementById("quote_number").value = $val.num
    document.getElementById("custom_price").value = $val.price
    document.getElementsByName("ws-add-to-cart").click();
  }
</script>

或者在脚本中以防使用jquery，这就是解决方法

<script>    
    jQuery('#newQuoteApp').load(function() {
        var iFrameDOM = jQuery("iframe#newQuoteApp").contents();
        jQuery('#newQuoteApp').contents().find('#newQuoteForm').submit(function() { 
            jQuery("input#custom_price").val(jQuery('#newQuoteApp').contents().find('#cust_price').text()); // updated
            jQuery("input#quote_number").val(jQuery('#newQuoteApp').contents().find('#quot_num').text());

            jQuery("button[name=ws-add-to-cart]").click();
            return true; //return false prevents submit
        });
    }); 
</script>

这绝对是答案，对我的愚蠢感到抱歉，我之前并没有引起注意

用JS提交表单并成功发布所有表单数据的正确方法是什么？

2 个答案:

替代方法：旧式方法

说明

使用JS提交表单的正确方法是什么？