How to stop form from submitting using Jquery/Ajax - php

This is the code I have. I want to prevent the form from submitting if the message i receive from the php side is 0 (an error occured). If the message received is 1 I want to submit the form.
$(document).ready(function(){
$('#form').submit(function(e){
register();
});
});
function register(){
$.ajax({
type:"POST",
url:"submit.php",
data: $('#form').serialize(),
dataType: "json",
success: function(msg){
if(parseInt(msg)==1){
window.location=msg;
}
else if(parseInt(msg)==0){
$('#error_out').html(msg);
}
}
});
}

after register(); include return false;

$('#form').submit(function(e){
e.preventDefault();
//do whatever you want
});

As I understand ,Try use this:
if(parseInt(msg)==0){
$('#submit').attr('disabled','true');
}

after register(); include return false; if it doesn't work then rename register(); to register(e); and then include e.preventDefault(); e.stopPropagation(); hope it works.

Related

Execute php using jquery post

I've tried to go to php file using jquery.
Here is my code.
This is index.php
$.post('test.php',data,function(json){},'json');
This is test.php
//set session variable from passed data
$_SESSION['data1'] = $_POST['data1'];
<script>
window.open('test1.php','_blank');
</script>
This is test1.php
echo $_SESSION['data1'];
But this code is not working.
I want to pass data from index.php to test1.php.
How can I do this? I don't want to use GET method because of too long url.
Anyhelp would be appreciate.
I am not quite clear from you explanation right now. But I am here trying to resolve you problem as you can use the jquery post method as follows :
$.post('test1.php',{param1:value1,param2=value2,...},function(data){
//Here you can take action as per data return from the page or can add simple action like redirecting or other
});
Here is a simple example of register :
$.post('', $("#register_form").serialize(), function(data) {
if (data === '1') {
bootbox.alert("You have registered successfully.", function() {
document.location.href = base_url + '';
});
} else if (data === '0') {
bootbox.alert("Error submitting records");
} else {
bootbox.alert(data);
}
$("#user_register_button").button("reset");
});
Try this:
$.ajax({
url: 'test.php',
type: 'POST',
data: {
myData : 'somevalue'
},
success: function(response){ // response from test.php
// do your stuff here
}
});
test.php
$myData = $_REQUEST['myData'];
// do your stuff here
I like use jQuery post a url like this.
$('form').on('submit', function(e) {
e.preventDefault();
var $this = $(this);
$.ajax({
url: $this.attr('action'),
method: $this.attr('method'),
data: $this.serializeArray(),
success: function(response) {
console.log(response);
}
})
});
I you a beginner, you can reference this project
php-and-jQuery-messageBoard

Control Not going to the Controller

i am using codeigniter. I have set a form validation via jquery and after validation the data /control is not moving on to the Controller.
Here is my jquery code
var data1 = {
username:$("#username").val(),
password:$("#password").val()
}
$.ajax({
type:'POST',
url:base_url+"site/chk_info",
data:data1,
success: function (response){
alert (response);
},
error:function (){
alert ("Sorry we are getting problems plz try again latter");
}
}); // end ajax
Here is my controller method.
public function chk_info(){
return true;
}
The problem is in jquery the controll in not entering into the success function it always getting into the error function.
chk_info() is only returning true IF PHP was listening and acting upon it.
You should be echo-ing true like this instead:
public function chk_info(){
echo 'true';
}
try this i think its url problem
$.ajax({
type:'POST',
url:'<?php echo base_url() ?>site/chk_info',
data:data1,
success: function (response){
alert (response);
},
error:function (){
alert ("Sorry we are getting problems plz try again latter");
}
});

Jquery: unable to show load the respective pages while checking or unchecking the checkbox

I have a check box. I want to call two different php pages based on the checkbox checked and uncheck status.
But the below code is only calling the checked php pages.
What could be the reason?
<script type="text/javascript">
$(function()
{
$('input[id^="test"]').on('click',function()
{
if ($('input[id^="test"]').checked)//when users click to on checkbox to check
{
$.ajax({
url: "updatestatus.php?id="+$(this).val()+"&status=1",
success: function(data){
alert('Successfully updated...');
}
});
}
else//when users uncheck the checkbox
{ $.ajax({
url: "updatestatus.php?id="+$(this).val()+"&status=2",
success: function(data){
alert("uncheckde...");
}
});
}
});
});
</script>
And in page
<?php //checkbox in a while loop
echo " <input type='checkbox' id='test' value='".$row['id']."'/> ";
?>
As requested:
Try using $('input[id^="test"]').is(':checked') as the conditional. You can also use $(this) to reference the specific checkbox that triggered the event. So, here's your code cleaned up a bit:
<script>
$(function() {
$('input[id^="test"]').on('click',function(e) {
if ($(this).is(':checked') {
$.ajax({
url: "updatestatus.php?id="+$(this).val()+"&status=1",
success: function(data){
alert('Successfully updated...');
}
});
}
else {
$.ajax({
url: "updatestatus.php?id="+$(this).val()+"&status=2",
success: function(data){
alert("uncheckde...");
}
});
}
});
});
</script>
One other change I would make would be to assign a class to your checkboxes, and target that instead of using the "starts with" selector (since not every browser supports it).
It's your check for checked or not that isn't working. Use the .is(':checked') method instead.
$(document).ready(function() {
$('input[name=cbx]').change(function() {
if ($(this).is(':checked')) {
alert('Checked');
} else {
alert('Not Checked');
}
});
});
Try like this
$(function()
{
$('input[id^="test"]').on('click',function()
{
if ($(this).attr("checked") == "checked")//when users click to on checkbox to check
{
$.ajax({
url: "updatestatus.php?id="+$(this).val()+"&status=1",
success: function(data){
alert('Successfully updated...');
}
});
}
else//when users uncheck the checkbox
{ $.ajax({
url: "updatestatus.php?id="+$(this).val()+"&status=2",
success: function(data){
alert("uncheckde...");
}
});
}
});
});

Hiding div then posting form

I'm still working on my multi-stage form (http://jsfiddle.net/xSkgH/93/) and have incorporated the following solution to assist in ajax submit:
<script type="text/javascript">
$(document).ready(function() {
$("#postData").click(function() {
$("#last-step").hide(600);
$("#task5_booking").submit(function() {
$.post('resources/process2.php', function(data) {
$("#result").html(data);
});
});
return false;
});
});
</script>
It fades out the last step well but when it comes to loading up the content ot process2.php which is simply an array of all the form fields:
<?php
print_r($_POST);
?>
Nothing seems to happen at all. The div remains blank. Would really appreciate any help guys. Thanks in advance.
if you call a resource via ajax you should also pass the serialized form along the call. So assuming $("#task5_booking") is your form element
$("#task5_booking").submit(function(evt) {
evt.preventDefault();
$.post('resources/process2.php', { data: $("#task5_booking").serialize() }, function(data) {
$("#result").html(data);
});
});
When you submit the form
stop the default event (submit) otherwise the form submission stops immediately the subsequent code and the ajax call never starts - this is done using preventDefault() method;
make a post call, passing the form serialized with serialize() method (see http://api.jquery.com/serialize/).
Please also note that as pointed out by Jack your form in the fiddle has camperapplicationForm id and not task5_booking
I think you should remove your submit function:
<script type="text/javascript">
$(document).ready(function() {
$("#postData").click(function() {
$("#last-step").hide(600);
$.post('resources/process2.php', function(data) {
$("#result").html(data);
});
return false;
});
});
</script>
$(document).ready(function() {
$("#postData").click(function(e) {
e.preventDefault();
$("#last-step").hide(600);
$("#task5_booking").submit(function() {
$.post('resources/process2.php', $(this).serialize(), function(data) {
$("#result").html(data);
});
});
});
});

Forms/PHP/Ajax load?

I'm currently learning PHP. I've made a simple script # http://hash.techho.me, only thing is, I want the form to submit then load the results via AJAX, without the user leaving the page. Possible?
post the form using ajax
$.ajax({
url:'yoururl',
data:$("form").serialize(),
type:'POST',
success:function(data){
alert("success");
},
error:function(jxhr){
alert(jxhr.responseText);
}
});
jQuery.ajax() – jQuery API
Posting to the same page should do the trick. No need to use ajax for that
> <?php
>
> //do stuff with $_POST
> ?>
>
> <html> <body> <form method="post">
>
> <?php echo $result ?>
>
> </form>
> </body>
Fike
use ajax for this, lets suppose try this one for your practice
var string = $("#string").val();
var dataString = 'string=' + string ;
if(string==''){
alert('enter any string');
}
else{
$.ajax({
type: "POST",
url: "path of php file",
data: dataString,
suceess: function(){
//do something
},
error: function(){
//do something
}
});
}
You can use jQuery or Prototype JS libraries to make an easy AJAX call. Example using jQuery would be:
$.ajax({
url:'hashed.php',
data:$("form").serialize(),
type:'POST',
success: function(data){
$('hashmd5').html(data.md5);
$('hashsha1').html(data.sha1);
},
error: function(jxhr){
alert(jxhr.responseText);
}
});
Don't use the same id value in HTML, never ever. They must be unique to correct perform JavaScript functions on elements.
yes it is possible. Write a javascript function that would trigger on submit, disable the submit button so user couldn't press it again, and finally request the server via ajax. on successful response update the content. Something like following in Jquery
$('.form-submit').click(function(event)) {
event.preventDefault();
if(form is valid and not empty) {
$.ajax({
type: "POST",
url: "path to script that will handle insetion",
data: "data from form", //like ({username : $('#username').val()}),
suceess: function(data){
//update the content or what. data is the response got from server. you can also do like this to show feedback etc...
$('.feedback').html("Data has been saved successfully");
},
error: function(){
$('.feedback').html("Data couldn't be saved");
}
});
}
}

Categories