In jQuery, how to get multiple dropdowns for each group of handset, for example:
Customer can select more than 1 handset to make an order. Firstly customer will need to select a number of handset from a dropdown (1 to 15).
If they have selected number 5 from a dropdown then 5 groups of dropdrowns should appear like this:
Group One:
Select Phone [Dropdown / load entries via ajax]
Select Contract Length [Dropdown / load entries via ajax]
Select Contract Plan [Dropdown / load entries via ajax]
Select Additional Addon [Dropdown / load entries via ajax]
Group Two:
Same dropdowns as above
Other question is, if there an error (validation from PHP) for not filling the form properly - it will redirect back same page but the dropdowns will need to be reselected again. How to make that to work also?
Pretty sure you will have to bring some variable indicating the failure of form completion like into a session or some hidden element in html and then on document load - check for that variable and manually invoke those drop downs.
OR
Do not allow to click the submit button and check the validation in javascript. However it won't be that secure but it would save hassle for both you and the user. I myself would prefer form being checked before clicking submit just to wait a few seconds until the page is reloaded and I face the fact I chose/wrote something wrong.
OR
Validate automatically with xmlhttprequest or something similarly working so on submit click, js accesses php file, validates, returns the result and allows submission of data. Won't be super secure but... You can recheck that with the same php file again (will be caught if someone tried illegitimately pass some data not through form and xmlhttprequest failed to catch it). Would be safest and nicest way for the user.
Assuming this markup:
<select id="qty">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div id="placeholder"></div>
Use this JavaScript:
$('#qty').change(function() {
var qty = $('#qty').val() * 1;
$('#placeholder').html(''); //Clear existing.
for (var i = 0; i < qty; i++)
{
$('#placeholder').append(
'<select id="phone_' + i + '"></select>');
}
});
In your PHP script you'll need to check each possible field name - potentially taxing, probably better to composite these into a hidden field before submitting.
And it looks like #AndriusNaruševičius has answered the other half of your question.
Related
My classmates and I are building a small submission form in which a user submits shipping and billing information for their order.
The two main factors that effect the order price are the type of shipping the user selects ( $shippingType ) and the price of the item ( $initialPrice ). The variable $totalPrice is then defined which adds $shippingPrice and $initialPrice.
What we are working towards is having $totalPrice update when $shippingPrice is changed without the user having to resubmit the form. Can this be solved using php? Or would we have to use a jquery event to update the page in realtime.
You'll want to use some sort of jQuery as mentioned above. It's important to understand that PHP is only used either in AJAX, or before the page has loaded. Meaning you cannot use PHP on a page that has already been loaded. To change elements after it's loaded you would need to use javascript/jquery of some sort. I've attached a quick fiddle to illustrate an example of what I think you're looking for.
The gist of it is that you would bind a change event so that when the elements you want to use for mathing are changed you can update the other items.
$('#shipping').bind('focus, change', function() {
//Get the inital value of the #cost input
var initial_val = parseInt($("#cost").val());
//Value from the #shipping input
var additional = parseInt($("#shipping").val());
//Parsed ints because '+' is used for concatination as well, so making the vars ints will make '+' go back to math.
$("#cost").val(initial_val + additional);
});
No it's not the prettiest, but it works.
Here's the Fiddle:
http://jsfiddle.net/Lb486ck8/2/
You will have to use Javascript to accomplish this behavior. Furthermore, you will need to use AJAX (Asynchronous Javascript And XML) to make it work. AJAX is a way for Javascript to send requests to a web page "behind the scenes" while your page stays in the foreground.
http://api.jquery.com/jQuery.post/
So not sure if this is possible but I have a pretty complex form. With multiple levels of processing ie: If you click a radio button 'x' amount options so up in a drop down etc etc.
Well the problem I have is all the form fields need a name, and went I submit the form I'm sending alot of junk. IE Url could be '?meat=3434?fruit=34495?salad=034943' you get the idea. But in the end all I'm looking to is pull the 'salad' value into the url without all the other byproducts. IE: '?salad=034943'
I've tried a few things, pulling all the inputs radios etc out of the form and placing them in a div. The making a form with just a hidden value so I can pull through Mootools (But that made conflicts because I'm using Mootools Form.Validator so then that fails) Then I tired to make two forms, One that would just be all show, then I would pull the value I want into the processing form. Which I thought would work but apparently it still will process both forms.
Any ideas/techniques of how to accomplish this would be greatly appreciated! (because I'm losing my mind)
Disable any form field you don't want sent and it won't show up in the URL.
In HTML it's:
<INPUT type="text" name="foo" DISABLED>
In javascript set document.forms[...].elements[....].disabled = true.
If you hide the field with CSS it will still be sent like normal.
the elegant way you do this is mount your GET url to submit by yourself..
this way you can send only what you want..
dont send any junk.. you can have problems in the future with a variable that you didnt know you were sending..
you can use this util function of jQuery
var params = { width:1680, height:1050 };
var str = jQuery.param(params);
// str is "width=1680&height=1050"
The following code show one (of many hidden) child select list depending on the value of the parent select list. The script check if any value is selected (in the parent select list) and if so show the corresponding child select list. But if the user select a value for the parent select list, post the form, get a message that the child select list miss input and (most likely) presses back button in the browser the parent select list still has a value (I guess browser default) and the child select list is hidden which will most likely confuse the user.
How can this be solved?
Javascript:
$('#parent-list').live("change",function() {
var value = $(this).find('option:selected').val();
$("#child-list-"+value).slideDown(200).siblings().hide();
return false;
});
HTML:
<select id="parent-list" name="parent">
<option value="1">1</option>
...
</select>
<select id="child-list-1 style="display:hidden">
<option value="a">a</option>
</select>
<select id="child-list-2 style...
I typically select an appropriate option on every page load, either through the code generating the HTML or in the JavaScript when the document is ready.
I think this is a common problem, and as far as I know there is no perfect solution.
You need to find some way to check whether the page is in an invalid state, such as a refresh timer (setInterval) that can check any dependencies and re-render if necessary.
If the user presses the back button after a POST he will get a warning (at least in some browsers). Though you can not trust users to realize the issue...
EDIT: Also, why is the user redirected to another page for the error messages? Can you instead redirect him back to the form if an error occurs, or preferably perform the validations client side before form submission?
It might not be possible but I think its worth a shot so I am asking.
Servlet API is basically a ticketing process/script which searches through a form to find form fields that it recognizes, it has a list of names and those names are the only form fields it recognizes, anything else it wont pick up when creating a ticket.
I am sure everyone knows of the property "NAME" in html that all elements have.
So basically this ticketing process has a list of "NAMES" that it searches for in a form and ALL the form fields that have a "NAME" from the Servlet API's list of "NAMES" it will pick and fill out a ticket..
So for example. http://jsfiddle.net/KWetJ/ over here there is a textbox named "priority"
Below is the list of "NAMES" the Servlet API has. It will search through the form and since one of the NAMES in the form matches its Servlet API name list, it will pick that up and add it to a ticket.
The priority form field is picked up as it matches a name in the Servlet API list and creates the ticket with priority that was chosen in the form and picked up by Servlet API.
NOW THE PROBLEM: as some might have guessed I cannot create additional or custom form field names because I cannot add new names into the Servlet API list. So What I was thinking if possible is to add a drop down list in to the Description section of the form and so in a way I can start adding textboxes and drop downs into that textarea for description.
Goal is this:
A POSSIBLE SOLUTION OR ALTERNATE, How would I do this?
![Alternative Or Possible Solution with AJAX][4]
![Alternative Or Possible Solution with AJAX][4]
Try this on for size: http://jsfiddle.net/maniator/Ke5dy/
$('#addText').change(function(){
$('#myText').append(this.value);
});
HTML:
<select id='addText'>
<option value='hello'>hello</option>
<option value='hi'>hi</option>
<option value='hola'>hola</option>
<option value='shalom'>shalom</option>
</select>
<textarea id='myText'></textarea>
A textarea can only ever have text in it. HTML form field tags within a textarea won't be rendered as input elements. If you want embedded HTML elements within text and have them rendered as input elements, you'll need to use something like CKeditor.
In GMail, the mails are listed. When we we have lots of mails (ex:50), we can select and go to next page, select some more mail, and come back to page 1. But whatever mails the user checked will still be checked.
I just want to implement the same operation. How would I do that?
Thanks,
Krish
Note: I don't want to use AJAX. I'd rather use Javascript, CGI, PERL, etc.
Simple in theory. Just store the ids of checked mail in a JavaScript variable and/or cookie, and let them access (via AJAX) as many checkbox lists as they want, before submitting.
<input type="checkbox" onclick="toggleValue(this)"> and in handler check the value and store it in array.
JQuery
$('input[type=checkbox].mail').click(
function()
{
if (this.checked) $(this).addClass('checked');
else $(this).removeClass('checked');
}
);
$('input[type=checkbox].mail.checked').each(function_here);
Can have some typos in the second one...
PS: don't know why, but the code above is not being formatted (
After every time a user selects an email, add the message id to some array in a cookie (you probably want to preform this on-the-fly, with AJAX).
When you load a page with mail, check if the message id has been already checked, and if so, change the default state to checked.
I Just found the way of doing this using Java Script( no external Program ) and URL Parameters , onclick events , onload events , location.href, using global variable ,read form