We Keep Coding

On click check the closest radio button within div

I am trying to style some radio buttons so that when you click the div, it selects the radio button inside the div.
At the moment, when you click the third div in the list for example, it selects the first div's input. These all have the same ID as it's been written in a razor foreach loop.
here is the HTML generated
<div id="world-container" class="d-flex">
<div class="button-styles image-item">
<input class="city-type-radio" id="CityTypeId" name="CityTypeId" type="radio" value="1">
<label for="CityTypeId">Urban</label>
</div>
<div class="button-styles image-item">
<input class="city-type-radio" id="CityTypeId" name="CityTypeId" type="radio" value="2">
<label for="CityTypeId">Countryside</label>
</div>
<div class="button-styles image-item">
<input class="city-type-radio" id="CityTypeId" name="CityTypeId" type="radio" value="3">
<label for="CityTypeId">Coastal</label>
</div>
</div>
This is the jquery I'm trying to use to select the closest radio button inside that div
$(".button-styles").on("click", function () {
$(this).children('#CityTypeId').prop('checked', true);
});
I can't change the way this HTML is written due to the MVC foreach loop.
Any suggestions or advice how to get around this would be great.
Many thanks in advance

An id should be unique throw a document , you did semantic error by duplicating ids ,
for your issue use classes instead : ( you've already predifined class )
$(this).find('input.city-type-radio').prop('checked', true);
See snippet below :
$(".button-styles").on("click", function () {
$(this).find('input.city-type-radio').prop('checked', true);
});
.image-item {
border:1px solid gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="world-container" class="d-flex">
<div class="button-styles image-item">
<input class="city-type-radio" id="cityTypeId1" name="CityTypeId" type="radio" value="1">
<label for="cityTypeId1">Urban</label>
</div>
<div class="button-styles image-item">
<input class="city-type-radio" id="cityTypeId2" name="CityTypeId" type="radio" value="2">
<label for="cityTypeId2">Countryside</label>
</div>
<div class="button-styles image-item">
<input class="city-type-radio" id="cityTypeId3" name="CityTypeId" type="radio" value="3">
<label for="cityTypeId3">Coastal</label>
</div>
</div>

$(this).find('input').prop('checked', true);

ID has to be unique, that's the reason why your code don't work. Try to target input directly.
$(this).children('input').prop('checked', true);

I am stuck with Checkbox Attribute

I recently start to learn JavaScript and have a question about checkbox Attribute.
I want to put Nickname feature that is if someone want to put his/her nickname, he/she can check the checkbox and it appears the text box for Nickname.
However, when the page is loaded, the text box is there even though the checkbox is not checked.
Can anyone please help me with the problem...?
<fieldset>
<form>
<div>
<label for = "yesNick"> Nickname?:</label>
<input id="yesNick" name="yesNick" type="checkbox" value="yes" onchange="nicknameFunction()"/><br/>
</div>
<div id= "nick">
<label for = "nickname">Nickname:</label>
<input type="text" name="nickname" id="nickname"><br/>
</div>
<input type="submit" value="Vertify"/>
<script type="text/javascript">
function nicknameFunction() {
if (document.getElementById('yesNick').checked){
document.getElementById('nick').style.display="inline";
document.getElementById('nickname').setAttribute('required',true);
}
else{
document.getElementById('nickname').removeAttribute('required');
document.getElementById('nick').style.display="none";
}
}
</script>
</form>
</fieldset>
</p>

Set your initial display for the #nick div to 'none'. Your function only runs on change of the checkbox so you will need to ensure initial state on your own.
function nicknameFunction() {
if (document.getElementById('yesNick').checked){
document.getElementById('nick').style.display="inline";
document.getElementById('nickname').setAttribute('required',true);
}
else{
document.getElementById('nickname').removeAttribute('required');
document.getElementById('nick').style.display="none";
}
}
#nick {
display:none;
}
<fieldset>
<form>
<div>
<label for = "yesNick"> Nickname?:</label>
<input id="yesNick" name="yesNick" type="checkbox" value="yes" onchange="nicknameFunction()"/><br/>
</div>
<div id= "nick">
<label for = "nickname">Nickname:</label>
<input type="text" name="nickname" id="nickname"><br/>
</div>
<input type="submit" value="Vertify"/>
</form>
</fieldset>

You don't need JavaScript for this; in fact, you shouldn't use JS for this because accessing the dom is quite slow. CSS is more than sufficient. You can also make it animated by using width instead of display property, but for my example I only used the display property.
#yesNick:checked ~ #nickname {
display: block;
}
#nickname {
display: none;
}
<div>
<label for = "yesNick"> Nickname?:</label>
<input id="yesNick" name="yesNick" type="checkbox" value="yes"/><br/>
<label for = "nickname">Nickname:</label>
<input type="text" name="nickname" id="nickname"><br/>
</div>
<input type="submit" value="Vertify"/>

try hiding the textbox for the first time :
var nickName = document.getElementById('nick');
nickName.style.display="none";
function nicknameFunction() {
if (document.getElementById('yesNick').checked){
nickName.style.display="inline";
document.getElementById('nickname').setAttribute('required',true);
}
else{
document.getElementById('nickname').removeAttribute('required');
nickName.style.display="none";
}
}

Javascript validating radio input not working

I am using the following Javascript code to validate that at least one of the radio inputs are checked before submitting the form, but I am facing a problem as the form always submit even if there are no radio inputs checked...can someone please help by telling me what I am missing here and how to fix it? Thanks
<script type="text/javascript">
function processPayment() {
if ($("input[name='orderAmount']:checked").length > 0){
alert('OK');
document.getElementById('orderFrm').submit();
return false;
}
else{
alert('Please select order amount');
}
}
</script>
<div id="content">
<form id="orderFrm" name="orderFrm" action="https://...." method="post" target="_top">
....
<div class="orderamnt">
<label for="orderAmount50">
<span class="labelText">50</span>
<input type="radio" id="orderAmount50" name="orderAmount" value="50"/>
</label>
</div>
<div class="orderamnt">
<label for="orderAmount100">
<span class="labelText">100</span>
<input type="radio" id="orderAmount100" name="orderAmount" value="100"/>
</label>
</div>
<div class="orderamnt">
<label for="orderAmount200">
<span class="labelText">200</span>
<input type="radio" id="orderAmount200" name="orderAmount" value="200"/>
</label>
</div>
<a class="buyNowButton" href="javascript:{}" onclick="processPayment()">Order</a>
....
</form>
</div>
Note:
I noted when checking any of the radio buttons that it changes from:
<div id="orderamnt">
<span class="">
<input type="radio" id="orderAmount200" name="orderAmount" value="200"/>
to...
<div id="orderamnt">
<span class="checked">
<input type="radio" id="orderAmount200" name="orderAmount" value="200"/>
obviously the radio input don't have checked and that's why obviously it is not working on my side, so wondering is there a way I can validate the first parent span from the radio button?

you need to do like this using is()
if ($('input[name="orderAmount"]').is(':checked'))
{
}

Using jquery 1.6.4 or +, this code is working!
$('.buyNowButton').click(function(){
if ($("input[name='orderAmount']:checked").length > 0){
document.getElementById('orderFrm').submit();
return false;
}
else{
alert('Please select order amount');
}
});

Disabling submit button until all fields have values on multi-part form

I have created a multi-part form and need to validate completed fields in visible fieldsets on the form. If all required fields are completed, the the next step button will be enabled.
So Far I have played with a few options none of which are 100% effective
HTML:
<div id="set1">
<fieldset>
<div>
<label>field 1</label>
<input name="f1" type="text" /><br />
<span class="error"></span>
</div>
<div>
<label>field 2</label>
<input name="f2" type="text" /><br />
</div>
</fieldset>
</div>
<div id="set2">
<fieldset>
<div>
<label>field 3</label>
<input name="f3" type="text" /><br />
<span class="error"></span>
</div>
.
.
.
</fieldset>
</div>
jQuery:
$input = $('fieldset:visible div:has(span[class="error"]) input');
$next = $('fieldset:visible .button');
$input.keyup(function() {
$input.each(function() {
var trigger = false;
$input.each(function() {
if (!$(this).val()) {
trigger = true;
}
});
trigger ? $next.attr('class', 'disable') : $next.removeAttr('class');
});
});
Could someone help me understand what I am doing wrong? It appears the keyup event is not firing.

You should use jQuery validator. It will make your life a lot easier:
jQuery Validation

First thing, the keyup event will be fired, don't worry. Second thing, there is a heavy error at line if (!$(this).val()) { This spelling caused by wrong thinking in standard javascript. Translated to it you wanted to test if the value exists or not. The truth is, the value does always exists. It is just "" or a real value.
Look at my example. After some corrections it works as you wanted, hopefully.

jQuery generated text on click upon if statement, remains after if is false

I've got a form with some radio buttons in it. When a link is clicked, the value of the selected radio button is passed to a text field. If the value is '0', the text 'Not required' is given to a div, overwriting where the output would have been if it wasn't '0'.
When you click the '0' radio button then click the link, it works as it should. The problem is that if you change to a different radio button then click the link again, the text remains. What I want to happen is for that message to only appear when the '0' is selected and for it to be removed if a non-'0' is chosen.
I've set it up on http://jsfiddle.net/thewebdes/gnW2c/ so you can see what I mean. In the actual project, the 'Not required' text will overwrite anything else that would have appeared so clearing the html using jquery at the beginning of the click function is a no-go.
HTML
<form action="#" method="post">
<label for="item1_qty1">0</label>
<input type="radio" id="item1_qty1" name="item1_qty" value="0">
<br>
<label for="item1_qty1">100</label>
<input type="radio" id="item1_qty1" name="item1_qty" value="100">
<br>
<label for="item1_qty1">250</label>
<input type="radio" id="item1_qty1" name="item1_qty" value="250">
<br>
<label for="item1_qty1">500</label>
<input type="radio" id="item1_qty1" name="item1_qty" value="500">
Get Value
<div class="output">
<label for="item1_qty_output">Item 1 Output</label>
<input type="text" id="item1_qty_output">
</div>
</form>
JS
$('.gen_output').click(function() {
$('#item1_qty_output').val($('input:radio:checked').val());
if ($('input:radio:checked').val() == '0') {
$('.output').html('Not required')
}
});

I think this is what you want - http://jsfiddle.net/ntTcr/
You were replacing the entire content of the output div when the value was 0 so you could not get it back when you selected a different value.

You were replacing all the content with .html, so your inputs werent there when you tried to update them.
http://jsfiddle.net/loktar/gnW2c/6/
JS
$('.gen_output').click(function() {
$('#item1_qty_output').val($('input:radio:checked').val());
if ($('input:radio:checked').val() == '0') {
$('#msg').html('Not required').show();
$('#fields').hide();
}else{
$('#fields').show();
$('#msg').hide();
}
});
Markup
<form action="#" method="post">
<label for="item1_qty1">0</label>
<input type="radio" id="item1_qty1" name="item1_qty" value="0">
<br>
<label for="item1_qty1">100</label>
<input type="radio" id="item1_qty1" name="item1_qty" value="100">
<br>
<label for="item1_qty1">250</label>
<input type="radio" id="item1_qty1" name="item1_qty" value="250">
<br>
<label for="item1_qty1">500</label>
<input type="radio" id="item1_qty1" name="item1_qty" value="500">
Get Value
<div class="output">
<div id="msg"></div>
<div id="fields">
<label for="item1_qty_output">Item 1 Output</label>
<input type="text" id="item1_qty_output">
</div>
</div>
</form>
Just added each one in the output container div, then do a hide/show.

You need to set it back if it's not 0, like this:
$('.gen_output').click(function() {
$('#item1_qty_output').val($('input:radio:checked').val());
if ($('input:radio:checked').val() == '0') {
$('.output').html('Not required');
}
else {
$('.output').html("<label for='item1_qty_output'>Item 1 Output</label><input type='text' id='item1_qty_output'");
}
});

I'd suggested adding a second div for "not required" and change the click function to show/hide the two divs.
<div class="output">
<label for="item1_qty_output">Item 1 Output</label>
<input type="text" id="item1_qty_output">
</div>
<div id="notRequired" style="display:none">
Not required
</div>
$('.gen_output').click(function() {
$('#item1_qty_output').val($('input:radio:checked').val());
if ($('input:radio:checked').val() == '0') {
$("#notRequired").show();
$(".output").hide();
}
else {
$("#notRequired").hide();
$(".output").show();
}
});