使用jQuery处理表单

问题描述：

我有一些PHP代码可以从我的数据库中生成一堆商店项目。每个项目都有一个数量文本框和一个添加到购物车提交按钮以及一个带有特殊ID的隐藏值。使用jQuery处理表单

这里基本上是如何生成我的形式：

<form class='form-inline' id='addtocart_form' action=' 
additem.php?iid=$SaleItem_Id&u=".$_SESSION['id']." ' method='post' role='form'> 
    <div class='form-group'> 

<div class='input-group'> 
    <input type='text' class='form-control' style= 'float: left; width:50%;' id='quantity' 
    name='quantity' value='0'></input> 
    <button type='submit' name='add_to_cart' id='add' class='btn btn-success'>Add to 
    Cart</button> 
    </div> 
<input type='text' name='$SaleItem_Id' style='display: none;' id='$SaleItem_Id' 
    value='$SaleItem_Id'> 
</form>

我的车完美的作品，但它刷新，并让你备份到屏幕的顶部。所以我决定实现jQuery。所有这些生成的表单都具有相同的ID：addtocart_form。

$(function() { 
    $("#addtocart_form").on('submit' , function(e) { 
     e.preventDefault(); 

     var thisForm = $(this); 
     var quantity = $("#quantity").val(); 
     var dataString = $("#addtocart_form").serialize(); 

     $.ajax({ 
      type: "POST", 
      url: thisForm.attr('action'), 
      data: dataString, 
     }); 

     $("#quantity").val("0"); 

     return false; 
    }); 
});

显示在屏幕上的第一项工作完美。它将商品添加到购物车而不刷新屏幕。

页面上的所有其他表单都是在没有jQuery的情况下提交的。他们添加该项目，但重定向到我的操作的URL。

如何解决这个问题而不重写我的整个商店？我认为它有什么形式被告知要提交。

你不应该有一个以上的元素页面上的相同ID。如果您的所有表单使用相同的ID，那就是一个问题。你应该使用类来绑定你的事件，然后，如果需要的话，为每个表单分配一个唯一的ID（或者，如果你只能使用类，就不要在表单上使用ID） –

Like，div class？我会怎么做？ – user3813156

答

id属性在同一个文档中应该是唯一的，所以尝试用类替换ID为addtocart_form，并且通过类替换所有其他ID以避免重复的ID。

HTML：

<form class='form-inline addtocart_form' action=...

JS：

$("body").on('submit', '.addtocart_form', function(e) { 
    e.preventDefault(); 

    var quantity = $(this).find(".quantity").val(); 
    var dataString = $(this).serialize(); 
    var action = $(this).attr('action') 

    $.ajax({ 
     type: "POST", 
     url: action, 
     data: dataString, 
    }); 

    $(this).find(".quantity").val("0"); 

    return false; 
});

希望这有助于。

即时通讯使用引导，所以我的表单类是内联。这会对它产生负面影响吗？ – user3813156

不，请看看我的更新。 –

它的工作。谢谢您的帮助！（另外，我将我的数量id更改为一个类，并将我的jQuery更改为'$（“。quantity”）。val（“0”）;'这样它就会将它改回0） – user3813156

答

在页面上不应该有多个具有相同ID的元素。如果您的所有表单使用相同的ID，那就是一个问题。

由于您在AJAX中使用JQuery，因此根本不需要使用表单。只需使用常规按钮（type =“button”）并将一个单击事件绑定到它。找到按钮的父div，并获取该div内输入的值。

如果您的标记看起来是这样的：

<div class='form-group'> 
    <input type='text' class='form-control quantity' style='float: left; width:50%;' value='0'> 
    <button type='button' class='btn btn-success add'>Add to Cart</button> 
    <input type='text' style='display: none;' class='saleItem_Id'> 
</div> 
<div class='form-group'> 
    <input type='text' class='form-control quantity' style='float: left; width:50%;' value='0'> 
    <button type='button' class='btn btn-success add'>Add to Cart</button> 
    <input type='text' style='display: none;' class='saleItem_Id'> 
</div>

您可以在专区内通过输入迭代像这样：

$(".add").on('click', function() { 
    var parentDiv = $(this).closest("div"); 
    //in this example, you only have one element, but this is how you would iterate over multiple elements 
    parentDiv.children('input').each(function() { 
    console.log($(this).prop('class')); 
    console.log($(this).val()); 
    }); 
    //do your ajax stuff 
});

JS Fiddle demo

使用jQuery处理表单

相关推荐