Actually, I have many checkboxes and textfields coming from database through single code. I need that when I check a particular checkbox, then a textfield in front of that checkbox to become editable. How can I do that ?
Here is my PHP code
<div class="my"><?php
while ($ass = mysql_fetch_array($rs)) {?>
<input type="checkbox" name="fees_name[]" id="fee_name" value="<?php echo $ass['fees_name']; ?>" onclick='toggleReadonly(this)'>
<?php echo $ass['fees_name']; ?>
<div style="padding:0px 10px 0px 0px; float: right;">
<input id="fee_amt" class="fee_amt" type="text" placeholder="amt" name="fees_amt[]" >
</div> <br><br><?php
}?>
</div>
and my Javascript
$(document).ready(function(){
$('#fee_name').click(function() {
$('#fee_amt').prop('disabled', !$(this).is(':checked'));
});
});
but it worked on only the first checkbox. Anyone can tell my what can i do for others???
All your text fields that are enabled/disabled have the same id. Try to set a different id inside the loop and in your javascript enable the one according to the checkbox that is checked.
Another way (without using ids) is to set the data attribute in each checkbox:
<div class="my">
<?php $i = 1; ?>
<?php while ($ass = mysql_fetch_array($rs)) { ?>
<input type="checkbox" name="fees_name[]" class="fee_name" data-mycheckbox="<?php echo $i; ?>" value="<?php echo $ass['fees_name']; ?>" onclick='toggleReadonly(this)'>
<?php echo $ass['fees_name']; ?>
<div style="padding:0px 10px 0px 0px; float: right;">
<input id="fee_amt<?php echo $i; ?>" class="fee_amt" type="text" placeholder="amt" name="fees_amt[]" >
</div> <br><br><?php
$i++;
}?>
</div>
And in your js script:
$(document).ready(function(){
$(".fee_name").click(function(event) {
var identifier = $(this).data('mycheckbox');
var input_identifier = "#fee_amt" + identifier;
$(input_identifier).prop('disabled', !$(this).is(':checked'))
});
});
solution by #eyetea also solves the problem with your non-unique ids.
just in case you don't want to rely on any ids:
$(document).ready(function(){
$('input[name="fees_name\\[\\]]"').click(function() {
$(this).next().children(':first').prop('disabled', !$(this).is(':checked'));
});
});
note that this sort of selecting the elements heavily relies on your dom structure and has to be changed accordingly when your html changes.
Here is the working code what you need,
$( "input[type=checkbox]" ).on( "click", function(){
if($(this).is(':checked')) {
$(this).next().prop('disabled', false);
} else {
$(this).next().prop('disabled', true);
}
});
HTML
<input type="checkbox" name="fees_name[]">
<input type="text" disabled="disabled" /><br/>
<input type="checkbox" name="fees_name[]">
<input type="text" disabled="disabled" /><br/>
<input type="checkbox" name="fees_name[]" >
<input type="text" disabled="disabled" /><br />
<input type="checkbox" name="fees_name[]">
<input type="text" disabled="disabled" /><br />
<input type="checkbox" name="fees_name[]">
<input type="text" disabled="disabled" />
JSFIDDLE
If you need to give name then you could use input[name='fees_name[]']as,
$( "input[name='fees_name[]']" ).on( "click", function(){
if($(this).is(':checked')) {
$(this).next().prop('disabled', false);
} else {
$(this).next().prop('disabled', true);
}
});
JSFIDDLE
Use the following code-
<div class="my"><?php
$i=0;
while ($ass = mysql_fetch_array($rs)) {$i++;?>
<input type="checkbox" name="fees_name[]" id="fee_name[<?php echo $i?>]" value="<?php echo $ass['fees_name']; ?>" onChange='if(this.checked){toggleReadonly(this,true);} else{toggleReadonly(this,false)}'>
<?php echo $ass['fees_name']; ?>
<div style="padding:0px 10px 0px 0px; float: right;">
<input id="fee_amt[<?php echo $i?>]" class="fee_amt" type="text" placeholder="amt" name="fees_amt[]" readonly>
</div> <br><br><?php
}?>
JavaScript code
function toggleReadonly(chk_element, status)
{
chk_element_no=chk_element.id.substring(chk_element.id.indexOf('[')+1, chk_element.id.indexOf(']'));
txt_element_id="fee_amt["+chk_element_no+"]";
if(status==true)
document.getElementById(txt_element_id).readOnly=false;
else
document.getElementById(txt_element_id).readOnly=true;
}
check this fiddle.
Check the following similar sample code and execute it-
1.php
<html>
<head>
<script>
function toggleReadonly(chk_element, status)
{
chk_element_no=chk_element.id.substring(chk_element.id.indexOf('[')+1, chk_element.id.indexOf(']'));
txt_element_id="fee_amt["+chk_element_no+"]";
if(status==true)
document.getElementById(txt_element_id).readOnly=false;
else
document.getElementById(txt_element_id).readOnly=true;
}
</script>
</head>
<body>
<div class="my"><?php
$i=0;
while ($i++<=10) {?>
<input type="checkbox" name="fees_name[]" id="fee_name[<?php echo $i;?>]" value="<?php echo $i; ?>" onChange='if(this.checked){toggleReadonly(this,true);} else{toggleReadonly(this,false)}'>
<?php echo $i; ?>
<div style="padding:0px 10px 0px 0px; float: right;">
<input id="fee_amt[<?php echo $i;?>]" class="fee_amt" type="text" placeholder="amt" name="fees_amt[]" readonly>
</div> <br><br><?php
}?>
</div>
</body>
</html>
Related
I need one help.I need to trigger one click event which has applied to a button but it can not happen like that i am explaining my code below.
<div style="width:24%; float:left; padding:10px;">No of questions :
<input name="no_of_question" id="ques" class="form-control" placeholder="no of question" value="<?php if($_REQUEST['edit']) { echo $getcustomerobj->no_of_question; } else { echo $_REQUEST['no_of_question']; } ?>" type="text" onkeypress="return isNumberKey(event)">
<?php
if($id!='' && $_REQUEST['edit']==1){
echo " <script type=\"text/javascript\"> $('#plus').click(\"".$id."\") </script> ";
}
?>
<div id="err_msg_name" style="font-size:12px; color:#FF0000; text-align: center;"></div>
</div>
<div class="clear"></div>
<div style="padding-bottom:10px;">
Questions : <input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+" onClick="addQuestionField();"><input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" onClick="deleteQuestionField();">
</div>
my java script function is given below.
<script>
function addQuestionField(id){
console.log('ids',id);
var get =$("#ques").val();
if(get==null || get==''){
alert('Please add no of questions');
}else{
var counter = 0;
if (counter > 0){
return;
}else{
counter++;
<?php
$status=array("status"=>'1');
$feeddata=$db->kf_answertype->find($ustatus);
?>
<?php
$status=array("status"=>'1');
$feeddatascale=$db->kf_scale->find($ustatus);
?>
for(var i=1;i<get;i++){
$('#container').append('<div><div style="width:24%; float:left; padding:10px;"> <textarea class="form-control" name="questions'+ i +'" id="questions" placeholder="Questions" style="background:#FFFFFF;" rows="2"><?php if($_REQUEST['edit']) { echo $getcustomerobj->questions; } else { echo $_REQUEST['questions']; } ?></textarea></div><div style="float:left;margin-top:37px;"><div style="float:left; margin-right:10px;"><?php foreach($feeddata as $v){?> <input type="radio" name="answer_type'+i+'" id="answer_type0" onClick="selectScale(this.value,'+i+');" value="<?php echo $v['_id']; ?>"> <?php echo $v['answertype']; ?> <?php }?></div><div style="float:left; margin-top:-10px;display:none;" id="scaleid'+i+'"><select class="form-control" id="nscale'+i+'" name="noofscale'+i+'"><option value="">Select Answer Type</option><?php foreach($feeddatascale as $v){ ?><option value="<?php echo $v['_id']; ?>" <?php if($getcustomerobj->no_of_scale == $v['_id'] or $_REQUEST['no_of_scale'] == $v['_id']){ print 'selected'; } ?>><?php echo $v['noofscale']; ?></option><?php } ?></select></div><div style="clear:both;"></div></div><div style="clear:both;"></div></div>');
}
}
}
}
</script>
I need when that if condition will true the below function should called but its not happening like that.Please help me.
I tried some code from other topics to resolve my problem here but I still don't manage to get what I want..
I need a button to goes enable when the user select one of the item in a select option and goes to disable when the users re-select the default select..
<script text="text/javascript">
$(document).ready(function(){
$('#select_resa').change(function(){
var val = $('#select_resa').val();
alert(val);
if (val == '') {
$('#supprimer_resa_button').attr('disabled', 'disabled');
}else{
$('#supprimer_resa_button').removeAttr('disabled');
}
});
});
</script>
<form method="post" action="modif_resa.php?" id="modif_resa">
<h2>Modifier/Supprimer un reservation</h2>
<?php if(isset($erreur)) echo '<p style="font-style:italic;font-size:0.8em;text-align:center;color:red;margin-bottom:5px;">'.$erreur.'</p>'; ?>
<label for="salle"><strong>Choisissez une reservation</strong></label>
<select id="select_resa" name="select_resa">
<option value="" id="select" name="select">--Selectionnez--</option>
<option value=""></option>
<option value="2">salut</option>
<?php
if(!empty($liste_reservations)){
for($i=0;$i<count($liste_reservations);$i++){
echo '<option "title="'.$liste_reservations[$i]['RS_NOM'].'" value="'.$liste_reservations[$i]['RS_NOM'].'" '.(isset($SALLE) && $SALLE==$liste_reservations[$i]['RS_ID']?'selected="selected"':'').'>'.$liste_reservations[$i]['RS_NOM'].'</option>';
}
}
?>
</select>
<br/><br/>
<label for="s_date"> Modifier la date de fin</label>
<input type="text" value="<?php if(isset($RS_DATE)) echo $RS_DATE;?>" name="s_date" id="s_date" maxlength="10" size="10"/>
<img src="/Libs/calendar/calendar_small.png" alt="Calendrier" style="vertical-align:middle; border:0;" title="Calendrier" />
<br/><br/>
<span class="valider">
<input type="submit" name="valider" value="<?php echo TXT_VALIDER; ?>" />
</span>
<br/><br/>
<div style="text-align:center; margin-top: 50px;">
<input id="supprimer_resa_button" disabled="disabled" type="submit" name="supprimer_resa_button" style="font-size: 15px; width: auto; height:auto; font-weight:bold;" value="<?php echo TXT_SUPPRIMER_RESA; ?>" />
</div>
</form>
My Submit button is enable in any case here...
Where am I wrong ?
Please check this:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script text="text/javascript">
$(document).ready(function(){
$('#select_resa').change(function(){
var val = $('#select_resa').val();
if (val == '') {
$('#supprimer_resa_button').attr('disabled', 'disabled');
}else{
$('#supprimer_resa_button').removeAttr('disabled');
}
});
});
</script>
<form method="post" action="modif_resa.php?" id="modif_resa">
<h2>Modifier/Supprimer un reservation</h2>
<?php if(isset($erreur)) echo '<p style="font-style:italic;font-size:0.8em;text-align:center;color:red;margin-bottom:5px;">'.$erreur.'</p>'; ?>
<label for="salle"><strong>Choisissez une reservation</strong></label>
<select id="select_resa" name="select_resa">
<option value="" id="select" name="select">--Selectionnez--</option>
<option value="1">abc</option>
<option value="2">def</option>
<option value="3">ghi</option>
<?php
if(!empty($liste_reservations)){
for($i=0;$i<count($liste_reservations);$i++){
echo '<option "title="'.$liste_reservations[$i]['RS_NOM'].'" value="'.$liste_reservations[$i]['RS_ID'].'" '.(isset($SALLE) && $SALLE==$liste_reservations[$i]['RS_ID']?'selected="selected"':'').'>'.$liste_reservations[$i]['RS_NOM'].'</option>';
}
}
?>
</select>
<br/><br/>
<label for="s_date"> Modifier la date de fin</label>
<input type="text" value="<?php if(isset($RS_DATE)) echo $RS_DATE;?>" name="s_date" id="s_date" maxlength="10" size="10"/>
<img src="/Libs/calendar/calendar_small.png" alt="Calendrier" style="vertical-align:middle; border:0;" title="Calendrier" />
<br/><br/>
<span class="valider">
<input type="submit" name="valider" value="<?php echo TXT_VALIDER; ?>" />
</span>
<br/><br/>
<div style="text-align:center; margin-top: 50px;">
<input id="supprimer_resa_button" disabled="disabled" type="submit" name="supprimer_resa_button" style="font-size: 15px; width: auto; height:auto; font-weight:bold;" value="<?php echo TXT_SUPPRIMER_RESA; ?>" />
</div>
</form>
You just need to use:
$('#supprimer_resa_button').removeAttr('disabled');
instead of
$('#supprimer_resa_button').attr('disabled', '');
In recent jQuery api, you must use prop on boolean html attributes :
$('#supprimer_resa_button').prop('disabled', false)
Or
$('#supprimer_resa_button').prop('disabled', true)
attr is only with html attributes which can contain a value.
In your case, you can also do a little shorter :
function updateFormEnabled() {
$('#supprimer_resa_button').prop('disabled', verifyAdSettings());
}
I have the following code that:
check the relevant checkbox if the user input a value in a text input
verify if user input is duplicated, alert and focus the text input where user inserted the wrong value
This is my code:
$('.seq').blur(function(){
if($(this).val()!=''){
$(this).closest(".percheckbox").find("input:checkbox:first").prop("checked", true);
if ($('.seq').not(this).val() == $(this).val()) {
alert('Duplicated entry. Change it please.');
console.log($(this).attr('name'));
$(this).focus();
}
}else if ($(this).val()=='') {
$(this).closest(".percheckbox").find("input:checkbox:first").prop("checked", false);
}
});
The only point that is not working is $(this).focus(); even if console.log shows that 'this' is the right element.
EDIT: this is the html:
<div class="sez-form">
<fieldset>
<legend>Messaggi inclusi</legend>
<?php $i = 0; foreach($msgs as $msg) { ?>
<div class="percheckbox">
<input class="checkseq" type="checkbox" name="messaggio[<?php echo $i; ?>]" value="<?php echo $msg['id']; ?>">
<?php echo $msg['nome']; ?>
<br>
<label>Ordine: </label><input class="seq" size="2" maxlength="2" type="text" name="ordine[<?php echo $i; ?>]">
</div>
<?php $i += 1; } ?>
<br style="clear: both;">
</div>
Sorry for the wrong code formatting but I still have some problems with stackoverlow text editing.
Your code does work actually, check this fiddle: http://jsfiddle.net/6pbx2yof/
Check if none of your other code interfers with it. I'd remove everything else and check if it works, then piece by piece re-add your other code.
Stackoverflow doesn't let me answer without code so here is the html code I used (JS Code is unchanged)
<div class="sez-form">
<fieldset>
<legend>Messaggi inclusi</legend>
<div class="percheckbox">
<input class="checkseq" type="checkbox" name="messaggio0" value="0"/>
0
<br>
<label>Ordine: </label>
<input class="seq" size="2" maxlength="2" type="text" name="ordine0"/>
</div>
<div class="percheckbox">
<input class="checkseq" type="checkbox" name="messaggio1" value="1"/>
1
<br>
<label>Ordine: </label>
<input class="seq" size="2" maxlength="2" type="text" name="ordine1"/>
</div>
</fieldset>
<br style="clear: both;">
</div>
I don't want to copy any of the questions asked before, but I have hard time to solve my problem.
I have a form with few checkbox-es, some of them are hidden to trigger output when checkbox is unchecked. At the end of the page I have JQuery code, that should disable those hidden checkboxes if I enable general boxes, but this code doesn't work. Whenever I click to any checkbox, EVERY other checkboxes become unchecked! I think it happens because I cant aim to the only one needed element.
Maybe you didn't understand, but if you look at the code, you will find out exactly what is wrong!
<form action="" method="GET" name="<?php echo $listFilter['forn_name']; ?>" id="<?php echo $listFilter['forn_name']; ?>">
<span>
<input type="checkbox" value="1" name="word" id="word_checkbox" class="checkbox" <?php if($listFilter['word_status'] == 1){ ?> checked <?php } ?>/>
<input type='hidden' value='0' name='word' class="checkbox_hidden" <?php if($listFilter['word_status'] == 0){ ?> checked <?php } ?>/>
<label class="label" for="word_checkbox">Words</label>
</span>
<span>
<input type="checkbox" value="1" name="pron" id="pron_checkbox" class="checkbox" <?php if($listFilter['pronunciation_status'] == 1){ ?> checked <?php } ?> />
<input type='hidden' value='0' name='pron' class="checkbox_hidden" <?php if($listFilter['pronunciation_status'] == 0){ ?> checked <?php } ?>/>
<label class="label" for="pron_checkbox">Pronunciation</label>
</span>
<span>
<input type="checkbox" value="1" name="pos" id="pos_checkbox" class="checkbox" <?php if($listFilter['pos_status'] == 1){ ?> checked <?php } ?> />
<input type='hidden' value='0' name='pos' class="checkbox_hidden" <?php if($listFilter['pos_status'] == 0){ ?> checked <?php } ?>/>
<label class="label" for="pos_checkbox">Part of speech</label>
</span>
<span>
<input type="checkbox" value="1" name="meaning" id="meaning_checkbox" class="checkbox" <?php if($listFilter['meaning_status'] == 1){ ?> checked <?php } ?> />
<input type='hidden' value='0' name='meaning' class="checkbox_hidden" <?php if($listFilter['meaning_status'] == 0){ ?> checked <?php } ?>/>
<label class="label" for="meaning_checkbox">Meaning</label>
</span>
<span>
<input type="checkbox" value="1" name="examples" id="examples_checkbox" class="checkbox" <?php if($listFilter['examples_status'] == 1){ ?> checked <?php } ?> />
<input type='hidden' value='0' name='examples' class="checkbox_hidden" <?php if($listFilter['examples_status'] == 0){ ?> checked <?php } ?>/>
<label class="label" for="examples_checkbox">Examples</label>
</span>
<script>
$(document).ready(function(){
$("#<?php echo $listFilter['forn_name']; ?> .checkbox").change(function() {
/* I reckon those codes bellow are causing problem */
var parent = $(this).closest('span');
if(this.checked){$(this).parent("span").children(".checkbox_hidden").prop('disabled', true);}
document.forms.<?php echo $listFilter['forn_name']; ?>.submit();
});
});
</script>
</form>
Thanks to Alexander, there is a sample code on JSFiddle. http://jsfiddle.net/TH2hh/
I have multiple edit records. I used script below to compare the value of textbox1 in textbox 2. But the problem is, when I try to edit multiple records. The script function only on the first record. How I can pass the for loop in php to javascript?
For Loop
$id=$_POST['checkbox'];
$N = count($id);
for($i=0; $i < $N; $i++)
{
This gets all records depends on number of checkbox that have been checked. And when I get all the value in for loop opens records depends on counter value. Just like this how I can pass this for loop functions to javascript?
<script>
$('#sbtBtn').live('click',function(){
var textBox1=document.getElementById('pr_qty[]').value;
var textBox2=document.getElementById('pr_total').value;
if((+textBox2) > textBox1){
alert('value is greater than quantity');
return false;
}else{
}
});
</script>
<div class="container">
<form class="form-horizontal" action="" method="post">
<?php
$id=$_POST['checkbox'];
$N = count($id);
for($i=0; $i < $N; $i++)
{
$result1 = $mysqli->query("
SELECT a.item_name, a.item_description, a.counter, b.counter, b.pr, b.total_quantity
FROM app a
LEFT OUTER JOIN purchase_request b
ON a.counter=b.counter
WHERE a.counter='$id[$i]'
");
while ($row = $result1->fetch_assoc())
{ ?>
<div class="thumbnail">
<div style="display:none;">
<div class="control-label"></div>
<div class="controls">
<input name="counter[]" class="textbox" type="text" value="<?php echo $row['counter'] ?>" readonly="readonly"/>
</div>
</div>
<div class="control-label" style='float:left;width:25%;margin-left:10%;text-align:left;margin-bottom:3px;'>Item</div>
<div class="controls" style='float:left;width:65%;margin-bottom:3px;'>
<input name="firstname[]" class="textbox" type="text" value="<?php echo $row['item_name'] ?>" readonly="readonly"/>
</div>
<div class="control-label" style='float:left;width:25%;margin-left:10%;text-align:left;margin-bottom:3px;'>Description</div>
<div class="controls" style='float:left;width:65%;margin-bottom:3px;'>
<input name="lastname[]" class="textbox" type="text" value="<?php echo $row['item_description'] ?>" readonly="readonly"/>
</div>
<div class="control-label" style='float:left;width:25%;margin-left:10%;text-align:left;margin-bottom:3px;'>PR Quantity</div>
<div class="controls" style='float:left;width:65%;margin-bottom:3px;'>
<input name="pr_qty[]" id="pr_qty[]" class="textbox" type="text" value="<?php echo $row['total_quantity']; ?>" />
<input id="pr_total" class="textbox" type="text" value="<?php $result2 = $mysqli->query("SELECT *, SUM(quantity) total_quantity FROM purchase_order WHERE counter='$id[$i]'");
while($rows = $result2->fetch_assoc()){ echo $rows['total_quantity']; }
?>">
</div>
<div class="control-label" style='float:left;width:25%;margin-left:10%;text-align:left;margin-bottom:3px;'>PR #</div>
<div class="controls">
<input name="pr[]" class="textbox" type="text" value="<?php echo $row['pr'] ?>" />
</div>
</div>
<br>
<?php
}
}
?>
<input name="submit" type="submit" id="sbtBtn" value="Update">
</form>
</div>
You can not give same id to multiple elements, you have to give unique id to your textboxes. In your function you getting textboxes byh Id, change it to class and also give separate classes to your textbox1 and 2. Otherwise your script will work on only first record.
js change
var textBox1=document.getElementsByClassName('tb1');
var textBox2=document.getElementsByClassName('tb2');
for(var i=0; i< textBox1.length; i++){
if((textBox2[i].value) > textBox1[i].value){
alert('value is greater than quantity');
return false;
}else{
}
}
and html change
<input name="pr_qty[]" id="pr_qty[]" class="textbox tb1" type="text" value="<?php echo $row['total_quantity']; ?>" />
<input id="pr_total" class="textbox tb2" type="text" value="<?php $result2 = $mysqli->query("SELECT *, SUM(quantity) total_quantity FROM purchase_order WHERE counter='$id[$i]'");
while($rows = $result2->fetch_assoc()){ echo $rows['total_quantity']; }
?>">
In your onclick event you can read input fields value like:
EDIT:
var val1 = $("input[name='UR_ELE1_NAME']").val();
var val2 = $("input[name='UR_ELE2_NAME']").val();
And you can compare like: if(val1 > val2){ .....}
I hope this helps.