An ajax function returns a form. I want to send this form values to the other ajax function.
Chrome doesn't have a problem, but Firefox can't do this and sends empty values!
For example, I return a edit form with ajax and the edit button function can't get/post form values.
Sounds like you have event handler issues. Maybe all your event handling code is run prior to your new form existing in the dom? Without sample code, we have no idea how you are trying to accomplish this. Maybe, in your form tag, include an onsubmit attribute to handle your submission:
<form onsubmit="sendForm(this); return false;">
<script>
function sendForm(obj) {
var data = $(obj).serialize();
$.post('myEndpoint.cfm',data, function(response){
// response handling code here.
});
}
</script>
Related
I've got this problem that the form refreshes on submit, i dont want it to refresh but i do want it to submit. any of you know what i could do ?
click this link to an older post about this.
<form method="post" id="radioForm">
<?
foreach($result as $radio):
printf('
<button type="submit"
href="#radio"
name="submitRadio"
value="'.$radio['id'].'">
Go!
</button>
');
endforeach;
?>
</form>
<script type="text/javascript">
$('#radioForm').submit(function(event) {
event.preventDefault();
$.ajax({
url:'index.php',
data:{submitRadio:[radiovalue]},
type:'POST',
success:function(response) {
/* write your code for what happens when the form submit */
});
});
</script>
</div>
Use submit() handler and pass the value of your button to your other script
First set the id on the form.
<form method="post" id="formId">
Then bind a listener
$( "#formId" ).submit(function( event ) {
event.preventDefault();
//This is where you put code to take the value of the radio button and pass it to your player.
});
To use this you need jQuery.
You can read more about this handler here: http://api.jquery.com/submit/
This is the default behavior of a HTML <form> on submit, it makes the browser POST data to the target location specified in the action attribute and loads the result of that processing to the user.
If you want to submit the form and POST the values behind the scenes without reloading the page, you have to disable the default behavior (the form submit) and employ the use of AJAX. This kind of functionality is available readily within various JavaScript libraries, such as a common one called jQuery.
Here is the documentation for jQuery's AJAX functionality http://api.jquery.com/jquery.ajax/
There are lots of tutorials on the interwebs that can introduce you to the basic use of jQuery (Including the library into your HTML pages) and also how to submit a form via AJAX.
You will need to create a PHP file that can pick up the values that are posted as a result of the AJAX requests (such as commit the values to a database). The file will need to return values that can be picked up within your code so that you know if the request was un/successful. Often the values returned are in the format JSON.
There are lots of key words in this answer that can lead you on your way to AJAX discovery. I hope this helps!
use ajax like this of jquery
$('form').submit(function(event) {
event.preventDefault();
$.ajax({
url:'index.php',
data:{submitRadio:[radiovalue]},
type:'POST',
success:function(response) {
/* write your code for what happens when the form submit */
}
});
});
I have a one page website in the works that has a contact form where its contact error and contact thank you messages are placed further down the page as hidden divs.
The contact form calls an external php file that calls the anchor links of the error and thank you message divs in the index.html file.
www.photograsurfer.com/test/index.html
www.photograsurfer.com/test/code/contact-panel.php
Everything works successfully as long as the divs are not hidden. So now I need to use the following javascript to get the hidden divs to display when needed.
<script type="text/javascript">
function showContactPanelError() {
document.getElementById('contact-panel-error').style.display = "block";
}
</script>
My problem, besides being a complete PHP beginner, is that I don't know how to get the PHP file to reference the Javascript code to display the hidden divs properly on the main page.
Any help is appreciated.
Thanks.
Use jQuery forms (http://malsup.com/jquery/form/) to submit your form via AJAX, then show/hide divs depending on values you return from PHP scripts.
you could assign php variable to javascript as
var error="<?php echo $_GET['error']; ?>";
the $error is the data passed along with the url like wwww.example.com/test.php?error=1
Now you could check var error and call your function showContactPanelError().
I ended up going with a mixture of the 2 methods on these pages.
http://trevordavis.net/blog/ajax-forms-with-jquery
https://spruce.it/noise/simple-ajax-contact-form/#contact
Ditched the div idea since the Ajax method allowed me to not reload the page and enter error and thank you messages within the contact form itself. Seemed like an easier approach.
Thanks for all of the suggestions, as I never would have looked at using Ajax otherwise.
You can add a onclick event on submit button. On clicking it will create an ajax call send data to the required external PHP file and then on success will display the hidden division properly on the main page.
here's a sample code just for an explanation
**
* Description : Function that will trigger the AJAX request.
* #param none
*/
function CategorySubscriber_Unsubscribe(){
var data = {
'data-1': data-1,
'data-2': data-2,
// as per your need you can put any number of data
};
var url = // your url
jQuery.post(url, data, function(response){
jQuery.show("#your-div-id");
});
}
function(response) will be executed when ajax call will be in success status.
You can learn it from these links
http://www.w3schools.com/jquery/ajax_post.asp
http://api.jquery.com/jQuery.post/
i have an form which will send some data to an php file , then return some results as example:
<form action"<?php $_SERVER['PHP_SELF']?>" method="post" id="data">
<input type"text" name="first_name"/>
<input type="text" name="last_name"/>
</form>
then in javascript i want catch clcik event in submit form as example :
$("#data").submit(function(){
some code .....
});
which that will prevent the default action for submitting inputs form to the php file , the question is can i send data of a form for php file and same time catch event for the same form ?
NOTE the returned data from php file will be needed by another php
function
To prevent the default behavior of form submit(Which is Page reload) you need to use event.preventDefault() like this
$("#data").submit(function(event){
event.preventDefault();
//some code .....
});
And to post the form data into php without refreshing page you need to use any of the jQuery's available ajax methods like .post() (Which will send form values using HTTP POST Method) like
$("#data").submit(function(event){
event.preventDefault();// prevent page reload
// Now post the form using Ajax
// $(this).serialize() will return an array of all form fields as
// name value pair
$.post('some_script.php',$(this).serialize(),function(data){
// Just to check if everything is working well
console.log('Form Submitted Successfully.');
// do whatever you want with the data
});
});
If your php script returns the data in json format the you can either set the content-Type header using php or force jQuery to treat the return data as JSON by specifying the dataType as JSON in the 4th parameter like
$.post('some_script.php',$(this).serialize(),function(data){
// Just to check if everything is working well
console.log('Form Submitted Successfully.');
// do whatever you want with the data
},'json');
$("#data").submit(function(e){
e.preventDefault();
$.post("<?php echo $_SERVER['PHP_SELF'] ?>",$(this).serialize(),function(r){ //Do Some Action });
});
I want to submit a form without using submit button how can i do that?
Using jQuery you can do this. Check this
http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
Use javascript. Something like
document.forms["myform"].submit();
or
document.myform.submit();
You need to set the name (1. example) or id (2. example) attribute for your form to make this work.
Through javascript you can call form.submit()
Use jquery's form methods to serialize the form variables and send via ajax.
http://api.jquery.com/category/forms/
You can add some javascript logic to ANY submit methods by passing a function to the form's submit event handler.
Eg.
$('#my_form').submit(function(){
alert('Handler for .submit() called.');
return false;
});
Returning false blocks the form from being submitted by all other methods (including the "traditional" submit button). You'd put your ajax code before the return statement.
or add bind the submit function to ANY dom element (image,button,etc.)
Eg.
$('#my_cool_image').click(function() {
$('#my_form').submit();
});
See more at http://api.jquery.com/submit/
Good Luck
I want to post the Form but don't want to use the Submit method. If I use JQuery, how to handle the Form input controls?
You can use the jQuery AJAX .post function functions. An example (untested, but should be working):
<script>
function postit(obj) {
var data = $(obj).serialize();
$.post($(obj).attr("action"), data, function() {
//Put callback functionality here, to be run when the form is submitted.
});
}
</script>
<form action="posthandler.php" onsubmit="postit(this); return false;">
<input type="text" name="field">
<input type="submit">
</form>
Also, read about serialize
(Of course you need to include the jQuery library in your code before using this code).
Just create a function that is triggered by whatever event you want, for example: (found this code in another question)
function example() {
// get all the inputs into an array.
var $inputs = $('#myForm :input');
// not sure if you wanted this, but I thought I'd add it.
// get an associative array of just the values.
var values = {};
$inputs.each(function() {
values[this.name] = $(this).val();
});
}
After that you can do whatever you want with the input values. You might want to consider using more advanced processing though, there are plenty of plugins that can provide this kind of functionality.
I am not sure if I understood the question correctly.
If you don't want to use submit(), you can do the same thing via jQuery.post() using Ajax. The main difference is you have to construct the key value data from the input fields yourself rather than the browser doing it automatically and you won't get a page refresh.
Either Post function or Load function will work.
#PRK are you trying to post the Form when the page loads or when a user hit a button?
load(url, parameters, callback)
eg:
$("#loadItHere").load("some.php", {somedata: 1});