Please help. I have input radio and main block.
How I can add value to variable javascript?
label first
input(type="radio" name='name' data-value='first' checked).select
label second
input(type="radio" name='name' data-value='second').select
.block
And how I can check is this radio checked? if checked function can't work.
My flag doesn't work.
And how can I know the first value after load document?
$(document).ready(function(){
$('.select').each(function(){
if($(this).is('checked')) {
className = $(this).data('value');
}
});
addBlock(className);
select();
});
function select() {
$('.select').click(function() {
if(!$(this).prop('checked')) {
className = $(this).data('value');
addBlock(className);
console.log('click');
}
});
}
function addBlock(a) {
$('.block').html('<div class="' + a + '"></div>')
}
The className variable should be declared outside of the JQuery selection. You shouldn't create global variables.
Related
I have this function, all im trying to do is if the first radio button is selected, then hide a few input fields and make them not required by the form. Then is the other radio button is selected then show those hidden fields and make them required by the form. The user may change between the radio buttons, and so the show hide operation and adding and removing of the required attributes have to happen on radio button change. At the moment the fields are showing and hiding but i cannot change the required attributes. Any ideas? Thank you.
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'watch-me') {
$('#show-me').show();
$('#1041827741').setAttribute("required", "");
$('#1283215174').setAttribute("required", "");
$('#1496644528').setAttribute("required", "");
$('#1392644643').setAttribute("required", "");
$('#1321281340').setAttribute("required", "");
}
else {
$('#show-me').hide();
$('#1041827741').removeAttr('required');
$('#1283215174').removeAttr('required');
$('#1496644528').removeAttr('required');
$('#1392644643').removeAttr('required');
$('#1321281340').removeAttr('required');
}
});
});
Use the prop() method:
$('#1041827741').prop('required',true);
You could use .prop("required", true / false) to set and remove. Also, setAttribute and removeAttribute methods are native DOM methods which directly operate on the element.
If you do not have an option of changing the elements markup you could modify your code to save some typings.
Here is what you could do to fix.
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var ids = ["#1041827741", "#1283215174", "#1496644528", "#1392644643", "#1321281340"];
if ($(this).attr('id') === 'watch-me') {
$('#show-me').show();
ids.forEach((id) => $(id).prop("required", true));
} else {
$('#show-me').hide();
ids.forEach((id) => $(id).prop("required", false));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
if you do have options to change the elements, I would assign a same class name to all of those elements and just operate on the ids.
Here is what it can be done.
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if ($(this).attr('id') === 'watch-me') {
$('#show-me').show();
//inputElement is the class assigned to all input elements
$(".inputElement").prop("required", true);
} else {
$('#show-me').hide();
$(".inputElement").prop("required", false);
}
});
});
I have an input field, by click value become * when I lose my focus field become clean. How to add additional * to input by every single click?
$('body').append("<input type='text' />");
$('input').click(function() {
$(this).val('*');
});
$('input').mouseleave(function() {
$(this).val('');
});
You are replacing the value of the input field. You want to append to it. Change $(this).val('*'); to $(this).val($(this).val() + '*'));
Your mouseleave() function call is what's making the field blank. If for every click you want to add an asterisk:
$('input').click(function() {
$(this).val('*' + $(this).val());
})
Use a variable outside the functions to store the *
$('body').append("<input type='text' />");
var inputVal="";
$('input').click(function() {
inputVal +="*";
$(this).val(inputVal);
})
$('input').mouseleave(function() {
$(this).val('');
})
I am pretty new with jquery and javascript. But i have made this function. When a checkbox is checked, it's value get set in a hiddenfield. Here is the function.
<script>
$('#checkDk').on('change', function () {
$('#MainContent_hiddenTargetDk').val($(this).val());
console.log($("#MainContent_hiddenTargetDk").val());
});
</script>
I dont know if this is the best way of doing it, but it works. The problem is when the checkbox is unchecked the value does not get deleted from the hiddenfield. I have been searching a bit around and found this.
var value = this.checked ? this.value : "";
Can you somehow use this to check if it is checked or not? And if yes how do i incorporate it in my function?
Here is the checkbox html.
<input id="checkDk" type="checkbox" value="208" onselect="getvalue()" autocomplete="off">
This should work:
<script>
$('#checkDk').on('change', function () {
$('#MainContent_hiddenTargetDk').val( $(this).prop("checked") ? $(this).val(): "");
console.log($("#MainContent_hiddenTargetDk").val());
});
</script>
$('#checkDk').on('change', function () {
if(this.checked){
var hidden = $('<input />').attr('type', 'hidden')
.addClass('chooseNameHere')
.val($(this).val());
$('#yourFormId').append(hidden);
}else{
$('#yourFormId').find('input[name=chooseNameHere]').remove();
}
});
$("#your_checkbox").prop("checked") should return true or false indicating if the checkbox is checked or not.
Try that instead of val()
Try
<script>
$('#checkDk').on('change', function () {
if (this.checked) {
$('#MainContent_hiddenTargetDk').val($(this).val());
console.log($("#MainContent_hiddenTargetDk").val());
} else { $('#MainContent_hiddenTargetDk').val(''); }
});
</script>
I am stuck on what to do when hiding a span that has a certain class name. I can't use this because it refers to the input. Here is my script:
//uncheck all checkboxes
$("input[type=checkbox]").prop("checked", false);
$("input[type=checkbox]").each( function (index) {
$(this).addClass("doc" + index);
})
$("input").change( function () {
var docName = $(this).parent().find("span");
var className = $(this).attr("class");
if(this.checked) {
$("span.noneAttached").fadeOut('slow', function () {
docName.clone().appendTo(".attachedDocuments").addClass(className).after("<br />").text();
});
}
else if (!this.checked && ($(".attachedDocuments > span").hasClass(className))) {
//hide the span with the class name
}
});
The else if checks to see if a checkbox is not checked and if the parent div contains any children with the class name. If so, hide it.
Where do I go from here? I am sure this answer is obvious, but I am just not seeing it.
Concatenate the class name to the selector like this
$("span."+className).hide();
Try this
$(".attachedDocuments span." + classname).hide();
$('.classname').hide();
$('.' + classnameasvariable).hide()
i have a problem in creating radio buttons dynamically, i have a text box and a button, i asked the user to input a value in the text field then i retrieve the text box value and use it to create a radio button when he press a button, i tried this code in javaScript but it doesn't create a radio button on clicking the specified button:
<script type="text/javascript" >
function createRadioElement(value, checked) {
var radioHtml = '<input type="radio" value="' + value + '"';
if ( checked ) {
radioHtml += ' checked="checked"';
}
radioHtml += '/>';
var radioFragment = document.createElement('div');
radioFragment.innerHTML = radioHtml;
return radioFragment.firstChild;
}
$( '#admin' ).live( 'pageinit',function(event){
$( "#AddButton" ).bind( "click", function(event, ui) {
var x=document.getElementById('option').value
createRadioElement(x, checked);
});
});
</script>
`
Try the following for the creation of a radio input:
function createRadioElement(elem, value, checked) {
var input = document.createElement('input');
input.type = 'radio';
input.value = value;
if (checked) {
input.checked = 'checked';
}
elem.parentNode.insertBefore(input, elem.nextSibling);
}
JS Fiddle demo.
References:
createElement().
insertBefore().
parentNode.
Here are the problems as I can see them:
In your #AddButton click function, you pass a variable checked which does not exist.
You don't pass the element returned from createRadioElement to anything that will insert it into the DOM
I fixed those by basically changing your #AddButton click function to the following:
$("#AddButton").bind("click", function(event) {
var x = document.getElementById('option').value,
$ra = $('#RadioArea');
$ra.html(createRadioElement(x, true));
});
You'll probably want to change this so it appends the radio button to the end of whatever your #RadioArea element is instead of replacing the contents completely.
See demo