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 });
});
Related
I'm trying to send a POST request to a PHP server using a form. The form is filled at runtime and stored inside a .js file. I can access the form by using $('#form') anytime.
My problem is here:
I have to send this form using the Cordova InAppBrowser. I'm loading the page, but I'm not able to pass the form.submit() to the InAppBrowser page.
I'm using the following code:
javascript
var ref = window.open('https://www.paypal.com/it/cgi-bin/webscr', '_blank');
ref.addEventListener('loadstop', function (event) {
ref.executeScript({
file: "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"
},
function () {
ref.executeScript({
code: "jQuery('#payform').submit();"
});
});
});
ref.show();
form
<form id="payform" action="https://www.paypal.com/it/cgi-bin/webscr" method="post" target="_self">;
<input type="hidden" ...
...
</form>
The page loads at the given url, but I'm not able to pass input elements.
What am I doing wrong?
Thank you :)
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 */
}
});
});
Hi I have form that start like this:
<form id="SignupForm" action="results.php" method="post" accept-charset="utf-8" class="form-vertical">
The values entered within the form's section will need to be processed on the results.php.
However I also need to pass the values of the fields within the form section into a 3rd party application via an API that goes like this:
<form accept-charset="utf-8" action="https://thirdpartysite.com/apikey"
method="post">
How can I do this? Thank in advance.
form elements are not designed to send its data to multiple actions, the only way would be to send your data to the api in your results.php with php or you send your data after the submit was triggered with javascript and then submit the form.
javascript (jquery)
$('#SignupForm').on('submit', function(e){
// don't e.preventDefault - let the ajax event be async false
// so your form gets submited after the ajax request was finished
var self = $(this);
//send to api wait for response
$.ajax({
type: "POST",
url: 'https://thirdpartysite.com/apikey',
data: self.serialize(),
async: false
});
});
You could use javascript to intercept the forms submit event and then post the information to your own script and the third party script.
A quick (untested) jquery example:
$('myForm').on('submit', function (e) {
// prevent the form from submitting
e.preventDefault();
var formData = {}; // This would be the actual form data
// post to your script
$.post('/myscript.php', formData);
// post to third party
$.post('thirdPartySite', formData);
});
you may put a CURL request in your results.php that sends values to https://thirdpartysite.com/apikey
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>
I have an HTML form that previously was only used for text attributes for users, that was all using AJAX to call a PHP controller functions via URLs to refresh page content via database and server-side calls (abridged version)
<input type="text" id="firstname" name="FIRSTNAME"/>
<input type="text" id="lastname" name="LASTNAME"/>
<input name="Submit"type="submit" value="Submit" />
This "create user" form now needs to incorporate a file uploading mechanism, for user images
<input type="file" name="userImage" />
The problem is that the form is being submitted via .serialize in the .ajax #create form submit
$.ajax({
url: 'controller.php?command=create',
type: 'POST',
data: $( form ).serialize(),
create URL calls the PHP controller echo $dmv->create(); , which is the model public function create(){ //execute database insert and execute
I have read that serialize does not make sense for files, which is true, but I also want to try to figure out how to update my existing form to incorporate file upload functionality to it
I have tried to understand the jquery.form.js plugin ( http://malsup.com/jquery/form/#file-upload ) but cannot understand how to tie it all together.
I believe what I need to do is have the file upload execute as a separate logic, then tie back with the original logic for file name , this is file storage with the unique image name stored in the database under the record, not BLOB image storage.
Let me know if I can provide any further info, and thanks to any help that can be given.
You can't upload files via AJAX. The only possibilites you have are using Flash (such as Uploadify: http://www.uploadify.com/), an iFrame, or just submitting the form. The form must have an enctype set to multipart.
<form action="script.php" method="post" enctype="multipart/form-data">
Plugins may mimic AJAX file uploads by creating a "hidden" iframe.
Example: http://valums.com/ajax-upload/
You can mimic an AJAX call by using a hidden iframe. You can even achieve a callback function and get the server response just like an AJAX call:
HTML --
<form enctype="multipart/form-data" target="workFrame"></form>
<iframe id="workFrame" style="display:none;"></iframe>
JS--
//bind an event handler to the form with the file input
$('form').on('submit', function () {
//check to make sure the user has selected an image, if not then stop the form from submitting
if ($('#userImage').val().length == 0) return false;
//bind an event handler to the `load` event for the iframe so we will have a callback for the form submission
$('#workFrame').on('load', function () {
var $this = $(this);
//remove this event handler
$this.off('load');
//get the response from the server
var response = $this.contents().find('body').html();
//you can now access the server response in the `response` variable
});
//return true so the form submits normally
return true;
});
Note that .on() is new in jQuery 1.7 and is the same as .bind() in this case.
Here is a example of what Michael is talking about. http://www.phpletter.com/Our-Projects/AjaxFileUpload/