Javascript Hidden/Show data as input Radio - javascript

I created a code which displays an information by clicking on a RADIO and other information by clicking on another RADIO.
Works normally, but when I update the page, even CHECKED, shows no information. Then I have to click again on the RADIO that is already CHECKED information to appear.
Anyone know how to solve?
Follow the code below:
<script>
// COLOR BG OR IMG BG
$(document).ready(function(){
$("input[name$='userBgOrImg']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#"+test).show();
});
});
</script>
<style type="text/css">
.desc { display: none; }
</style>
<div><label><input type="radio" name="userBgOrImg" value="1" <?php $id = $res_select["id"]; if ( $userBgOrImg == 1 ) { echo "checked=\"checked\"";} else { echo "";}?>>Cor de Fundo</label></div>
<div><label><input type="radio" name="userBgOrImg" value="2" <?php $id = $res_select["id"]; if ( $userBgOrImg == 2 ) { echo "checked=\"checked\"";} else { echo "";}?>>Imagem de Fundo</label></div>
<div> <br /> <br /> </div>
<div id="1" class="desc">
<label for="userBgBody">Cor do fundo do Site</label>
<input type="text" class="form-control bscp span12" value="<?php $id = $res_select["id"]; echo $userBgBody; ?>" id="userBgBody" name="userBgBody">
<hr />
</div>
<div id="2" class="desc">
<label for="userImgBody">Imagem de fundo do site</label>
<input type="text" class="span12" name="userImgBody" id="userImgBody" placeholder="Imagem do fundo do site" value="<?php $id = $res_select["id"]; echo $userImgBody; ?>" />
<hr />
<label for="userImgBodyRepeat">Repetir imagem de fundo</label>
<span> <input type="radio" name="userImgBodyRepeat" value="repeat"> Sim</span> <span> <input type="radio" name="userImgBodyRepeat" value="no-repeat" selected="selected"> Não
<hr />
</div>
Thank you in advance for your help.


Try this,
$(document).ready(function(){
var did=$("input[name$='userBgOrImg']:checked").val();
if(did)
{
$("#"+did).show();
}
// your remaining code
});// document.ready function close
Demo


You need to try
$(document).ready(function(){
$("input[name$='userBgOrImg']").change(function() {
var test = $(this).val();
$("div.desc").hide();
if(this.checked) {
$("#"+test).show();
}
}).filter(':checked').change();
});


Tr this..
$(document).ready(function () {
$("input[name$='userBgOrImg']").click(function () {
var value = $(this).val();
if(value)
{
$("#"+value).show();
}
});

Related

How to uncheck all when the other radial is picked

I create a js for my project. It almost work except that I need to uncheck all checkbox under first radial when second radial is picked.
JS
<script>
function habilitarSecciones(selected) {
var chk = $(selected);
var checked = chk.is(":checked");
var id = chk.val();
$("[id^='Grp2']").attr("disabled", true);
if (checked) {
$(".Grp2_" + id).removeAttr("disabled", false);
}
}
</script>
HTML
<div class="form-group">
<h3>Tipo</h3>
#foreach (Dominio.Tipo tipo in Model.Secciones.Select(x => x.Tipo).Distinct())
{
<label>
<input type="radio" value="#tipo.Id" name="Grp_Tipo" id='Grp_#tipo.Id' onclick="habilitarSecciones(this);" /> #tipo.Descrip
</label>
<hr />
foreach (var seccion in Model.Secciones.Where(x => x.Tipo == tipo))
{
<label>
<input type="checkbox" class="Grp2_#tipo.Id" value="#seccion.Id" name="SeccionesElegidas" id="Grp2_#seccion.Id" disabled /> #seccion.Descrip
</label>
}
<hr />
}
</div>

Please to try with $('element').prop('checked', false);

How to disable input fields on page load if a checkbox is not checked?

I want to disable all the user input fields in a form, if the 'Status Active' checkbox is unchecked. The target is to load the page with all the details but if the Status is not active then the checkbox will show as unchecked and the rest of the input fields will remain disabled, till the user checks the checkbox. He can then edit the data and save it.
However, if the record is active, then all the fields will be enabled for editing straight away.
I have already achieved this, but the only problem is even when the record is active, the input fields are getting disabled. Can anyone please point out where is the error in my code?
<script type='text/javascript'>
$(function(){
if($('#square').not(':checked')){
$('#prizename, #prizedesc, #comment').attr('disabled','disabled');
}
});
function checkDisable(){
var square = document.getElementById('square');
var prizename = document.getElementById('prizename');
var prizedesc = document.getElementById('prizedesc');
var comment = document.getElementById('comment');
if(square.checked){
prizename.disabled = false;
prizedesc.disabled = false;
comment.disabled = false;
}
if(!square.checked ){
prizename.disabled = true;
prizedesc.disabled = true;
comment.disabled = true;
}
}
</script>
<php codes here>
<div>
<table>
<tr>
<td>Prize Status - Active:</td>
<td><div class="square">
<input type="checkbox" name="status" id="square" value="1" onchange="checkDisable()" <?php if ($status == 1) echo 'checked'; ?> />
</div>
</td>
</tr>
</table>
<label>Prize Name <input type="text" name="prizename" id="prizename" value="<?php echo isset($_POST['prize']) ? $prizename : '' ?>" > </label>
<label>Prize Description <input type="text" name="prizedesc" id="prizedesc" value="<?php echo isset($_POST['prize']) ? $prize_description : '' ?>" > </label>
<label>Comment <textarea name="comment" id="comment" rows="4" ><?php echo $comment ?> </textarea> </label>
</div>
<div class="button-section">
<input id="save_button" type="submit" name="submit" value="Save">
</div>

$('#square').not(':checked')
this condition is not satisfied because it will return the object. You have to check with length. Please check in your code.
if($('#square').not(':checked').length > 0)
Or
if(!$('#square').is(":checked"))

I have altered your code - Working from my side.
HTML: (Just insert your variables again)
<table>
<tr>
<td>Prize Status - Active:</td>
<td>
<div class="square">
<input type="checkbox" name="status" id="square" value="1">
</div>
</td>
</tr>
</table>
<label>Prize Name <br><br><input type="text" name="prizename" id="prizename"
value="Juan" ></label>
<label>Prize Description <input type="text" name="prizedesc" id="prizedesc"
value="Description" ></label>
<label>Comment <textarea name="comment" id="comment" rows="4"
>Comment</textarea></label>
<div class="button-section">
<input id="save_button" type="submit" name="submit" value="Save">
</div>
JS: (The first bit executes on page load and the second part is listening for the change event on the checkbox)
if($('#square').not(':checked').length > 0){
document.getElementById('prizename').disabled = true;
document.getElementById('prizedesc').disabled = true;
document.getElementById('comment').disabled = true;
} else {
document.getElementById('prizename').disabled = false;
document.getElementById('prizedesc').disabled = false;
document.getElementById('comment').disabled = false;
}
const checkbox = document.getElementById('square');
checkbox.addEventListener('change', (event) => {
if (event.target.checked) {
document.getElementById('prizename').disabled = false;
document.getElementById('prizedesc').disabled = false;
document.getElementById('comment').disabled = false;
} else {
document.getElementById('prizename').disabled = true;
document.getElementById('prizedesc').disabled = true;
document.getElementById('comment').disabled = true;
}
})

Disable input if checkbox checked

i want to disable inputs when a checbox is checked.
part of html:
<div class="span1 ">
<div class="control-group" id="niedziela">
<label class="control-label" for="">Niedziela</label>
<div class="controls">
<input type="text" value="<?= $metavalue->nightlife_open_7_start ?>" name="meta[nightlife_open_7_start]" id="nightlife_open_7_start" class="m-wrap span12 timepicker-24" placeholder="">
<input type="text" value="<?= $metavalue->nightlife_open_7_end ?>" name="meta[nightlife_open_7_end]" id="nightlife_open_7_end" class="m-wrap span12 timepicker-24" placeholder="">
<input id="klient_open_4_end" type="checkbox" <?=_ set_checked($metavalue->nightlife_open_7_end,'do ostatniego klienta') ?> value="do ostatniego klienta" name="meta[nightlife_open_7_end]" class="m-wrap span12 timepicker" placeholder=""> Do ost. klienta
<input id="zamkniete_open_4_end" type="checkbox" <?=_ set_checked($metavalue->nightlife_open_7_start,'zamkniete') ?> value="zamkniete" name="meta[nightlife_open_7_start]" class="m-wrap span12 timepicker" placeholder=""> Zamknięte
</div>
</div>
</div>
what i want is that if checkbox with id klient_open_4_end is checked it should disable input with id="nightlife_open_7_end"
if checkbox with id="zamkniete_open_4_end" is checked should disable both inputs text areas
i tried with :
<script type="text/javascript">
$(document).ready(function($) {
$('#klient_open_4_end').change(function() {
$(this).find("#nightlife_open_7_start").attr("disabled", true);
});
});
</script>

You'll need to listen to the click event of the checkboxes. Since you've tagged the question with jQuery too,
$(function(){
$('#klient_open_4_end').on('click', function(){
if($(this).is(':checked')){
$('#nightlife_open_7_start').attr('disabled', true);
} else {
$('#nightlife_open_7_start').attr('disabled', false);
}
});
$('#zamkniete_open_4_end').on('click', function(){
// assuming the textarea is inside <div class="controls /">
if($(this).is(':checked')){
$('.controls input:text, .controls textarea').attr('disabled', true);
} else {
$('.controls input:text, .controls textarea').attr('disabled', false);
}
});
});
Update
You can shorten this even more and use the following instead:
$(function(){
$('#klient_open_4_end').on('click', function(){
$('#nightlife_open_7_start').attr('disabled', $(this).is(':checked'));
});
$('#zamkniete_open_4_end').on('click', function(){
// assuming the textarea is inside <div class="controls /">
$('.controls input:text, .controls textarea').attr('disabled', $(this).is(':checked'));
});
});

This is fairly simple, you can do it like this
$(document).ready(function () {
$('#klient_open_4_end').click(function () {
$('#nightlife_open_7_start').prop('disabled', function(i, v) { return !v; });
});
});
But from your snippet I'm assuming you want to run something when the page loads to disable the input as well, you can do that the same way essentially.

You can achieve this as
$('#chk').change(function(){
if($(this).is(':checked'))
$('#inp1').prop('disabled','disabled')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='text' id='inp1' />
<input type='text' id='inp2' />
<input type='checkbox' id='chk' />

checkout this simple code
<html>
<body>
<input type="checkbox" id="klient_open_4_end" name="klient_open_4_end"/>
<input type="text" id="nightlife_open_7_end" name="nightlife_open_7_end"/>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#klient_open_4_end").change(function(){
if($(this).prop("checked")){
$("#nightlife_open_7_end").prop("disabled",true);
}
else{
$("#nightlife_open_7_end").prop("disabled",false);
}
});
});
</script>
</html>
In above code
$("#nightlife_open_7_end").prop("disabled",true/false);
you may use
$('#nightlife_open_7_end').attr('disabled', true/false);

It is for onclick disable and enable
<!DOCTYPE html>
<html>
<body>
Checkbox: <input type="checkbox" id="myCheck">
<button onclick="check()">Check Checkbox</button>
<button onclick="uncheck()">Uncheck Checkbox</button>
<script type="text/javascript">
function check() {
if(document.getElementById("myCheck").checked == true)
{
document.getElementById("input").disabled = true;
}
else{
document.getElementById("input").disabled = false;
}
}
</script>
</body>
</html>

Show input based on selecting option

I have a script but I couldn't make it work correctly, I want to show inputs based on options, for example if I choose "Havale" option different inputs has to shown, if I choose "Paypal" option different inputs.
My codes are here;
<script type="text/javascript">
$(document).ready(function(){
$("input[name$='group_name']").click(function(){
var option_value = $(this).val();
if(option_value=='paypal') {
$(".box1").css("display","block");
$(".box2").css("display","none");
}
else if(option_value=='havale') {
$(".box2").css("display","block");
$(".box1").css("display","none");
}
});
$(".box1").show();
$(".box2").hide();
});
</script>
and this;
<select name="payment_method" class="select2" onchange="this.form.submit();" style="width: 160px;">
<option value="">-- Ödeme şekli seçin --</option>
<option value="paypal">Paypal</option>
<option value="havale">Havale / EFT</option>
</select>
and this;
<div class="withdraw-center">
<div class="form-input-title box1">Banka Hesap Adı Soyadı</div>
<div class="form-input-area-bg3 box1">
<input type="text" id="payment_name" class="input3" name="payment_name" value="<?php echo $row['payment_name']; ?>" size="37" />
</div>
<div class="form-input-title">Banka Adı</div>
<div class="form-input-area-bg3">
<input type="text" id="payment_bank" class="input3" name="payment_bank" value="<?php echo $row['payment_bank']; ?>" size="37" />
</div>
<div class="form-input-title">IBAN</div>
<div class="form-input-area-bg3">
<input type="text" id="iban" class="input3" name="iban" value="<?php echo $row['iban']; ?>" size="37" maxlength="26" />
</div>
<div class="form-input-title">T.C. Kimlik No</div>
<div class="form-input-area-bg3">
<input type="text" id="tckn" class="input3" name="tckn" value="<?php echo $row['tckn']; ?>" size="37" maxlength="11" />
</div>
<div class="form-input-title box2">PayPal E-mail Adresi</div>
<div class="form-input-area-bg3 box2">
<input type="text" id="paypal_email" class="input3" name="paypal_email" value="<?php echo $row['paypal_email']; ?>" size="37" />
</div>
</div>
Thanks everyone!

You need to register the handler to the payment_method elements change event
$(document).ready(function(){
$("select[name='payment_method']").change(function(){
var option_value = $(this).val();
if(option_value=='paypal') {
$(".box1").css("display","block");
$(".box2").css("display","none");
}
else if(option_value=='havale') {
$(".box2").css("display","block");
$(".box1").css("display","none");
}
});
$(".box1").show();
$(".box2").hide();
});
Demo: Fiddle

Try this
$(".box1").hide();
$(".box2").hide();
$("select[name='payment_method']").change(function(){
var option_value = $(this).val();
if(option_value=='paypal') {
$(".box2").show();
$(".box1").hide();
}
else if(option_value=='havale') {
$(".box1").show();
$(".box2").hide();
} else {
$(".box1").hide();
$(".box2").hide();
}
});
FIDDLE

You need to use the change event on the select box of the payment type.
Try this:
$(document).ready(function(){
$(".box1").hide();
$(".box2").hide();
$(".withdraw-center").hide();
$(".select2").change(function(){
var option_value = $(this).val();
if(option_value=='paypal') {
$(".withdraw-center").show();
$(".box1").css("display","block");
$(".box2").css("display","none");
}
else if(option_value=='havale') {
$(".withdraw-center").show();
$(".box2").css("display","block");
$(".box1").css("display","none");
}else{
$(".withdraw-center").hide();
}
});
Here is the fiddle:http://jsfiddle.net/ULUFe/1/

hide DIV when radio button is clicked with Javascript

I want to hide my div when a radio button is clicked, but cannot figure it out for the life of me.. Here is my code:
<li>
Residential
<input type="radio" name="fee" id="residential" class="app_fee"
value="<?php echo "$applicationFee_residential" ?>"
onChange="mech_application.fee1.value = eval(mech_application.residential.value)"
<?php if (isset($_POST['fee'])) {
print($residentialYes ? "CHECKED" : "");
} ?> />
</li>
<li>
Apartment/Commercial
<input type="radio" name="fee" id="apartment" class="app_fee"
value="<?php echo "$applicationFee_Apartment" ?>"
onChange="mech_application.fee1.value = eval(mech_application.apartment.value)"
<?php if (isset($_POST['fee'])) {
print($apartmentNo ? "CHECKED" : "");
} ?> />
</li>
<li>
Revision
<input type="radio" name="fee" id="revision" class="app_fee"
value="<?php echo "$revision" ?>"
onChange="mech_application.fee1.value = eval(mech_application.revision.value)"
<?php if (isset($_POST['revision'])) {
print($revisionYes ? "CHECKED" : "");
} ?> />
<?php if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if (!isset($_POST['fee'])) {
$problem = TRUE;
print '<p class="error">Please select the application type</p>';
$error = TRUE;
}
}?>
</li>
And I want to hide this div when either Residential or Apartment or clicked, and show it when revision is clicked:
<div class="revision_hidden">
Application ID:
<input type="text" name="revision_application_id" size="12" maxlength="40"
value="<?php if (isset($_POST['revision_application_id'])) {
print htmlspecialchars($_POST['revision_application_id']);
} ?>"
placeholder="Application ID"/>
</div>
Any and all help is appreciated! Thank you!

Give your div an id:
<div class="revision_hidden" id="my_div"> ...
Add an onclick function to your radiobuttons:
<input type="radio" name="fee" id="residential" onclick="my_function(this)" ...
<input type="radio" name="fee" id="apartment" onclick="my_function(this)" ...
<input type="radio" name="fee" id="revision" onclick="my_function(this)" ...
And add a JavaScript function:
function my_function(elm)
{
if(elm == document.getElementById('residential') || elm == document.getElementById('apartment'))
{
//document.getElementById('my_div').style.visibility = "hidden";
document.getElementById('my_div').style.display = "none";
}
else if(elm == document.getElementById('revision'))
{
//document.getElementById('my_div').style.visibility = "visible";
document.getElementById('my_div').style.display = "block";
}
}

You can use jQuery to hide elements real easy.
$('#id_of_div').hide()
For doing something on the radio button being clicked, use more jQuery
$('#id_of_radioBtn').clicked(function(){
//do something
});

Categories

Resources