使用javascript修改表單操作提交表單而不提交

我有一個HTML表單，我用一些javascript改變動作後提交。兩個不同的按鈕可以進行提交。使用javascript修改表單操作提交表單而不提交

有趣的是，我正在嘗試調試它，並在更改操作之後並在提交表單之前插入警報。提交表單時未顯示警報。爲了確保它實際上在執行javascript，我在更改操作之前添加了一條警報。該警報顯示;更改操作後的警報不會。

<form name='FormSelect' method='post' action='Undefined'> 
... 
<button onclick="SubmitForm('class')">Submit</button> 
... 
<button onclick="SubmitForm('student')">Submit</button> 
... 
</form> 

<script type="text/javascript"> 
function SubmitForm(target){ 
    alert("Action 1: " + document.FormSelect.action); 
    if (target=="class") { 
     document.FormSelect.action = "ClassAction.php"; 
    } else { 
     document.FormSelect.action = "StudentAction.php"; 
    } 
    alert("Action 2: " + document.FormSelect.action); 
// document.FormSelect.submit(); 
    } 
</script>

這是事件的預期順序嗎？

來源

2013-04-30 P.Dow

這些按鈕已經自動提交表單 - 您爲什麼手動提交第二次？只要改變行動，讓它走 – Ian 2013-04-30 20:40:58

或更好。爲每個按鈕命名一個名稱並提交給Actio.php，讓服務器看到按鈕的名稱 – mplungjan 2013-04-30 20:50:39

@mplungjan每個按鈕代表一個學生ID。如果我在窗體上有20-30個按鈕，並且用戶單擊其中一個按鈕，那麼只有該按鈕的值傳遞給服務器？ – 2013-04-30 22:24:06

更好的解決方案是給按鈕的名稱爲每個並提交action.php的，並讓服務器獲得命名的按鈕

$student = filter_var($_POST["student"], FILTER_SANITIZE_STRING); // php5 cleaning

當你的價值

<form method="post" action="Actions.php"> 
    <input type="submit" name="student" value="John Doe" /> 
    <input type="submit" name="student" value="Jane Doe" /> 
    <input type="submit" name="student" value="Whatever Doe" /> 
</form>

否則如果你一定要

試試這個

<form method='post' action='Undefined'> 
... 
<input type="button" value="Class" onclick="SubmitForm(this)" /> 
... 
<input type="button" value="Student" onclick="SubmitForm(this)"/> 
... 
</form> 

<script type="text/javascript"> 
var actions = { 
    "class":"ClassAction.php", 
    "student":"StudentAction.php" 
} 

function SubmitForm(button){ 
    button.form.action = actions[button.value]; 
    button.form.submit(); 
} 
</script>

來源

2013-04-30 20:35:29 mplungjan

放置在表單元素中的任何按鈕都會導致提交操作。爲了防止這種情況，您可以將type =「button」添加到按鈕元素，或者使您提交回調返回false;

<button type="button" onclick="SubmitForm('class')">Submit</button

看到http://jsfiddle.net/yD2Uu/

來源

2013-04-30 20:41:44

return SubmitForm（...） - 這可能會一起取消提交 – mplungjan 2013-04-30 20:49:36

我在質疑爲什麼動作的更改會提交表單而不是繼續使用下一個javascript語句。我看到的例子顯示改變了提交之後的操作。看來改變動作之後的任何事情都不會被執行。 – 2013-04-30 22:18:50

我試着添加type =按鈕，但它沒有區別。 javascript函數中的第二條警告不會執行;第一個警報是。 – 2013-04-30 22:36:54

正如其他人已經指出的形式將提交無論如何，如果你不CANCLE事件。我想爲您的問題建議一個無JavaScript的解決方案。

<button formaction="ClassAction.php">Submit</button> 
<button formaction="StudentAction.php">Submit</button>

雖然它不支持IE < 10。但你仍然可以使用，然後你的函數作爲後備，只是有點更優雅;）

function SubmitForm(button){ 
    button.form.action = button.formaction; 
}

來源

2013-04-30 21:02:01 zeroflagL

請記住，我給出的示例是簡化代碼來說明問題。實際的代碼實際上只有1個按鈕，由PHP生成以將「class」或「student」傳遞給javascript函數。 javascript函數使用該參數根據其他表單輸入值確定要執行的幾個操作中的哪一個。 – 2013-04-30 22:31:23

我明白了。但是這種評估通常由服務器端框架來處理。 – zeroflagL 2013-04-30 22:50:01

好點;我將研究如何讓PHP腳本有條件地執行另一個PHP腳本。 – 2013-05-01 20:18:42

由於Yauhen Vasileusky的例子，我開始刪除我的第一&第二警報之間的代碼，發現問題似乎是以下IF語句：

if (document.FormSelect.FormName.value.substr(0,19)=="ObservationRequest_" || document.FormSelect.FormName.value=="StudentReg2013rx" || document.FormSelect.FormName.value=="Toddler Update Form v3rx") 
{ 
document.FormSelect.action = "GenerateXDP.php"; 
}

當我刪除它時，顯示兩個警報。所以我的問題的答案是，改變行動不提交表格;這是我的代碼中的一些其他錯誤，使得它看起來好像是這種情況。

來源

2013-05-01 20:24:50

使用javascript修改表單操作提交表單而不提交

回答

相關問題