Ok, what i'm trying to do is to create a list of select boxes which update their value each depending on the above:
the first one is like that:
<script>
var $schoolRegion = $('#stage_attendedSchoolRegion');
$schoolRegion.change(function() {
var $form = $(this).closest('form');
var data = {};
data[$schoolRegion.attr('name')] = $schoolRegion.val();
$.ajax({
url : $form.attr('action'),
type: $form.attr('method'),
data : data,
success: function(html) {
$('#stage_attendedSchoolDistrict').replaceWith(
$(html).find('#stage_attendedSchoolDistrict')
);
}
});
});
</script>
when it's value changes an ajax request is dispatched, and the choices of the "#stage_attendedSchoolDistrict" select are updated with the POST html value.
Since here's all good, now i need to do the same with the "#stage_attendedSchoolDistrict" select so:
<script>
var $schoolDistrict = $('#stage_attendedSchoolDistrict');
$schoolDistrict.on.change(function() {
var $form = $(this).closest('form');
var data = {};
data[$schoolDistrict.attr('name')] = $schoolDistrict.val();
$.ajax({
url : $form.attr('action'),
type: $form.attr('method'),
data : data,
success: function(html) {
$('#stage_attendedSchoolCity').replaceWith(
$(html).find('#stage_attendedSchoolCity')
);
}
});
});
</script>
The problem is that the event doesn't trigger at all. I'm thinking it is related to the fact that the former has values in the HTML of the page while the latter doesnt. How can i solve?
Any suggestion is appreciated, thanks for the help.
You're calling on.change in the second example instead of just .change as in the first example.
Related
i have a javascript onchange function on my select tag which when selected it sends the data to my php file and retruns it. i want the results to be displayed in a textbox with ID typid. all seems well. the function response returns data from the php file but for some reason its not displaying in my textbox. i tried to display in a span tag but still not working. kindly help. below is my function.
function getvalues(){
var select1 =document.getElementById('select1').value;
var datastring = 'select1='+select1;
$.ajax({
type:"POST",
url:"gettypid.php",
data:datastring,
dataType: 'Text',
cache:false,
success:function(html){
var k= html;
//$("#typid").html(html.responseText);
// alert(k);
$('#typid').HTML(html);
getvalues();
}
});
return false;
}
You should use .val() function to set value.
$('#typid').val(html);
Form inputs have no html values so if you want to get or set the input text by using val() function.
function getvalues(){
var select1 = document.getElementById('select1').value;
var datastring = 'select1='+select1;
$.ajax({
type:"POST",
url:"gettypid.php",
data:datastring,
dataType: 'Text',
cache:false,
success:function(html){
$('#typid').val(html);
getvalues();
}
});
return false;
}
ajax/javascript problem:
I have an app which consist of multiple forms. What i want to achieve is to make a generic js function to submit forms to their respective controllers by getting form id.. I m successfully getting form ids in form_id variable but m unable to use them. I tried replacing $('patient_form') with form _id and got following error: TypeError: form_id.on is not a function
Here is the following code for better understanding of the problem:
$(function () {
var form = document.getElementsByTagName("form");
var form_id = "'#" + form[0].id + "'";
form_id.on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'Controllers/c_insertPatient.php',
data: $('#patient_form').serialize(),
success: function (result) {
alert(result);
}
});
});
});
The way you have it form_id is a string.
Try:
var form_id = $("#" + form[0].id);
$.ajax is a jquery function. If you want to use jquery (which in this case I think you should), then do it as follows:
$('form').on('submit', function () {
$(this).preventDefaults();
$.ajax({
type: 'post',
url: 'Controllers/c_insertPatient.php',
data: $('#patient_form').serialize(),
success: function (result) {
alert(result);
}
});
});
In addition to the other answers, you want to keep your form ID dynamic, right, so you can insert whatever values you want?
$(function () {
var form = document.getElementsByTagName("form");
// note you have to convert to jQuery object
var form_id = $("#" + form[i].id); // i, so you can put in the id for any form
form_id.on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'Controllers/c_insertPatient.php',
data: $(this).serialize(), // again, keep generic so this applies to any form
success: function (result) {
alert(result);
}
});
});
});
You should set the event listener to the element, not the string of the id of the element. Also I presume you have jQuery because you are using $. Set an id on the form in the HTML. Then:
$(function () {
var form = $('#theFormId');
form.submit(function(event) {
$.post('Controllers/c_insertPatient.php', form.serialize(), function() {
alert('success');
});
event.preventDefault();
});
});
I've written one AJAX function code as follows :
$('#form').submit(function(e) {
var form = $(this);
var formdata = false;
if(window.FormData) {
formdata = new FormData(form[0]);
}
var formAction = form.attr('action');
$.ajax({
type : 'POST',
url : 'manufacturers.php',
cache : false,
data : formdata ? formdata : form.serialize(),
contentType : false,
processData : false,
success: function(response) {
if(response != 'error') {
//$('#messages').addClass('alert alert-success').text(response);
// OP requested to close the modal
$('#myModal').modal('hide');
} else {
$('#messages').addClass('alert alert-danger').text(response);
}
}
});
e.preventDefault();
});
Now here in data attribute I want to send some additional parameters with values in data attribute. How should I send these parameters to PHP file?
For clear understanding of my issue refer the following AJAX function code that I've written previously :
function GetPaymentRequest(status){
var status = $('#status_filter').val();
$.ajax({
type: "POST",
url: "view_payment_request.php",
data: {'op':'payment_request_by_status','request_status':status},
success: function(data) {
// alert(data);
}
});
}
In above function code you can see that I've passed few parameters with values viz. 'op':'payment_request_by_status','request_status':status in data attribute.
Exactly same parameters I want to pass in first AJAX function code. The already mentioned parameter "formdata ? formdata : form.serialize()" should also be there.
How should I do this? Can someone please help me in this regard?
Thanks in advance.
Add by using $.param
form.serialize() + '&' + $.param({'op':'payment_request_by_status','request_status':status});
or use serializeArray() and push new items
var data = form.serializeArray();
data.push({name:'op',value:'payment_request_by_status'}).push({name:'request_status',value:status});
then pass data
What you can do is, add two hidden fields to your already existing form, name one of them as op and set the value as payment_request_by_status and another one as request_status and the value based on the status.
When the form is serialized, it will automatically send these values also.
i have this working code with this code i can pass data to div within same page
but insted of passing data to div i want to pass this to label or textbox so that i can post it to the server. i am new in ajax,jquery . please suggest me best answer
<script type="text/javascript">
//send clicker data to div
$(function() {
$(".clicker").mouseover(function(){
var data = $(this).attr('id');
$.ajax({
type: "POST",
data: "db_data=" + data,
success: function(){
//alert(data);
$('.responseDiv').text(data);
}
});
});
});
</script>
<script type="text/javascript">
i think i need to change this line only
$('.responseDiv').text(data);
but dont know how to do that. didnt find any solution on net also
take any name like propertyId
Let's say the text field has id="propertyID"
Use the val() method to assign this new value to your text field.
$('#proertyID').val(data);
Like:
$(function() {
$(".clicker").mouseover(function(){
var data = $(this).attr('id');
$.ajax({
type: "POST",
data: "db_data=" + data,
success: function(){
//alert(data);
// $('.responseDiv').text(data);
$('#proertyID').val(data);
}
});
});
});
In the below line change selector .responseDiv with id/name or class of input/label $('.responseDiv').val(data);
<script type="text/javascript"> //send clicker data to div
$(function() {
$(".clicker").mouseover(function(){
var data = $(this).attr('id');
$.ajax({
type: "POST",
data: "db_data=" + data,
success: function(data2){
//alert(data);
$('.responseDiv').text(data2);
}
});
});
});
success return in data2 and use this..
I am having an issue where I have two forms on the one page that are submitted using Ajax and Jquery. My code works to submit the forms the only issue is when one form is submitted it shows the confirmation message on the other form as well, even though that form has not been submitted.
Basically I have hidden a div with the confirmation message and it appears after the message successfully goes through. Does anybody know how I can stop the confirmation message appearing on the form that hasn't submitted. Here is the code -
function jqsub() {
//Form 1
var $form = $('#catwebformform39698');
var $messagebox = $('#hide-message');
var $successmessage = " ";
$.ajax({
type: 'POST',
url: $form.attr('action'),
data: $form.serialize(),
success: function (msg) {
$messagebox.append($successmessage);
$messagebox.delay(800).fadeIn(550);
$form.fadeOut(250);
}
});
//Form 2
var $form2 = $('#catemaillistform1628');
var $messagebox2 = $('#hide-message2');
var $successmessage2 = " ";
$.ajax({
type: 'POST',
url: $form2.attr('action'),
data: $form2.serialize(),
success: function (msg) {
$messagebox2.append($successmessage2);
$messagebox2.delay(800).fadeIn(550);
$form2.fadeOut(250);
}
});
}
Any pointers/ideas appreciated.
Cheers
Nik
Edit *
I had tried to add another jqsub() function but the system I am using will only allow one. So essentially I was hoping I could stop the process with some kind of logic within the code or similar. So essentially they have to exist in the one function.
Are you sure both form have not been submitted? Looking at your code, it looks like they're both submitted by that one function. javascript is asynchronous, so the 2nd form would submit right after the first one, w/o waiting for the first one to finish.
If you wanted to submit then sequentially, you would have to do this:
function jqsub() {
jqsub1();
function jqsub1() {
//Form 1
var $form = $('#catwebformform39698');
var $messagebox = $('#hide-message');
var $successmessage = " ";
$.ajax({
type: 'POST',
url: $form.attr('action'),
data: $form.serialize(),
success: function (msg) {
$messagebox.append($successmessage);
$messagebox.delay(800).fadeIn(550);
$form.fadeOut(250);
jsub2();
}
});
}
function jsub2() {
//Form 2
var $form2 = $('#catemaillistform1628');
var $messagebox2 = $('#hide-message2');
var $successmessage2 = " ";
$.ajax({
type: 'POST',
url: $form2.attr('action'),
data: $form2.serialize(),
success: function (msg) {
$messagebox2.append($successmessage2);
$messagebox2.delay(800).fadeIn(550);
$form2.fadeOut(250);
}
});
}
}
Well, it's obvious.Your putting both the submit events inside a single function (jqsub).
you just need to separate them. like this:
function jqsub(){
//Form 1
var $form = $('#catwebformform39698');
var $messagebox = $('#hide-message');
var $successmessage = " ";
$.ajax({
type: 'POST',
url: $form.attr('action'),
data: $form.serialize(),
success: function (msg) {
$messagebox.append($successmessage);
$messagebox.delay(800).fadeIn(550);
$form.fadeOut(250);
}
});
}
function jqsub2(){
//Form 2
var $form2 = $('#catemaillistform1628');
var $messagebox2 = $('#hide-message2');
var $successmessage2 = " ";
$.ajax({
type: 'POST',
url: $form2.attr('action'),
data: $form2.serialize(),
success: function (msg) {
$messagebox2.append($successmessage2);
$messagebox2.delay(800).fadeIn(550);
$form2.fadeOut(250);
}
});
}
EDIT: In that case you must somehow determine which form is being submitted. You can pass the id of the form being submitted to the function and then use a switch statement and perform the action respectively. Check this link. your CMS must somehow provide options for this kind of operation.
Well it seems to me that since both AJAX calls are inside the same function jqsub() they are both submitted and that's why you see the confirmation on the second form too. It would be easier to help if you post the code when you submit the form but I think that the problem lies there.