I use the code below to submit my form without reloading the page, but when data.a="a", or "b", etc. in the success part of AJAX, I still would like to submit the form as conventionally done by php without jQuery.
So in this case, the aim is to transmit the AJAX data ("data:myForm.serialize()+"&id_town="+id_town,") to the url specified in the "action" html attribute of the form.
Do you have any idea ?
Html code:
<form id="inscription_form_home" action="index.php?module=membres&action=inscription" method="post" >
...
</form>
jQuery code:
$("#inscription_form_home").submit(function() {
var myForm = $(this);
$.ajax({
dataType: 'json',
type: "POST",
url: "traitement_profil.php",
data:myForm.serialize()+"&id_town="+id_town,
success: function(data){
if (data.a == "a" || data.a == "b" ){
// Transmit the data part to the form url
}else{
alert("Inscription OK.");
}
}
});
return false;
});
As allready been said, you can do another ajax call inside the
Edition after comments, :
Try this...
<form id="inscription_form_home" action="index.php?module=membres&action=inscription"
method="post" >
...
<button id="mButton">Submot<button>
</form>
$(document).ready(function() {$("#mButton").bind('click', mysubmit($));});
function mysubmit()
{
$.ajax({
dataType: 'json',
type: "POST",
url: "traitement_profil.php",
data:myForm.serialize()+"&id_town="+id_town,
success: function(data){
if (data.a == "a" || data.a == "b" ){
//do your new call here, or you can also submit the form
}else{
alert("Inscription OK.");
}
}
});
return false;
}
You can make like this :
$(location).attr('href',YOUR URL);
Related
I use Ajax to send data from form to server. But I want to check data in form before Submit by Ajax:
<form id='#id_form' onsubmit='return checkInputSubmit();' >
...
</form>
In Ajax:
$('#id_form').submit(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: url,
dataType: 'json',
data: $('#id_form').serialize(), // serializes the form's elements.
success: function(data) {
if(data.result == true) {
//My code
}
else {
//My code
}
}
});
});
But checkInputSubmit() can't prevent submit from Ajax. You can explain for me and give me solution to check data in form before Submit by Ajax.
Thanks.
in the $('#id_form').submit(function(e) event, you can check/edit/return... any thing you want before call Ajax. Within Ajax, i think it won't work and don't good. (we just check ajax result, not input)
#Blurp, I found the solution by use your help.
$('#id_form').validate({
submitHandler: function(form) {
e.preventDefault();
$.ajax({
type: 'POST',
url: url,
dataType: 'json',
data: $('#id_form').serialize(), // serializes the form's elements.
success: function(data) {
if(data.result == true) {
//My code
}
else {
//My code
}
}
});
}
});
Hi I have my first AJAX JSON working and it returns C5:3; at the moment for development and displays this in a div, a img tag should be replaced from a off.png to a on.png but this isn't happening. Would appreciate if anyone could through some light on this?? here is my code
$("button.checkStatus").click(function(){
//This Ajax checks the current on/off status of the passed X10 code
$('img.checkStatus').each(function(i, obj) {
$x10Device = $(this).data("x10");
var postData = "url=http://local/tenHsServer/tenHsServer.aspx?t=ab&
f=DeviceStatus&d=" + $x10Device ;
$.ajax({
type: "POST",
dataType: "json",
data: postData,
beforeSend: function(x) {
if(x && x.overrideMimeType) {
x.overrideMimeType("application/json;charset=UTF-8");
}
},
url: 'urlencodeJson.php',
success: function(data) {
// 'data' is a JSON object which we can access directly.
// Evaluate the data.success member and do something appropriate...
if (data.success == true){
$('#section1').html(data.message);
$("X10").data('src','lightbulbon.png');
}
else{
$('#section2').html(data.message);
$("X10").data('src','lightbulbon.png');
}
}
});
The HTML
<img src="lightbulboff.png" class="checkStatus" data-x10="C5">
<img src="lightbulboff.png" class="checkStatus" data-x10="C6">
<img src="lightbulboff.png" class="checkStatus" data-x10="C7">
<button class="checkStatus">Device Status Check</button>
<div id="section1"></div>
<div id="section2"></div>
This is driving me crazy!!! every way tried over the last 2 days hit a brick wall would be great if I could crack it!!!
Many thanks!!!
I think you could change a couple of things to make it works, first of all change the success part inside your ajax request:
$("X10").data('src','lightbulbon.png');
this wont lead you anywhere, since you're addressing nothing, insted save you current object in a variable and change it (or use the $(this) context where this is your current image object) :
$(this).attr('src','lightbulbon.png');
another little thing is how you set up the call, while it's not wrong, doing :
$x10Device = $(this).data("x10");
var postData = "url=http://local/tenHsServer/tenHsServer.aspx?t=ab&
f=DeviceStatus&d=" + $x10Device ;
could be a little redundant and can lead to easy error while you setup a post request, just rewrite it like an array :
data: {url : 'http://local/tenHsServer/tenHsServer.aspx?t=ab',
f : 'DeviceStatus',
d: $(this).data("x10") }
the whole function should be like :
$("button.checkStatus").click(function(){
$('img.checkStatus').each(function(i, obj) {
var element = $(this);
$.ajax({
type: "POST",
url: 'urlencodeJson.php',
dataType: "json",
data: { url : 'http://local/tenHsServer/tenHsServer.aspx?t=ab',
f : 'DeviceStatus',
d: $(this).data("x10") },
beforeSend: function(x) {
if(x && x.overrideMimeType) {
x.overrideMimeType("application/json;charset=UTF-8");
},
success: function(data) {
if (data.success == true){
$('#section1').html(data.message);
element.attr('src','lightbulbon.png');
}
else{
$('#section2').html(data.message);
element.attr('src','lightbulbon.png');
}
}
});
});
});
i want to refresh a particular div on ajax success, im using the below code but the whole page getting refreshed.
<script type="text/javascript">
$('#post_submit').click(function() {
var form_data = {
csrfsecurity: $("input[name=csrfsecurity]").val(),
post_text: $('#post_text').val()
};
$.ajax({
url: "<?php echo site_url('/post_status'); ?>",
type: 'POST',
data: form_data,
success: function(response){
$(".home_user_feeds").html("markUpCreatedUsingResponseFromServer");
}
return false;
});
return false;
});
</script>
you have an extra return false which is inside the $.ajax block which most probably causes an error so your form isn't submitted via ajax. If you remove that, you shouldn't have any issues.
Use the submit event of the form and remove the return false from the ajax callback:
$('#myFormId').on('submit', function() {
var form_data = {
csrfsecurity: $("input[name=csrfsecurity]").val(),
post_text: $('#post_text').val()
};
$.ajax({
url: "<?php echo site_url('/post_status'); ?>",
type: 'POST',
data: form_data,
success: function(response){
$(".home_user_feeds").html("markUpCreatedUsingResponseFromServer");
}
});
return false;
});
Remove the return false from inside your $.ajax function. Its a syntax error. The $.ajax function only expects a json object as an argument. "return false" cannot be part of a json object. You should keep the JavaScript console open during testing at all times - Press Ctrl-Shift-J in Chrome and select console to see any JS errors.
Also suggest you use <input type=button> instead of <input type=submit> or <button></button>
I am working on as asp.net application. Its view has a button like this:
<input type="button" id="btnCall" title="Call" value="Call" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" />
and in document.ready, I have this:
$("#btnCall").click(function () {
alert("here");
$.ajax({
type: "POST",
dataType: "text/json",
url: "/account/getGenericPassword",
success: function (data) {
alert("data" + data);
if (data == null || data == "") {
alert("Generic Password is empty. Please enter generic password");
}
else {
//saveCallRecording();
}
}
});
});
and method is like this:
[Authorize]
public JsonResult GetGenericPassword() {
using (IUserProfileManager profilemanager = new ManagerFactory().GetUserProfileManager()) {
UserProfile profile = profilemanager.GetProfile(CurrentUser.Id, CurrentAccount.Id);
return Json(profile.GenericPassword == null ? "" : profile.GenericPassword, JsonRequestBehavior.AllowGet);
}
}
but alert in success is not shown. Please suggest solution.
Try setting the dataType like so:
dataType: "json"
See the valid dataType options at http://api.jquery.com/jQuery.ajax/
try with these
type:'Post',
url:'#Url.Action("actionname","controller")',
datatype:"json",
data:{},
success:function(data){
}
I want to submit a form which belongs to a loaded page (I use load()). When I click onto the button submission, nothing happens.
Html code of the loaded page:
<form id="my_form" method="post" >
*** some inputs ***
<input id="submit_button" type="submit" value="Confirm" />
</form>
jQuery code of the loaded page:
$("#submit_button").on('click', function() {
$('#my_form').submit(function(){
var myForm = $(this);
$.ajax({
dataType: 'json',
type: "POST",
url: "../treatment_page.php",
data:myForm.serialize(),
success: function(data){
if (data.a == true){
parent.$.colorbox.close();
}else{
alert("Problem!");
}
}
});
return false;
});
});
treatment_page.php is OK, it treats my others forms don't usnig on(). treatment_page.php is into a parent folder. All the jQuery actions work fine in the loaded page script except this form submission.
On submit button click you are just attaching a submit handler to form. You don't need the submit button click handler. Just keep this code on the parent page and also rendering this script along with load response is not required.
$(document).on('submit', '#my_form', function(){
var myForm = $(this);
$.ajax({
dataType: 'json',
type: "POST",
url: "../treatment_page.php",
data:myForm.serialize(),
success: function(data){
if (data.a == true){
parent.$.colorbox.close();
}else{
alert("Problem!");
}
},
error: function(){
//Error handler
}
});
return false;
});
on is introduced in jQuery 1.7 if you are using older version then you can use delegate. Try this.
$(document).delegate('#my_form', 'submit', function(){
....
....
});
Move the onSubmit handler outside the click handler.
$('#my_form').submit(function(){
var myForm = $(this);
$.ajax({
dataType: 'json',
type: "POST",
url: "../treatment_page.php",
data:myForm.serialize(),
success: function(data){
if (data.a == true){
parent.$.colorbox.close();
}else{
alert("Problem!");
}
}
});
return false;
});