onclickオプションを使用しているときにAjaxがHTMLフォームの送信ボタンで機能しない

以下のコードは、入力テキストフィールドを使用すると機能しますが、送信ボタンを使用すると機能しません。私は私が代わりに送信ボタンを使用するときにonclickオプションを使用しているときにAjaxがHTMLフォームの送信ボタンで機能しない

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function showHint(str) { 
if (str.length == 0) { 
    document.getElementById("txtHint").innerHTML = ""; 
    return; 
} else { 
    var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      document.getElementById("txtHint").innerHTML = xmlhttp.responseText; 
     } 
    } 
    xmlhttp.open("POST", "download.php?q="+str, true); 
    xmlhttp.send(); 
    } 
    } 
    </script> 
</head> 
<body> 

<p><b>Start typing a name in the input field below:</b></p> 
<form method="POST" action="showHint(str)"> 
First name: <input type="text" placeholder="Copy Your Facebook Video URL Over Here" name = "URL" onclick="showHint(URL.value)" > 
<button type="submit" onclick="showHint(URL.value)">Download</button> 
</form> 
<p>Suggestions: <span id="txtHint"></span></p> 
</body> 
</html>

を説明してくださいしかし、それは

出典

2016-05-02 Anonymous

@Atulaしかし、jqueryを使用していません –

私の間違い@Krage – Atula

同じことを助けてください動作しますしないjqueryのかわからない=の代わりにボタンの使用入力タイプを使用しての私と一緒のようなボタンが起こりました以下で説明 -

<input type="button" id="submit" value="submit" name="submit" onclick="showHint(URL.value)"></input>

それは確かに

出典

2016-05-02 07:26:24 Sumit

これは**回答**の場合、なぜダウン投票ですか？ – Atula

あなたは私に教えてくれるのは分かりません – Sumit

どうすれば@セバスチャンがこの作品になりますか？ – Atula

を働くだろうあなたはユーザーアクション（ボタンをクリックすること）によって開始さXHRリクエストが、フォームのを使用しようとしているように見えるので、デフォルトアクションはあなたに問題を引き起こしています。

ボタンをクリックしてフォームを送信し、このアクションをaction="showHint(str)"に定義したときにフォームがshowHint（str）というページに移動しようとしています。

event.preventDefault();を関数に追加すると（関数の最初の行、つまりif文の直前に置く）、指定したとおりにボタンをクリックして実行するこの関数は送信しませんデフォルトのフォームアクションと問題が解決されます。フォームタグからアクションプロパティを完全に削除することもできます。

出典

2016-05-02 07:35:04

onclickオプションを使用しているときにAjaxがHTMLフォームの送信ボタンで機能しない

答えて

関連する問題