http://jsbin.com/renabuvu/1/edit
What I'm doing is I type a css selector, change it's values and as it's values change it applies to the page's html and is applied in real time. (this part works without a problem)
However my problem is when I append the already added values. My newly appended/cloned textarea ends up blank.
I have no idea why this is, nor how to solve this problem.
If anyone can help shed some light on this it'd be greatly appreciated.
$(document).ready(function() {
$(".addvalz").on('click', function() {
// Refresh render before add
$("#testcode").val($(".inputval").val() +" {"+ ( $(".pad").val() === "" ? "" : "\n padding: " + $(".pad").val() + ";" ) + ( $(".bg").val() === "" ? "" : "\n background-color: " + $(".bg").val() + ";" ) + ( $(".boxshadow").val() === "" ? "" : "\n box-shadow: " + $(".boxshadow").val() + ";" ) +"\n}");
// Adds value
$(".val-nester").append($("<div class='holddezvalz'>")
.append("<button class='deldizval'>x</button>")
.append("<button class='grabdezvalz'>"+ $(".inputval").val() +"</button>").append($("#asc #testcode:first-of-type").clone()).append($(".valz2add .inputval:first-of-type").clone()).append($(".cssvalz .pad:first-of-type").clone()).append($(".cssvalz .bg:first-of-type").clone()).append($(".cssvalz .boxshadow:first-of-type").clone())
);
$("#apply-test-code").html("<style type='text/css'>"+ $("#testcode").val() +"</style>");
// Grabs selector value
$(".grabdezvalz").on('click', function() {
$(".valz2add .inputval:first-of-type").val($(this).next().next().val());
$(".cssvalz .pad:first-of-type").val($(this).next().next().next().val());
$(".cssvalz .bg:first-of-type").val($(this).next().next().next().next().val());
$(".cssvalz .boxshadow:first-of-type").val($(this).next().next().next().next().next().val());
});
});
});
http://jsbin.com/renabuvu/2/edit
Because the values are being mirrored to the textarea and not applied, clone will only apply the textarea to it's set values not what's being mirrored/reflected upon it.
I had to add it as a string and then it worked perfectly.
$(".val-nester").append($("<div class='holddezvalz'>")
.append("<button class='deldizval'>x</button>")
.append("<button class='grabdezvalz'>"+ $(".inputval").val() +"</button>")
.append("<textarea>"+ $("#asc #testcode:first-of-type").val() +"</textarea>")
.append($(".valz2add .inputval:first-of-type").clone())
.append($(".cssvalz .pad:first-of-type").clone())
.append($(".cssvalz .bg:first-of-type").clone())
.append($(".cssvalz .boxshadow:first-of-type").clone())
);
Related
Im trying to create a simple function that create span's with an class that equals whatever is piped into the function. These spans fill inside a parent div. I also want to ensure that once a span has been added that another span is not add with that id/class, unless my multiSearchEnabled boolean is true.
Here is some code i've
function createBadge(badge_type) {
var badge_parent_div = $("#badge-column-div");
var badge = "<span class='badge-text " + badge_type + "'>" + badge_type + "</span>";
if (!$(badge_parent_div.find("span").hasClass(badge_type))) {
badge_parent_div.append(badge);
} else {
if (multiSearchEnabled) {
badge_parent_div.append(badge); // Add another Badge, since search contains multiples
}
}
}
However this doesnt seem to work, this function will be ran onKeyUp therefore is why i need to detect if the span already exists for this type, so i dont duplicate it.
Updated based on suggestions
function createBadge(badge_type) {
var badge = "<span class='" + badge_type + "'>" + badge_type + "</span>";
var bHasBadge = $("#badge-column-div").has('.' + badge_type);
if (bHasBadge == false || (bHasBadge && multiSearchEnabled == true))
{
// add it
$("#badge-column-div").append(badge);
}
}
However with the following code, nothing ever get's added. I need it add a badge initially, then only if the multiSearchEnabled boolean is true to add more than one.
has() checks for child controls matching a selector.
function createBadge(sBadgeType)
{
var oBadgeParent = $("#badge-column-div");
var bHasBadge = oBadgeParent.has("span." + sBadgeType)
if (bHasBadge == false || bMultiSearchEnabled)
oBadgeParent.append
(
$("<span class='badge-text " +sBadgeType+ "'>" +sBadgeType+ "</span>")
);
}
I'm using $.trim to check if the inputs are empty, if so, nothing should happen. If they're not empty then the form should be submitted.
This is the variable where the condition is located:
var save = $("<input type='button' value='Save' />").on('click',function() {
if(!$.trim(name)==''||!$.trim(degree)==''||!$.trim(dateFrom)==''||!$.trim(dateTo)=='') {
$("#list").append("<li>Name: "+$('#elem1').val()+
"<br>Degree: "+$('#elem2').val()+
"<br>Date From: "+$('#elem3').val()+
"<br>Date To: "+$('#elem4').val()+
"</li>");
cancel.click();
} else {}
});
Please take a look to the code on jsFiddle here: http://jsfiddle.net/vrpWu/
Click on "Add another"
Note that it works without the if condition, why is this happening? I've readed everywhere but looks like my code is not wrong.
First, you have to get the values when you actually click the save button, not before, as then the values will always be empty strings
var save = $("<input type='submit' value='Save' />").on('click', function () {
var name = $("#elem1").val();
var degree = $("#elem2").val();
var dateFrom = $("#elem3").val();
var dateTo = $("#elem4").val();
if (!($.trim(name) == '' || $.trim(degree) == '' || $.trim(dateFrom) == '' || $.trim(dateTo) == '')) {
console.log('test')
$("#list").append("<li>Name1: " + $('#elem1').val() +
"<br>Name2: " + $('#elem2').val() +
"<br>Name3: " + $('#elem3').val() +
"<br>Name4: " + $('#elem4').val() +
"</li>");
cancel.click();
} else {
console.log('no')
}
});
then you should note that things work a little differently when you negate the variables and use OR
You can either negate the whole thing at once
if (! ($.trim(name)==''||$.trim(degree)==''||$.trim(dateFrom)==''||$.trim(dateTo)=='')) {
or use AND instead
if (!$.trim(name)=='' && !$.trim(degree)=='' && !$.trim(dateFrom)=='' ... etc
FIDDLE
I need the values of the name, address, size, and topping fields to appear in a text box. Without problems the name and address appears correctly. However I can't seen to get the size function to work. It is a radio button, and thus I need only one size to appear. I haven't even tried an if else for the checkbox yet. Here is my code
<html>
<head>
<script>
function pizza() {
document.pizzaboy.comments.value = "Name:" + " " + pizzaboy.name.value + "\n" + "Address:" + " " + pizzaboy.address.value + "\n" + document.getElementById("small").value + document.getElementById("medium").value + document.getElementById("large").value + "\n" + pizzaboy.toppings.value;
{
var rslt = "";
if (document.pizzaboy.size[0].checked) {
rslt = rslt + "Size=Small\n";
} else if (document.pizzaboy.size[1].checked) {
rslt = rslt + "Size=Medium\n";
} else rslt = rslt + "Size=Large\n";
return rslt;
}
}
</head>
The second Javascript bracket might be throwing you an error, keeping your code from running correctly.
In this post, several (more general) ways to get values of radio buttons are explained:
Checking Value of Radio Button Group via JavaScript?
The first answer is using jQuery, but the following answers will help you i think.
You should try this. Answer here if you need further assistance.
feel like im coming here way too often to ask questions but yet again I am stuck. I am attempting to select a textarea and allow myself to edit the text in another textarea, which works fine using textboxs but not with textareas. Every time I click on the div container I am getting an undefined result when looking for the textarea. Below is the code.
jQuery
$(".textAreaContainer").live('click','div', function(){
var divID = this.id;
if ( divID !== "" ){
var lastChar = divID.substr(divID.length - 1);
var t = $('#' + divID ).find(':input');
alert(t.attr('id'));
t = t.clone(false);
t.attr('data-related-field-id', t.attr('id'));
t.attr('id', t.attr('id') + '_Add');
t.attr('data-add-field', 'true');
var text = document.getElementById(divID).innerHTML;
//var textboxId = $('div.textAreaContainer').find('input[type="textArea"]')[lastChar].id;
$('div#placeholder input[type="button"]').hide();
var text = "<p>Please fill out what " + t.attr('id') +" Textarea shall contain</p>";
if ( $('#' + t.attr('id')).length == 0 ) {
$('div#placeholder').html(t);
$('div#placeholder').prepend(text);
}
}
else{
}
});
t.attr('id') should be returning textbox1(or similar) but instead just returns undefined.
I have tried .find(':textarea'),.find('textarea'),.find(text,textArea),.find(':input') and quite a few others that I have found through google but all of them return undefined and I have no idea why. A demo can be found here, http://jsfiddle.net/xYwaw/. Thanks in advance for any help guys, it is appreciated.
EDIT: Below is the code for a very similar example I am using. This does what I want to do but with textboxs instead of textareas.
$('#textAdd').live('click',function() {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Textbox " + textBoxCounter + " <br><div id='container" + counter + "' class='container'><li><input type='text' id='textBox" + textBoxCounter +"' name='textBox" + textBoxCounter + "'></li></div></br>";
document.getElementById("identifier").appendChild(newdiv);
textBoxCounter++
counter++;
});
$(".container").live('click','div', function(){
var divID = this.id;
if ( divID !== "" ){
var lastChar = divID.substr(divID.length - 1);
var t = $('#' + divID).find('input');
alert(divID);
t = t.clone(false);
t.attr('data-related-field-id', t.attr('id'));
alert(t.attr('id'));
t.attr('id', t.attr('id') + '_Add');
t.attr('data-add-field', 'true');
var text = document.getElementById(divID).innerHTML;
// var textboxId = $('div.container').find('input[type="text"]')[lastChar].id;
$('div#placeholder input[type="button"]').hide();
var text = "<p>Please fill out what " + t.attr('id') +" textbox shall contain</p>";
if ( $('#' + t.attr('id')).length == 0 ) {
$('div#placeholder').html(t);
$('div#placeholder').prepend(text);
}
}
else{
}
});
First up remove the second parameter, 'div', from the first line:
$(".textAreaContainer").live('click','div', function(){
...to make it:
$(".textAreaContainer").live('click', function(){
Then change:
var t = $('#' + divID ).find(':input');
...to:
var t = $(this).find(':input');
Because you already know that this is the container so there's no need to select it again by id. Also the id attributes that you're assigning to your textarea containers have a space in them, which is invalid and results in your original code trying to select the element with '#textAreaContainer 0' which actually looks for a 0 tag that is a descendant of #textAreaContainer. So fixing the code that creates the elements to remove that space in the id is both a good idea in general and an alternative way of fixing this problem.
I am trying to obtain all the values stored in a list box/drop down box.
I am currently using following code to obtain name, type, multiple attribute and values--
$(jQuery('input, select, textarea', $(this).parent('form'))).each(function() {
var 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);
});
But the jquery call $(this).val() retrieves only the currently selected value in a list box (and not all values). The same thing happens when I use the above code in a drop down box. How do I obtain all the values stored in a list/drop down box? If it is not possible to do this using jquery, then can this be done using pure javascript? (I have a reference to that form element which can be used in pure javascript...)
To create a list of your options you need to declare a variable outside of the loop
var listofoptions = new Array();
$("#id option").each(function()
{
// add $(this).val() to your list
listofoptions.push($(this).val());
});
// do what you want with listofoptions
You can get all fields inside form using following code
var formFields = $("form")[0];
var textmsg = "";
for ( var i = 0, len = formFields.length; i < len; i++ ) {
textmsg +=" Element # " + (i+1) + "...Name of this input element = " + $(formFields[i]).attr('name') + " multiplechoice-" + $(formFields[i]).attr('multiple');
textmsg= textmsg + "...Also, for this element, the value is " + $(formFields[i]).val() + " and type =" + $(formFields[i]).attr('type');
}
document.write( textmsg );
jsFiddler