2011-06-27 12 views
15

私は答えを探しましたが、見つからなかった!私は簡単なフォームを持っているフォーム提出前に確認

は、

<form action="adminprocess.php" method="POST"> 
    <input type="submit" name="completeYes" value="Complete Transaction" /> 
</form> 

は、どのように私はこのフォームを処理する前に確認するために調整するのでしょうか?

私はonclickを試みましたが、動作させることができませんでした。

アイデア?

更新 - 私が今持っているもの。

<script type="text/javascript"> 
var el = document.getElementById('myCoolForm'); 

el.addEventListener('submit', function(){ 
return confirm('Are you sure you want to submit this form?'); 
}, false); 
</script> 

<form action="adminprocess.php" method="POST" id="myCoolForm"> 
    <input type="submit" name="completeYes" value="Complete Transaction" /> 
</form> 
+1

? – AllisonC

+0

フォームが文書内にある**後にリスナー**を追加する必要があります。 window.onloadを使用して追加するか、ページのフォームの後にスクリプトを配置します。 – RobG

+0

それは後で来なければならないことを知らなかったが、意味がある。 RobGに感謝します。 – sark9012

答えて

35

HTML:

<form action="adminprocess.php" method="POST" id="myCoolForm"> 
    <input type="submit" name="completeYes" value="Complete Transaction" /> 
</form> 

はJavaScript:

var el = document.getElementById('myCoolForm'); 

el.addEventListener('submit', function(){ 
    return confirm('Are you sure you want to submit this form?'); 
}, false); 

編集:あなたは、常にこのように、インラインJSコードを使用することができます:あなたはすでにjQueryのを使用している場合

<form action="adminprocess.php" method="POST" onsubmit="return confirm('Are you sure you want to submit this form?');"> 
    <input type="submit" name="completeYes" value="Complete Transaction" /> 
</form> 
+0

ボタンをクリックしても何も起こっていませんか?ちょうどadminprocess.phpページに行く! – sark9012

+0

私が提供したマークアップを使用しましたか?あなたのHTMLにはフォームに追加したid要素が含まれていないので、 'getElementById'メソッドで取得できます。 –

+0

コードをコピーして貼り付け、確認の試行をバイパスしています。私は今持っているもので質問を更新します。 – sark9012

16
<input type="submit" onclick="return confirm('Are you sure you want to do that?');"> 
+0

@RobGあなたは少し間違っています。この '

'は完全に動作します – Greenisha

+0

@RobG編集済み – Greenisha

2

正しいイベントがをonSubmit()であり、それは、フォームに添付されなければなりません。私はonClickを使用することは可能だと思いますが、onSubmitは正しいものです。

+1

onsubmitイベントはありません。 * onsubmit *という名前のHTML属性がありますが、関連するイベントは[submit](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents)です。 )イベント。 – RobG

+0

OK、これはセマンティクスに関するもので、onclickもイベントではありませんが、正しい条件を示しているので、私はあなたに同意します –

1

..イベントハンドラを使用して送信前にトリガすることができます

$(document).ready(function() { 
    $("#formID").submit(function(){ 
     // handle submission 
    }); 
}); 

参考: http://api.jquery.com/submit/

+0

jQueryを使用していませんが、お勧めです。間違いなく私はもっと知る必要がある何か。 – sark9012

+0

javascriptを使って開発する場合は、jQueryを使用することを強くお勧めします。これは、自分で作成しなければならない多くの機能がすでに作成されているプラ​​ットフォームを提供します。そしてその非常に拡張可能な。 – Atticus

+0

グリップを得るための最良の場所に関する提案はありますか?まさにjQueryのウェブサイトですか? – sark9012

-2

あなたは1つが、あなたがこのようにそれを行うことができますさまざまなアクションを実行するボタンを提出し、より多くを持っている場合。あなたが持っていたのonclickコードだったもの

<input TYPE=SUBMIT NAME="submitDelete" VALUE="Delete Script" onclick='return window.confirm("Are you sure you want to delete this?");'> 
0

var submit = document.querySelector("input[type=submit]"); 
 
    
 
/* set onclick on submit input */ 
 
submit.setAttribute("onclick", "return test()"); 
 

 
//submit.addEventListener("click", test); 
 

 
function test() { 
 

 
    if (confirm('Are you sure you want to submit this form?')) {   
 
    return true;   
 
    } else { 
 
    return false; 
 
    } 
 

 
}
<form action="admin.php" method="POST"> 
 
    <input type="submit" value="Submit" /> 
 
</form>

関連する問題