Question

我有一个这样的表格

<form id="add-to-cart" name="my-form" action="http://www.example.com" method="post">
  <div class="row flat">
    <input type="hidden" name="cartkey" value="">
    <input type="hidden" name="id" value="2">
    <button type="submit"  value="submit" data-value="2" data-name="id">Buy Now</button>
  </div>
</form>

要保存表单，我使用了jQuery。所以现在我的代码看起来像这样

 <script type="text/javascript">
    jQuery(document).ready(function() {
      jQuery('button').click(function(){
        var Value = jQuery(this).attr('data-value');
        jQuery('[name="id"]').val(Value);
        jQuery('#add-to-cart').submit();
        window.location = "http://www.page-2.com";
        });
    });
  </script>

但是在提交后，表单不会重定向到另一个页面（http://www.page-2.com）。那么有人可以告诉我在提交表单后如何重定向表单吗？

更新对不起，我不能使用ajax。我想简单地提交表单。

Answer 1

您可以在操作中处理此问题，从服务器代码调用onSubmit()会将其重定向到您想要的页面。

或者您需要使用ajax post（）调用，这些调用会在调用完成时为您提供onSuccess和onFailure事件。像这样：

$('#add-to-cart').submit(function() {
    $.ajax({
        type: 'POST',
        url: $(this).attr('action'),
        dataType: 'json',
        success: function(json) {
           window.location.href = "http://www.page-2.com";
        }
    })
    return false;
});

Answer 2

如果您不使用ajax，则会提交表单，并将浏览器重定向到表单的操作网址。提交后进行重定向的唯一方法是在操作表单的处理程序中执行此操作。但是，您可以使用要重定向到的URL添加参数。

该解决方案相对于涉及ajax的解决方案的唯一优势是不需要javascript。无论是否启用javascrit都可以。

Answer 3

我是这样做的：

<强> HTML：

                    <form action="javascript:searchItem();">
                        <div class="searchbox">
                            <div class="search-inner">
                                <div class="item-input">
                                    <input type="text" id="itemName" placeholder="Search Product" required/>
                                </div>
                                <div class="item-after">
                                    <input type="submit" value="" class="button-search"/>
                                </div>
                            </div>
                        </div>
                    </form>

<强>使用Javascript：

function searchItem() {

    $.ajax({
        url: urlDomain + "pricelist/?itemName=" + $("#itemName").val(),
        type: "GET",
        headers: {"Accept": "application/json", "Content-Type": "application/json"},
        success: function(data) {
            // do your work on success and then,
            location.href = "path/to/next/Page/To/Display.html";
        },
        error: function() {
            alert("error");
        }
    });
}

我在上面编写了从服务器获取值的代码，但您可以将jQuery“Type”参数更改为“POST”，并添加“data”参数及其要发送给服务器的值。

希望它对你有所帮助......

Answer 4

使用 onsubmit =＆＃34停用表单提交;返回false;＆＃34;

<强> HTML

<form id="add-to-cart" name="my-form" action="http://www.example.com" method="post">

<强> JS

<script>
      $(document).ready(function() {
          $('button').click(function(){
             var form = $(this).parents('form');

             $.ajax({
                 type: 'POST',
                 url: $(this).attr('action'),
                 data: form.serialize(),
                 dataType: 'json',
                 success: function(response) {
                      window.location.href = "http://www.page-2.com";
                 }
             });
             return false;
           });
      });
</script>

将操作属性值保留为后备，因此即使客户端上启用了 javascript ，您也可以确保表单正常运行侧。

Answer 5

我知道这是一个老问题，但我在提交表单后发现了一种不同的重定向方式。

首先，要重申<form>标记的基础知识，因为OP实际上是一个NewUser，提交表单会将重定向内置到其中。如果您更改原始html：

<form id="add-to-cart" name="my-form" action="http://www.example.com" method="post">

为：

<form id="add-to-cart" name="my-form" action="http://www.page-2.com" method="post">

然后点击您的提交<button>将自动重定向您。

但是，也许NewUser希望提交表格以便始终保留在www.example.com上，并且只有在提交完成后才有时会重定向到www.page-2.com？我今天遇到了这个确切的情况。

就我而言，我们有一个表格中包含数据的表格。用户可以更改数据，然后单击“提交”按钮（称为“保存”）以保存数据库中的更改。 <form>的操作只是刷新了表单/表格页面，因为我们希望用户留在该页面上。

我们在该页面上还有一个链接可以将您带到另一个页面，但我必须确保它在重定向之前自动保存所有数据。所以我让链接提交表单，然后重定向。这是通过jQuery完成的，没有Ajax。在这里，它适用于NewUser的代码：

（<form>未更改，action =“http://www.example.com”）

<script type="text/javascript">
$(document).ready(function() {
  // The link has class="linky-link" for easy selecting and href="http://www.page-2.com".  I did not use an id because I had multiple nearly identical links on the same page.
  $(".linky-link").on("click", function(e) {
    e.preventDefault();  // Don't redirect yet!
    var $form = $("#add-to-cart");  // $form instead of form because it's shorthand for a jQuery selector - not strictly necessary, but helpful
    $form.append("<input type='hidden' name='link_redirect' value='" + this.href + "'>");  // This is added to the end of the form and triggers the redirect after the saving is done
    $form.submit(); // Submitting the form saves the data, and then redirects
    });
});
</script>

（注意：一旦加载其他所有内容，请确保这段JavaScript位于php文件的最底部）

提交表单后重定向jQuery页面

5 个答案: