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
Related
I am making custom shop-cms. And at this point I am stuck, trying to make for each product possibility for picking colors and for each color 1-5 picture(s). And I just can't understand the most reasonable solution, how should the form look like. The point is that I clone the CREATE form on page load for less code purposes, making an EDIT form out of it. When I click on product's EDIT button it makes a request to DB picking all the information according to the chosen ID. The way I see it is that I have to have main hidden input where I keep all the information about all the colors and related pictures on other inputs change. That will do with creating new product. But when it comes to editing, it requires now collect the information in reverse, the main input's change fills related inputs. And the way I see it requires a lot of rows of code, which is not an option. Maybe somebody has done it before and knows a simple way.
in the DB I keep everything in one cell :
COLOR { IMG => VALUE, PRICE => VALUE }, COLOR { IMG => VALUE..etc}
You can use AngularJS kind of framework to build single page application.
OR use Ajax to call and fetch data for each action.
Loading all data and manipulate them in hidden fields, may makes things complicated.
I myself will either use MVC Framework (i.e. Angularjs) or jQuery ajax to load data according to each action.
I'm working on a project where users can choose squares of a big field and "book" them.
The grid is just a html table with each having a unique id (1,2,3...).
similar to this example: http://jsfiddle.net/MvFx9/
$
Now after they submit a simple form, the chosen squares turn yellow. i do this with javascript, search all elements by its id and change their class. And it works perfect.
What i want to do now is to change the class of each chosen element server-side. So that when a new user loads the page, he sees yellow squares, which are already booked by other users.
But i dont know how to do it, i guess its not possible with javascript, so i tried it with php. Is there a equivalent getelementbyid function and how can i change the class of each element?
Please give me an advice, thanks.
In some way, you will need to save which squares have been booked by others
The general idea :
1) Whenever a user click on a square, you save the id in a table in the database. You can use a form (it will reload the page) or if you want it cleaner, you perform an AJAX call.
2) When displaying the page, you retrieve the id that have been saved and set the class "already_booked" for them dynamically.
What you need is a database to know which spots are booked.Anything else will take you a long while to do and won't be as efficient.
DOMDocument::getElementById('element_id')
Use the PHP DOMDocument class to do this.
http://php.net/manual/en/domdocument.getelementbyid.php
Edit: didn't fully read the question.
http://docs.php.net/manual/en/domelement.setattribute.php
setAttribute("class", "already_booked");
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 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.
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.