0

私はこの単純なフォームを持っています:

HTML

<form>
    <label for="eName">Name</label>
    <input id="eName" type="text" name="eName">
    <label for="Email">Email</label>
    <input id="Email" type="text"  name="Email">
    <button id="create" class="boton" 
        onclick="doSomething();" type="submit">Create!</button>
</form>

JS

function doSomething() {
    var name, email;
    name = document.getElementById("eName").value;
    email = document.getElementById("Email").value;
    putElementsIntoTheDOM(name, email);
}

ユーザーが何らかの情報を入力すると、DOM にユーザー入力を入力したいと考えています。上記の例は機能します。しかし、私はそれがより良くできると思います。方法がわかりません。

<button>ユーザーがクリックしたときにフォームの値が関数に渡されるようにするにはどうすればよいdoSomething()ですか?

また、フォームの値を DOM への入力以外には送信していないため、送信を防ぐにはどうすればよいですか?

私はこのようなものを見てきましたが、うまくいきません。

<button id="create" class="boton" onclick="doSomething(this.form);"     
    type="submit">Create!</button>
4

3 に答える 3

0

まず、送信する変数を受信できるように、関数宣言を更新する必要があります

function doSomething(name,email) {
}

次に、一部のフィールドの値をその関数に送信する必要がある場合は、このようにボタンクリックで送信できます。

<button id="create" class="boton" onclick="doSomething(document.getElementById('eName').value,document.getElementById('Email').value);" type="submit">Create!</button>

ただし、控えめなJavaScriptを使用することをお勧めします。そのため、jQueryは、変数を関数に適切に渡すために使用できるオプションの1つです。

于 2013-01-18T18:08:10.000 に答える
0

と の間には、私が気付いていなかった違いがありtype="submit"ます。 また、andタイプは、 andイベント に対して異なる反応を示します。type="button"
buttonsubmitonclickonsubmit

例えば

<form onclick="doSomething()">
<label for="eName">Name</label>
<input id="eName" type="text" name="eName">
<label for="Email">Email</label>
<input id="Email" type="text"  name="Email">
<button id="create" class="boton" type="button">Create!</button>
</form>

の上部に があることに注意してformくださいonclick。
入力要素にフォーカスするたびに、そしてonclickもちろんボタンをクリックすると、 が起動されます。

フォームを に変更して<form onsubmit="doSomething();も を変更しなくても、type="button"何も起こりません。ボタンをクリックしても、関数はトリガーされません。

を変更しtype="submit"てヘッドを保持すると<form onsubmit="doSomething();、ボタンがクリックされたときに関数がトリガーされます。これに追加された優れた機能は、それらのフィールドが入力されている場合にのみ機能する場合です<input ... required="required">(submitフォームは必須フィールドについて通知します)。

送信/更新を防ぐには (DOM にユーザー入力のみを入力しているため) return false、フォームの先頭に追加すると、送信が防止され
<form onsubmit="doSomething(); return false">ます。

最後に、次 の値を追加してフォームの値を取得しますthis。
<form onsubmit="doSomething(this); return false>

function doSommething(formInfo) {
   var name = formInfo.eName.value;
   var email = formInfo.Email.value;
   ... 
 }
于 2013-01-18T18:58:13.103 に答える
0

フォームの値をどこにも送信したくない場合はtype="submit"、ボタンから削除するだけです。

サンプルコードは正常に動作します。「より良い」方法で何を意味するのかわかりません。より現代的/慣用的な JavaScript はonclick属性を使用せず、代わりに doSomething をボタンにバインドします。jQuery を使用すると、次のようになります。

$("#create").click(doSomething);
于 2013-01-18T18:13:46.843 に答える