显示提交<链接onchange并传递已更改的输入框的值

show submit <a href> link onchange and pass the value of the input box changed

本文关键字：输入 提交 链接 onchange 显示      更新时间：2023-09-26

我不是一个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>

我想做的工作是这样的。嗯，假设我需要为每个产品做不同的表单/div名称?我可以很容易地将product_id写入id标记，但假设我还需要为每个标记循环遍历函数。我已经写了这么多的替换代码:

从Database (items in cart)获取Dataset并循环:

<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>

结束循环

因此，如果数量发生变化，它会显示单词"更新"，他们可以点击，并将数量字段中的任何数量传递给updateitem.asp(在某种程度上，我可以在ASP/SQL数据库中更新它)。在上面的代码中，如果我们可以在quantity=之后的a 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>

结束循环

我有一些问题…

  1. 我不确定如何编写函数UpdateQty。它应该A)显示的东西在div id=showlink，和B)添加#从输入命名为quantity quantity到href，所以我可以在下一页的数据库中更新它

  2. 如果他们关闭了JavaScript，他们应该能够输入一个新的数量，只需点击回车键提交表单。我相信这将工作，因为它的一个表单与1个文本输入和1个隐藏的一个，所以只是在文本输入中按enter应该提交它。但是，这应该仍然与添加的任何JavaScript使showlinkdiv显示，如果它改变。

  3. 我需要添加一个类到我的CSS为showlink?如果是，我需要在里面放什么?

任何帮助都将非常感激!

Mahalo !

所以你可以为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都委托给相同的方法，参数要么从查询字符串中解析出来，要么从post数据。

你可以看到它在jsfiddle上运行。希望这对你有帮助!

相关文章：