I want to create a script that does the following:
When answering questions via a radio, drop-down, or checkbox, the script checks
When selecting a radio button (or dropdown, or any form element except text and textarea) it checks if the given option will make the script to ask more questions.
Example:
A checkbox in front of 'Call me back', which when checked shows 2 more fields (a dropdown with all available countries, and a textfield for their phonenumber)
Another example:
(Let's say we're end-user IT support)
A dropdown menu where the user can select on what topic they want support (i.e. hardware, software). Then when the user selects a topic, it will show a additional field with more topics (ex: when user selects hardware, they get phone, computer, etc.), which on their turn shows extra fields for serial number, maybe OS'es and so forth
I think I'll be able to figure out how to do it in PHP and SQL, I just need a bit of a push in the right direction with HTML and jQuery:AJAX
I hope I'm clear enough in what I want the script to do..
Thanks in advance! :)
Assuming some html structure like this:
<div id="question-1" class="top-question">
What do you want?<br>
<select>
<option value='thing'>thing</option>
<option value='item'>item</option>
</select>
<div id="question-1a" class="sub-question">
How many of them?<br>
<select>
<option value='5'>five</option>
<option value='10'>ten</option>
</select>
</div>
</div>
And using jQuery library (which makes life lots easier in cases like this) you can do this:
$('.sub-question').hide()
$('.top-question').bind('change',function(){
$('.sub-question').show()
})
As demonstrated here: http://jsfiddle.net/xtUk6/
Ajax is not necessary here. The concept is that you have all the form fields there on the page, just visually removed. Then, each question has it's own unique id that can be identified when the form is posted back to the server and handled there in your case by php.
Using Ajax is possible, but unless you have millions of questions to select from according to some very complex set of input scenarios, it would cause delay whilst it is constantly fetching the next question from the server.
You don't have to use ajax for this, what you could do is when the dropdown is changed, change the CSS property of the div containing the fields to non display:none;.
You can also do this with $().show() & $().hide() methods. You will need to put the css selector inside the $() parentheses for the items you want to show or hide. This is if you want to use jQuery instead of just using the display:none like suggested above.
Related
i am learning php along with mysql and so developing a e-comm site it is very exiting when i get hindered by some error but this time it just a html thing that has stopped my constuction.
so, i have to populate 2 <select> tags in a addProduct form for Category and sub-category but i need to work on onChnage event for category select list, as to populate the sub-category select list on basis of the user selection in category select list. i have searched a lot and some how i can do it but i want to know what are the possible ways and what is the safest way? also can i build a php function to do this if yes how to get the element value without submitting the form since it will submit all the form data that will empty all other fields.
thank you!
onChange events are handled by javascript, PHP is finished processing before the user sees the loaded webpage.
To do what you are asking, you will want to utilize javascript/AJAX to update the page "on the fly"
Firstly, let me say that I've been searching the Internet, rewriting scripts and I still can't seem to find a solution to my problem or even one that could possibly help. I've even searched this site for similar questions and the focus seems to be on actually displaying the database values but what I want is to access those values. Or rather let me put it like this, I have a drop down that is generated through php and it contains data retrieved from mysql... all that works fine no errors.
My current problem is that when a user select an option from my dropdown, I want to use that value to do more operations based on the user's selection. Please help, I've been at it for a week with no avail. Thanks in advance. If you need samples of my code please tell me.
Your problem is not that easy since php only runs on the server and does not directly get any information about what a user is clicking and selecting in his browser.
One possible solution (and the most common one nowadays) is to load any further information asynchronously via AJAX as soon as the user selects something in your dropdown. jQuery is a neat framework that can help you with this.
An other method is to automatically submit the form as soon as something is selected and read the selected value with php ($_POST variable). With this you could then easily generate a more custom website according to the selection that was made. Code could look like this:
<form method="post" action="" name="myform">
<select name="myfield" onchange="this.form.submit()">
<option .... >
...
</select>
</form>
(Note that the form is submitted when the onchange event is triggered)
This method clearly has the disadvantage that the whole page has to be reloaded whenever a selection is made. With the AJAX approach the user does not even notice that some additional information was fetched form the server. (Except a small waiting time that may occur)
What you want to do depends on your own decisioin. However the first approach may need you to get into some javascript programming. But the result is certainly more comfortable for the user...
You could make a callback function on the onselect Event. This is the easiest with jQuery in my experience.
http://api.jquery.com/select/
Wrap your select in a form which had a post of type 'get'. This will post to the same page you are in and then you can use the get parameter on page refresh to load your second list
I have an html form with a lot of options that a user would fill out (name, email, etc.), and then I will have a dropdown asking the user to select either "Style A" or "Style B".
If "Style A" is picked then there will be specific sizes for this style, if "Style B" is selected then there will be specific sizes for this style, etc.
However, I'm a complete noob when it comes to anything past xhtml/css and minimal PHP/javascript (very minimal) so I'm not sure exactly how to accomplish this. Will these options be displayed when the user selects style a/b or will the user have to select the style, click submit, and another form loads? I'm not sure exactly how this can be done, so anything works in my book!
Can anyone help me out with issue?
Thank's a ton for any help with this.
One good way would be to have a container around your form such as:
<div id="style_container" class="styleA">
<form> .. </form>
</div>
Then you can have entries in your css files such as:
div.styleA input
div.styleB input
Finally, with jQuery on your page, assuming you have a select field with the options having the value of the style class names, you can do:
$("select#style_select").change(function(){
$("div#style_container").removeClass("styleA styleB");
$("div#style_container").addClass($(this).val());
});
So you only need to change that class on that container div and the entire page should update according to your css rules.
You can do this completely with Javascript. Style 'A' will be a class (or set of classes) and Style 'B' will be another class (or set).
When the user selects Style 'A', run through all of your elements that you want to update, and their appropriate class from Style 'A'. If the user selects Style 'B', do the same for it.
HTML
<select id = 'styler' name = 'styler'>
<option value = 'a'>Style A</option>
<option value = 'b'>Style B</option>
</select>
Javascript
(Using jQuery for simplicity)
$(function() {
$('#styler').bind("change", function() {
if($(this).val() == 'a')
$(".bClass").removeClass("bClass").addClass("aClass");
else
$(".aClass").removeClass("aClass").addClass("bClass");
});
});
You already gave 2 solutions:
Single form, when the style option is selected, child options related to the specific style will be displayed, the easiest way to accomplish this is to have a JavaScript function (let's call it switch_size_display) display or hide the available options when the style selection is changed.
Multi-page form, this is more difficult and less preferable to your visitors, this can be accomplished using cookies, Get or Post : On page 1, the user will select "style" which will be saved on a variable (cookie/get/post), on page 2, the user will be presented with the "sizes" relative to the style found on the variable.
It you are learning Javascript and PHP, both these solutions are very good exercises.
One last thing is that you should never trust user input, if you are creating a website that will be available online (not locally) please make sure that you validate strictly anything that comes from URL, Cookies etc...
I have a form with multiple input values from various select drop down menus. For example:
A member has 3 choices:
Your favorite color: 1) red; 2 ) blue, 3) green.
If the favorite color selected is red, use a javascript show() to reveal a new div with drop down element, asking to select a new set of options (and so on for blue and green).
I am able to do this easily but the issue I run into however, is in the use of the additional form field names. For example, regardless of the selection above, every choice will prompt the user to enter information in a textarea explaining their choice. I want to name this text area: "explanation". If explanation is filled out by the member with choice 1 above, however, choice 3's hidden explanation field will overwrite the value, thus forcing me to create "explanation1", "explanation2", "explanation3"...
This is a simplified version of what I am trying to accomplish but ultimately, I do not want certain POST variables to go from page to page AT ALL within a hidden DIV. Is this possible?
Thanks!
EDIT
I found this article which gives a good explanation for disabling input elements, it does not however get to my underlying basis which is that I want to have multiple input elements with the same name but appear only for various selections (so explanation is only valid if choices are 1,2,3 and 2,4 but just because 2,4 is not met, 'explanation' should not be set to disabled because of it)
How about setting the other fields (the hidden ones) to disabled? That way their values will not be posted along with the rest of your form.
So in the if-block where you decide which div-with-dropdown to show, just add:
$('#div1 .explanation, #div2 .explanation').attr('disabled', true);
Updated answer based on your comment. Just add a class to the answers, so they can have the same name. Make sure you don't give them the same ID, though. That's invalid HTML.
Man, it'll be very easy if you use Jquery, a JavaScript library. An example...
On a click, a input will appear...
$("#btn")click( function(){
$("#inputID").css({'diplay':'block'});
});
You'll resolve your problems using Jquery.. access the site to learn more... http://www.jquery.com
The Problem
I have a page with a form on. It has a hidden field called: generic_portrait
I want the user to click a link "select portrait"
This will open a Dialog/Popup using jQuery, based on a dropdown completed earlier in the form. If the value of the dropdown called "gender" is "male" then show male options, if "gender" is set to "female" show female options.
Each portrait has a radio button, each with a name assigned "male1", "male2" etc
Depending on the radio button selected in the popup, I want the hidden field to be set to match this.
The Questions
What is the best way to show a dialog/popup using jQuery, different depending on a dropdown box on the page. Use Javascript to see what is selected, then show a corresponding Div?
I can do the check to see what the dropdown is set to using jQuery, but how can I then shown a specific popup based on that?
Once i've popped it up, how do I take the value assigned to the selected radio box, and set the hidden field called "generic_portrait" to this value.
Why i'm asking
Normally I would figure this out myself, as i'm sure it's not that difficult, but I don't use Javascript and/or PHP very often, and this is due for a client urgently. So I would really, really appreciate some help on this one.
Thanks for all replies in advance.
Moses has some good insight. But, to specifically answer your questions:
For the popup you need you might try using a "modal". Check out the jQuery UI library and specifically look at the dialog widget.
As to how to show a different modal in each circumstance, one option would be to create an empty div element which is hidden by default via CSS. Then using the dialog widget, create a different modal for each. A basic example:$("#yourID").html("your content").dialog({title:"your title",show:"fade",hide:"fade",buttons:{Done:function(){$(this).dialog("destroy");}}}); NOTE: There are a number of ways to create the modal content, including creating them in full in the HTML, while being hidden, and then simply using the dialog widget to display them.
As to how to populate your hidden field with what was selected in the dialog widget, look at dialog widget source code (e.g. the "view source" link on the page) to see how they get form values. You can then use jQuery to set the hidden field's value attribute.
Before even addressing your question, you should consider whether there is a more degradable (i.e. not reliant on js) approach to your form. Without JavaScript enabled, it sounds like your users will be dead in the water, so to speak, since they will not be able to complete the gender specific questions.
Unless your clients don't care about graceful degradation, I suggest breaking the form into pieces, and then serving the correct pieces via php depending on what the user chose. Doing so erases the need for modal dialogs (which, while cool, are not accessible) and allows much more of your audience to participate in the form.