Posting data to php script with sammy.js - javascript

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.

Related

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?

Jquery Valid() function only apply on 1st element

I am intend to use javascript to submit the form. Before I want to submit the form, I need to validate my form.
The following is my code :
alert("OP Please edit me to add the validation script code, cdn link or something. Add code that triggers the validation.");
function validateForm1() {
$("#addMapForm").validate();
$('#addMapForm').valid();
console.log($('#addMapForm').valid());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<form enctype="multipart/form-data" action="/Admin/AddMap" method="post" id="addMapForm">
<div>
<br />
<br />
<div class="col-md-12">
<div class="form-group">
<label>Location Name *</label>
<input class="form-control" required />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Unit/ Floor Number</label>
<input class="form-control" />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Address*</label>
<textarea class="form-control" style="height:100px" required></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Town/ City *</label>
<input class="form-control" required />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Zip Code*</label>
<input class="form-control" required/>
</div>
</div>
</div>
</form>
You are missing names on the inputs. A form will only submit named controls and validation plugin won't validate anything without a name
The required fields work fine once you add them
$("#addMapForm").validate();
$("#addMapForm").valid();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<form enctype="multipart/form-data" action="/Admin/AddMap" method="post" id="addMapForm">
<div>
<br />
<br />
<div class="col-md-12">
<div class="form-group">
<label>Location Name *</label>
<input name="location" class="form-control" required />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Unit/ Floor Number</label>
<input name="unit" class="form-control" />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Address*</label>
<textarea name="address" class="form-control" style="height:100px" required></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Town/ City *</label>
<input name="city" class="form-control" required />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Zip Code*</label>
<input name="zip" class="form-control" required/>
</div>
</div>
</div>
<button>Submit</button>
</form>
I assume you are using this: https://jqueryvalidation.org/validate/
Have you implemented the rules of validation for other elements?
rules (default: rules are read from markup (classes, attributes, data))
So either you have those defined in HTML or you need to define them inside validate function called before you called .valid().
Here is an examle:
$("#myform").validate({
rules: {
// simple rule, converted to {required:true}
name: "required",
// compound rule
email: {
required: true,
email: true
}
}
});
In short for more precise help we need all the relevant code or fiddle, plunker a demo showing the example of the problem you are facing.
Try this solution.
$('.form-control').each(function() {
$(this).validate();
$(this).valid();
}
I tried to use the following js to validate all my form, however i know the following code is not the best answer, it only able to show the error message on the first input element.
I am welcome to anyone to post better answer than this.
function validateForm() {
var result = true;
$("#addMapForm").each(function () {
$(this).find(':input').each(function () {
if ($(this).valid() == false) {
result = false;
return;
}
});
});
return result;
}
I gave your form inputs some name attributes. Not sure if you added the actual code to your page, so I did so here. I added a button to trigger just for a demo. I added the simplest bit of CSS.
$("#validateme").on('click', function() {
console.log("validating");
let Validator = $("#addMapForm").validate();
Validator.form();
console.log(Validator.valid());
});
.error { color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
<form enctype="multipart/form-data" action="/Admin/AddMap" method="post" id="addMapForm">
<div>
<br />
<br />
<div class="col-md-12">
<div class="form-group">
<label>Location Name *</label>
<input class="form-control" name="location" required type="text"/>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Unit/ Floor Number</label>
<input class="form-control" />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Address*</label>
<textarea class="form-control" name="address" style="height:100px" required></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Town/ City *</label>
<input class="form-control" required type="text"/>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Zip Code*</label>
<input class="form-control" name="zip" required />
</div>
</div>
</div>
<button id="validateme" type="button">Do validate</button>
</form>

contact us web page using Ajax and php

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.

Pass form results to another form into a form value

I have two forms on a page the "top form" searches for movies and I'm trying to get the data found from the top form and pass it as a value to the bottom form so it can get entered into a database.
I am unable to do this but, I can get the results to be displayed on the page. Here is my code:
TOP FORM DATA
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<?php
$squery="";
if(isset($_GET["squery"]))
{
$squery=$_GET["squery"];
}
?>
<div class="col-xs-8 col-xs-offset-2">
<form action="#" method="GET" class="form-horizontal">
<div class="form-group">
<label for="newMovieName" class="col-sm-3 control-label">Search what movie?</label>
<div class="col-sm-9"> <input type="text" name="squery" class="form-control"><br />
<input type="submit" value="Submit" class="btn btn-success"></div></div>
</form>
<script type="text/javascript" charset="utf-8">
var api_key = '6969696969696969696969696969696';
$(document).ready(function(){
$.ajax({
url: 'http://api.themoviedb.org/3/search/movie?api_key=' + api_key + '&query=<?php echo $squery; ?>',
dataType: 'jsonp',
jsonpCallback: 'testing'
}).error(function() {
console.log('error')
}).done(function(response) {
var i=0;
// for (var i = 0; i < response.results.length; i++) {
$('#search_results').append('<li>' + response.results[i].title + '</li>');
// }
$('#search_results_title').append(response.results[i].title);
$('#search_results_release').append(response.results[i].release_date);
$('#search_results_overview').append(response.results[i].overview);
$('#search_results_poster').append('https://image.tmdb.org/t/p/w185' + response.results[i].poster_path);
$('#search_results_votes').append(response.results[i].vote_count);
});
});
</script>
TOP FORM RESULTS
Here is where the results are displayed from the form above BUT, I would like these results to be displayed as a value in the form below.
<h3>Results</h3>
<p id="error"></p>
<ul id="search_results_title"></ul>
<ul id="search_results_release"></ul>
<ul id="search_results_overview"></ul>
<ul id="search_results_poster"></ul>
<ul id="search_results_votes"></ul>
BOTTOM FORM DATA
Here is the bottom form that SHOULD get submitted to the database with the "Results" that are above as the value.
<form class="form-horizontal" role="form" action="processmovie.php" method="get" enctype="text/plain">
<div class="form-group">
<label for="newMovieName" class="col-sm-3 control-label">Title</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="newMovieName" name="movie_name" placeholder="Movie Title" required value="">
</div>
</div>
<div class="form-group">
<label for="movieYear" class="col-sm-3 control-label">Year</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="movieYear" name="movie_year" placeholder="Year" required>
</div>
</div>
<div class="form-group">
<label for="movieBio" class="col-sm-3 control-label">Storyline</label>
<div class="col-sm-9">
<textarea type="email" class="form-control" id="movieBio" name="movie_bio" rows="4" placeholder="Enter Storyline" required></textarea>
</div>
</div>
<div class="form-group">
<label for="newImage" class="col-sm-3 control-label">Movie Cover URL</label>
<div class="col-sm-9">
<input type="text" id="newImage" class="form-control" name="movie_img" placeholder="Enter URL" required>
</div>
</div>
<div class="form-group">
<label for="movieRating" class="col-sm-3 control-label">Rating</label>
<div class="col-sm-9">
<select id="movieRating" name="movie_rating" class="form-control" required>
<option value="G">G</option>
<option value="PG">PG</option>
<option value="PG-13">PG-13</option>
<option value="R">R</option>
<option value="NR">NR (Not Rated)</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-success">Add Movie</button>
</div>
</div>
</form>
I tried to use a variaty of code to try and get the value here is an example: <?php echo $_GET['search_results_title'];?>
I've also found examples like this: How to pass the value of a form to another form? but, my forms are on the same page and not different ones.
As I said in my comment, you would just want to change your ajax call to something like this:
$.ajax({
url: 'http://api.themoviedb.org/3/search/movie?api_key=' + api_key + '&query=<?php echo $squery; ?>',
dataType: 'jsonp',
jsonpCallback: 'testing'
}).error(function() {
console.log('error')
}).done(function(response) {
var i=0;
$('#newMovieName').val(response.results[i].title);
$('#movieYear').val(response.results[i].release_date);
$('#movieBio').val(response.results[i].overview);
$('#newImage').val('https://image.tmdb.org/t/p/w185' + response.results[i].poster_path);
});
(I'm not sure about the relationship you have between response.results[i].vote_count and movieRating)
Here is a fiddle sort of showing the result, though I can't exactly replicate your code there because of the ajax calls

How to empty ajax loaded form?

How can we empty a ajax loaded form using pure JavaScript or jQuery.
I have tried document.forms[0].reset(); and $('#new-staff-form')[0].reset(); both didn't work it returns undefined.
Update
<div class="box col-md-12 new-staff">
<form id="new-staff-form" method="post">
<div class="row">
<div class="col-md-6">
<label for="f_name">First Name</label>
<input type="text" name="f_name" placeholder="First name"/>
</div>
<div class="col-md-6">
<label for="l_name">Last Name</label>
<input type="text" name="l_name" placeholder="Last name"/>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="user_name">User name</label>
<input id="user_name" type="text" name="user_name" placeholder="User name"/>
</div>
<div class="col-md-6">
<button id="user-avail" class="btn btn-primary">Check available</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary pull-left">Save</button>
</div>
</div>
</form>
</div>
Javascript:
$('#new-item').click(function(){ // works fine until I load new html form using ajax with same ids and class
$('#new-staff-form')[0].reset();
$('.new-staff').slideToggle(); // show new form
});
$('.edit-item').click(function(){ // ajax call this loads everything correctly
var id = $(this).data('staf_id'); //item to delete
$.ajax({
url:url_view_staff+id,
type:'get'
}).done(function(data){
edit_item_id = id;
$('.new-staff').html(data).slideDown();
}).fail(function(data){
$('#errors').html(data.responseText);
$('.valid-error').slideDown();
});
});
JavaScript:
document.getElementById("myForm").reset();
Jquery :
$('#form_id')[0].reset();
Make sure your form id is valid.
FIDDLE
$('#configreset').click(function(){
$('#configform')[0].reset();
});

Categories

Resources