I have a table listing various line items. Each row has a checkbox. I decided to add a form for each line's checkbox, because I need to submit only one value when it is checked or unchecked.
I tried the following and indeed I get form submission, but how do I update my db? (I use PHP)
$(".rowChkeckBox").click( function(e){
$(".chrowChkeckBoxkBx").val( e.value );
$(this).closest("form").submit();
});
Thanks.
You need to use AJAX for that.
jQuery comes with an own AJAX class (See http://api.jquery.com/category/ajax/)
Fill an AJAX request with the data of your form elements and then send it to a PHP file that is updating the database.
You don't even need to use forms for that, just listen to the click-event of the checkboxes and run that AJAX request once it is clicked.
After that you may update your table (HTML) using $(this) as your clicked checkbox (You can use jQuery's traversing methods to get to an element next to it etc.)
In the PHP file you need to parse the data of your elements via the $_POST or $_GET superglobal and write them into a database with SQL queries (http://php.net/manual/de/book.mysql.php)
I hope I understood your problem.
Related
index.php has several fields, one of which is a dropdown named item_A. If a user selects a certain value in item_A, AJAX will cause a checkbox that is checked to appear on the form in index.php. The name of the checkbox is check_A.
However, when reading the values from the POST of index.php, the value from the checkbox is not present. How can I get the value of such a checkbox?
Here's the AJAX code between the HEAD tags of index.php:
<script type="text/javascript">
$(document).ready(function() {
$('#item_A').blur(function(){
$.post("process_A.php", {
bookid: $('#bookid').val()
}, function(response){
$('#usernameResult').fadeOut();
setTimeout("finishAjax('usernameResult', '"+escape(response)+"')", 400);
});
return false;
});
});
Here's the line from process_A.php which reveals the checkbox on index.php:
echo "<input type=\"checkbox\" name=\"check_A\" checked> I would like Option A.";
And here's the area from index.php, between the FORM tags, where the checkbox appears:
<span id="usernameResult" style="color:green;"></span>
I would need to see the DOM code, but essentially if the element is added to the DOM (via PHP or AJAX) within the tag and is syntactically valid then it will appear in the POST headers at time of submission. You could manually add a checkbox using dev tools in your browser of choice and the value would still post as the server has no prior knowledge of the page DOM submitting the request. The server is trusting that the browser is sending relevant information that is valid. If you post the DOM (Document Object Model - raw source HTML of the page after it is loaded and all values are added) then I might be able to help more.
If elements are added to DOM dynamically after the initial page load, they work just the same. With a checkbox there are two things to keep in mind:
Checkbox has to be inserted between and
Checkbox value is only sent if it is checked
What you're looking for is .find()
jQUery can only grab what is available when the DOM (browser) loads. Seeing as you're pulling in a check box by AJAX, you're going to have to get the container for which you dropped the check box into
ex.
$('.container').find('.inner-box input[type="checkbox"]').val()
After this I'd add the value to a hidden field if it's still not passing. Although I'm unclear as to whether you're submitting the data and then the field is being populated or the checkbox is being entered and then you're submitting the form
I have a form that has a popup page with another form. In that popup form I want to take all fields filled out and store it in a single field in the main parent form via a hidden field. So that when the parent form gets submitted I can get all the fields via the hidden fields via php. How could I do that with jquery? Can I take all the fields from the popup form and store it as a json string in the hidden field? Then in php be able to turn that jquery string into an object so I can get easy access to all the form values? If so then how would I take all the fields from the popup form and turn it into a json string? Or is there a better/easier way?
To capture the form into an input for posting:
You want to .serialize() the form.
$('input').val( $('form').serialize() );
Then, in PHP, you just do a parse_str() to split it back up into an array.
Also, keep in mind that there may be a better solution than passing field data around like this, but if you're hellbent on that implementation, this is probably the way to go.
To open a form as a modal, then collect the data in PHP:
// You can set this to not open by default and bind the opening to a button, or a link, etc...
$('form').dialog({
modal: true
});
In PHP, your form will be contained within $_POST as normal.
print_r( $_POST );
One idea would be to use jQuery to create fields like this:
$(".innerForm input").each(function() {
$(".parentForm").append("<input type='hidden' name='"+$(this).attr("name")+"' value='"+$(this).val()+"'");
});
If you add the values to your page this way then you would just be able to access them as though they were normal parts of the $_POST
$_POST("hidden_field_name")
Hello I have a select element which has a few options. I am able to get the selected option when an onChange event is fired. Now I need to pass that option text to php, either with pageload or ajax.
echo $form->select('data_source_select',$dataSourceOptions,null,array('escape'=>false, 'empty'=>'Select One','onChange'=>'getData(this)'));
is my select form element, with its options being set in controller. Now onchange, I need to pass the selected option to php/action to load the data specific to this option search. Any help would be great.
Thanks.
As you said, you could either do this as a regular form submission, or as an Ajax form submission. My answer will focus on regular form submission, since Ajax will essentially work the same way and can simply be added on to enhance it later.
One quick solution is to add a hidden field to your form, maybe call it "step" and give it a value of 1. When the data source is selected, simply submit the form and check the value of "step" in your controller. If it is equal to 1, you'll know to load the data based on data_source_select. If the value of "step" is not 1, it indicates that you're on another step in the process and you don't need to process the data source value again.
I have a page where there are 117 input fields. What i want is to submit them via Jquery ajax. What i am thinking is to make an array and send them by this way. I would like to ask how is it possible to take all inputs and then to put them in an array and then retrieve them from the php file (for example, should i do explode,or for each..etc??)
The input fields are not in a form (just in div with id = "config")
Thanks.
Why not use .serialize(), along with an ajax POST? In PHP, they will all be accessible via the $_POST 'superglobal' array.
Stringify the data on the client side into JSON(there is a stringifier available here). Then, on the server-side use json_decode($json_str).
Another option is to put all those input fields into an actual form and then use jQuery's serialize() (which would actually be a whole lot easier).
I have a small form where I want the values to be updated on change for my select boxes which can be done with:
$("form#updateclient select").change(function(){ // use one selector for all 3 selects
$.post("inc/process-update.php",{
// data to send
completed: $("select#completed").val(),
hours: $("select#hours").val(),
update_id: $("#u_id").val(),
who: $("select#who").val()
}, function(data) {
// do callback stuff with the server response 'data' here
});
});
But I have a input text field, where a user can enter the amount of hours, when they click out of the box THEN send that AJAX request to a PHP page.
And the #completed field is now a checkbox, does that pass the same was as an input? How would that work with jQuery, so if you check or uncheck send that info and update database
The thing I have been trying to research now is what is the best way to retrieve those values from the server and update them on the page using AJAX. So once i update my dropdown, it will keep that same result.
Any ideas?
And the #completed field is now a checkbox, does that pass the same was as an input?
No. A checkbox's .value (as used by jQuery's val() method) is always the string in the value="..." attribute (defaulting to “on” if omitted), regardless of whether it is ticked or not. To get the effective value of a checkbox you need to look at the ‘.checked’ property. eg.
var v= element.checked? element.value : '';
Also, you can't use an onchange handler to detect when a checkbox is changed, as IE doesn't fire that event. Instead, you have to use onclick for that element.