Append an element to a new one in the same position - javascript

THE PROBLEM IS NOT THE LABEL FOR ATTRIBUTE, IT WORKS, MY PROBLEM IS THAT I NEED TO RENDER THE DOCUMENT AS EXPECTED
Getting crazy on this code! Why it doesn't works?
<div>
<input type="checkbox" name="tonino" />
</div>
<script>
var $el=$('input[name="tonino"]');
var el=$el.prop('name');
$el.before('<label for="'+el+'" />');
$el.appendTo($el.parent().find('label:first'));
</script>
I'm expecting:
<div>
<label for="tonino">
<input type="checkbox" name="tonino" />
</label>
</div>

A straightforward approach using $.wrap() http://api.jquery.com/wrap/
var cb = $('input[name="tonino"]');
cb.wrap($('<label />', {
'for': cb.attr('name')
}));

I think you want like below (check HTML through browser console to see code working properly or not?):-
var el=$('input[name="tonino"]');
el.before('<label for="'+el.attr('name')+'" />'+el.attr('name')+'<label>');
el.appendTo(el.parent().find('label:first'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="tonino" />
</div>
Note:- jquery library needed too.

Related

How to reset the text of the closest span object?

Here is my HTML:
<div class="box">
<input type="file" name="file-7" id="file-7" class="inputfile inputfile-6" accept="image/png,image/gif,image/jpeg" />
<label for="file-7">
<span>This is test</span>
<strong>Upload photo</strong>
</label>
</div>
I want to clear the text (if any) of the span using jquery. I have written the code:
$('#file-7').on('change', function(){
var spn = $(this).closest('span');
spn.attr('text','');
});
The text is not getting removed. What am I doing wrong?
you just need to do that
spn.html('');
we don't need to write $() with variable
$('#file-7').on('change', function(){
var spn = $(this).closest('.box').find('span');
spn.text('');
});
Explanation: You have to find the closest parent element which has the span where you are trying to replace text. Here the parent is .box & then find the span in it.
2nd mistake you made is $(spn).attr('text','');. here there is no need of $() & no use of attr(). You can do as simple as spn.text('');
Working sample for you:
$('#file-7').on('change', function(){
var spn = $(this).closest('.box').find('span');
spn.text('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<input type="file" name="file-7" id="file-7" class="inputfile inputfile-6" accept="image/png,image/gif,image/jpeg" />
<label for="file-7">
<span>This is test</span>
<strong>Upload photo</strong>
</label>
</div>
You can replace text with text function in jQuery. And you have a typo error your variable is spn but you are using it as $(spn).
$('#file-7').on('change', function(){
var spn = $(this).next('label').find('span');
spn.text('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<input type="file" name="file-7" id="file-7" class="inputfile inputfile-6" accept="image/png,image/gif,image/jpeg" />
<label for="file-7">
<span>This is test</span>
<strong>Upload photo</strong>
</label>
</div>

jQuery multiple id sets multiple patterns

OK, sure this is really simple, but I'm new to Java / jQuery so all help knowledge is greatly appreciated!
I have three sets of information, but i want each set to behave the same way, when I check a box, I want a certain div to appear, then disappear when the checkbox is unchecked...
Started with this, and it works...
//Set 1 #mod_1 toggles #sec_mod_1..
$('#sec_mod_1').change(function() {
$('#mod_1').toggle(this.checked);
}).change();
//Set 2
$('#sec_mod_2').change(function() {
$('#mod_2').toggle(this.checked);
}).change();
//Set 3
$('#sec_mod_3').change(function() {
$('#mod_3').toggle(this.checked);
}).change();
Now this is a little long winded, and I know there has to be a shorter way... Thinking something like this...
$('[id^="sec_mod_"]').change(function() {
$('[id^="mod_"]').toggle(this.checked);
}).change();
However, I don't know how to make this function for each separate set, was thinking the "this" keyword...?
Like I said all help would be greatly appreciated...
Use a simple class selector:
$('.trigger').change(function() {
var $checkbox = $(this);
var id = $checkbox.attr('id'); // eg. sec_mod_1
var numb = id.substring(id.lastIndexOf('_') + 1); // eg. 1
$('#mod_' + numb).toggle(this.checked); // toggle #mod_1
}).change();
Add trigger as the class to the elements that needs this functionality.
Working jsfiddle
You may use:
$('#mode_' + this.id.replace('sec_mod_', ''), this).toggle(this.checked);
You can use use the same markup with a handler like
$('input[id^="sec_mod_"]').change(function() {
console.log('d')
$('#mode_' + this.id.replace('sec_mod_', '')).toggle(this.checked);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="sec_mod_1" type="checkbox" />
<div id="mode_1">1</div>
<input id="sec_mod_2" type="checkbox" />
<div id="mode_2">2</div>
<input id="sec_mod_3" type="checkbox" />
<div id="mode_3">3</div>
Or if you can change the markup
$('.sec_mod').change(function() {
$($(this).data('target')).toggle(this.checked);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="sec_mod_1" class="sec_mod" type="checkbox" data-target="#mode_1" />
<div id="mode_1">1</div>
<input id="sec_mod_2" class="sec_mod" type="checkbox" data-target="#mode_2" />
<div id="mode_2">2</div>
<input id="sec_mod_3" class="sec_mod" type="checkbox" data-target="#mode_3" />
<div id="mode_3">3</div>

How to check the radio button in which id field is blank using javascript

Here is sample html code
<div class="radioOff">
<input id="" class="hidden" type="radio">
<label for="">already a member</label>
<span class="identity">identify</span>
</div>
I tried using
document.getElementById("").checked = true;
its not working.
I can not do any change in code .
Here is that third party website where I need to select radio button
http://www.degriftour-selection.fr/login.html
Try:
$(".hidden[id='']").prop("checked",true);
DEMO here.
Can you try this,
$(function(){
$(".hidden").attr("checked", true);
});
You have used empty id="", you can add id value or you can use to get using classname.
<input id="myRadio" class="hidden" type="radio">
Jquery,
$("#myRadio").attr("checked", true);
Javascript:
document.getElementById("myRadio").checked = true;
try this
$('document').ready(function () {
$(".hidden").attr("checked", true);
});
There is no possibility to reference to empty ID because it'll be ignored in DOM.
One option is to use getElementsByClassName() to get all elements and then iterate through them. Second option (better) will be adding proper ID attribute and use it then.
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<div class="radioOff">
<input id="" class="hidden" type="radio">
<label for="">already a member</label>
<span class="identity">identify</span>
</div>
<script>
$('#document').ready(function () {
$(".hidden").attr("checked", true);
});
</script>
You can make use of this code in ur js:
return ($('input[type=radio]:checked').size() > 0);
Or
if(document.getElementsByClassName("hidden").checked)
You could do something like this, I believe the querySelector is supported from IE8+ and on all other major browsers.
var elem = document.querySelector(".radioOff"),
radio = (elem.firstElementChild||elem.firstChild);
radio.checked = true;
JSFiddle
Updated according to comment. To select the checkbox déjà membr you could use the JQuery selector (as the page includes JQuery 1.7.2)
$('.radioOff').find('input[type=radio]').prop('checked', true);
I have tried this and it is working perfectly.... please try from your side...
<div class="radioOff">
<input id="" class="hidden" type="radio" />
<label for="">already a member</label>
<span class="identity">identify</span>
</div>
and then after use below jquery code (you also need to add jQuery file reference)...
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$(".hidden").attr("checked", true);
});
</script>

Adding and removing dom sections with javascript

I want to be able to add new sections (via the 'add' link) and remove them (via the 'x' button) like seen in the image.
The HTML for the image:
<fieldset>
<legend>Legend</legend>
<div id="section0">
<input type="text" name="text1" value="Text1" />
<input type="text" name="text2" value="Text2" size='40' />
<input type="button" value="x" style="width: 26px" /><br />
</div>
add<br />
</fieldset>
I guess I could add new sections as needed (i.e. section1, section2) and delete those sections according to which button was pressed. There would be a javascript function that would inject sections in the DOM everytime the 'add' link was clicked and another for deleting a section everytime the 'x' button was clicked.
Since I have so little experience in HTML and Javascript I have no idea if this is a good/bad solution. So, my question is exactly that: Is this the right way to do it or is there a simpler/better one? Thanks.
P.S.: Feel free to answer with some sample code
Here's one way to do it:
<script type="text/javascript">
function newrow() {
document.getElementById("customTable").innerHTML += "<tr><td><input type='text'></td><td><input type='text'></td><td><button onclick='del(this)'>X</button></td></tr>";
}
function del(field) {
field.parentNode.parentNode.outerHTML = "";
}
</script>
<body onload="newrow()">
<fieldset>
<legend>Legend</legend>
<table>
<tbody id="customTable">
</tbody>
</table>
<button onclick="newrow()">Add</button>
</fieldset>
</body>
You could add IDs to them if you wanted, or you could call them by their position document.getElementsByTagName("input")[x].value The inputs would start at 0, so the left one is 0, right is 1, add row: left is 2, right is 3, etc.
If you delete one, the sequence isn't messed up (it re-evaluates each time), which is better than hard-coded IDs.
I just answered a nearly identical question only a few minutes ago here using jQuery: https://stackoverflow.com/a/10038635/816620 if you want to see how it worked there.
If you want plain javascript, that can be done like this.
HTML:
<div id="section0">
<input type="text" name="text1" value="Text1" />
<input type="text" name="text2" value="Text2" size='40' />
<input type="button" value="x" style="width: 26px" /><br />
</div>
add<br />
Javascript:
function addSection(where) {
var main = document.getElementById("section0");
var cntr = (main.datacntr || 0) + 1;
main.datacntr = cntr;
var clone = main.cloneNode(true);
clone.id = "section" + cntr;
where.parentNode.insertBefore(clone, where);
}​
Working demo: http://jsfiddle.net/jfriend00/TaNFz/
http://pastebin.com/QBMEJ2pq is a slightly longer but robust answer.

jQuery .change() not firing

Just working on some small pages to be elements of a much larger project and am completely confused at my current problem here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<STYLE TYPE="text/css">
.questionBlock { font-size: x-large; color: red }
</STYLE>
<script type="text/javascript">
$(document).ready(function() {
alert("sdsd")
$("input[#name='questionType']").change(function(){
alert("dfdfdf");
var selected = $("form input:radio:checked").val();
alert(selected);
})
});
</script>
<form action="">
<input type="radio" name="questionType" value="closed" /> Closed Endeded<br />
<input type="radio" name="questionType" value="matrix" /> Matrix Question<br />
<input type="radio" name="questionType" value="open" /> Open Ended
</form>
<div class="questionBlock" id="closed">lol</div>
<div class="questionBlock" id="open">rol</div>
<div class="questionBlock" id="matrix">bol</div>
But the change event never fires, regardless of browser, I've tried using bind as well but it's driving me up the wall!
jQuery attribute selectors don't need # prefix (like XPath). Change your code like this:
$("input[name='questionType']").change(function(){
Here is a working version.
you need to remove the # fiddle
$(document).ready(function() {
$('input[name="questionType"]').change(function(){
alert("dfdfdf");
var selected = $("form input:radio:checked").val();
alert(selected);
})
});
jQuery does not use "#" in Xpath-style attr selectors anymore. This being the case, your selector does not match anything.

Categories

Resources