Dan Lee Dan Lee - 2 months ago 20
jQuery Question

onLoad detect if radio button is checked

I'm trying to do detection onLoad to see if a radio button is checked. If it is then I want to output some text into a div. Currently it isn't working onLoad and the functionality only works on click.

I'm using local storage to remember if a user has selected certain fields on refresh and this works fine - so whatever radio button was selected before a refresh shows after.

This is the code to change the text onLoad:

$(document).ready(function() {
var circuitNum = $('input[name="options[numberCircuitsMetre]"]:checked').val();

if (circuitNum == 'As many as possible per metre') {
$('#circuit').text('As many as possible per metre');
}
}


See full code:


// Circuit Select

// Toggle Metre Question and fill out summary
$('input[name="options[numberCircuitsMetre]"]').click(function(){
if($(this).attr("value")=="As many as possible per metre"){
$(".toggleQuestion").hide();
$('#circuit').text('As many as possible per metre');
}
if($(this).attr("value")=="Custom number"){
$(".toggleQuestion").show();
}
});

var circuitNum = $('input[name="options[numberCircuitsMetre]"]:checked').val();

if (circuitNum == 'As many as possible per metre') {
$('#circuit').text('As many as possible per metre');
}
if (circuitNum == 'Custom number') {
if($('.circuitsNum').val() == ''){
$('.circuitsValidation').html("<span class='flash'>Please add the number of circuits you want per metre</span>");
$('.circuitsNum').addClass("errorBorder");
var errorMessage = 'true';
} else {
$('#circuit').text('#circuitsNum'.value || '');
}
$(".toggleQuestion").show();
}
$("#circuitsNum").on('change keydown paste input', function() {
$('#circuit').text(this.value || '');
}).change();

$('#no').click(function() {
var term = $('#circuitsNum').val();
$('#circuit').text(term || '');
});

.radio-toggle {
margin-bottom: 30px;
}
.toggleQuestion {
display: none;
padding-top: 20px;
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

<!-- No. of Circuit Designs -->
<fieldset>
<label>Do you want as many circuit designs per metre as possible?</label>

<div class="radio-toggle">
<div class="row collapse radio-shack">

<div class="large-6 columns">
<div class="radio-margin">
<div class="radio-zone">
<input type="radio" name="options[numberCircuitsMetre]" id="yes" class="substrate" value="As many as possible per metre" checked="checked" />
<div class="check-cover">
</div>
<div class="check"></div>
<label for="yes">
<div class="label-head"><strong>Yes</strong></div>
</label>
</div>
</div>
</div>

<div class="large-6 columns">
<div class="radio-margin">
<div class="radio-zone">
<input type="radio" name="options[numberCircuitsMetre]" id="no" class="substrate" value="Custom number"/>
<div class="check-cover">
</div>
<div class="check"></div>
<label for="no">
<div class="label-head"><strong>No</strong></div>
</label>
</div>
</div>
</div>

</div>
</div>

<div class="toggleQuestion">
<label>How many circuit designs per metre would you like?</label>

<input type="number" name="options[numberCircuits]" step="any" placeholder="Add the number of circuits per metre..." class="circuitsNum number" id="circuitsNum">
<p class="circuitsValidation"></p>
</div>

</fieldset>


<div class="summary-row">
<div class="summary-cell summary-head">
<strong>No. of circuits:</strong>
</div>
<div class="summary-cell">
<span id="circuit"></span>
</div>
</div>




Answer

try this https://jsfiddle.net/0zzdkb32/44/ I just add this code

$(document).ready(function() {
  $('input[name="options[numberCircuitsMetre]"]').each(function() {
    if ($(this).val() == localStorage.getItem('selected')) {
      $(this).click();
      if($(this).val()=="As many as possible per metre"){
          $(".toggleQuestion").hide();
          setTimeout(function(){
            $('#circuit').text('As many as possible per metre');
          }, 100);
      }
      if($(this).attr("value")=="Custom number"){
          $(".toggleQuestion").show();
      }
    }
  });
})

and add

localStorage.setItem('selected', $(this).val());

in your click event

Comments