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 },
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 am trying to run a simple contact form with html and javascript. I am trying to get filled out a contact form and then post the data to api. Upon page load I immediately get an error for Unhandled promise rejection.
HTML is:
<form id="contact-form"method="post" class="form-horizontal contact-form" action="#">
<!-- Honeypot SPAM Protection -->
<input type="text" name="cf[honeypot]" style="display: none">
<!-- END Honeypot SPAM Protection -->
<div class="form-group">
<div class="col-md-6">
<input type="text" name="cf[name]" class="form-control required" placeholder="İsim">
</div>
<div class="col-md-6">
<input type="email" name="cf[email]" class="form-control required email" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="col-md-6">
<input type="url" name="cf[url]" class="form-control url" placeholder="URL">
</div>
<div class="col-md-6">
<input type="text" name="cf[subject]" class="form-control required" placeholder="Konu">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<textarea name="cf[message]" rows="6" class="form-control required" placeholder="Mesaj"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="submit" value="Gönder" class="btn btn-sm btn-block btn-primary">
</div>
</div>
</form>
<script type="text/javascript" src="assets/js/signup.js"></script>
And the javascript code is:
$(document).ready(function() {
$("contact-form").submit(function(e){
e.preventDefault();
var form=this;
var URL = "https://v9jg33e7pa.execute-api.us-east-1.amazonaws.com/beta/sendemail/";
var data = {
name: $(form).find("#cf[name]").val(),
email: $(form).find("#cf[email]").val(),
urlContact: $(form).find("#cf[url]").val(),
subject: $(form).find("#cf[subject]").val(),
message: $(form).find("#cf[message]").val()
};
console.log(data);
if (""===$(form).find("#cf[honeypot]").val()){
$.ajax({
type: "POST",
url: URL,
dataType: "json",
contentType: "application/json",
data: JSON.stringify(data),
success: function () {
// clear form and show a success message
alert("yay");
},
error: function () {
// show an error message
alert("boo");
},
});
}
});
});
But when loading the page I get the following error:
Could not figure out what I am doing wrong?
I have problem with formspree email response...
I managed to avoid redirecting to them site after click on submitting button.
That looks like this:
var message = "";
$("#sendMessage").on("click", function() {
message = $("#contactform").serialize();
$.ajax({
url: "//formspree.io/example#gmail.com",
method: "POST",
data: {
message: message
},
dataType: "json"
});
alert('Thanks for the email, we\'ll be in touch promptly.');
return true;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form id="contactform" method="POST">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Name</span><br>
<input name="NAME" type="text" name="name" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Email</span><br>
<input name="EMAIL" type="email" name="_replyto" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Subject</span><br>
<input name="SUBJECT" type="text" name="subject" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Description</span><br>
<textarea name="DESCRIPTION" name="description" class="form-control" rows="4" cols="60" required></textarea>
</div>
<input type="text" name="_gotcha" style="display:none" />
<button id="sendMessage">Send</button>
</div>
</form>
But when my mail arrives on email....
That looks like this:
NAME=Johan+Doe&EMAIL=johandoe#gmail.com&SUBJECT=Some+topic&DESCRIPTION=there+some+text
Does anyone know how I can make the email form look tidy when it arrives?
Thanks in advance!
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.
I'm need to create a form that sends an ajax request everytime a form element is changed using the jQuery change event. I was able to get the form input values to show up in spans by doing this:
<form id="TestForm" class="form-horizontal">
<div class="form-group">
<label for="namefirst" class="col-sm-2 control-label">First Name</label>
<div class="col-sm-6">
<input id="firstname" type="text" name="firstname" class="form-control" placeholder="Enter your first name" /><span id="spanfirstname"></span>
</div>
</div>
<div class="form-group">
<label for="namelast" class="col-sm-2 control-label">Last Name</label>
<div class="col-sm-6">
<input id="lastname" type="text" name="lastname" class="form-control" placeholder="Enter your last name" /><span id="spanlastname"></span>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-6">
<div class="left-inner-addon"> <i class="glyphicon glyphicon-envelope"></i>
<input id="email" type="text" name="email" class="form-control" placeholder="Enter your email" /><span id="spanemail"></span>
</div>
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-2 control-label">Phone</label>
<div class="col-sm-6">
<div class="left-inner-addon"> <i class="glyphicon glyphicon-phone-alt"></i>
<input id="phone" type="text" name="phone" class="form-control" placeholder="Enter your phone number" /><span id="spanphone"></span>
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-6">
<input id="password" type="password" name="password" class="form-control" placeholder="Enter a password" /><span id="spanphone"></span>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label"></label>
<div class="col-sm-6">
<button class="button green major beeboop" name="button" type="submit">This is a test</button>
</div>
</div>
</form>
<div id="result"></div>
<div class="row spacer"></div>
</div>
<!-- /container -->
<script src="//code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#firstname').change(function() {
$('#output_firstname').val($(this).val());
$('#spanfirstname').html('<b> TestForm: firstname:' + $(this).val() + '</b>');
});
$('#lastname').change(function() {
$('#output_lastname').val($(this).val());
$('#spanlastname').html('<b>' + $(this).val() + '</b>');
});
$('#email').change(function() {
$('#output_email').val($(this).val());
$('#spanemail').html('<b>' + $(this).val() + '</b>');
});
$('#phone').change(function() {
$('#output_phone').val($(this).val());
$('#spanphone').html('<b>' + $(this).val() + '</b>');
});
$('#password').change(function() {
$('#output_password').val($(this).val());
$('#spanpassword').html('<b>' + $(this).val() + '</b>');
});
});
</script>
I tried the wrap the ajax request in the change event function with no success:
<script>
$(document).ready(function() {
$('#firstname').change(function() {
jQuery.post("ajax-process.cfm", {
firstname: jQuery('#firstname').val()
}, function(data) {
});
return false;
});
});
</script>
#omar-ali #Anil Namde Updated the code. But now I'm only getting the first value in the console:
$("input[type='text']").change(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
var email = $("#email").val();
$.ajax({
url : "ajax-process.cfm",
type: "POST",
data: {
firstname: firstname,
lastname: lastname,
email: email
},
success: function(data) {
$("#simple-msg").html('<pre><code>' + data + '</code></pre>');
}
});
});
I tried your code, but instead of calling any ajax request, I just put a console.log('testing');
It works.
I guess what you don't realize (my feeling) is that.. the change is called not as you type..but once you lose focus from the text-box.
Also, it's better to use
var getallyourvalshere = $('#firstname').val();
$.post('linktoyourscript.php',{ firstname: getallyourvalshere }, function(data) {
//do stuff, console.log(data);
});
Why are you using return false;