I have used jQuery Form plugin to submit the whole form data to server while Ajax. When the server code (php) returns, the retrieved data is in JSON format. What is the best method to populate the form with jQuery.
Here is what I want to do:
The user enters the data on the form
The user submits the form data (I use ajax to submit)
The server code returns.
The user has the ability to retrieve the entered data.
So for the step 4, I want to know what the best method to use to populate a form?
Thank you
If you can ensure that the returned JSON object contains property names that match your form fields, it can be quite simple to populate the form.
Of course, you need to first evaluate the retrieved JSON, either using eval, or using a JSON library such as this for added security checks.
Then, you can just iterate over the object like this:
var obj = eval(json); /* or JSON.parse(json); */
for (var field in obj)
$('#' + field).val(obj[field]);
If your form contains non-textual fields (such as a select) you could add an additional check to set the selected index instead.
Related
I have a scenario where I need to send form data via a GET (not a POST). I'm submitting the form to the same page as the form is on (form action="#).
The problem is that the controller for the site can't handle array data-- it looks for strings or json only. So when I have any array data from a row of text boxes that gets sent, I get a 500 error.
I am currently doing something like this:
$('#submit').on("click", function(e){
e.preventDefault();
$form.serialize();
$form.submit();
})
But this doesn't get the job done. The URL params look like this:
index.php?condition%5b%5d%3dtest
How can I access the actual form data and "rewrite" the data to be a valid json string for the text box values prior to sending the form?
I could POST the data but then I'd need a different route, and I could send the form via ajax but that would be overkill.
Thanks
NOTE: I know how to serialize the data already, as is explained in my code sample. The problem is I want to replace the URL params in the default form submission with the newly serialized / json-ified versions, and the suggested duplicate question does not address this.
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")
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.
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 two tables on my page and they appear side-by-side. The first one contains an entry form and the second one contains a grid that displays rows of records.
When the user clicks on a row, the data related to that row must appear on the boxes of the form in the first table.
I know how to call a .php file through AJAX. But when I have queried the database and obtained the result-set, how to bring all those values to fill the entry form of the first table?
You can get your data in json format and set input fields values in callback function using it.
$.getJSON(
"your_url_to_request_data", {
your_params: and_it_values
},
function(data) {
// data <-- this is your data
$("#field1").val( data.something );
}
);
You need to send the result from the database to your JavaScript file via a callback function as silent implied. You also need to encode the data to JSON before sending it to JavaScript.
What you have to do in the callback function in your JavaScript file is to parse your result to JSON using native JSON parser. You access it by writing
JSON.parse(here_you_write_the_data_to_be_parsed);