mur7ay mur7ay - 1 month ago 18
HTML Question

Resetting/Clearing Form Upon Button Click w/ Firebase

I'm having trouble actually clearing the content of a form upon button click with Firebase. I'm able to use

type="reset"
on another form I have that just has one text field, however, the second form has two text fields and when I try the following:

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


or I try this (something just using reset()):

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


The page will reload but nothing is sent to the Firebase. If I don't use the above functions and leave the text within the text field, it sends the content to Firebase. Where am I going wrong? Thanks in advance!

Here's my HTML form:

<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

Figured out what happened now. The problem you had was that you were calling firebaseRef.child("potentialCities").push().set(userEmail);

This doesnt make sense. Either use just push(userEmail) or set(userEmail).

The difference between these two things is that push will create a random ID under the potentialCities tree node, and set will put user email data right under the same object. It probably will be overwritten. Push is recomended for this case.

To explain the field clearing, still have the clearfields method in the submit click method. Code beneath

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

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

This also expects that you have the right firebase ref, have you checked the url you are using?

Another thing you are doing wrong is that you are declaring these variables:

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

Then trying to get the elementById, with that variable, in clearFields:

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

This doesnt work, you have to either get it by string in clearFields or just use the variable you declared:

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

I would not recommend to just pull in jQuery just for that reason. It's a big library, and if you can suffice with vanilla javascript, do that!

Comments