Question

我真的不是一个JavaScript用户，我用ASP编写并在后端使用SQL数据库。但我们的营销总监要求进行使用JavaScript的更改。

在我们的查看购物车页面上，我们当前正在显示一个带有修改按钮的输入框，以允许客户更改所列项目的数量（在该行中...他们的购物车中可能有多个产品，每个产品都有他们自己的数量输入）。

<form method="post" action="updateitem.asp">
<input type="hidden" name="product_id" value="<%= PRODUCT_ID %>">
Quantity: <input type"text" name="quantity">
<input type="image" name="Submit" src="/graphics/modify.gif" align="middle" border="0" alt="Continue">
</form>

我想做的工作是这样的。 Hrm，假设我需要为每个产品做不同的表单/ div名称？我可以很容易地将product_id写入id标签，但是假设我还需要为每个标签循环我的函数。我在编写替换代码时已经做到了这一点：

从数据库中获取数据集（购物车中的项目）并循环播放：

<form method="post" action="updateitem.asp" id="updateitems<%= PRODUCT_ID %>">
Quantity: <input type="text" name="qty<%= PRODUCT_ID %>" OnChange="Javascript:UpdateQty()")
<div id="showlink<%= PRODUCT_ID %>">
<br /><a href="updateitem.asp?product_id=<%= PRODUCT_ID %>&quantity=NEWQUANT"><span class="BodyTiny">update</span></a>
</div>
</form>

END LOOP

因此，如果数量发生变化，它会显示单词“update”，他们可以点击它，并将数量字段中的任何数量传递给updateitem.asp（以某种方式我可以在ASP中的数据库中更新它） / SQL）。在上面的代码中，如果我们可以在quantity =之后在一个href语句中插入新的＃，那么我可以在updateitems.asp页面中修复它而没有问题。

我不确定从哪里开始老老实实，到目前为止我有这个：

通过数据集循环，以便每个产品都有自己的功能

<script Language="JavaScript">
<!--
function UpdateQty(updateitems<%= PRODUCT_ID %>) {

Show div updateitems<%= PRODUCT_ID %>

Replace NEWQUANT within that div with the value in the input field qty<%= PRODUCT_ID %>

}
//-->
</script>

END LOOP

我遇到了一些问题......

我不确定如何编写函数UpdateQty。它应该A）显示div id = showlink中的东西，B）将输入命名数量的＃添加到href，这样我就可以在下一页的数据库中更新它
如果他们关闭了JavaScript，他们应该能够输入新的数量，只需按Enter键即可提交表单。我相信这将作为一个带有1个文本输入和1个隐藏文本的表单，因此只需输入文本输入即可提交。但是，如果更改了showlink div，那么它应该仍然适用于任何添加的JavaScript。
我是否需要在showlink中为CSS添加一个类？如果是这样，我需要加入什么？

非常感谢任何帮助！

马洛！

Answer 1

所以你可以为updateQty做的事情就是有一个函数对于列表中的所有产品都是正确的，只需创建一个通过相对路径找到所有必要元素的函数。

//in this function the context is the element, so the
//`this` variable can be used rather than a param 
//for the product id
function updateQty() {
    //show the update link
    var parent = this.parentNode;
    //assumes only the update text uses the class bodyTiny, and that there
    //is only one element using it. obviously making this invariant true
    //would be trivial by adding a different class name
    var updateText = parent.getElementsByClassName("bodyTiny")[0];
    updateText.style.display = 'block';
    var updateLink = updateText.parentNode
      , updateHref = updateLink.href;
    //next we find the current quantity and replace it with the input
    updateHref = updateHref.replace(/qty=(\d*)/, 'qty='+this.value);
    //then we set the link element's attribute
    updateLink.href = updateHref;
    //now when you mouse over the link you should see the url has changed
}

您还可以将表单设置为POST等效数据，然后我猜您在服务器端将OnGetPage和OnPostback委托给同一个方法参数可以从查询字符串中解析出来，也可以从发布数据中解析出来。

您可以看到它正在运行on jsfiddle。希望这有帮助！

显示提交<a href=""> link onchange and pass the value of the input box changed</a>

1 个答案: