2011-10-24 13 views
0
<form name = "myForm" onsubmit="foo()"> 
    <p class = "form-text">Name</p> 
    <input type = "text" name="name" /> 
    <input type = "submit" /> 
</form> 

//javascript (external file) 
function foo(){ 
    alert(document.forms["myForm"].name.value) 
} 

このコードに問題はありますか?私がsubmitを押すと、それは白いページに行き、何も起こらない。javascriptフォームへのアクセス

望ましい結果:問題は、フォームの提出を妨げないということです

<form name = "myForm" onsubmit="foo();return false;"> 
    <p class = "form-text">Name</p> 
    <input type = "text" name="name" /> 
    <input type = "submit" /> 
</form> 

//javascript 
function foo(){ 
    alert(document.forms["myForm"].name.value) 
} 

答えて

2

あなたが望む結果が何であるかは決して決まっていないので、フォーム提出で警告された値が表示されないようにすることができます。

私はあなたがfoo()の結果にその依存をたいと思います確信しているが、あなたは必見使用インラインjavascriptを、あなたは、フォームの送信を防ぐためにreturn false;を使用する必要がありますので、代わりにreturn falseのあなたが使用できる場合return foo();あなたが起きてからイベントを予防するかどうかを選択できるようになりますどの:

onsubmit="return foo()" 
///JS 
function foo() { 
    alert(...); 
    return false; 
} 
このようなコードの問題は、それが直接HTMLの素晴らしいMVC構造を壊しJSを呼び出すHTMLに依存しているということです

CSSとJavaScript。代わりに、JSコードにイベントコールバックを追加してください:

//make sure you add an `[id]` to your form 
var form = document.getElementsById('formid'); 
form.onsubmit = foo; 

function foo() { 
    //do stuff 
    return false; 
} 
+0

2番目の例では、すべてのコードをdocument.readyボディなどに挿入する必要があります。 – TGM

+1

@TGM、domの特定のセクションがロードされる前にスクリプトが実行されている場合のみ。本文の末尾にスクリプト参照を追加すると、 'document.onreadystatechange'を待つ必要はありません – zzzzBov

1

はこれを試してみてください。目的に応じてtrueまたはfalseのいずれかを返すように関数を書き直します(trueは「送信」、falseは「送信しません」)。次にonsubmit="return foo();"を使用してください。返される値はfoo()に応じてフォームの送信に直接影響します。

1

:名前フィールドの値が警告ボックス

関連する問題