In this question, I found out how to dynamically add form fields.
Now, how can I set a cookie to remember the amount of form fields that were generated, and their content?
eg. First visit, user types this:
Input one
Input two
Input three
Then he/she visits the page again. There are 3 form fields, containg Input one, Input two and Input 3.
Is this possible using a server/client side solution?
Thanks a lot,
Harley
assuming that the input textfield class is "textfield1" -
This snippet will capture the data into a cookie when the value is modified
$(".textfield1").change(function() {
$.cookie("textfield1", $(".textfield1").val(), {expires: 7});
});
This snippet will read the cookie data and populate the field on page load -
$(".textfield1").val( $.cookie("textfield1") );
Put both these snippets inside $(document).ready(function(){ }); and you are good to go !
there is a useful plugin of jquery "Jquery Populate" you can store your json in cookie/session and use it to fill your forms.
Related
I have a database app written in PHP (jQuery/JS on the front end) that has bilingual labels/text. Currently one can only change one's language on a maintenance page (form submission, then PHP updates a session variable with their new language choice), but the users would like me to add a language pulldown that would appear in the corner of all pages. When the page contains a form, I don't want users to lose their partially entered data if they happen to change the language, so I need to save/restore the form data somehow. Is there an easy way to do that? I know I can use jQuery to serialize the form, but then what? Send that added onto the URL and pick it up in PHP? Then what? Write some routine to loop through the form fields and handle them properly (inputs, selects, radio boxes, etc. are all different)? It seems like there should be an easier way. I don't mind restricting myself to HTML5-supported solutions or adding jQuery plugins.
How about localStorage?
If user has filled any input fields, save them to localStorage and delete the data after user submits the form.
My suggestion is to:
Submit the Language and any wanted user data when changing language to the server using $.ajax or $.post
Basically I have a bunch of data I get from a database and put onto my page in a table. Right now I have the user type in the name, session, etc. in the table and that is sent as post data into the next PHP page, which I then use to lookup more stuff in the DB and so on and so forth.
Obviously that's not a great user experience; it would be much easier to simply CLICK the item in the table and everything gets sent automatically into the next page.
I'm not sure how I'd go about doing this.
My tables are first and last names for now, so if you click a certain row it should go to the next page sending each cell as data.
EDIT: Some examples:
Traditionally you do this with a form
<form method="post" action="pageDataIsGoingTo.php">
to send data to the next page. However, I don't want to do this with a form; but rather when they click a URL and/or button that sends the data. I can "hide" the data from view I suppose, but I still don't know the function to actually go ahead and do that.
Would I make a javascript button/function that sets something in an invisible form?
You can use invisible/hidden form fields.
That might be your best guess.
Javascript would be a good solution if you wanted an ajax POST call, but you want to load other page.
So hidden form fields are your solution.
Parallel with table data.
You need to embed hidden fields and your visible item row within a form
(so each item row contains also a form & hidden form fields and visible submit button,
which you can style with css)
This presuming that your table contains more items which you can choose to send.
Although I would do this with backbone & jquery and do it all in ajax.
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 form I need to auto fill it using Ajax and php. Suppose My unique field is mobile number. So when form appears firstly person has to fill mobile number. If mobile number exist in the database than all the rest field retrieve its value that is his name, email etc, making all the text fields disable.
my approach to this work is on blur effect I can send value through AJAX. but how call values in array. I have called only single value through echo; but have not called array back from java script page.
Secondly I need jquery to fill all form with respective values and disable particular fields in form.
Please give me some more idea to make this approach better and provide some hint to implement it efficiently.
have you tried Autocomplete from JQuery UI?
http://jqueryui.com/demos/autocomplete/
it is very easy to use, it uses ajax and can be easly used with php. Tell if you will have any problems.
A simple way to do this is to separate your page into 2 forms. The first form will contain only the mobile number field, while the second form will not be initially visible. This way, the user will be forced to fill in his mobile phone before doing anything else.
Submitting the first form will trigger an ajax call to your php file which will check whether the mobile phone exists in the database or not. If it exists, it will return a pre-filled form. If not, it will return an empty form. Therefore, there is no need to change the values of the fields with javascript. Now, all you have to do is to take the response of the php and put it into a div under the first form.
If I have a form with the following 3 fields:
First Name Last Name Date Of Birth
When the user fills in all 3 fields and submits you will get the URL
http: //fakeURL.php?firstName=Fred&lastName=Flintstone&DateOfBirth=2/5/1952
However, if the user only fills in First Name and Date Of Birth you will get
http: //fakeURL.php?firstName=Fred&lastName=&DateOfBirth=2/5/1952 (where lastName has no value)
How do I achieve
http: //fakeURL.php?firstName=Fred&DateOfBirth=2/5/1952 (where lastName and value are removed from the URL)
I don't want to disable the input field upon using onsubmit. Is there a better way than disabled the input field?
Please help...
Just remove the "name" attribute from the input element.
// using jQuery
$('#inputId').removeAttr('name');
// native Javascript
document.getElementById('inputId').removeAttribute('name');
You must either:
Remove or disable the field from the form before submitting it
Don't submit the form, instead redirect to a URL you construct from the form yourself
Make an AJAX request instead of leaving the page
Aside from those options, you can't submit this form via GET without all the inputs becoming part of the URL. That's part of the HTML and HTTP specifications.
if you are working on angular and using (ngModel), Remove the name attribute in the input field and add
[ngModelOptions]="{standalone: true}"
You should use forms with the GET method only when the new page is supposed to be bookmarked and passed around.
Since you are talking about you taking input from the user (and I presume you also store that input in a database or some similar permanent storage), you should be using POST instead.