I have a list of check boxes. I want to check them and submit.
I should be able to check 2 entries and and submit it to compare.php
or i should be able to check one and send it to insert.php.
is this possible ?
Yes, you definitely can, though perhaps the logic to determine the flow should be on the server side (clients have a habit of sending bad things, which you can deal with on the server-side).
I would use jQuery, though native Javascript would work fine (it'd be more complicated, though).
I'd do something like:
<form id="myForm"></form>
<script type="text/javscript">
$('#myForm').submit(function() {
// Look at form inputs here and set the form action accordingly.
// Note: 'this' refers to the form DOM element.
this.setAttribute('action', 'myurl.php');
});
</script>
you can create a frame and do that.
You can use AJAX to do this. Have you form action point to a JS function that would do something like:
if(checkbox1.checked==1 && checkbox2.checked==1) {
//ajax request to compare.php
} else if(checkbox1.checked==1 || checkbox2.checked==1) {
//ajax request to insert.php
}
you can do this by using AJAX form submit
Related
I am working on a survey that will go at the bottom of a FAQ page. My problem is that everytime a form is submitted, it sends you to a different page. I was wondering - is there a way to submit the form and have a little message that replaces the survey that says "Thanks for your feedback" instead of sending the user to another page or refreshing the page?
So far, I have a file that contains the HTML form, CSS, and jQuery and another file that contains the PHP connection to database and insertion of data to the database.
I would appreciate an explanation that is dumbed-down and an example would help since I am relatively new to programming.
An important note: My jQuery is set up to automatically submit if a user answers very helpful/extremely helpful. If not, two more questions appear below with a submit button at the bottom.
More specifically it looks like this:
$(document).ready(function() {
$('.rating').click(function() {
$('.rating').removeClass('selected');
ratingClick(this);
});
});
function ratingClick(that) {
console.log(that.id);
if (that.id == 'rating4' || that.id == 'rating5') {
//$('#questions').fadeOut('slow');
//$('#thankYou').fadeIn('slow');
$('#questions').submit();
} else {
$('#getMore').fadeIn();
$(that).toggleClass('selected');
}
}
$(document).ready(function() {
$('#submit').click(function(){
//$('#questions').fadeOut('slow');
//$('#thankYou').fadeIn('slow');
});
});
What you want is the jquery post function: http://api.jquery.com/jQuery.post/
Make sure your data is JSON.
$("#formdiv").click(function(){
$.post("somepage",{ yourformdata} );
$("#formdiv").replacewith("Thanks for filling out the form!");
});
You can use the replaceWith function to replace the desired content with the thankyou message.
Alex,
from the code you supply, the reason for leaving the page is due to the fact that you don't preventDefault() on the click event. Your page will always reload after that submit unless you take abortive action. No guarantees, but try a quick refactor to:
$(document).ready(function() {
$('#submit').click(function(e){
e.preventDefault();
//$('#questions').fadeOut('slow');
//$('#thankYou').fadeIn('slow');
});
});
This should get you a stage closer. You then just have the ajax logic to define, which should come good with a quick search to match your needs.
I want to make a form that uses jQuery's ajax function to submit the data, but to be functional when javascript is disabled. So I need a way to know, in the server-side script (PHP), weather the request came from ajax or from simply submiting the form.
HTML:
<form id="form_1" method="post" action="process.php">
jQuery:
$.ajax({
type: "POST",
url: "process.php",
data: $("#form_1").serialize(),
cache: false,
success: function(msg){alert(msg)}
});
So I would like to check in process.php if it was called from jQuery or from submiting the form. Note that I serialize the data, I don't want to use an URL parameter, like '&ajax=1'. Thanks!
Automatically, requests made with XMLHTTPRequest (like those made with jQuery's AJAX suite) have the X-Requested-With header set to XMLHTTPRequest. You can check for the presence of this header.
if (
isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&
($_SERVER['HTTP_X_REQUESTED_WITH'] === 'XMLHTTPRequest')
) {
// request is AJAX
}
You can check for the presence of $_SERVER['HTTP_X_REQUESTED_WITH']. jQuery will send this header with AJAX calls.
The jQuery serialize() method won't serialize (and therefore provide a value for) any submit buttons contained within the form, but submitting the form using one of these will do so. You can check for the existence of that value using PHP and handle appropriately.
I know you don't want to use a url parameter, but it might be the only way you can determine where the call came from.
You can construct data manually and add an AJAX only parameter, and then check for it in PHP.
I would suggest you add a field to your form when it is submited via ajax just before the ajax call. So you can serialize your form and send it as the data containing your ajax=1 for example
The server has no guaranteed way to know what mechanism the client used to make a request. Any request that you can make via JQuery or any other kind of page load can be spoofed by another client to look exactly the same; the server would have no clue.
A client that isn't trying to spoof the result will generally send some clues to the server, in the form of the UserAgent string, and so on, but none of these clues will tell the server anything about whether it's being called via Ajax or not.
Therefore the only route you have to tell the server where the request is coming from is in the URL, and the easiest way to do that is to add an extra parameter. I know you don't want to do this, but it is the best answer to your question.
The alternative option is to have a different action URL for the form if it is called via Javascript. You can toggle the URL easily in JQuery when the page is loaded, and because it is done in Javascript, if JS is disabled then the form will post to the default URL, and you'll be able to generate you non-JS page load.
The final solution is not to do anything different on the server; render the page exactly the same whichever route the user comes in via, and instead have the JQuery code accept the that page code and extract the relevant parts of it for use in the Ajax context.
I hope that helps.
There is a much simpler way to achieve this. Use something similar for jQuery:
$("form").submit(function(){
/*ajax request*/
return false;
}
The return false; does the "magic". If you have JS enabled, then the submit button won't submit the regular way; you can process data via jQuery and send it with AJAX. If you have JS disabled, therefore this function is not called and the form is submitted as usual.
This question may seem completely stupid, but say i have a PHP page with some form processing at the top in php and a html form underneath with the action of submitting to same page and method of post. How do i get the result via ajax, ie. send form to self without refreshing the page, if that makes sense? Thanks
It sounds like you're asking about Ajax basics, right? I suggest using jQuery to handle the Ajax part.
Put jQuery in your page, and then do something like
$(document).ready(function(){
$('#submit_button').click(function(){
var something='value to send to PHP';
$.post('name_of_page.php',{"a_var":something},function(data){ /* do something with the data you received back*/ },'json');
});
});
Then in your PHP page, set up to handle a post or normal HTML output.
<?php
if($_POST['a_var']){
$result=do_something($_POST['a_var']);
echo json_encode($result);
exit;
}
//if there was no POST value, it continues to here
<html>
This is the rest of your page.
You'd have the form and the above javascript and so on here.
</html>
In your page, check if the page has POST parameters. If it does, process them and return a confirmation. If it doesn't, display the form.
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});