I have some options to select and would like to set some textinputs to visible or hidden depending on what user selects. I have the functionality already but in this case I need to take the second value of the echo and check if its equal to something, I can currently only check the first value of the echo:
<select id="type_id" name="device_type_id" onchange="if (this.value==''){this.form['device_imei_textinput'].style.visibility='hidden'}else{this.form['device_imei_textinput'].style.visibility='visible'};">
<option value='Select'>Select</option>
<?php foreach ($result as $row) { ?>
<option value="<?php echo $row['id'] . $row['serial_or_imei'] ?>"> <?php echo $row['name']; ?> </option>;
<?php } ?>
</select>
So, I need to get ONLY the value of $row['serial_or_imei'] and compare onchange="if (this.value=='') , how can I do that?
EDIT: further explanation
I need to read the value of $row['serial_or_imei'] which could be empty, 'serial' OR 'imei', so, one of these three.
P.S: I must keep the $row['id'] in the value attribute because I am passing that value later to server so dont suggest removing that.
You can add one attribute to option element and test with it. something like
<select id="type_id" name="device_type_id" onchange="if (this.getAttribute('data')==''){this.form['device_imei_textinput'].style.visibility='hidden'}else{this.form['device_imei_textinput'].style.visibility='visible'};">
<option value='Select'>Select</option>
<?php foreach ($result as $row) { ?>
<option data="<?php echo $row['serial_or_imei'] ?>" value="<?php echo $row['id'] . $row['serial_or_imei'] ?>"> <?php echo $row['name']; ?> </option>;
<?php } ?>
</select>
You can compare the value of an array in the onchange by assign the value to a variable which will be a quite neat format as
<?php $value = echo $row['serial_or_imei']; ?>
<select id="type_id" name="device_type_id" onchange="if (this.value=='<?php empty($value)?>'){this.form['device_imei_textinput'].style.visibility='hidden'}else{this.form['device_imei_textinput'].style.visibility='visible'};">
<option value='Select'>Select</option>
<?php foreach ($result as $row) { ?>
<option value="<?php echo $row['id'] . $row['serial_or_imei'] ?>"> <?php echo $row['name']; ?> </option>;
<?php } ?>
</select>
You add a new custom attribute serial and supply the value of serial_or_imei to it and then compare in javascript with onchange="if (this.value=='')
<select id="type_id" name="device_type_id" onchange="if (this.value==''){this.form['device_imei_textinput'].style.visibility='hidden'}else{this.form['device_imei_textinput'].style.visibility='visible'};">
<option value='Select'>Select</option>
<?php foreach ($result as $row) { ?>
<option value="<?php echo $row['id'] . $row['serial_or_imei'] ?>" data-serial="<?php echo $row['serial_or_imei'] ?>"> <?php echo $row['name']; ?> </option>;
<?php } ?>
</select>
EDIT: Attribute “serial” is not allowed on element “option”. Changed this to data-seial.
You say you need the values back to server because they change dynamically. A clean way would be to have a dedicated hidden field:
<?php foreach ($result as $row) { ?>
<input type="hidden" name="map[<?php echo $row['id']; ?>]" value="<?php echo $row['serial_or_imei']; ?>">
<? } ?>
Here's a full self-contained script to illustrate it:
<?php
$random_serial_or_imei = range(1000, 9999);
shuffle($random_serial_or_imei);
$result = [];
for ($i = 0; $i < 5; $i++) {
$result[] = [
'id' => $i,
'serial_or_imei' => $random_serial_or_imei[$i],
'name' => "Name #$i",
];
}
?>
<select name="device_type_id">
<option value="">Select</option>
<?php foreach ($result as $row) { ?>
<option value="<?php echo $row['id']?>"><?php echo $row['name']; ?></option>
<?php } ?>
</select>
<?php foreach ($result as $row) { ?>
<input type="hidden" name="map[<?php echo $row['id']; ?>]" value="<?php echo $row['serial_or_imei']; ?>">
<? } ?>
This prints something like:
<select name="device_type_id">
<option value="">Select</option>
<option value="0">Name #0</option>
<option value="1">Name #1</option>
<option value="2">Name #2</option>
<option value="3">Name #3</option>
<option value="4">Name #4</option>
</select>
<input type="hidden" name="map[0]" value="9513">
<input type="hidden" name="map[1]" value="3931">
<input type="hidden" name="map[2]" value="3971">
<input type="hidden" name="map[3]" value="4476">
<input type="hidden" name="map[4]" value="6429">
Selected type can be found at $_POST['device_type_id'] and the corresponding IMEI at $_POST['map'][ $_POST['device_type_id'] ].
Based on the information from the comments, I think this solution is what you are looking for. Note I move the onchange to a function for clarity.
You can see the "three" option hides the text input as it doesn't have a imei.
Also notice how I use the data- attribute inside your option so you can retrieve that information as well, independent of the option id. Also note the this.form['device_imei_textinput'] didn't worked. The elements reference is required.
function check_imei(obj, form) {
var imei = obj.options[obj.selectedIndex].getAttribute('data-imei');
if (imei == '') {
form.elements.device_imei_textinput.style.visibility='hidden';
} else {
form.elements.device_imei_textinput.style.visibility='visible';
}
}
<form>
<select id="type_id" name="device_type_id" onchange="check_imei(this, this.form);">
<option value='Select'>Select</option>
<option value="1" data-imei="foo">One</option>
<option value="2" data-imei="bar">Two</option>
<option value="3" data-imei="">Three</option>
</select>
<input type="text" id="device_imei_textinput" name="device_imei_textinput" />
</form>
Mirror of example : https://jsfiddle.net/asp1hewx/
EDIT : To address the PHP side of things, the form above could be generated with :
<form>
<select id="type_id" name="device_type_id" onchange="check_imei(this, this.form);">
<option value='Select'>Select</option>
<?php foreach ($result as $row) { ?>
<option value="<?php echo $row['id'] . $row['serial_or_imei'] ?>" data-imei="<?php $row['serial_or_imei'] ?>"><?php echo $row['name'] ?></option>
<?php } ?>
</select>
<input type="text" id="device_imei_textinput" name="device_imei_textinput" />
</form>
Related
This i my View code:
<form role="form" action="<?php echo base_url() ?>add_customer" method="post">
<select class="form-control" id="customer_id" name="customer_id">
<?php foreach ( $customer as $cust ){?>
<option value="<?php echo $datas[0]->customer_id; ?>"<?php if($cust->customer_id==$datas[0]->customer_id) echo 'selected="selected"'; ?>> <?php echo $cust->customer_id; ?></option>
<?php }?>
</select>
</form>
For Eg: Dropdown Value contains 1,2,3,4 actually selected value is 2 display in that field correctly. Now, I want to update the dropdown value to 4
How can I do this? Please help..
Hope this will help you :
Change values from value="<?php echo $datas[0]->customer_id; ?>" to this value="<?=$cust->customer_id;?>"
<select class="form-control" id="customer_id" name="customer_id">
<?php foreach ( $customer as $cust ){?>
<option value="<?=$cust->customer_id;?>" <?php if($cust->customer_id == $datas[0]->customer_id) echo 'selected="selected"'; ?> > <?php echo $cust->customer_id; ?></option>
<?php }?>
</select>
I have datalist like this :
<input type="text" list="colours" id="txt">
<datalist id="colours">
<?php foreach ($kondisi as $kondisi) { ?>
<option data-value="<?php echo $kondisi->nama_kondisi ?>" value="<?php echo $kondisi->id_kondisi ;?>"><?php echo $kondisi->nama_kondisi ?></option>
<?php } ?>
</datalist>
The option that datalist has was populated from a foreach loop using php.
How do I disable the datalist input, if the data that foreach loop's result is null/none using jquery ?
like for example
Have Option
<input type="text" list="colours">
No Option
<input type="text" list="colours" disabled="disabled">
Here is an example of keeping your PHP and HTML separate:
<?php
$option="";
foreach ($kondisi as $kondisi) {
if($kondisi != 'null' || $kondisi != 'none'){
$option .= '<option data-value="'.$kondisi'.->nama_kondisi" value="'.$kondisi.'->id_kondisi">'.$kondisi.'->nama_kondisi</option>';
}else{
$option .= 'your disabled option code here...';
}
}
?>
<input type="text" list="colours">
<datalist id="colours">
<?php echo $option; ?>
</datalist>
If you want to disable it then do like below:-
<?php if(count($kondisi)>0){?>
<input type="text" list="colours">
<datalist id="colours">
<?php foreach ($kondisi as $kondisi) { ?>
<option data-value="<?php echo $kondisi->nama_kondisi ?>" value="<?php echo $kondisi->id_kondisi ;?>"><?php echo $kondisi->nama_kondisi ?></option>
<?php } ?>
</datalist>
<?php }else{?>
<input type="text" list="colours" disabled="disabled"/><!-- or use autocomplete="off"-->
<?php } ?>
I am trying to display two seperate items on the same line in a HTML form using a PHP loop to auto populate it. This is the PHP/HTML form:
<select class="form-control" name="list" title="pick a type">
<?php if(count($postOpts)) { ?>
<?php foreach($postOpts as $row) { ?>
<option value="<?= $row["name"] ?>"><?= $row["price"] ?></option>
<?php } ?>
<?php } else { ?>
<option value="<?= $post->getDefaultPrice() ?>"><?= "Default Shipping Option - $".$post->getDefaultPrice() ?></option>
<?php } ?>
</select>
I can have either the price or the name displaying, but not both on the same line.
Can anyone help?
May be try this,
<option value="<?= $row["name"] ?>"><?= $row["name"] ."( $".$row["price"].")" ?></option>
check the argument on here
if(count($postOpts)) {
should be
empty($postOpts)
<select class="form-control" name="list" title="pick a type">
<?php
if(empty($postOpts)) {
foreach($postOpts as $row)
{
?>
<option value="<?php echo $row["name"] ?>">
<?php echo $row["price"] ?>
</option>
<?php
}
} else {
?>
<option value="<?php echo $post->getDefaultPrice() ?>">
<?php echo "Default Shipping Option - $".$post->getDefaultPrice() ?>
</option>
<?php
}
?>
</select>
Replace <option value="<?= $row["name"] ?>"><?= $row["price"] ?></option> with <option value="<?= $row['name'] ?>"><?= $row['price'] ?></option> and let me know what you are getting now ?
You need to use single quote inside double quote or vice versa.
How to set value for select tag ,as when i tried for text field
<input type="input" name="name" value="<?php echo set_value('name') ?>"/>
its working but when i tried for select tag
<SELECT class="form-control" name="user" style="width:200px;">
<option value="">--Select--</option>
<?php
foreach ($result as $row):
echo "<option value='" . $row['id'] . "' >" . $row['employee_name'];
?>
<?php endforeach ?>
</SELECT>
its not working ,when validation run falls its again showing --Select-- option
try this--> use set_select()
<select id="user" name="user" style="width: 230px; height: 40px;" >
<option value="" selected>--Select--</option>
<?php foreach ($result as $row) { ?>
<option value="<?php echo $row['id'] ; ?>" <?php echo set_select('user', $row['id'], False); ?> ><?php echo $row['employee_name'] ; ?> </option>
<?php } ?>
</select>
For Codeigniter Dropdown list you should use set_select() instead of set_value() function. You can use like
<select name="myselect">
<option value="one" <?php echo set_select('myselect', 'one', TRUE); ?> >One</option>
<option value="two" <?php echo set_select('myselect', 'two'); ?> >Two</option>
<option value="three" <?php echo set_select('myselect', 'three'); ?> >Three</option>
</select>
best way is to use form_dropdown method to use these as you are already looping and creating options create option array in controller and pass it to view like
$options = array('--Select--');
foreach ($result as $row){
$options[$row['id']] = $row['employee_name'];
}
echo form_dropdown('user',$options,set_select('user','default_value'));
if not any select value from dropdown then default value will be used
this might help you.
<SELECT class="form-control" name="user" style="width:200px;">
<option value="">--Select--</option>
<?php
foreach ($result as $row):
echo "<option value='".$row['id']."' set_select('user', $row['id']);.">". $row['employee_name'];
?>
<?php endforeach ?>
</SELECT>
I am creating a like this:
<select name="id" id="id">
<OPTION VALUE="null">Select<OPTION>
<? foreach ($genres as $row){ ?>
<OPTION VALUE="<? echo $row->id; ?>"><? echo utf8_encode($row->name); ?></OPTION>
<?
}
?>
</select>
I am using the $_GET to check for a value on the URL and then just take it and with that value I have to pre-select the option in the select menu, any ideas how to do this? I'm unsure of how to do it via javascript (or even if it would be more complicated).
just use
selected="selected"
on your pre-selected option
<select name="id" id="id">
<OPTION VALUE="null">Select<OPTION>
<? foreach ($genres as $row){ ?>
$selected = $_GET['your_var'] == $row->id ? 'selected="selected"' : false;
<OPTION <? echo $selected; ?> VALUE="<? echo $row->id; ?>"><? echo utf8_encode($row->name); ?></OPTION>
<?
}
?>
</select>