单击提交按钮时文本框不清除答案

【问题标题】：Textbox not clears when clicks the submit button单击提交按钮时文本框不清除
【发布时间】：2016-11-30 13:22:13
【问题描述】：

单击PROCEED 按钮后，我试图清除txtSubTotal 文本框。尽管我尝试了一些代码示例，但它不起作用，即使在 SO 中也是如此。

btnProceed/HTML

<input type="submit" name="btnProceed" id="btnProceed" value="PROCEED" onclick="clearSubTotal();"/>

clearSubTotal()/JS

function clearSubTotal() {
$('#txtSubTotal').val('');
}

txtSubTotal

<input name="txtSubTotal" type="text" id="txtSubTotal" size="15" value="<?php 
$sql=mysqli_query($connection,"select sum(amount) from sales_temp");
$row = mysqli_fetch_array($sql);
echo $row[0];
?>"/>

表单/HTML

 <form id="manageSalesForm" name="manageSalesForm" method="post" action="<?php echo BASE_URL?>includes/functions/sales_functions.php">

感谢您对此的帮助。

注意：发现在第二次按下按钮时，文本框会清除。如何为第一个按钮正确设置？

添加按钮/JS

     function submitdata() {
     var listItemName  = document.getElementById("listItemName").value;
     var listStock = document.getElementById("listStock").value;
     var txtUnitPrice = document.getElementById("txtUnitPrice").value;
     var txtQuantity = document.getElementById("txtQuantity").value;
     var listCustomer = document.getElementById("listCustomer").value;
     var txtReceiptNo = document.getElementById("txtReceiptNo").value;
     var TheDate = document.getElementById("TheDate").value;

     // Returns successful data submission message when the entered information is stored in database.
     var dataString = {listItemName:listItemName, listStock: listStock, txtUnitPrice: txtUnitPrice, txtQuantity: txtQuantity, listCustomer: listCustomer, txtReceiptNo: txtReceiptNo};
     if (listItemName == '' || listStock == ''|| txtUnitPrice == ''|| txtQuantity == ''|| listCustomer == ''|| txtReceiptNo == ''|| TheDate == '') {
     salesitemsAddFail();
     } 
     else {
                // AJAX code to submit form.
                $.ajax({
                type: "POST",
                url: "/pms/includes/functions/sales_temp_functions.php",
                data: dataString,
                cache: false,
                success: function(html) {    

     //reload the sales datagrid once add the item details to temporary table (sales_temp)
     $('#list').trigger("reloadGrid",[{page:1}]);
         window.location.reload();
                }
                });
            }
}
$('#btnProceed').click(function(event) {
  event.preventDefault(); // stops form submission
$('#txtSubTotal').val('');
});

添加按钮/HTML

<td width="46"><button type="button" name="btnSave" id="btnSave" onclick="submitdata(); check_qty(); showSubTotal();">ADD</button></td>

sales_functions.php

<?php

//Start the Session
       if(!isset($_SESSION)) 
       { 
           session_start(); 
       } 

include ("/../../pages/sales.php");
include("/../../dbutil.php");

 if(isset($_POST['listCustomer'])){ $customer = $_POST['listCustomer'];}
 if(isset($_POST['staff'])){ $user = $_POST['staff']; }

if(isset($_POST['btnProceed'])){

$result=mysqli_query($connection, 
"INSERT INTO sales(cus_id,item_id,stock_id,receipt_no,qty,unit_price,amount,user_id,purchase_id) 
 SELECT C.cus_id, I.item_id, S.stock_id, $receipt_no, ST.qty, ST.unit_price, ST.amount, U.id, P.purchase_id 
FROM customers C, items I, stock S, sales_temp ST, users U, purchase_items P 
WHERE ST.staff='$user' 
AND C.customer_name='$customer' 
AND I.item_name=ST.item_name 
AND S.stock_code=ST.stock_code 
AND ST.purchase_id=P.purchase_id");


//Update available qty from purchase_items relevant only to the logged in user(sales_temp table may have records from multiple users)
$resultUpdate=mysqli_query($connection, "UPDATE purchase_items P INNER JOIN sales_temp ST ON (P.purchase_id = ST.purchase_id) SET P.avail_qty = (P.avail_qty - ST.qty) WHERE ST.staff='$user'");

//Delete records relevant only to current user. Here 'WHERE' clause use to prevent deleting other user's records.
$resultDelete=mysqli_query($connection, "DELETE FROM sales_temp WHERE staff='$user'");


if (!$result) {
  printf("Errormessage: %s\n", mysqli_error($connection));
}

// use exec() because no results are returned
if ($result) {

}
else
{
  echo '<script type="text/javascript">',
 'salesAddFail();',
'</script>';
}}
?>

【问题讨论】：

您的form 元素的action 属性设置为什么？最有可能的是，在您提交后，相同的页面正在重新加载，并且您的 .php 中的默认值正在重新建立。如果您正确设置表单的action，则无需手动清除字段。
@ScottMarcus 我添加了form 的 HTML 代码。
您的<input> 具有value="<?php [...] echo $row[0]; ?>" 属性。因此，每当页面加载时，这将是 <input> 的值。
@Rounin 你有什么想法，如何在提交按钮后重置文本框，然后通过该事件的调用获取文本框值。
@EKBG 如果您要重新填充表单字段，为什么还要先清除它？

标签： javascript php html

【解决方案1】：

点击提交按钮后，表单正在提交，您的自定义函数并未执行。

从您的输入元素中删除 onclick 并编辑您的 jQuery 代码：

$('#btnProceed').click(function(event) {
  event.preventDefault(); // stops form submission
  $('#txtSubTotal').val('');
});

您可以在浏览器中试用：https://jsfiddle.net/hy7jwg8m/1/

【讨论】：

我复制了代码并在本地主机上运行它，它对我有用。您的代码正在提交表单，因此关键是添加 event.preventDefault() 方法。您能否更具体一点，或者将整个代码复制到此处或复制到 jsfiddle，好吗？
这里是完美运行的版本，你自己试试吧：jsfiddle.net/hy7jwg8m/1（PHP 代码不在那里运行，但没关系）。我为我所做的改变写了 cmets。让我知道它是否有效。
不走运。尽管小提琴有效，但仍然有同样的问题。希望我有任何不兼容的代码。
它到底在做什么？刷新页面？显示错误？例如，如果有任何 JS 错误，你能检查你的控制台输出吗？
页面刷新，但小计没有清除。当第二次点击Proceed时它会被清除。控制台没有错误，我的错。

【解决方案2】：

它非常适合我。单击提交后，它可能对您有用，但同时页面将被重定向到新操作

【讨论】：

在第二次按下PROCEED 按钮时，它会清除文本框。如何在第一次点击时清除文本框？
通过添加console.log来调试。它应该只在第一次点击时调用
你能帮我解决这个问题吗，按照你的建议编辑我的代码。
'

' **希望对你有帮助
在上面的代码 sn-p 中，您将能够看到文本框在很短的时间间隔内变空

【解决方案3】：

我找到了解决方案，添加了do_onload(id) 来计算每次刷新后触发的loadComplete 事件的总数（也包括删除后）

function do_onload(id)
{
//alert('Simulating, data on load event')

var s = $("#list").jqGrid('getCol', 'amount', false, 'sum');
jQuery("#txtSubTotal").val(s);
}

并相应更改了phpgrid代码。

$opt["loadComplete"] = "function(ids) { do_onload(ids); }";
$grid->set_options($opt);

【讨论】：