Form submission not showing up in Firebase - javascript

I am making an HTML form and trying to store the results in firebase. Here is a picture of my Firebase layout:
However, when I submit the form, the entries do not go into Firebase, and I'm not sure why. Here is my HTML code in index.html:
<section id="input" class="section-padding wow fadeInUp delay-05s">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h2 class="service-title pad-bt15">Add a Marker</h2>
<p class="sub-title pad-bt15">If you are in need of assistance, fill out the details below, and a marker will be<br>placed on the map for others to view and respond to.</p>
<hr class="bottom-line">
</div>
</div>
</div>
<div class="contact-form">
<div id="sendmessage">Your message has been sent. Thank you!</div>
<div id="errormessage"></div>
<form id="markerForm" method="post" role="form" class="contactForm">
<div class="col-md-3"></div>
<div class="col-md-3">
<div class="form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" />
<div class="validation"></div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" />
<div class="validation"></div>
</div>
</div>
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<input type="text" class="form-control" name="address" id="address" placeholder="Address" />
<div class="validation"></div>
</div>
</div>
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" />
<div class="validation"></div>
</div>
</div>
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<textarea class="form-control" id="message" name="message" rows="5" placeholder="Message"></textarea>
<div class="validation"></div>
</div>
<center><button id="formbutton" type="submit" class="btn btn-primary btn-submit">SUBMIT</button></center>
</div>
</form>
</div>
</section>
Note that in the <head> tag in the HTML file, I am calling this:
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
And at the very beginning of <body>, I call this:
<script src="index.js"></script>
And here is my JS code in index.js:
var config = {
// my config details
};
firebase.initializeApp(config);
var ref = firebase.database().ref("markers");
var submit = function () {
var name = $("#name").val();
var email = $("#email").val();
var address = $("#address").val();
var subject = $("#subject").val();
var message = $("#message").val();
ref.push({
"name": name,
"email": email,
"address": address,
"subject": subject,
"message": message
});
};
$(window).load(function () {
$("#markerForm").submit(submit);
});
Please let me know what the problem is. thanks

By assigning the submit type to your button, your form is submitted before the Firebase push() method is triggered.
Changing the type to button and attaching a click event to this button, as follows, should do the trick:
HTML
<form id="markerForm" method="post" role="form" class="contactForm">
//...
<center><button id="formbutton" type="button" class="btn btn-primary btn-submit">SUBMIT</button></center>
</div>
</form>
JS (index.js)
var config = {
// my config details
};
firebase.initializeApp(config);
var ref = firebase.database().ref("markers");
var submit = function () {
var name = $("#name").val();
var email = $("#email").val();
var address = $("#address").val();
var subject = $("#subject").val();
var message = $("#message").val();
ref.push({
"name": name,
"email": email,
"address": address,
"subject": subject,
"message": message
})
.then(function(ref) {
console.log(ref.parent + "/" + ref.key);
})
.catch(function(error) {
console.log(error);
})
};
$("#formbutton").click(function() {
submit();
});
See the W3 specification for more detail on the button types.
Also do not forget to wrap your jquery code in $( document ).ready(), see https://learn.jquery.com/using-jquery-core/document-ready/

Related

How to hide or remove the search form from the page (Bootstrap 4) on clicking a button?

How can I get this search form and the Search Button to disappear from the page, since it will be replaced by a Thank you message?
<div class="row">
<div class="col">
<!-- ## SEARCH FORM ------------------------------------------------ -->
<form id="search-form" class="form-inline" onsubmit="handleFormSubmit(this)">
<div class="form-group mb-2">
<label for="searchtext">Enter your email</label>
</div>
<div class="form-group mx-sm-3 mb-2">
<input type="text" class="form-control" style='width:310px' id="searchtext" name="searchtext" placeholder="Search Text">
</div>
<button type="submit" class="btn btn-primary mb-2">Search</button>
</form>
<!-- ## SEARCH FORM ~ END ------------------------------------------- -->
</div>
</div>
I was trying something like:
//HANDLE FORM SUBMISSION
function handleFormSubmit(formObject) {
google.script.run.withSuccessHandler(createTable).processForm(formObject);
}
function saveData() {
var searchForm = document.getElementById('search-form')
var page = document.getElementById("page");
var table = document.getElementById("dtable");
//document.getElementById("search-form").reset();
page.innerHTML = "";
search-form... = ""//????
table.innerHTML = "<h4>Thank you!</h4>";
}
You have onsubmit="handleFormSubmit(this) so you better to add your <h4>Thank you!</h4> code inside of handleFormSubmit(), but anyway, you may do it like this:
<div class="row">
<div class="col">
<form id="search-form" class="form-inline" onsubmit="handleFormSubmit(this)">
<div class="form-group mb-2">
<label for="searchtext">Enter your email</label>
</div>
<div class="form-group mx-sm-3 mb-2">
<input type="text" class="form-control" style='width:310px' id="searchtext" name="searchtext" placeholder="Search Text">
</div>
<button type="submit" class="btn btn-primary mb-2" id="searchButton" onclick="saveData();">Search</button>
</form>
</div>
</div>
<script type="text/javascript">
function insertAfter(newNode, existingNode) {
existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
}
function saveData() {
var searchForm = document.getElementById('search-form');
var searchButton = document.getElementById("searchButton");
var thankYouDiv = document.createElement('div');
thankYouDiv.innerHTML = "<h4>Thank you!</h4>";
insertAfter(thankYouDiv, searchForm.lastElementChild);
}
</script>
var searchForm = document.getElementById('search-form');
var page = searchForm.parentElement;
// Set new result
page.innerHTML =

checkValidity() not showing any html5 error notifications when fields are empty and posting with Ajax

I have a form that posts using Ajax, I also want to set an HTML5 required attribute on some input fields, but this stops working as expected with Ajax.
So I did the following:
$("body").on("click",".register-button",function(e){
e.preventDefault();
if($('#registerform')[0].checkValidity()){
registerform = $(".register-form").serialize();
$.ajax({
type:'post',
url:"includes/registreren.php",
data:({registerform: registerform}),
success:function(data){
var content = $( $.parseHTML(data) );
$( "#registerresult" ).empty().append( content );
}
});
}else{
}
});
This way the form is not posted when empty, but I also don't get any notifications that fields are empty like I would get when only using HTML to post.
I also tried logging the validity like so:
$("body").on("click",".register-button",function(e){
e.preventDefault();
$check = $('#registerform')[0].checkValidity();
console.log($check);
registerform = $(".register-form").serialize();
$.ajax({
type:'post',
url:"includes/registreren.php",
data:({registerform: registerform}),
success:function(data){
var content = $( $.parseHTML(data) );
$( "#registerresult" ).empty().append( content );
}
});
});
Which shows false in my console when empty. So the code works, why are the HTML5 notifications not shown? I remember doing something similar in the past and I didn't have to add any custom error messages then, it just worked.
This is my HTML markup:
<form id="registerform" class="register-form" method="post">
<div class="row">
<div class="col-md-6">
<input type="text" name="voornaam" placeholder="Voornaam" required>
</div>
<div class="col-md-6">
<input type="text" name="achternaam" placeholder="Achternaam" required>
</div>
<div class="col-md-12">
<input type="text" name="bedrijf" placeholder="Bedrijfsnaam (optioneel)">
</div>
<div class="col-md-6">
<input type="text" name="telefoon" placeholder="Telefoonnummer" required>
</div>
<div class="col-md-6">
<input type="text" name="email" placeholder="E-mail" required>
</div>
<div class="col-md-3">
<input type="text" name="huisnummer" id="billing_streetnumber" placeholder="Huisnummer" required>
</div>
<div class="col-md-3">
<input type="text" name="tussenvoegsel" placeholder="Tussenvoegsel" required>
</div>
<div class="col-md-6">
<input type="text" name="postcode" id="billing_postcode" placeholder="Postcode" required>
</div>
<div id="postcoderesult" class="col-lg-12">
<div class="row">
<div class="col-md-6">
<input type="text" name="straat" placeholder="Straatnaam" readonly required>
</div>
<div class="col-md-6">
<input type="text" name="woonplaats" placeholder="Woonplaats" readonly required>
</div>
</div>
</div>
<div class="col-md-6">
<input type="password" name="password" placeholder="Wachtwoord (minimaal 6 tekens)" required>
</div>
<div class="col-md-6">
<input type="password" name="confirmpassword"placeholder="Herhaal wachtwoord" required>
</div>
<div id="registerresult">
</div>
</div>
<button type="button" name="submit" class="register-button">Account aanmaken</button>
</form>
What am I missing?

Ajax Call to send Email Not working.

I am very much new to JQuery. Guys can any one tell me what is wrong with my code I want to send an email through ajax and then populate a returned string in a div. I am trying to send the data from my view to my controller use the data and then send back a string to add in the Dom. How can i do that. Thanks in anticipation for your time and efforts. Cheers.
My View
<!-- Contact form -->
<form id="contact-form" name="contact-form" method="POST" data-name="Contact Form">
<div class="row">
<!-- Full name -->
<div class="col-xs-12 col-sm-6 col-lg-6">
<div class="form-group">
<input type="text" id="name" class="form form-control" placeholder="Write your name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Write your name'" name="name" data-name="Name" required>
</div>
</div>
<!-- E-mail -->
<div class="col-xs-12 col-sm-6 col-lg-6">
<div class="form-group">
<input type="email" id="email" class="form form-control" placeholder="Write your email address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Write your email address'" name="email" data-name="Email Address" required>
</div>
</div>
<!-- Subject -->
<div class="col-xs-12 col-sm-12 col-lg-12">
<div class="form-group">
<input type="text" id="subject" class="form form-control" placeholder="Write the subject" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Write the subject'" name="subject" data-name="Subject">
</div>
</div>
<!-- Message -->
<div class="col-xs-12 col-sm-12 col-lg-12 no-padding">
<div class="form-group">
<textarea id="text-area" class="form textarea form-control" placeholder="Your message here... 20 characters Min." onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your message here... 20 characters Min.'" name="message" data-name="Text Area" required></textarea>
</div>
</div>
</div>
<!-- Button submit -->
<button type="submit" id="valid-form" class="btn btn-color">Send my Message</button>
</form>
<!-- /. Contact form -->
<div id="block-answer">
<div id="answer"></div>
</div>
Script at the end of Body
$('#valid-form').click(function () {
var name = $('#name').val();
var email = $('#email').val();
var subject = $('#subject').val();
var message = $('#message').val();
$.ajax({
url: '/Home/SendMessage',
data: { 'name': name, 'email': email, 'subject': subject, 'message': message },
type: "post",
cache: false,
success: function (status) {
$('#answer').text(savingStatus);
},
error: function (xhr, ajaxOptions, thrownError) {
$('#answer').text("Error encountered while saving the message.");
}
});
});
My Controller
[HttpPost]
public string SendMessage(string name, string email, string subject, string message)
{
var savingStatus = "Success";
return savingStatus;
}
You are using string as field names, please replace data with this.
data: { name: name, email: email, subject: subject, message: message },

Load the values twice into two input fields onload

I am using local storage to save the username in the first-page.html and retrieving it into the second-page.html
But if I have two or more places in my second-page.html where I want the username to be retrieved, how can I achieve it using two different ids. Since the id once used cannot be used in another input field.
Can anyone please help.
Index.html:
<script>
function save(){
var fieldValue = document.getElementById('user').value;
localStorage.setItem('text', fieldValue);
}
</script>
<div class="form-group" id="login-fields">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"><span class="text--white glyphicon glyphicon-user"></span></i>
</span>
<input type="text" name="user" id="user" placeholder="Username" class="form-control" required/>
</div>
</div>
</div>
<input class="view sign-in-app" type="submit" value="Sign In" id="submit-login" onclick="save()" />
SecondPage.html
<script>
function load(){
var storedValue = localStorage.getItem('text');
if(storedValue){
document.getElementById('here').value = storedValue;
}
}
</script>
<body onload="load()">
<!-- first div -->
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<input type="text" name="userName" id="here" class="form-control" placeholder="Username" required>
</div>
</div>
</div>
<!-- second div -->
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group"> // change the id here
<input type="text" name="userName" id="here" class="form-control" placeholder="Username" required>
</div>
</div>
</div>
</body>
Just give each element different ids, really. No problem with that. And then when you set, set both:
if (storedValue) {
document.getElementById('here').value = storedValue;
document.getElementById('my-other-id').value = storedValue;
}

How to send an alert from node.js express function

Hi and thanks in advance,
I am using the following function in my main.js to send a contact us email. Upon success I am simply redirecting back to home.
How do I send the client a simple alert("Email Sent: Success"); to the client browser.
from main.js
app.use(bodyParser.json());
app.get('/sendMail', function(req, res){
res.sendFile("index.html"); // html file is within public directory
});
app.post('/sendMail',function(req,res){
var username = req.body.name;
var subject = req.body.subject;
var fromEmail = req.body.email;
var toEmail = 'support#domain.my';
var bodyMessage = req.body.message;
// var htmlData = 'Hello: ' + toEmail;
var mg = new Mailgun('key-0000000000000000000');
mg.sendText(fromEmail, toEmail,
'CS: '+subject,
bodyMessage,
fromEmail, {},
function(err) {
if (err)res.send('NOT SENT: STRUGGLE EVERYDAY');
else res.redirect('/');
// res.json({success: true});
// else res.send('Success: EMAIL SENT From: '+fromEmail+' - To: '+toEmail);
});
});
from my index.html page button to send..
<!-- START CONTACT FORM -->
<form method="POST" action="sendMail" accept-charset="UTF-8" class="contact-form" id="jvalidate" novalidate="novalidate">
<div class="row">
<div class="col-sm-12 col-md-4">
<div class="field-holder">
<input class="form-control input-lg field" placeholder="John Snow" name="name" type="text">
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="field-holder">
<input class="form-control input-lg field" placeholder="yourEmail#Address.com" name="email" type="email">
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="field-holder">
<input class="form-control input-lg field" placeholder="Subject" name="subject" type="text">
</div>
</div>
<div class="col-md-12 col-xs-12">
<div class="field-holder">
<textarea class="form-control" placeholder="Some text" name="message" cols="50" rows="10"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<div class="alert alert-success" role="alert" style="display: none;">
Message has been successfully sent.
</div>
<div class="alert alert-danger" role="alert" style="display: none;">
<div class="alert-text">Server error</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary btn-contact" type="submit" value="SEND MESSAGE">SEND MESSAGE</button>
</div>
</div>
</form>
<!-- END CONTACT FORM -->
If code does not allow it, are there any modules I can install for this ?
New to node and js. Thanks for the help.
res.json({success: true});
At the front end, you get response in using promise(JavaScript,jQuery,AngularJs..Whatever) and check for success property for your further businedd logic.

Categories

Resources