I have an edit form filled with jQuery Mobile inputs like Text-Inputs, Sliders, Checkboxes and Buttons.
When the form first shows, the content (Model) to be edited is fetched.
Before I start fetching, I disable all form elements to prevent the user from doing anything while the content (Model) is being fetched. Only the cancel button should work. "Disabled" means greyed out and not clickable for me.
After the form has finished loading, I enable the form elements again.
Currently, I can only do this by selecting each input type by itself.
//These inputs work with .prop("disable", "true")
//#save is an <button type="submit">
var normalInputs = $("input[type='text'], #save");
//JQM converts <input type="range"> to this
var sliders = $("input[data-type='slider']");
var checkboxes = $("input[type='checkbox']");
normalInputs.prop("disabled", "true");
sliders.slider("disable").slider("refresh");
checkboxes.checkboxradio("disable").checkboxradio("refresh");
For enabling, I even have to call the slider() and checkboxradio() initialization methods because I get an error otherwise (cannot call methods of xxx prior to initialization. attempted to call method enable)
Is there a method to correctly disable all of the jQuery Mobile inputs by using only one selector? A common way to disable/enable inputs?
You can use ui-state-disabled class to disable any element. This class is added by jQM to disabled with disabled="disabled" attribute.
It can be added to form.
$("#form").addClass("ui-state-disabled");
By element, i.e. input, it should be added to parent div as input are wrapped in div upon creation.
$("input").closest("div").addClass("ui-state-disabled");
Demo
Related
I have a MVC Web-Page containing 1 datepicker. After selecting the date, there is an AJAX call to the server providing the user a list of possible actions (being radio buttons)
The user can select a radio button but this cannot be deselected if the user wants.
I tried to fix this with some javascript code, but I cant seem the access those radio buttons when generated dynamically in a partial result by the AJAX call.
It is very important, the big problem is that the radio buttons are not present on the original form. and I think therefore I cannot access them.
$('#nameofradiobutton')
$('input[name='nameofradiobutton'])
$('input[type=radio])
$('input')
All these and many more are not working not even the last one addressing all input controls...
Any guidelines? starting points? tips? tricks?
Thanks!
Except for if the DOM element you are trying to access is in an iframe there shouldn't be any reason you can't access it. The only reason I can think of why you can't access it then is because you try to access it before it is added to the page so for example you have your ajax callback call a function dowork and it looks like this:
function dowork(){
//add the radio buttons
$('.myradiocontainer').append($('<input type="radio" id="value1" />'));
//you try to check it here but it doesn't work
$('#value1').prop("checked", true);
}
If this is the case then you can do this instead:
function dowork(){
//add the radio buttons
$radio1= $('<input type="radio" id="value1" />');
$('.myradiocontainer').append($radio1);
//you try to check it here and it works
$radio1.prop("checked", true);
}
$("#parent_element").on("click", "input[name=radio_button]", function(){
var radio_button = $(this);
});
Where parent_element is the parent of your radio button and is not dynamic (present when the dom is loaded). radio_button is the name of radio button. Variable radio_button holds the actual radio button element.
I'm trying to make something like a shopping cart, but just with an order form.
I am using this pattern to fire input changes, but it doesn't work in my case.
Here what I have first.
<div class="ingrid__table-row">
<div class="ingrid__table-data ingrid__table-item">Lemon</div>
<div class="ingrid__table-data ingrid__table-weight">15g</div>
<div class="ingrid__table-data ingrid__table-price">10</div>
</div>
With jQuery, on click, I take the data from ingrid__table-data and add to the suitable input into .order__container.
Then, on the same click, a number input is appended, which will enable to choose the quantity of the selected products.
$('.order__container').append(`<input class="bul-order-info__input bul-order-info__qnt" type="number" name="Quantity" min="1" value="1">`)
And it appears on a webpage in the order form.
I need to detect the value changes of "number type input" and fire other events.
But the input changes are not detected, although if I create the same input element manually in HTML document, these changes are detected perfectly as it's shown here
How can I achieve this behavior?
My best guess based on the info you provided is that you are trying to attach the on change event to the dynamically created inputs on this way:
$('.bul-order-info__input').change( function () {...} );
But with the code before you are aren't applying those changes to any input because none of them exists when you are creating the event handlers, so you have to bind the events to an existing element like this:
$(document).on('change', '.bul-order-info__input', function() {...});
The element doesn't have to be always document, but I tend to use it, because is the only one that always will be present. However, something like this is also valid:
$('.order__container').on('change', '.bul-order-info__input', function() {...});
I am making a form in which I am using required attribute on its elements. Now consider the following situation-
The form is divided in two tabs say General Details and Additional Details. So while submitting the form if I leave the required field blank on the visible tab then user can view the message. But suppose user is on first tab and error comes on second tab then User cannot view the error popup and he is clueless about why the form is not submitting.
Now I am searching for a way a jQuery event can be fired, whenever the required attribute error comes.
So on this event I can program to show the tab on which the error comes.
Please note I know I can use the JS/jQuery based form validation but the main thing is that, this form is being generated by Grails and the required field is auto-applied depending on the database. So I cannot use per form based JS validation.
See how the required field is selected with the :invalid pseudo class:
jQuery(document).ready(function(){
jQuery('button').on('click',function(){
jQuery('input:invalid').css('background-color', '#F00');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="required test">
<input type="text" required="required" />
<button>click</button>
</form>
You could simply check for the fields visibility, and if not given traverse up to the parent tab, give the parent tab a class which marks the tab label as containing something invalid.
One way is to use submit button and call myValidationFunction() method of JavaScript as action. (action="myValidationFunction();").
Other way is to use button and call myValidationFunction() method of JavaScript as on Click event of that button. After that, inside myValidationFunction(), you can use checkValidity() method to check validity of form at once or particular element and run your custom code to shift on particular tab if there is error to show to the user. function myValidationFunction() {
if ( $('#myInput')[0].checkValidity() ) {
// code to move to the particular tab
}
}
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.
here is the fiddle page:
http://jsfiddle.net/hgcTb/10/
in the form there is a radio button with id = "extra"
i was hoping to do this:
when user clicks that radio button all other inputs are disabled, the only inputs that would be enabled is the radio buttons and the submit/reset buttons, and when user click reset the form should reset to the original form, maybe using javascript?
please give some pointers or samples
EDIT: ive added a function to disable each element but it is giving me errors.
Yes, use javascript to do so.
Add an onclick event to your radio button that disables the other HTML elements. For example:
Here's your radio button:
<input type="radio" name="choice" value="consume" onclick="disableItems(this)" />
Here's your script:
function disableItems(obj) {
var el = document.getElementById('<your HTML element's ID>');
el.disabled = true;
// do this for other HTML elements in your form
}
Regarding Reset, you can attach a similar onclick handler for the RESET button, that enables the controls back (using el.disabled=false).
These are just snippets to get you started, and give you an idea of how to proceed (no spoon-feeding for the exact solution). There may be more code involved based on your form's logic.