ボタンをクリックするとフォームのリセット/クリア

Question

Firebaseを使用してボタンをクリックすると、フォームの内容を実際にクリアするのに問題があります。私はちょうど1つのテキストフィールドを持っていることを持っている別のフォームにtype="reset"を使用することができるよ、しかし、2番目の形式は2つのテキストフィールドを持って、私がしようとするときは、次の

function clearFields() { 
    document.getElementById(userCityEmail).value = ""; 
    document.getElementById(cityTextField).value = ""; 
} 

または私はちょうど使用して、この（何かを試してみてくださいリセット（））：

function clearFields() { 
    document.getElementById(userCityEmail).reset(); 
    document.getElementById(cityTextField).reset(); 
} 

ページはリロードされますが、Firebaseには何も送信されません。上記の機能を使用せず、テキストをテキストフィールド内に残しておけば、コンテンツをFirebaseに送信します。どこが間違っていますか？前もって感謝します！

<form id="myform" method="post"> 
    <input type="email" class="contactUsEmail" id="userCityEmail" placeholder="Enter email" name="contactUsEmail"> 
    <input type="text" class="contactUsEmail" id="cityTextField" placeholder="City" name="contactUsCity"> 
    <button type="submit" id="citySubmitButton" onclick="submitCityClick(); clearFields(); return false;" class="btn btn-primary contactUsButton">Submit</button> 
</form> 

Javascriptを：：

var userCityEmail = document.getElementById('userCityEmail'); 
var cityTextField = document.getElementById('cityTextField'); 
var citySubmitButton = document.getElementById('citySubmitButton'); 

function submitCityClick() { 
    var firebaseRef = firebase.database().ref(); 
    var userEmail = userCityEmail.value + " " + cityTextField.value; 

    firebaseRef.child("potentialCities").push().set(userEmail); 
} 

function clearFields() { 
    document.getElementById(userCityEmail).value = ""; 
    document.getElementById(cityTextField).value = ""; 
} 

Answer 1

は今何が起こったのか考え出し

は、ここに私のHTMLフォームです。 問題は、あなたが呼び出していたことでした。 firebaseRef.child（ "potentialCities"）。push（）。set（userEmail）;

これは意味がありません。 push（userEmail）またはset（userEmail）のどちらかを使用します。

これらの2つの違いは、プッシュによってpotentialCitiesツリーノードの下にランダムなIDが作成され、ユーザーの電子メールデータが同じオブジェクトのすぐ下に置かれることです。おそらく上書きされます。この場合、プッシュが推奨されます。

フィールドクリアを説明するには、サブミットクリックメソッドにclearfieldsメソッドがあります。

function submitCityClick() { 
    var firebaseRef = firebase.database().ref(); 
    var userEmail = userCityEmail.value + " " + cityTextField.value; 

    firebaseRef.child("potentialCities").push(userEmail); 
    clearFields() 
} 

の下のコードは、これまた、あなたが、右firebase REFを持っているあなたは、あなたが使用しているURLをチェックしていることを期待しますか？

あなたは間違ってやっているもう一つは、あなたがこれらの変数を宣言しているということです。

var userCityEmail = document.getElementById('userCityEmail'); 
var cityTextField = document.getElementById('cityTextField'); 

が続いclearFieldsで、その変数で、elementByIdを取得しよう：

document.getElementById(userCityEmail).value = ""; 
document.getElementById(cityTextField).value = ""; 

このdoesntの仕事、 clearFieldsの文字列で取得するか、宣言した変数を使用するだけです。

userCityEmail.value = ""; 
or 
document.getElementById('userCityEmail').value = ""; 

私はちょうどその理由のためにjQueryをプルすることはお勧めしません。それは大きな図書館です。もしあなたがバニラのjavascriptで十分であれば、それをしてください！