2012-07-12 24 views
0

我已經寫了一個JavaScript函數來調用我的button.onclick()事件,但函數沒有被調用。相反,我的表單行爲是執行的。使按鈕onclick調用一個函數而不是表單操作

HTML:

<form id = "Documents" action="Uploaded.php"> 
<input type="submit" id="Remove1" name="Remove[1]" value="Remove first" onclick="return Remove('Remove1');"> 
<input type="submit" id="Remove2" name="Remove[2]" value="Remove second" onclick=" return Remove('Remove2');"> 
</form> 

更新的JavaScript:

function Remove(currentDoc) 
{ 
if (window.XMLHttpRequest) 
     { 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("Removemsg").innerHTML=xmlhttp.responseText; 
    } 
    } 
xmlhttp.open("GET","functions/remove.php?Doc="+currentDoc,true); 
xmlhttp.send(); 

    return false; 
} 

它調用uploaded.php,而不是我的remove.php。但是我已經定義了我的onclick函數來調用remove.php。好心提醒。

+1

您的JS無效:3'{'和5'}'。我認爲有一個問題... – Florent 2012-07-12 12:37:11

回答

3

function remove()添加return false;聲明以防止表單提交。

,也是你的onclick="Remove()"應該onclick="return Remove();"

你的JS代碼也errorful

function Remove(currentDoc) 
{ 
if (window.XMLHttpRequest) 
    xmlhttp=new XMLHttpRequest(); 
else 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("Removemsg").innerHTML=xmlhttp.responseText; 
    } 
    } 
xmlhttp.open("GET","functions/remove.php?Doc="+currentDoc,true); 
xmlhttp.send(); 

    return false; 
} 
+0

如果你的意思是在Remove()函數體的末尾添加一個'return false',它是不正確的。此外,事件處理程序應該以這種方式進行更改:'onclick =「return Remove('Remove1')」' – 2012-07-12 12:56:29

+0

@updated,看到更改 – 2012-07-12 12:58:17

+0

添加,但它仍然自動下載uploaded.php而不是調用remove。 – JLearner 2012-07-12 13:03:09

1

因爲這是一個提交按鈕,將默認的形式提交給action屬性的URL。

爲了防止它,你需要在你的函數結束返回false:

function Remove(currentDoc) 
{ 
if (window.XMLHttpRequest) 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("Removemsg").innerHTML=xmlhttp.responseText; 
    } 
    } 
xmlhttp.open("GET","functions/remove.php?Doc="+currentDoc,true); 
xmlhttp.send(); 

return false; 
} 
+0

它不起作用。仍然鏈接到我的主要形式的PHP。 – JLearner 2012-07-12 12:37:23

+0

它不起作用,因爲它是這樣的: 'onclick =「false」' 但正確的是: 'onclick =「return false」' – 2012-07-12 13:05:42

1

使用<input type="button" />而不是<input type="submit" />防止形式submittion

+0

嘗試了你的方法。它不叫我的功能 – JLearner 2012-07-12 12:43:19

+0

你有一個有效的'HTML'我懷疑這個'name =「刪除[1]」',在名稱中使用[]是無效的我猜。 – yogi 2012-07-12 12:46:40

+0

即使我刪除[1],它仍然不會呼叫。奇怪的:( – JLearner 2012-07-12 12:50:58

-3

如果使用的是JavaScript,然後有不需要使用<form>

+1

你的回答沒有意義... – PPvG 2012-07-12 12:48:42

+0

你的答案不可以理解! – fsenart 2012-07-12 14:58:13

1

而不是使用<input type="submit" ... />產生按鈕,你也可以使用<button>標籤(MDN docu

<button type="button" id="Remove1" name="Remove[1]" onclick="Remove('Remove1')">Remove first</button> 

,這將產生一個按鈕。通過設置type="button",您可以防止觸發表單提交的默認(type="submit")。

+0

我已經爲我的

+1

['

1

當你點擊提交按鈕時,提交表單很自然。如果你想阻止這個,你應該在你的事件處理函數中返回false。注意,在你刪除函數結束返回false是不夠的,你應該寫這樣的事情:

<input type="submit" id="Remove1" name="Remove[1]" value="Remove first" onclick="return Remove('Remove1')"> 

和你remove函數應返回false。 也注意到你的ajax編碼存在語義錯誤。你應該在調用xmlhttp對象的open()函數後設置onReadyStateChange。請訪問here獲取更多信息

+0

試過,但它並沒有調出我的刪除功能,即使我已經改變警報('這'); – JLearner 2012-07-12 12:47:56

+0

是否阻止表單提交? – 2012-07-12 13:00:05

+0

不,它仍然會調用上傳文件。 – JLearner 2012-07-12 13:03:37

相關問題