I tried lot of posts but none seem to work for me.
I have 2 drop downs inside same form element and they should work in toggle manner, with following properties:
selecting any drop down should clear the other one and auto submit the form.
Also on form submit I am retaining the value of selecting drop down to display user what value had been selected.
For auto submit I have used .change and fformid.submit.
But issue is if i selected dropdown 1, form get submitted and page is displayed with dropdown1_value 1 selected and now when i make selection of 2nd drop down, both fdropdown 1 and dropdown 2 value gets submitted.
I tried using dropdown2_id.remove(), .emtpy(). .val("").
All these seem to visually remove elements, but form gets submitted with the value previously selected.
And i dont want to use Ajax, since I am using Django, doing Ajax will return result to js which is difficult for me to render than using html itself.
Related
I am looking for a way with my form I am currently showing and hiding fields based on the values selected in the dropdowns, What I want to know is.
when i select yes and the field below displays I click submit on the form, if I return to the form the value is still present but the field is hidden again...
How can I prevent that from happening by default?
I want my browser to remember the jQuery change funtions state I left it at after I submit the form.
What you want to do is 'refresh fields visibility' in some cases. I suggest you to create such function refreshFieldsVisibility. Such function reads values from the dropdown and shows/hide the proper field. Then call your function:
When elements state is changed, with on('change') events.
When document is ready (this is your case as I understand), with $(document).ready
Any other situation if necessary
I am using jQuery validation for my application.I have a form that having 2 select boxes.The second select box is disabled according to the first select box value. Also these boxes are coming under an add more functionality. So the form may have multiple such boxes. Thus I am added the validation rules using addClassRules. example code is below.
$.validator.addClassRules("classname", { required: true});
The validation working fine. I want to remove the validation for second dropdown when the first dropdown having a specific value. Currently I have the following issue
once the validation works
change the dropdown value
second box disabled.
click on the second dropdown and then click on out side the error message displayed for second dropdwon.
Form will submit when click on submit button.
I have tried with $('form').validate({ignore:":disabled"}); inside first dropdown's onchange function. but it is not working.
I hope will get a solution for this problem.
Thanks in advance
I have a form that saves user entered values on submit with php.
Some of the fields are in div's that are display:hidden until an onclick or onchange function changes that div to show.
How can I show only the divs containing fields with saved values after the form has been submitted? I have saved the values in the always visible fields but cannot trigger their functions.
I am using very little jquery because I am new to the syntax and would prefer to implement solutions I can understand and adapt. Simple jquery is acceptable if it is a better/quicker/easier solution.
Thanks
Code Example:
<input type="radio" id="customer" name="jobtype" value="customer" onclick="getJobType()" autofocus>Customer
<input type="radio" id="store" name="jobtype" value="store" onclick="getJobType()">Store
<span id="customerjobs" style="display:none">
<select id="customer" name="customer" onchange="createJobsList(this.value)">
*various options*
</select>
<span id="jobslist"><br></span>
</span>
The first span (id=customerjobs) is initially hidden. Upon selection from the radio's, all but the corresponding span is set to display:none and the selected is set to display:block. On submit, the selected radio is saved, but the onclick isn't called to show the span.
The second span (id=jobslist) content is populated by innerHTML using the results of an ajax call to PHP when a selection is made. On submit, the selected option is saved, but the onchange isn't called to fill the span.
So I need to trigger the onclick of a saved radio value to show my content and trigger the onchange of a saved select to populate additional content.
Note: I used onblur with javascript to set the focus initially so any action would trigger the content but it caused an unnecessary pause in filling the form that I didn't want.
Page loads with only a radio selection.
User clicks radio button.
Onclick function changes style of span id=customerjobs to display:block.
The select input inside the span is now visible. The user selects an option.
Onchange function makes an ajax call to request information from the server which is placed in span id=jobslist.
User submits form to same page.
Form saves entered values so they are still selected when page reloads.
Onclick and onchange functions are not triggered by PHP saved values so steps 3 and 5 never occur. Page is left with only the radio buttons unless it is clicked again.
Well, I have a jsfiddle to illustrate my problem using default selections because I cannot use PHP to save entered values.
Imagine the form has just been submitted and the values saved are the checked radio button(customer) and the selection from the drop down(1) which adds the word "customer".
Ideally, the entire form would still be visible (The selected radio, the selected option and the content added to the last span "customer").
Instead, only the selected radio is visible unless it is clicked again to unhide the select drop down. The drop down retains its' value as well, but the content in the last span will only appear onchange.
http://jsfiddle.net/L5H2u/31/
Try it out and advance thanks for any suggestions.
Can you hook a function to onload that checks the radio buttons and simulates the click by calling getJobtype()? That will get the initial case where the radio button is already the way the user wants it. Further clicks will work as you planned.
Edited to add: If I understand you right, all is well the first time the page is loaded because the user has to click something and that runs your getJobType() function. However, when the page is reloaded, the correct radio button is already checked, the user doesn't change anything, and your function doesn't run. If that's correct, running getJobType() from onload should fix it.
You may need something like <input type="hidden" id="firstrun" value="true"> The PHP would set that to false on subsequent loads of the page, and the onload function would only make things happen if "firstrun" was false. Edit: You don't need this because getJobType() has no default action; keep reading.
Edited still more: You have checked="checked' on the Customer radio button, so if the user is a customer, even the initial run doesn't reveal the hidden material.
Remove checked="checked" when the page is initially loaded so that on the initial presentation, neither button is checked.* Then add window.onload=getJobType; to the end of your JavaScript.
On the initial load, getJobType() will do nothing since it checks both buttons and has no default action. When a button is clicked, getJobType() will run and act based on the button that was clicked.
When the page is loaded a subsequent time, one of the buttons will be checked and when onload runs getJobType() it will perform the corresponding action.
The radio buttons, SELECT values, and any other form elements that are preserved and "reflected" by the server-side PHP will be correct when the form is loaded the second (and subsequent) times. Where you need an onload JavaScript function is when one of those values also changes something else, such as making a hidden DIV visible. If there are functions other than getJobType() that manipulate the DOM, it will likely be cleaner to write an init function that sets up the DOM based on the values of the form elements as preserved by the PHP process.
* I normally advocate having some button checked by default so that the user can always get back to the initial state. This case seems to be an exception.
I'm working on dynamically changing a the textfields based on radiobutton selection.
If I select single, then it should display different kinds of fields in the form and when I select multi it has different.
To achieve this,
I created two div's to fit the elements which gets changed on radiobutton selection.
I put the textfields in first div(id="single") and repeated the same fields in second field in another div(id="multi").
Based on radio button selection this works, but when I submit the form the values I have the below problem:
When I select single, the form displays all fields required, but the submitted values are sent twice, i.e. in console I see two entries sent,
I guess it is taking the fields of multi as well.
But when I select multi it works fine, still I see two entries in POST of console.
How can I avoid this. Is it the right way of handling such situations or is there anything other than this.
Fiddle
Console:
Ivrmapping[WelcomeNotes]
Ivrmapping[audioWelcomeUr...
Ivrmapping[audioWelcomeUr...
Ivrmapping[groupZCode] Ba
Ivrmapping[groupzName]
Ivrmapping[groupzName]
Ivrmapping[ivrnumber] 123467901
Ivrmapping[language]
Ivrmapping[language] 0
Ivrmapping[selectionList]
Ivrmapping[selectionList]
Do something like:
$("#multi_language > input").attr('disabled', true);
$("#single_language > input").attr('disabled', false);
Disabling inputs remove them from request.
The name attribute of your fields need to be different in a form control in order to differentiate the values in the request. This does not help you NOT send values across that aren't being used, but it lets you distinguish on the server side which values are for which radio button selection.
I'm having trouble finding javascript, HTML and/or CSS code that'll change the form based on the drop down menu. For example, the form is for adding a property and the drop down menu selections are single family, condo, apartment but they each have their own set of text boxes, menus and radio buttons. How can I achieve this?
What I have understand from your query is that , you have a from with some fields and you have a dropdown and you want that when ever your change selection in dropdown the form fields values must change accordingly right ?
If that is the issue , then it is very simple , first catch onSelectionChange event of dropdown and try to get selected value and once you get the selected value fill form fields by accessing them accordingly in a condition.Thanks
So I actually already had a piece of code I was fumbling with (http://jsfiddle.net/CYzsY/) for this question and it looks like its not working for me because its based on jQuery 1.7.1 and I'm linking to 1.10.2 in my code. Will make a new post accordingly. Thanks everyone!