Develop Reference

Required Field without Submit button after Ajax

I am trying to have my all my text/email input forms have a required attribute before you can "Submit" The email
But since I am using some Ajax to keep the page from refreshing after pressing the button the required attribute will not work.
This is why I am asking for an alternative for required with Javascript or jQuery (trying to prevent email form spam).
HTML (FORM)
<form id="contact">
<div class="form-group">
<label for="name">Voornaam*</label>
<input name="fn" type="text" class="form-control" id="fn" required>
</div>
<div class="form-group">
<label for="name">Achternaam*</label>
<input name="ln" type="text" class="form-control" id="ln" required>
</div>
<div class="form-group">
<label for="email">Email-address*</label>
<input name="email" type="email" class="form-control" id="email" required>
</div>
<div class="form-group">
<label for="message">Bericht*</label>
<textarea name="message" required class="form-control" id="message" rows="6"></textarea>
</div>
<button type="button" onClick="doIets(); this.form.reset();"
name="submit" id="submit" class="btn btn-primary">Verstuur <span id="result"></span></button>
<div id="result2"></div>
</form>
Ajax script
<script type="text/javascript">
function doIets()
{
console.log("doe iets");
var data = {
ck: (new Date()).getTime(),
fn: $("#fn").val(),
ln: $("#ln").val(),
email: $("#email").val(),
message: $("#message").val()
};
$.ajax({
type: "POST",
url: "sendmail.php",/*php file path*/
data: data,
beforeSend: function(){
$('#result').html('<img src="loader" style="height:10px;"/>')
},
success: function(data){
$('#result').hide();
$('#result2').html(data);
}
});
}
</script>

You will need to use e.preventDefault() when they click on the submit button and then validate the form and after that submit it using the ajax call you created above.

since you already read out the data, you can check whether your message is long enough for you via
data.message.length
if it is 0 (or lower than a threshold you defined), you can skip the ajax call and return some info to the user.
You might also want to trim the message first in order to be sure there aren't only whitespace in there.

Here is part from my code, where I bind the submit event to my form and check by looping if any required field is empty or if I want to do any such thing.
This way may help you--
$('.form .contact-form').submit(function(e) {
e.preventDefault();
$('.form .message').eq(0).html("<i>Sending... Please Wait...</i>");
var form = $(this);
var validated = true;
$('input[type="text"]',this).each(function(){
if($(this).val().length < 1){
$(this).addClass('error').focus();
validated = false;
return false;
}
});
if(validated === true){
$.post(__asyn.ajaxurl, $('.form form').eq(0).serialize(), function(data, textStatus, xhr) {
console.log(data);
});
}
});

Just pass the event object to your handler onClick="doIets(event);
and then add
function doIets(event) {
event.preventDefault();
...
}

after jquery validating, $.ajax return the html source code?

I have a problem when validating a form, the fields are correctly checked, but it return the current html source code instead of the value inside "ctrl.php", in other words the stuff inside the "success bloc" is done but I get nothing from "ctrl.php", just the current page in html is returned:(
Any idea ?
$("#form_contest").validate({
submitHandler: function(form){
var email=$("#email").val();
$.ajax({
url: "ctrl.php",
data:{name:$("#name").val(),email:email},
success: function(data){
alert(data); //data is the current source code??
//other stuff after is okay
}
});
return false;
}
});
the html form :
<form id="form_contest" method="post">
<input type="text" id="name" name="name" />
<input type="text" id="email" name="email" />
<input type="submit" id="submit-contest" name="submit-contest" value="Enter" />
</form>
ctrl.php :
<?php
echo 1;
?>

the page ctrl.php couldn't be reached and I had an nginx rule that redirected 404 error to the homepage. Not easy to find.. but that's why ajax always gave me the homepage source code..

How to prevent from page refresh on submit button click

i have form with one input and one submit button.
<form method='POST' action='' enctype='multipart/form-data' id="form_search">
<input type='hidden' name="action" id="form_1" value='1' />
</span><input id="query" type="text" name="mol" value="">
<input type='submit' value='Search' name="Search" id="Search" />
on form submission form input data goes to php below code
if (isset($_POST['Search'])) {
$_SESSION["query"] = $_POST["mol"];
$_SESSION["action"] = $_POST["action"];
}
i want to avoid page refresh on form submission. i tried e.preventDefault() and return false;
methods in my java script but not working(this methods helping me from page refresh but does not allowing me to send data to php code)
please help me out of this problem, please suggest working ajax code for this problem.

Page refresh will delete you previous data so to reserve it you can use $.post() or $.ajax()
You can prevent page refreshing by adding one of these two things in event handler function
for pure js
return false;
for jquery you can use
e.preventDefault(); // e is passed to handler
Your complete code will be something like
using $.post() in js
function checkfunction(obj){
$.post("your_url.php",$(obj).serialize(),function(data){
alert("success");
});
return false;
}
html
<input type='submit' onclick="return checkfunction(this)" />
or same effect with onsubmit
<form onsubmit="return checkfunction(this)" method="post">

Without ajax you can simply add the checked attribute in PHP. So for example if your radio group has the name radio and one has value a, the other b:
<?php
$a_checked = $_POST['radio'] === 'a';
$b_checked = $_POST['radio'] === 'b';
?>
<input type="radio" name="radio" value="a"<?=($a_checked ? ' checked' : '')?>></input>
<input type="radio" name="radio" value="b"<?=($b_checked ? ' checked' : '')?>></input>
So when a user submits the form and you display it again, it will be like the user submitted it even the page refreshes.

<input type="radio" name="rbutton" id="r1">R1
<input type="radio" name="rbutton" id="r2">R2
<input type="button" id="go" value="SUBMIT" />
<div id="result"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#go').click(function(){
var val1 = $('input:radio[name=rbutton]:checked').val();
var datastring = "partialName="+val1;
$.ajax({
url: "search.php",
type: "POST",
data: datastring,
success: function(data)
{
$("#result").html(data);
}
});
});
});
</script>

After ajax form submission, the page reloads when it's not supposed to

I want voting form (in index.php) to submit without the page reload and get results from external page in index.php
HTML
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
</head>
<div class="polling" id="polling_id">
<br><br>
<form id="poll_form" method="POST" action="process-vote.php" />
<div class="poll_objects">
<input type="hidden" name="o1" value="<?php echo $option1; ?>" />
<input type="hidden" name="o2" value="<?php echo $option2; ?>" />
<input type="hidden" name="o3" value="<?php echo $option3; ?>" />
<span class="footer_font"><input type="radio" name="radio_1" value="<?php echo $option1;?>" id="radio" /><label for="radio"><?php echo $option1;?></label> </span><br><br>
<span class="footer_font"><input type="radio" name="radio_1" value="<?php echo $option2;?>" id="radio2" /><label for="radio2"><?php echo $option2;?></label></span><br><br>
<span class="footer_font"><input type="radio" name="radio_1" value="<?php echo $option3;?>" id="radio3" /><label for="radio3"><?php echo $option3;?></label></span><br><br>
<div class="float_buttons">
<input type="submit" name="submit_vote" value="Vote!" class="button" />
<input type="submit" name="results" value="Poll Results" class="button"/>
</div>
</div>
</div>
</form>
Ajax
<script>
$(document).ready(function() {
$.ajax({
$('#poll_form').submit(function(e) {
e.preventDefault();
// note where the e comes from.
var a = $(this).serialize();
$("#polling_id").load("poll-results.php");
});
});
});
</script>
Looking at this coding, for me it seems everything is correct. However the page opens the action page of the form. Please provide help.

First of all your code does not compile, because you are not doing an ajax call, you are passing a form submit to an object literal which will cause an error after the execution of form submit, that why your form is reloading.
<script>
$(document).ready(function() {
$.ajax({ //this is object literal notation and you are returning a function value to it... doesn't make any sense.
$('#poll_form').submit(function(e) {
e.preventDefault();
// note where the e comes from.
var a = $(this).serialize();
$("#polling_id").load("poll-results.php");
});
});
});
</script>
Also an ajax call should look like this:
$.ajax({
url: "test.html",
cache: false
})
.done(function( html ) {
$( "#results" ).append( html );
});
See this link it's all here.
Also if you are trying to perform a load of data based on the jquery.load you shouldn't perform a submit, but you can send data within your load request:
$( "#feeds" ).load( "feeds.php", { limit: 25 }, function() {
alert( "The last 25 entries in the feed have been loaded" );
});
Here you are passing parameter limit, but you can be passing name, address, age, etc.
See load documentation here, there is no need for you to perform a submit.
Regards.

Just remove the ajax call and try if it works
$(document).ready(function() {
$('#poll_form').submit(function(e) {
e.preventDefault();
// note where the e comes from.
var a = $(this).serialize();
$("#polling_id").load("poll-results.php");
});
}

Submit form to other page

I need help with submiting data form #send_form to #f_from in another page.
<script type="text/javascript">
function post_form() {
$('#send_form').action = "form01.html";
$('#send_form').submit();
return false;
}
</script>
<form id='send_form' action='form01.html' method='POST' onsubmit="post_form();">
<input type="text" name="f_in01" value="User" />
<input type="text" name="f_in02" value="12345" />
<input type="submit" />
</form>
The form01.html
<script type="text/javascript">
function f_res()
{
var res01=document.f_form.f_in01.value;
var res02=document.f_form.f_in02.value;
var result = res01 + " " + res02;
document.f_form.f_out01.value=result;
}
</script>
<form id="f_form" onSubmit="f_res();return false;">
<input type="text" name="f_in01" /><br>
<input type="text" name="f_in02" /><br>
<br>
<input type="submit" onClick="f_res();" value="Enter w/Sub" /><br>
<input type="text" name="f_out01" />
</form>
Now it doesn't work. The data doesn't post in page01.html

Have you tried
$('#send_form').attr('action', "form01.html");
instead of
$('#send_form').action = "form01.html";
check out this fiddle

Amin is right, but in jQuery, when an event handler returns false, it amounts to the same as e.preventDefault(); e.stopPropagation(). Essentially, you cancel the event. Try returning true, instead of false.
If you don't want the page to change, you'll have to look at AJAX to post the form data.

You want AJAX for this something like:
$('#button').click(function(){
$.ajax({
type:"POST", //php method
url:'process.php',//where to send data...
cache:'false',//IE FIX
data: data, //what will data contain (no SHIT Sherloc...)
//check is data sent successfuly to process.php
//success:function(response){
//alert(response)
//}
success: function(){ //on success do something...
$('.success').delay(2000).fadeIn(1000);
//alert('THX for your mail!');
} //end sucess
}).error(function(){ //if sucess FAILS!!
alert('An error occured!!');
$('.thx').hide();
});
});