Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I need your help. I have this fiddle , as you can see, clone the original div with new name and with the text selected, and now I want to validate that created selects, if their selected option is "select" alert the user and focus in that select,
I think in something like this, check the divs that name start with "newDiv" and selects inside with text equal to "Select"
$('button#validate').live('click', function() {
var wrong = $('div[name^="newDiv"] select option').filter(':selected').text();
if ( wrong == "Select" )
{
alert("Please select an option");
$(this).focus();
$(this).css("background-color","red");
}
});
I hope you understand what I mean to say, thanks.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/2Lgumtp8/3/
Various fixes:
Then new divs had no id, so I changed the filter to use ids.
I iterate all matching selected values. if one is wrong, abort there.
I remove highlight of all selects prior to check.
I focus the the closest parent select of the wrong option
I highlight the closest parent select of the wrong option
$(document).ready(function () {
var counter = 2;
$("input#clone").click(function () {
//Let's make a copy to work with
var originalDiv = $("div#old");
var cloneDiv = originalDiv.clone();
//Renaming cloneDiv
cloneDiv.attr('id', 'newDiv' + counter);
//Renaming inputs in cloneDiv
$("[name='id']", cloneDiv).attr('name', 'id' + counter);
$("[name='email']", cloneDiv).attr('name', 'email' + counter);
$("[name='emails']", cloneDiv).attr('name', 'emails' + counter);
//Value first textfield
$("[name='id" + counter + "']", cloneDiv).val(+counter);
//Value Select
$("[name='email" + counter + "']", cloneDiv).val($("[name='email'] option:selected", originalDiv).val());
$("[name='emails" + counter + "']", cloneDiv).val($("[name='emails'] option:selected", originalDiv).val());
//Append to originalDiv container whatever it is...
originalDiv.parent().append(cloneDiv);
//OR Append to body after old div
//$('.old:last').after(cloneDiv);
//Increment counter
counter++;
});
$("input#remove").click(function (e) {
if (counter > 2) {
$('#newDiv' + (counter - 1)).remove();
counter--;
}
});
$('#validate').click(function () {
$('div[id^="newDiv"] select').css("background-color", "");
$('div[id^="newDiv"] select option').filter(':selected').each(function () {
var select = $(this);
if (select.text() == "Select") {
alert("Please select an option");
select.closest('select').focus().css("background-color", "red");
return false;
}
});
});
});
Related
Below is a script allows the user to move forward and back through questions. If the user comes to the last question and clicks the next button I want the page to go to finished.html. Currently on the first click the program brings the user to this.
var actual = 0; // select by default the first question
$(document).ready(function() {
var number_of_question = $('.question').length; // get number of questions
$('.question:gt(' + actual + ')').hide(); // Hide unselect question
$('#nextQ').click(function() {
if (actual < number_of_question - 1) {
changeQuestion(actual + 1); // display select question
}
if (actual = number_of_question) {
//alert("Finished");
window.location.href = 'finished.html';
}
});
$('#previousQ').click(function() {
if (actual) {
changeQuestion(actual - 1); // display select question
}
});
});
function changeQuestion(newQuestion) {
$('.question:eq(' + actual + ')').hide(); // hide current question
$('.question:eq(' + newQuestion + ')').show(); // show new question
actual = newQuestion; // memorize actual selection
$('#question_number').html(actual);
}
You need actual === number_of_question, right now you are just assigning that value to actual
Two problems - as pointed out by others the confusion between equality and assignment, but also an edge case error: actual will count from 0 to number_of_question-1 so you should have:
if (actual === number_of_question-1){
//alert("Finished");
window.location.href = 'finished.html';
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I have written the below jQuery to allow a row of a table to be changed into editable form on upon a link being clicked. The class of the row is passed into function.
function enableform(x) {
$("." + x +" .disabled").prop("disabled", false);
$(".icon-pencil").css("display", "none");
$( "." + x +" input" ).removeClass("disabled");
$( "." + x +" select" ).removeClass("disabled");
$( "." + x +" td.dropdown" ).addClass("test");
$( "." + x +" td" ).removeClass("dropdown");
$("." + x +" .icon-ban").css("visibility", "visible");
return false;
};
function disableform(x) {
$( "." + x +" input" ).addClass("disabled");
$( "." + x +" select" ).addClass("disabled");
$( "." + x +" td.test" ).addClass("dropdown");
$("." + x +" .disabled").prop("disabled", true);
$(".icon-pencil").css("display", "block");
$("." + x +" .icon-ban").css("visibility", "hidden");
return false;
};
Basically the form is already there but with classes applied to make it look like static text, and the disabled property is used to make them not editable. When the button at the end of each row is clicked the corrosponding row is changed back into a form and the reverse when the cancel button is clicked. Basically i just want someone with more experience to tell me whether or not this is the best way to acheive this and if not, how can it be improved?
This seems a bit tedious. I would recommend creating CSS rules for both states and add / remove a class on the parent container of the row so you don't have to add multiple classes to multiple elements and tweak lots of css values.
ie
.parent_row input{ /* stuff for disabled inputs*/}
.parent_row input{ /* stuff for disabled selects*/}
.parent_row .icon-ban{ /* stuff for disabled .icon-ban*/}
.parent_row.enabled input{ /* stuff for enabled inputs*/}
.parent_row.enabled input{ /* stuff for enabled selects*/}
.parent_row.enabled .icon-ban{ /* stuff for enabled inputs*/}
then in your JS, toggle that class.
function enableform(x) {
var element = $("." + x);
element.addClass("enabled");
element.prop("disabled", false);
return false;
};
function disableform(x) {
var element = $("." + x);
element.removeClass("enabled");
element.prop("disabled", true);
return false;
};
Not really sure why you're returning false or why you're messing with a "disabled" attribute...would need to see more code there to comment on that so i left it in the code
I would recommend adding classes (to hide/show, make editable, etc.) to the ROW instead of each element inside. So onClick you would have the button get what row it is in and then set a class on that row (something like "editable").
Where you used to have styling like this:
input.disabled{
--styles go here--
}
select.disabled{
--styles go here--
}
You would now have
tr.enabled input{
--styles go here--
}
tr.enabled select{
--styles go here--
}
Your code could use improvement. Because of all the different jquery selects it looks very convoluted and difficult to read. I simplified some of your code like this:
function enableform(x) {
$("." + x +" .disabled").prop("disabled", false).removeClass("disabled");
$( "." + x +" td.dropdown" ).addClass("test");
$( "." + x +" td" ).removeClass("dropdown");
$(".icon-pencil").hide();
$("." + x +" .icon-ban").show();
return false;
};
function disableform(x) {
$( "." + x +" input select" ).addClass("disabled");
$( "." + x +" td.test" ).addClass("dropdown");
$("." + x +" .disabled").prop("disabled", true);
$(".icon-pencil").css("display", "block");
$("." + x +" .icon-ban").hide();
return false;
};
Notice you can use multiple selector statements within one jquery command. Then you can chain different functions to that same selection.
I noticed you are returning false since these are button presses and I am guessing you are putting onclick="dosomething()" in your html. Instead of doing this bind a click function to the button:
$("#buttonID").click(function(){
Do code here. $(this) is the object of the currently clicked button if we need it.
})
I haven't tested my code but it should get you going in the right direction.
I am using following code to update one textbox value txtUnitPrice based on other textbox txtQuantity ,both can be generated dynamically which is done.
//update unitprice based on quantity of product and tax applied
$('input').live('keyup', function () {
var inputId = $(this).attr('id'); //get textbox txtQuantity id
var rowNum = parseInt(/txtQuantity(\d+)/.exec(inputId)[1], 10); //get row id
var productValue = $("#ddlProduct" + rowNum).val();
var taxValue = $("#ddlTax" + rowNum).val();
var unitPriceValue = $("#txtUnitPrice" + rowNum).val();
var quantityValue = $("#txtQuantity" + rowNum).val();
if ((quantityValue != " ") && (quantityValue > 0)) {
$("#txtUnitPrice" + rowNum).val(unitPriceValue * quantityValue);
}
else {
$("#txtUnitPrice" + rowNum).val(unitPriceValue);
}
});
Now problem arising in the code above is that when I even moving cursor forward or backward in the textbox txtQuantity then the value for txtUnitPrice is changing becuase which this event 'keyup' is firing and hence whole code is executed with the existing txtunitprice value and multiplies this again with the existing txtquantity which I dont' want Please can anyone help me regarding this . Thanks
Just add a check to ignore the cursor movements like shown below
$('input').live('keyup', function (e) {
if([37, 38, 39, 40].indexOf(e.which)){
return false;//do nothing because the cursor keys have been pressed
}
//the rest of your code
});
I have a problem with select input items.
What I want to achieve is dynamically remove already selected options from other select boxes so that I cannot select same item on multiple boxes. The problem is that elements are loaded in array via AJAX and I need to fill the select input with options after. This makes it so much harder.
In short - How can I make sure that if I select one item in select it will be deleted on all others, but when I select something else the previous item will be shown again and so on...
I have a fiddle as well, this is how far I got: http://jsfiddle.net/P3j4L/
You can try something like this
function updateSelects()
{
$('.selectContainer .select').each(
function (i, elem)
{
// Get the currently selected value of this select
var $selected = $(elem).find("option:selected");
// Temp element for keeping options
var $opts = $("<div>");
// Loop the elements array
for (i = 0; i < selectElements.length; i++)
{
var value = selectElements[i];
// Check if the value has been selected in any select element
if ($selected.val() == value || !$('.select option[value=' + value + ']:selected').length)
{
// if not create an option and append to temp element
$opts.append('<option value="' + value + '">' + value + '</option>');
}
}
// replace the html of select with new options
$(elem).html($opts.html());
if ($selected.length)
{
// set the selected value if there is one
$(elem).val($selected.val());
}
else
{
// new select element. So remove its selected option from all other selects
$('.selectContainer .select').not(this).find('option[value=' + $(elem).val() + ']').remove();
}
}
);
}
see a demo here : http://jsfiddle.net/P3j4L/1/
I am trying to access each individual element, ie option, defined for a list box (or drop down box).
For some reason the code I am using is not working. It is given below---
$(jQuery('input', $(this).parent('form'))).each(function() {
element= $(this);
textmsg=" Element # " + (count+1) + "...Name of this input element = " + $(this).attr('name') + " multiplechoice-" + $(this).attr('multiple');
textmsg= textmsg + "...Also, for this element, the value is " + $(this).val() + " and type =" + $(this).attr('type');
alert (textmsg);
var listofoptions = new Array();
type=$(this).attr('type');
if(type=="select")//this means we have to go through the children for this select element, to obtain the values for each option
{
var elements= $('option', this);
for(var i=0; i<elements.length; i++)
{
// add $(this).val() to your list
alert("Value of this option=" + $elements[i].val());
});
}
});
How do I make the above code work? Or can you suggest an alternative way of accessing each option value? Thanks...
In order to select all inputs you would need to use the :input selector and not just $('input') as this will select inputs by tag name and the select will be excluded.
So do
$(this).parent('form').find(':input')
Also, since there's no type attribute on a select element. You could use .is() instead to check if it's a select.
$(this).is('select')
Edit: for the if statement i would do the following
if( $(this).is('select') )
{
$(this).find('option').each(function(){
alert( $(this).val() );
});
}
Here's a fiddle
the select tag is not an input so it would never be a part of the selection
You could try
$("input, select")