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.
Related
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/
I'm trying to build a User interface of an application where user could add ul and li element when clicking on add question, I successfully managed to develop the front end part here's a preview:
but the problem is when saving this to the database which is so overwhelming I'm stuck at this, is there any way to save the data to an array so I can display them with php, any idea is welcomed.
here's the jquery code:
wrapper.on("click", "button", function(e){
e.preventDefault();
var parent = $(this).parent().parent().parent().parent().parent().parent();
var parentID = $(this).attr('element-id');
var elementID = 1000000000000000000*Math.random();
parentIDs.push(elementID);
if($(this).attr('class') == "add_field_button btn btn-success"){
if(parent.find('ul').length){
parent.find('ul').first().append(`
<li>
<div class="panelcb white-box">
<div class="form-horizontal form-material">
<div class="form-group">
<label class="col-md-12">Question</label>
<div class="col-md-12">
<input type="text" placeholder="Your Question" value="testqst" class="question question`+parentID+` form-control form-control-line" parent-question="`+parentID+`" element-question="`+elementID+`"> </div>
</div>
<div class="form-group">
<label class="col-md-12">Response</label>
<div class="col-md-12">
<input type="text" placeholder="Your Response" value="testqst" class="response response`+parentID+` form-control form-control-line" parent-response="`+parentID+`" element-response="`+elementID+`"> </div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<button class="add_field_button btn btn-success" element-id="`+elementID+`">Add Question</button>
</div>
<div class="col-sm-4">
<button class="delete_field_button btn btn-error" >Delete</button>
</div>
</div>
</div>
</div>
</div>
</li>`);
}else{
$(this).closest('li').append(`
<ul><li>
<div class="panelcb white-box">
<div class="form-horizontal form-material">
<div class="form-group">
<label class="col-md-12">Question</label>
<div class="col-md-12">
<input type="text" placeholder="Your Question" value="testqst" class="question question`+parentID+` form-control form-control-line" parent-question="`+parentID+`" element-question="`+elementID+`"> </div>
</div>
<div class="form-group">
<label class="col-md-12">Response</label>
<div class="col-md-12">
<input type="text" placeholder="Your Response" value="testqst" class="response response`+parentID+` form-control form-control-line" parent-response="`+parentID+`" element-response="`+elementID+`"> </div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<button class="add_field_button btn btn-success" element-id="`+elementID+`">Add Question</button>
</div>
<div class="col-sm-4">
<button class="delete_field_button btn btn-error" >Delete</button>
</div>
</div>
</div>
</div>
</div>
</li></ul>`);
}
}else if($(this).attr('class') == "delete_field_button btn btn-error"){
parent.remove();
}
Thanks is advance.
Well...
If the whole user-interative-area, I'd call a playground, can be put inside a container:
<div id='playground'>
.. all the ul's and li's..
</div>
And if you've got a form or something else:
<form action='/' id='form-playground' method='post'>
<textarea id='playground-container' name='playground' class='hidden'>
</textarea>
<input type='submit' value='Save My Playground'>
</form>
Then on submit you can copy the contents of the the playground to a hidden textarea:
$(document).ready(function () {
$('#form-playground').on('submit', function () {
$('#playground-container').html($('#playground').html());
return true;
});
});
Or perhaps an AJAX post:
$.post( PostUrl, { playground: $('#playground').html() } );
I would like to create contact us web page without refreshing the page when click send button. My code bellow, but there are some problems:
1- The page is refreshed after submitting the form.
2- The value of the Contact form inputs appear in the URL after submitting the form. check this image
3- The confirmation message appears for 0.25 seconds then disappear or does not appear.
4- The email is not received to my email address when I use Firefox browser.
Please help me to solve those problems.
HTML
<div class="col-sm-8 col-sm-offset-2" id="mail-status">
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-8 col-xs-12 col-sm-offset-2">
<div class="well">
<form class="form-horizontal">
<fieldset>
<legend class="legend-title">I'd <span class="heart"><i class="fa fa-heart"></i></span> to contact you!</legend>
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputName" name="name" placeholder="Name" required="required">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email" required="required">
</div>
</div>
<div class="form-group">
<label for="inputSubject" class="col-sm-2 control-label">Subject</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSubject" name="subject" placeholder="Subject" required="required">
</div>
</div>
<div class="form-group">
<label for="textAreaMessage" class="col-sm-2 control-label">Message</label>
<div class="col-sm-9">
<textarea class="form-control" rows="5" id="textAreaMessage" name="message" placeholder="Message" required="required" minlength=5 ></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-3 col-sm-offset-8">
<button type="submit" class="btn btn-primary right-button" id="send" onClick="sendContact()">Send</button>
</div>
</div>
</fieldset>
</form>
Javascript
function sendContact() {
jQuery.ajax({
url: "send_email.php",
data:'inputName='+$("#inputName").val()+'&inputEmail='+$("#inputEmail").val()+'&inputSubject='+$("#inputSubject").val()+'&textAreaMessage='+$(textAreaMessage).val(),
type: "POST",
success:function(data){
$("#mail-status").html(data);
},
error:function (){}
});
}
php
<?php
$toEmail = "*****#***.com";
$mailHeaders = "From: " . $_POST["inputName"] . "<". $_POST["inputEmail"] .">\r\n";
if(mail($toEmail, $_POST["inputSubject"], $_POST["textAreaMessage"], $mailHeaders)) {
print "<div class='alert alert-success'> <button type='button' class='close' data-dismiss='alert'>×</button> Thank you for your email! I will be in touch.</div>";
} else {
print "<div class='alert alert-danger'> <button type='button' class='close' data-dismiss='alert'>×</button> We are sorry, but there is a problem. Please Make sure all fields are filled!</div>";
}
?>`
Get rid of the inline onclick() event in your HTML, and let your JavaScript handle the click:
$('#send').click(function(e){
e.preventDefault();
sendContact();
});
preventDefault() stops the click event from acting normally, so your form data is submitted without reloading the page.
Hello I am working with MEAN Stack application.When I add record data stored
Successfully. But When I don't fill any field and click add button which is
Calling function for store record My function working properly But I used the
Validation field is required but function working and redirect my given path.
new data is not storing but why function is working.
function in controller
$scope.adduser = function()
{
$http({
method:"POST",
url:'api/adduser',
data:{name:$scope.name, email:$scope.email,password:$scope.password}
}).then(function successCallback(response) {
if(response.data.error){
$scope.error = response.data.error;
}else{
$scope.Blog=response.data;
$localStorage.dd=$scope.Blog;
$location.path('/allusers');
}
//console.log(response);
}, function errorCallback(response) {
alert("data is not comming here");
});
}
message show field is required but not stay there go to the given path when
response success. how to resolved this problem
view file is
<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
Advanced Datatables <small>advanced datatable samples</small>
</h3>
<div class="page-bar">
<ul class="page-breadcrumb">
<li>
<i class="fa fa-home"></i>
Home
<i class="fa fa-angle-right"></i>
</li>
<li>
All Users
</li>
</ul>
</div>
<div class="row">
<div class="col-md-12">
<!-- BEGIN VALIDATION STATES-->
<div class="portlet box blue-hoki">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>
New User
</div>
</div>
<div class="portlet-body form">
<form id = "expensesCreate" class="form-horizontal">
<div class="form-body">
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
You have some form errors. Please check below.
</div>
</div>
<div class="form-group">
<label for="price" class="col-sm-3">Name</label>
<div class="col-sm-4 #if($errors->has('price')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="first_name" name="name" ng-model="name" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-group">
<label for="price" class="col-sm-3">Email</label>
<div class="col-sm-4 #if($errors->has('price')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="email" name="email" ng-model="email" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-group">
<label for="Phone_no" class="col-sm-3">Password</label>
<div class="col-sm-4 #if($errors->has('Phone_no')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="phone_no" name="company_name" ng-model="password" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button ng-click="adduser()" class="btn blue-hoki">Add</button>
<a ng-href="#/allusers">
<button type="button" class="btn default" id="cancel">Cancel</button>
</a>
</div>
</div>
</div>
</div>
</form>
<!-- END FORM-->
</div>
</div>
<!-- END VALIDATION STATES-->
</div>
</div>
<style>
.form-horizontal .form-group {
margin-right: -15px;
margin-left: 0px;
}
</style>
Add disabled attribute on your button validation while the form is invalid
<button ng-click="adduser()" class="btn blue-hoki" ng-disabled="expensesCreate.$invalid">Add</button>
Im trying to create a contact form by send data to a php script to send mail from a form in a sammy.js app. I've set it up as follows and it doesn't work. Can anyone explain why and get me in the right direction to fix it? Thanks!
html form:
<form class="form-horizontal" action="#/submitcontact">
<fieldset>
<div class="control-group">
<label class="control-label" for="input01">Your Name:</label>
<div class="controls">
<input type="text" class="input-xlarge" id="from-name">
<p class="help-block">Nice to know who the message is from.</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">Your Email:</label>
<div class="controls">
<input type="text" class="input-xlarge" id="from-email">
<p class="help-block">Supply an email so I can reply.</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">Your Message:</label>
<div class="controls">
<textarea class="input-xlarge" id="from-msg"></textarea>
<p class="help-block">Including a message is always nice.</p>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn" style="position:relative;float:center;">Send!</button>
</div>
</div>
</div>
</fieldset>
</form>
On submit it posts to the route #/submitcontact:
this.post('#/submitcontact', function(context) {
$.post("mail.php", this.params,
function(data) {
alert("Data Loaded: " + data);
});
});
Try passing each value to function post. Modify the code like this:
context = $('form').serialize();
$.post('#/submitcontact', function(context) {
$.post("mail.php", this.params,
function(data) {
alert("Data Loaded: " + data);
});
});
Maybe this could work.