Develop Reference

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 = "";
}

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!

Having trouble replacing an input in Prompt dialog box to asterisks

Hi I would like to replace the input of my prompt dialog box with asterisks. For example I write tom then i want the alert dialog box to display your password is ***.
<script type="text/JavaScript">
//declared variables
var input1 =0;
var dis = input1.length;
input1=prompt("Please enter your Password here","Enter Password Here");
dis.replace(/./gmi, '*')
window.alert("Valid password "+ input1 + "\n You entered the password " +
input1);
</script>
I tried this but it said replace is undefined.

if i properly understand, then you should not use replace(" ", "*") as replace() replaces only first character
use Regular Expressions for that (overload for replace() method). This will look like input1.replace(/./gmi, '*')

One could get creative here (it's meant as an alternative to using replace())
var plainText = prompt("Please enter your Password here", "Enter Password Here");
var asterisks = (new Array(plainText.length+1).join("*"));
// if you enter "Tom" you get
//
// plainText = "Tom"
// asterisks = "***"

You simply make the entry field like this:

Foreign letters failing when sending emails

I sometimes have to send emails in a German and I need to use ö ä ß etc... I have text written containing these letter and using alert() they appear just fine. I have code to send an email :
var link = "mailto:" + SendTo
+ "&cc= "
+ "&subject=" + escape(subjectLine)
+ "&body=" + escape(BodyText);
window.location.href = link;
When I click a button to send the email, the text is missing these foreign letters e.g gruß comes out as gru. Do I need to put anything in here to make sure these letter don't disappear?
Thank you in advance

The following articles shows how to decode the letters using javascript :
Javascript decoding html entities
function decodeHtml(html) {
var txt = document.createElement("textarea");
txt.innerHTML = html;
return txt.value;
}
HTML Entity Decode
Using jquery:
varTitle = $('<textarea />').html("Chris&apos; corner").text();

Replace space with character in a string except for words between quotes with JQuery

In my web application I implemented a search functionality with a textbox and buttons with a jQuery onclick event handler attached. Each button triggers a different search handler.
HTML
<input id="searchText" placeholder="What are you looking for?" type="text" />
<div id="searchLinksBar">
All
Downloads
Knowledge Base
</div>
jQuery
"use strict";
$(document).ready(function() {
$("#searchLinksBar a").click(function() {
//Get content from the selected anchor
var categoryURL = $(this).attr("href");
//Get search string
var searchText = $("#searchText").val();
var searchString = ToQueryString(searchText);
//Check if the search bar is filled
if(searchString.trim()){
categoryURL = categoryURL + "&str="
}
//Attach the two strings to get our full URL
var searchUrl = categoryURL + searchString;
window.location.href = searchUrl;
return false;
})
});
function ToQueryString(text) {
return text.replace(/ /g, "+");
}
The search works great except when a user wants to search an exact phrase by including several words within quotes. There shouldn't be the '+' sign between words within quotes, otherwise the handler does not work as expected. I might think of a solution by using regular expressions or use the concat and split function (see below) to divide words within quotes from those with quotes and place in a array but maybe there is a more elegant solution
var phrases = [].concat.apply([], text.split('"').map(function(v,i){
return i%2 ? '"'+v+'"' : v.split(' ')
})).filter(Boolean);

How do I send an email with HTML with an address the user inputs?

I have an app i am designing and there is a page for emails. The user inputs their name, email address and message and then clicks 'submit'. this works, but i don't know how to make the user's input be on the email. this is the code so far;
<form id="contacts-form" action="mailto:megan.sime#idoxgroup.com">
<ul class = "rounded">
<li style = "color: #FFFFFF">Full Name:<input type="text" placeholder = "J. Doe" name = "signature" id = 'signature' /></li>
<li style = "color: #FFFFFF">E-mail:<input type="text" placeholder = "www.example#examplemail.com" name = "address" id = 'address' /></li>
<li style = "color: #FFFFFF">Message:<input type = "text" placeholder = "Message" name = "message" id = 'message' /></li>
Submit
</ul>
</form>
does anyone know how to change the code to allow the user input to go onto the email? Thanks a lot in advance x

Try writing a function like this:
function sendEmail(){
var addr = document.getElementById('address').value;
var sig = document.getElementById('signature').value;
var msg= document.getElementById('message').value;
//concatenate to string to build URL
var url = "mailto:" + .... + addr + ...;
location.href = url; //(might want to use window.location or something else here)
}
And then change your link to:
Submit

You'll have to use javascript to obtain the input values. With onclick="javascript:window.location='putURLhere'" you can imitate a link. What's left now is to create a URL that contains your values, which you can get with document.getElementById(id).value. With + you can concatenate them.
Example:
<a onclick="javascript:window.location='mailto:?subject=Message from '+document.getElementById('address').value+'&body='+document.getElementById('message').value">Submit</a>
I hope this helps!

Not completely sure what you are asking by "allow the user input to go onto the email", but using document.getElementById('signature').value will return the input's value. You can then include that in your post/get.