I have a table that populated with mysql data. I want to change the textbox value based on the value of the drop down. What I've done is only the first row changes its value but the following row doesn't work.
Below is my code.
//this is inside while loop
<input type='text' name='qqty[]' value='<?php echo $avail; ?>' id="avail" class='form-control1' readonly = 'readonly'>
<select class="form-control1" name="qty[]" id="sType" onChange="check();">
<option value="<?php echo $avail;?>"><?php echo $Uconv;?></option>
<option value="<?php echo $qty;?>"><?php echo $uom;?></option>
</select>
//my javascript code
<script>
function check() {
document.getElementById("avail").value = document.getElementById("sType").value;
}
</script>
You have to give individual ids to each input, and then find it. Let's say your iteration variable is $i:
<?php
$i=1;
while (your_condition) {
?>
<input type='text' name='qqty[]' value='<?php echo $avail; ?>' id="avail<?= $i ?>" class='form-control1' readonly = 'readonly'>
<select class="form-control1" name="qty[]" id="sType" onChange="check('<?= $i ?>');">
<option value="<?php echo $avail;?>"><?php echo $Uconv;?></option>
<option value="<?php echo $qty;?>"><?php echo $uom;?></option>
</select>
//my javascript code
<script>
function check(i) {
document.getElementById("avail"+i).value = document.getElementById("sType").value;
}
</script>
<?php
$i++;
} // end while
?>
If you have that code inside a loop, you have multiple elements with the same id (avail and such). When you do getElementById it will return only the first element with that id, AKA, the first row.
You should add unique ids to each element, let's say, by adding an increasing integer inside the loop, like this:
<?php
for ($x = 0; $x <= 10; $x++) {
?>
<input type='text' name='qqty[]' value='<?php echo $avail; ?>' id="avail_<?php echo $x; ?>" class='form-control1' readonly = 'readonly'>
<select class="form-control1" name="qty[]" id="sType_<?php echo $x; ?>" onChange="check('<?php echo $x; ?>');">
<option value="<?php echo $avail;?>"><?php echo $Uconv;?></option>
<option value="<?php echo $qty;?>"><?php echo $uom;?></option>
</select>
<?php
}
?>
<script>
function check(i) {
document.getElementById("avail_"+i).value = document.getElementById("sType_"+i).value;
}
</script>
Try this way :
<select onchange="ChooseContact(this)">
<option value='1'>1</option>
<option value='2'>2</option>
</select>
<input id="friendName">
function ChooseContact(data) {
document.getElementById ("friendName").value = data.value;
}
You are referencing the first row elements by id.
You need to change the id for each row and based on which row you edit change the values.
Related
The options for the select menu are created from a database. I want to print the value of the selected option on the input. The code below only prints the first option value. I want to print them all. thanks.
<?php
$sql2 = "select * from add_meta";
$sonuc2= $conn->query($sql2);
if($sonuc2->num_rows>0){
while($kayitlar2 = $sonuc2->fetch_object()){
if($kayitlar2->isim!="Renk")
{
?>
<select id="selectid" name="<?php $kayitlar2->isim; ?>" class="sec" onchange="degergoster()" >
<option id="barkodd" value="" style="display:none;"><?php echo $kayitlar2->isim; ?> seçin</option>
<?php
$sql = "select * from add_barkod where kat_list in('$kayitlar2->isim')";
$sonuc= $conn->query($sql);
if($sonuc->num_rows>0){
while($kayitlar = $sonuc->fetch_object()){
?>
<option name="selectname1" value="<?php echo $kayitlar->ekle_hane;?>"><?php echo $kayitlar->ekle_isim; }} ?></option>
</select>
<?php
} }}
?>
<input id="e" name="varyantkod" class="sec">
Javascript code:
function degergoster() {
var selectkutu = document.getElementById("selectid");
var selectkutu_value = selectkutu.options[selectkutu.selectedIndex].value;
document.getElementById("e").value=selectkutu_value;
}
just get the value of the select object and add that to the value of the input
change
document.getElementById("selectid");
to
document.getElementById("selectid").value;
This should work
I need to set value of text box on change from select box created using jquery
<?php for($i=0;$i<5 ;$i++) { ?>
<select id="<?php echo 'aaa'.$i ?>" class="<?php echo 'aaa'.$i ?>">
<?php for($i=0;$i<5 ;$i++) { ?>
<option value="1112" data-xyz="dynamic_value " data-abc="dynamic_value">dynamic_value</option>
</select>
<input type="hidden" class="<?php echo 'bbb'.$i ?>" id="bbb" name="<?php echo 'bbb'.$i ?>"/>
<input type="hidden" class="<?php echo 'ccc'.$i ?>" name="<?php echo 'ccc'.$i ?>" id="ccc" />
<?php } ?>
<?php } ?>
<script>
$('.aaa').change(function () {
var otherValue=$(this).find('option:selected').attr('data-xyz');
var someOtherValue=$(this).find('option:selected').attr('data-abc');
$('.bbb').val(otherValue);
$('.ccc').val(someOtherValue);
});
</script>
How to change value class bbb0-bbb5 in jquery without using loop in jquery
Do not update the class names in php-loop, classes need not be unique.
To select input:hidden elements, no need to specify ID attribute
$('.aaa').change(function() {
var otherValue = $(this).find('option:selected').attr('data-xyz');
var someOtherValue = $(this).find('option:selected').attr('data-abc');
$(this).siblings('.bbb').val(otherValue);
$(this).siblings('.ccc').val(someOtherValue);
});
<?php for($i=0;$i<5 ;$i++) { ?>
<select id="<?php echo 'aaa'.$i ?>" class="aaa">
<?php for($i=0;$i<5 ;$i++) { ?>
<option value="1112" data-xyz="dynamic_value " data-abc="dynamic_value">dynamic_value</option>
</select>
<input type="hidden" class="bbb" name="<?php echo 'bbb'.$i ?>" />
<input type="hidden" class="ccc" name="<?php echo 'ccc'.$i ?>" />
<?php } ?>
<?php } ?>
I need the code for getting the addr and pnum of the patient when I choose the pname in the combo box.
How can I do that?
<script>
function getVal() {
document.getElementById("text2").value = document.getElementById("model").value;
}
</script>
<body>
//code in opening and getting my addr and pnum in dbase
<?php
include('connect.php');
$pname=$_GET['tpname'];
$result = mysql_query("SELECT * FROM tblnpatient where pname='$pname'");
while($row = mysql_fetch_array($result))
{
$pnum=$row['pnum'];
$addr=$row['addr'];
}
?>
//code for choosing pname
<tr><td>Patient Name:
<div id="ma">
<select name="pname" class="textfields" id="model" style="width:180px;" onchange="getVal();">
<option id="0" >--Select Patient Name--</option>
<?php
$con=mysqli_connect("localhost","root","","dbnpatient");
if (mysqli_connect_errno()){
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$pnum=$_GET['pnum'];
$query = mysqli_query($con, "SELECT * FROM tblnpatient");
while($row = mysqli_fetch_array($query)){
$pnum = $row['pnum'];
$pname = $row['pname'];
?>
<option id="<?php echo $pnum; ?>" value="<?php echo $pname; ?>"><?php echo $pname; ?> </option>
<?php } ?>
</select>
//code for getting pname and addr
Address:<input type="text" name="ename" size="20" id="ma" value="<?php echo $addr ?>"/>
Name:<input type="text" name="ename" size="20" id="ma" value="<?php echo $pname ?>"/>
In your while loop add the following (if you have that column otherwise replace with something similar)
$paddress = $row['paddress'];
You can store the needed information by using the data attribute in your options
<option id="<?php echo $pnum; ?>" data-pname="<?php echo $pname; ?>" data-paddress="<?php echo $paddress; ?>" value="<?php echo $pname; ?>"><?php echo $pname; ?></option>
Then change your getVal() function
function getVal() {
var options = document.getElementById("model").options;
if (options.selectedIndex != -1) {
var addr = document.getElementById('paddress');
var name = document.getElementById('pname');
addr.value = options[options.selectedIndex].getAttribute('data-paddress');
name.value = options[options.selectedIndex].getAttribute('data-pname');
}
}
Now change the id's of the input fields for the address and the name to paddress and pname. It is important to know to never have duplicate id's
I hope that helped
I have a form which has some text fields. Text fields may increase or decrease according to database table. If there are 3 warehouses in database it will show 3 text boxes with available quantity as place holder. Now user have to enter quantity no more than given in placeholder in each box. How can I do validation if user enter a value more than available (which will be shown as place holder) ?. Problem is validation should be according to foreach loop. My code is below,
<?php
if (!empty($ware_details)) {
foreach ($ware_details as $data) {
?>
<div class="form-group">
<label for="exampleInputEmail1"><?php echo $data->warehouse_name; ?></label>
<input type="number" id="return_pro" class="form-control" base_url="<?php echo site_url(); ?>" name="<?php echo $data->wh_warehouse_id;?>" placeholder="<?php echo $data->wh_product_qty; ?> Available">
<div class="dataDrop"></div>
<input type="hidden" id="quantity" value="<?php echo $data->wh_product_qty; ?>"/>
</div>
<?php } }?>
Here as you see text boxes number is depending upon foreach loop. So how can I validate? Javascript or Ajax is ok.
I tried something like this,
<?php foreach ($ware_details as $data) {?>
<script>
function check()
{
var stock = document.getElementById('quantity').value;
var return_stock = document.getElementById('return_pro').value;
if (parseFloat(stock) < parseFloat(return_stock))
{
alert("Return product can't be more than total stock");
document.getElementById('return_pro').focus();
return false;
}
//alert(return_stock);
return false;
}
But I know it is fully wrong. Any idea?
Try to use html5 required attribute. This set of code may help you.
<input type="number"
min="1"
max="<?php echo $data->wh_product_qty; ?>"
name="<?php echo $data->wh_warehouse_id;?>"
required="required"
placeholder="<?php echo $data->wh_product_qty; ?> Available" />
You cannot use an id multiple times in the document, it needs to be unique. Either use classes to identify/group elements, or enumerate the ids:
<?php
$i = 0;
if (!empty($ware_details)) {
foreach ($ware_details as $data) {
?>
<div class="form-group">
<label for="exampleInputEmail1"><?php echo $data->warehouse_name; ?></label>
<input type="number" id="return_pro<?php echo $i; ?>" class="form-control" base_url="<?php echo site_url(); ?>" name="<?php echo $data->wh_warehouse_id;?>" placeholder="<?php echo $data->wh_product_qty; ?> Available">
<div class="dataDrop"></div>
<input type="hidden" id="quantity<?php echo $i; ?>" value="<?php echo $data->wh_product_qty; ?>"/>
</div>
<?php
$i++;
} }?>
<script>
function check(i) {
var stock = document.getElementById('quantity'+i).value;
var return_stock = document.getElementById('return_pro'+i).value;
if (parseFloat(stock) < parseFloat(return_stock))
{
alert("Return product can't be more than total stock");
document.getElementById('return_pro'+i).focus();
return false;
}
//alert(return_stock);
return false;
}
// then in the validation trigger:
for (var i=0; i< <?php echo $i; ?>; i++)
check(i);
I'm trying to send the values that are separated by an pipe to 2 different fields. For some reason it won't work.
Any ideas?
<script type="text/javascript">
function folder(selectVeld)
{
// Stuur informatie terug
var id = (selectVeld.options[selectVeld.selectedIndex].value).split('|');
// Id
document.getElementsByName('folder_id').value = id[0];
// Naam
document.getElementsByName('folder_naam').value = id[1];
}
</script>
<tr>
<td><?php echo $lang['folder']; ?>:</td>
<td><select name="folder" onChange="folder(this)">
<option value="geen"><?php echo $lang['no_folder']; ?></option>
<?php
$sql = "SELECT id, naam FROM 2_folder ORDER BY naam ASC";
$res = mysql_query($sql,$con);
while ($row = mysql_fetch_assoc($res)){
?>
<option <?php if($row['id'].'|'.$row['naam'] == $folder){ echo 'selected="selected"'; } ?> value="<?php echo $row['id'].'|'.$row['naam']; ?>"><?php echo $row['naam'] ?></option>
<?php } ?></select>
</td>
</tr>
<input type="text" name="folder_id" value="<?php echo $folder_id; ?>" size="5" style="background-color: #e7e7e9" readonly="readonly" />
<input type="text" name="folder_naam" value="<?php echo $folder_naam; ?>" size="5" style="background-color: #e7e7e9" readonly="readonly" />
document.getElementsByName returns a array of elements, even if there is only a single element with that name.
document.getElementsByName('folder_id')[0].value = id[0];
document.getElementsByName('folder_naam')[0].value = id[1];
should do the trick. jsfiddle sample
I have avoided this problem by using only the folder_id and find the name with an seperate query after sending the form.