Working on clone in jQuery. With my current code original div getting cloned validation working fine for the original one and cloned one. These things are working with my code.
Initially if the user click next button it will show the message as You have missed 7 fields. Please fill before submitted. Once the user starts fill the fields it will automatically starts get reduced.
If the user clicked the add more button it will get cloned the div.
Once the user starts fills any of the field in the cloned one and he missed the rest of the mandatory fields if user click the next button it will show these many number of fields are missed.
Below things are not working:
With my current code if I have select drop down / radio button in the cloned div validation was not working
The validation count was wrong after the cloned
function bind_change_events(){
$('.cloned_field').on('input',function(e){
if($(this).val().trim().length > 0)
{
//$(this).removeClass("cloned_field");
$(this).addClass("required_field");
var parent_div = $(this).closest("div.cloned-row1,div.cloned-row2,div.cloned-row3,div.cloned-row4,div.cloned-row5").find("input","select");
parent_div.each(function () {
$(this).addClass("required_field");
});
}
check_for_validation_removal($(this));
bind_validation();
});
}
Here is the updated fiddle.
When you are cloning the elements, you do not clone the class .required_field. Which in your code only to that class, adds required: true part.
I Now figured out the problem definitely is in your cloning part.
if($(this).hasClass("required_field"))
{
$(this).removeClass("required_field");
$(this).addClass("cloned_field");
//$(this).addClass("errRed");
}else{
$(this).removeClass("errRed");
$(this).removeClass("text-error-red");
}
You had if it has the class required_field, remove it.
So i just deleted this line $(this).removeClass("required_field"); and when adding more education forms, it increased the unfilled count.
I just tested the same idea for the second cloning part. And that did the job. So this is the solution to the count.
Now your talking about the cloned div or radio button not working in your code, in the liveweave code, the drop downs works for me, tho I can't find any radio buttons.
Please try the answer I specified, and if any problems keep to exist, please update your question or leave a comment here.
Related
I have a form which I submit manually (using JS) and it makes the querystring direct since it appends it with all the controls id (weather they have value or not) I read somewhere that I can avoid this by disabling the controls that have no values, before submitting the form.
Hence, In my form I have text box, checkbox and select (dropdowns), I am trying to write an inline query which will get all the select which have no option/values selected from its list :
This $('form').find('select option:selected[value!=""]') somewhat works but this $('form').find('select option:selected[value=""]') doesn't at all.
Any help would be appreciated.
This is straightforward to do on form submission, by inspecting each element in the form. Make sure that you provide a way for users to actually re-enable the disabled form elements.
A working code would be:
$("#testForm").on("submit", function() {
$(this).find('select option:selected[value=""]').parent().attr("disabled", "disabled");
alert("ok"); // for debug purposes
return false; // this stops the form from actually being submitted
});
Here's a working fiddle that demonstrates widget disabling:
http://jsfiddle.net/sw6v928m/3/
Edit: Updated to actually select disabled elements
Edit 2: Updated to compact the code a bit, after request from the OP
I'm currently working on a rails project.
I have a text_field and a select_tag on the same row. I want a new row of text box and drop down list to be created whenever I have at least one character typed in the current text box. But I'm not sure how to do so. I assume I'd need to use jquery? But I'm still a newbie with web programming...
Please help! Many thanks!!!
You'd add fields and then apply a hidden value to them using jQuery's document ready function. Then apply a keyup function to the existing field you want it to trigger off of that calls show on the hidden item.
Here's the jquery I used in a wordpress page to do exactly that:
$(document).ready(function() {
$("#fieldtohide").hide();
$("#nonhiddenfield").keyup(function() {
$("#fieldtohide").show();
});
});
A quick question which is driving me a little insane. I have some radio buttons on a lightbox that is fired when a user wishes to edit some entered values. This is an old system which I didn't write. Now the problem/solution is relatively easy however when testing in IE7 I've noticed some issues with:
document.getElementById(thisID).checked = true; // thisID is the ID of a radiobutton
Basically the above code doesn't set the checked value on a radio button.
I thought I could sort this by using:
document.getElementById(thisID).defaultChecked = true;
However if I return and change my radio button values previous radio buttons remain selected, as their .defaultChecked status hasn't been updated! I can't control the number of radio buttons as they are generated on the server (as are their IDs) and the values for the radiobuttons are stored on the client until the form is submitted.
Is there a way around the document.getElementById(thisID).checked bug in IE7?
I just had to loop through all the radiobuttons and set the .defaulChecked to false before resetting... damned IE7!
There is an possible duplicate which consists of the same issue in which the checking of the radio button is not working in IE7.
Kindly go through the link Check Here
I used a jquery combobox for autocompletion and I needed to clean its value.
I got into a solution which is like this: http://jsfiddle.net/BbWza/30/
The problem is that the code below clears all textboxes of all combos in the screen. I'd like to clear only ONE combo (let's say the first one, for example).
$('.ui-autocomplete-input').focus().val('');
Although there is only one clear link button, it doesn't matter which combo will be cleared as long as only one is.
The solution should work for N combos in the screen. E.g. Each button should empty its corresponding combo.
You can add ids to the generated fields by adding this line as the last line of _create():
input.attr( 'id', $(select).attr( 'id' )+'-input' );
Now you can select individual fields with the ids:
$('#combobox-input').focus().val('');
To clear just only one combo you must select it with it's id:
$('#combobox').focus().val('');
$('#combobox').autocomplete('close');
with your code you are selecting all comboboxes because you are using a class selector.
EDIT if you want to make two buttons (one for each combobox) you could do:
$('.clicky').click(function() {
var combo= $(this).prevAll('input:first');
combo.focus().val('');
combo.autocomplete('close');
return false;
});
fiddle here: http://jsfiddle.net/BbWza/39/
Your jsfiddle is a little ambiguous as to which combo box should be cleared - there are two combo boxes but only one clear link, so it's not obvious if the link is supposed to clear just one or both combo boxes.
I suspect in the real world that each combo box would have it's own clear link. Selecting the right text box for your clear link all depends on your html. One simple case would be where the clear link is the next sibling to your <select> element:
<select class="combo">
...
</select>
Clear
Then you could create the combos in one call by using class. Then create the clear click handlers all at once. The handler would use .prevAll(".ui-autocomplete-input") to find its associated textbox.
$("select.combo").combobox();
$("a.clearCombo").click(function () {
$(this).prevAll('.ui-autocomplete-input').first()
.focus()
.val('')
.autocomplete('close');
return false;
});
Working demo at jsfiddle
If your link is not a sibling of your combo box, that's ok. Either find its parent that is a sibling and use the above approach. Or, if that won't work, find the common parent of both the combo and the link. This only works if the common parent contains only one combo and one link:
<span class="comboContainer">
<span>
<select class="combo">
...
</select>
</span>
Clear
</span>
You use .closest(".comboContainer") and .find(".ui-autocomplete-input"):
$("select.combo").combobox();
$("a.clearCombo").click(function () {
$(this).closest(".comboContainer").find('.ui-autocomplete-input')
.focus()
.val('')
.autocomplete('close');
return false;
});
Working demo at jsfiddle
The nice thing about these techniques is that the link doesn't need to know the id of its associated combobox. We can just infer it from the html. This makes it very easy to move combos around and add new ones.
Two suggestions:
Add a clear method to your plugin. Your widget users shouldn't have to know its internal workings. In your example, you have to know that widget uses .autocomplete(). This also prevents you from changing your implementation later. Adding a "clear" method would simplify your click handler to just $(this).prevAll("select.combo").combobox("clear").
Give your widget the option to create the clear button itself. Users can always disable it and add their own clear button if they want.
Well, in the example the following would only clear the last combobox:
$('.ui-autocomplete-input').last().focus().val('');
This would clear the first one:
$('.ui-autocomplete-input').first().focus().val('');
You can clear it in event "close" of the autocomplete
$("#your-input").autocomplete({
source: items,
close: function (event, ui) {
$(this).val("");
}
});
How to give clear button for autocombobox please tell me
You can add ids to the generated fields by adding this line as the last line of _create():
input.attr( 'id', $(select).attr( 'id' )+'-input' );
Now you can select individual fields with the ids:
$('#combobox-input').focus().val('');
last.fm has this nifty feature when you're adding an event. you have the Artists field, and when you start typing in it, another text field appears beneath it. when you start typing in that next field, another new field appears beneath and so on. I've been trying to figure out how to mimic this functionality using jquery but I can make it work on the first, stationary, field only. any ideas?
edit:
actually, nope, it's not working even for the stationary one, since it adds the field on EVERY key press
edit2:
alrighty, so some fine folks have already solved my adding issue, now, how would one go about adding the field only after the first time a key is pressed.
You are probably only binding your handler to the first static input, and not the dynamically created ones. Use .live() to do your event binding. That will bind the event to future elements that match the selector.
To make sure you only add one new one, make sure you only add it when typing into the last textbox. Check $(this).closest(".container").next(".container").length to make sure there isn't already a new textbox.
$("input.myClass").live("keyup", function (e) {
var $container = $(this).closest(".container");
if (this.value && !$container.next(".container").length) {
var $newContainer $("<div>").insertAfter($container).addClass("container");
...
}
});
Live is the right idea but closest is overkill: jsFiddle
$("input").live("keyup", function (){
if ( !$(this).next('input').length ) $(this).after('<input type="text"></input>');
});