I'm not sure why I'm not getting it. Either way this is frustrating me beyond belief. I've looked through 2 jquery books, web tutorials, and stack overflow posts and i still dont understand.
I am trying to build a search filter bar where a user can select filters and upon clicking "refine result" it modifies the query output.
How do I submit the value of whichever form radio box the user selects using jquery/ajax to a php page which will display results dependent upon the input, without page refresh.
Form-->
user selects radio button value and clicks submit-->
form data gets sent via jquery/ajax to the .php page whose output is to be displayed in without page refresh-->
.php file processes the user input and creates output based on it
I've honestly looked through alot of different answers but all of them assume that the reader has a greater basic knowledge of javascript/jquery than I do.
Like, do I have to put the jQuery/ajax in a function that runs "onclick" of my submit button? Or do I just add a .click event handler for my button id?
Can someone explain it all to me assuming I'm a complete jQuery/ajax noob?
You just have to attach your ajax call to the "submit" event that comes from the form when the submit button is clicked :
$('form').submit(function(e){
e.preventDefault();
$('.content').load(this.action+" .content", $(this).serialize(), function(){
// code to execute after result display if needed
});
return false;
});
I assumed your results are displayed in an element that has the "content" class.
$('form') selects your form, you can personalize it
.submit attach an event handler to the form "submit event
e.preventDefault() and return false prevents the form to be actually submitted
$('.content').load will fill the element with "content" class with the ajax call results
this.action is the URL to submit the form to
" +.content" is here to extract only the result part from the response, instead of the entire html page
$(this).serialize() passes the form fields data to the ajax request
finally the last anonymous function is called after the results are displayed and can be used to trigger some visual effect indicating that the results were updated
Related
I am developing a wordpress plugin which has a form for voting purpose and has a progress bar for showing the votes result. After submitting the form it redirects to another page for processing. But I want to submit the form without page refresh. I could do it with jquery/ajax. But the problem is, after submitting the form without page reload ajax will submit the form data to a php page and it will keep those data to database ,but the voting poll result will not be updated (progress bar will not display latest information ,after submitting ajax data,though data is updated in database) if user does not reload the page.
Please give me an idea how could I do that.
After the poll data has processed, send a script back to the main page:
<script>
document.getElementById('myProgressBarId').setAttribute("width","50%");
</script>
If you have the code for calculating % (which I assume you do have) then you can do the following in your AJAX call.
Store data in db.
Retrieve the updated data
Fire up your 'calculation code'
Now you have the %.
Update the width attribute of image onSuccess of AJAX call.
The jQuery way:
$.ajax({
//other code
success : function(data) {
$('#progress-bar-image').attr('width', data);
}
//data is the calculated percentage.
});
See jQuery.ajax() doc
We are using jQuery accordion to process our records.
The first accordion called Builds contains two dropdownlistboxes and an input textbox.
The code below works well in populating the dropdownlistboxes.
getBuilds() populates the buildingID dropdownlistbox
The second dropdownlistbox gets populated based on selection from buildingID dropdownlist.
User manually enters data into the input textbox.
Then there is the second accordion called Previews.
As the name suggests, once user clicks on the Preview accordion, the value of the two dropdownlistboxes and the input textbox should display on this screen.
If data is correct, user clicks the submit button to the database.
If not, user can make changes before submitting.
How do I get the values from the code below to display on the Preview accordion?
I can handle the rest with your generous assistance on the preview bit.
Thanks a lot in advance.
Please see code below:
<script type="text/javascript">
$(document).ready(function() {
getdates();
$('#datesID').change(function() {
gettimers( $(this).val() );
});
});
I have a multi-page form. Each page posts data form one to the next, where PHP stores the POST data as Session data. At the end of the table this session data is displayed in a summary table before final submission stores that session data in a MySQL database.
There are two ways to navigate away from a form page: both options to submit the form data.
1) The submit button which performs the form action, and navigates the user to the subsequent form page.
2) A page menu, from where the user can land on any other form page. I use JavaScript on the menu navigation to prompt submission:
$('#menu a').onclick {
$('#myform').submit();
});
However the submit action of the form is:
<form id="myform" method="post" action="?page=survey-2">
...form fields...
</form>
So instigating submit only posts the updated data to the subsequent page.
In the use-case: user fills out form, arrives at summary page, sees and error uses the menu to navigate back to a page, alters it and uses the menu to jump back to summary page: nothing changes, obviously because the updated data is ONLY being submitted to the following page, NOT the destination of their navigation.
Is there a way I can use js (or anything) such that when a link is clicked in the menu, the DESTINATION of that navigation link, also receives the form data? Or alternatively, that the action of the form can submit to all the pages at once (but default navigation is to the subsequent page only)?
Thanks for your consideration
Use AJAX to post the data to the handler, then go wherever you want to go with the callback
$('#menu a').onclick {
var data = $('#myForm').serialize();
var handler = '?page=survey-2';
$.post(handler,data,function(){
window.location.href='http://www.google.com';
})
});
For more about jQuery POST:
http://api.jquery.com/jQuery.post/
I need to take form data from user input- i.e. radio buttons and use that to apply search filters to a database search.
However there are specific parameters which are giving me difficulty.
Specifically: The search filter options pane is a static fixture on the main page of the site. The query to be modified by the search filters is a separate php page which is called by an ajax function to display search results in the middle of the page without page refresh.
Is it even possible to submit variable values to another php page without going to that page and processing the php immediately? Or will the variables not be stored like that?
The code is too long but I'll give basic pseudocode:
Form action="Query Page to receive user input.php"
Some radio buttons:
20
15
10
Submit button--> Submits the radio button value to QueryPage.php but does not redirect
User clicks a category link (i.e. fitness) that calls the ajax function which displays the output of QueryPage.php. At this point QueryPage.php should perform the search with the specific user input filters that were selected earlier.
Is this possible?
Let me see if I understand correctly:
You're basically saying that your radio buttons will modify the search results, based on the what user selected?
If that's the case, I can think of 2 options:
1- When you make the ajax request for the search, first, grab the user input and send it to the QueryPage.php file with the search query. Do you have access to that function?
2- Post the user input using ajax (are you using jQuery or some other library for this?) to a UserInput.php file, where you'll store that data on the session, and then from QueryPage.php you just access the session and grab the values sent previously.
Does that answer your question? Sorry if it doens't, it's a bit hard to understand the problem.
You can use JQUERY and its events method. For example change,click,hover. In your case you want to use radio buttons, so you might wanna use the click event for that.
$("#radio").click(function () {
// SEND HTTP REQUEST
});
http://www.mkyong.com/jquery/how-to-select-a-radio-button-with-jquery/
Yes. You could just use .ajax(), or .post() or cURL. This will post your data to the specified page without redirecting.
Example using .post()
$.post("test.php", { name: "John", time: "2pm", fieldname: "your value" } );
I have two forms on my webpage - one that writes certain information to a database, and one that lets you pay using Paypal (the page I have is for buying a product).
Right now, there are the two forms, but I want to make it so that both submit at the same time. That is, when you click the Paypal button, it posts both forms.
Can I put them both in the same post method somehow? Or how can I solve this problem?
I want it so a customer can buy something, and the Paypal post executes (for the actual payment) but the page also writes to my own database with the information of the customer.
I'm fine with using jQuery and/or any libraries.
Here's my JS: http://slexy.org/view/s2u2Jsr2RI
Here's my HTML: http://slexy.org/view/s2NgzHRES4
Here's my post.php: http://slexy.org/view/s208WfbKso
You could submit your original form using AJAX, and then in its success callback, submit your paypal form.
You're already using jQuery to submit the PayPal form:
$('#paypalButton').click(function(){
$.post('post.php', $('#myForm').serialize(), function(){
$('#paypal').submit();
});
});
Just have it post the other form right afterward, after clicking on the #paypalButton!
$('#paypalButton').click(function(){
$.post('post.php', $('#myForm').serialize(), function(){
$('#paypal').submit();
});
$.post('mydbprocessingurl.php', $('#myOtherForm').serialize());
});
Post back using the first form. Return to another page with "Redirecting...." where the paypal form controls are. Use javascript to post that form on page load.
or
Have the first form perform an ajax request. On postback, execute javascript which posts the second form.