I want to clear the selected data on multiple select boxes but it won't work for me.
<select name="age" id="age" class="span2 typeahead" multiple data-rel="chosen">
<?php
$age_arr = explode(",", $result['age']);
foreach ($age as $a)
{
$select = "";
for ($is = 0; $is < count($age_arr); $is++)
{
if ($age_arr[$is] == $a['age_id'])
{
$select = "selected";
}
} ?>
<option id="age2" value="<?php echo $a['age_id']; ?>" <?php echo $select; ?>><?php echo $a['age']; ?></option>
<?php
}
?>
</select>
<input type="hidden" id="age_val" name="age_val" value="<?php echo $result['age']; ?>" />
<input type="button" value="Clear" id="clear" class="btn" onClick="clearFields()">
This is what I tried:
<Script>
function clearFields(){
document.getElementById("age_val").value = "";
document.getElementById("age").value = '';
}
</Script>
Please advice me how to clear data when clear button clicked,
selectbox
As you have a multiple select, not a standard select, you need to set the selected property of each option element to false. Try this:
function clearFields() {
$('#age option:selected').prop("selected", false);
$('#age_val').val('');
}
Working example
Javascript:
function clearFields(){
document.getElementById("age_val").value = "";
var collection = document.getElementById('age').getElementsByTagName('option');
for(var i = 0; i<collection.length; i++){
collection[i].selected = false;
}
// for chosen
$('#age').trigger('chosen:updated');
}
But as long as you using jquery, then you can use code in answer provided by #Rory McCrossan and add to the function: $('#age').trigger('chosen:updated');
Related
With a SELECT query I obtain an array of 7 names, create a dropdown list and each name is a table which is then hidden.
I want to click on the name in the dropdown list and display the table.
I am not receiving any errors but the following code only displays the first table in the array no matter what option is selected. I have little knowledge of javascript and the function has been cobbled together from various queries on the site.
Javascript:
function changeOpt(clicked) {
var x = document.getElementById("optChange");
var optVal = x.options[x.selectedIndex].value;
for(var i =0; i<x.length;i++){
if(optVal = document.getElementById('datath'))
document.getElementById('data').style.display = 'block';
}
}
HTML/PHP:
while($row = mysqli_fetch_array($result))
{
$array = $row;
//echo '<pre>'.print_r($array).'</pre>';
echo '<table id="data" style="display:none;">';
echo '<tr><td>You searched for:</td></tr>';
echo '<tr><th id="datath">'.$row[0].'</th><th>'.$row[1].'</th><th>'.$row[2].'</th>';
echo '</tr>';
echo '</table>';
$option .= '<option value = "'.$row['1'].'">'.$row['1'].'</option>';
}
?>
<form method="post" action="#" id="my_form" >
<select id="optChange" name="opt" onchange="changeOpt(this.id)">
<option><--select a name--></option>
<option><?php echo $option; ?></option>
</select>
<input type="button" name="submit" value="submit" >
</form>
Am I completely off-beam ? Can someone give me some guidance please to get my code straight.
As u can see i have this form that calculate number of employees multiply by test that will be select by user. number of employees will be input by user and test are coming from database. each test have their individual price set in database. I used script for dropdown list.
If user put any value in no.of employees and check on anytest then in total amount sum should be calculate onclick buytest?
<form action="add_corporate_test.php" method="POST">
<script type="text/javascript">
$(document).ready(function () {
$('#example-onDeselectAll').multiselect({
includeSelectAllOption: true,
onDeselectAll: function () {
alert('please select any test!');
}
});
});
</script>
<div class="row">
<h5 class="cor_label">No. of Emp/Students:</h5>
<input
type="text" id="no_emp"
placeholder="No. of Employees/Students"
class="normal" required
>
<h5 class="cor_label">Email Address:</h5>
<input
type="text"
id="no_emp2"
placeholder="Email Address"
class="normal" value="<?php echo $_SESSION[email]; ?>"
required
disabled
>
<h5 class="cor_label">Select Test:</h5>
<select id="example-onDeselectAll" multiple="multiple">
<?php
$sql = mysql_query("select * from `test` ");
while ($data = mysql_fetch_assoc($sql)) {
$sum = 0;
?>
<option value="<?php echo $data['test_name']; ?>">
<?php echo $data['test_name']; ?>
</option>
<?php } ?>
</select>
<h5 class="cor_label">Total Amount:</h5>
<input
type="text"
id="no_emp3"
class="normal"
name="total_amount"
placeholder="total amount"
value="<?php echo $sum; ?>"
disabled
>
<button class="btn btn-primary" type="submit" name="corporate_buy">
Buy Test
</button>
</div>
</form>
Hi bro, use for loop for script b'coz u have multiple select option
`
<script>
$('#example-onDeselectAll').change(function() {
var value = $(this).val();
var i=0;
var len = value.length;
var no_emp = $("#no_emp").val();
for(i; i < len; i++){
var res = value[i] .split("_");
var tot_amount += res[1]*no_emp;
}
$("#no_emp3").val(tot_amount);
});
</scrit>
`
get the test and value on select option. on select split the value using javascript. and then sum the amount and no.of.employee
`
<select id="example-onDeselectAll" multiple="multiple" >
<?php
$sql=mysql_query("select * from `test` ");
while($data=mysql_fetch_assoc($sql))
{
$sum=0;
?>
<option value="<?php echo $data['test_name'];?>_<?php echo $data['price'];?>"><?php echo $data['test_name'];?></option>
<?php }?>
</select>
<script>
$('#example-onDeselectAll').change(function() {
var value = $(this).val();
var no_emp = $("#no_emp").val();
var res = value .split("_");
var tot_amount = res[1]*no_emp;
$("#no_emp3").val(tot_amount);
});
</scrit>
`
I am currently created a checkbox system based on each school in an array. Everything works fine except, that after submit, only the first checkboxes are checked.
Example: I have 10 checkboxes, and check box number 4,5 and 6. After submit, box 1,2 and 3 are checked.
I want box 4,5 and 6 to keep their selection after submit.
Hope that you can imagine by problem.
<!--Start Checkbox system for schools-->
<form method="POST">
<?php
$q = "SELECT id, name FROM $school_table";
$result = mysqli_query($con, $q);
while(($row = mysqli_fetch_array($result))) {
//First line of <input>
echo '<input type="checkbox" name="check_list[]" value="';
//Value of the input (school ID)
echo $row['id'] .'"';
//Keep the box checked after submit. PROBLEM MIGHT BE HERE!!!
if(isset($_POST['check_list'][$row['id']])){echo 'checked="checked"';}
//Echos the school name out after the checkbox.
echo '>' . $row['name'] . " <br> ";
}
?>
<script language="javascript">
//Select all on/off function
function checkAll(bx) {
var cbs = document.getElementsByTagName('input');
for(var i=0; i < cbs.length; i++) {
if(cbs[i].type == 'checkbox') {
cbs[i].checked = bx.checked;
}
}
}
</script>
<!--Check all mark. Works with Javascript written above-->
<input type="checkbox" name="check_all" onclick="checkAll(this)" <?php if(isset($_POST['check_all'])){echo "checked";} ?>> Check all: On/Off
<input type="submit" name="submit" value="sort">
</form>
<!--End Checkbox system for schools-->
Image of the problem. Take a look
Hope you guys can help me out :)
I didn't have your MySQL, so I simulated it with by creating some rows using a for loop.
<html>
<!--Start Checkbox system for schools-->
<head>
<title>Test checklist</title>
</head>
<body>
<form method="POST">
<?php
for ($i = 0; $i < 10; $i++) {
$rows[$i]['id'] = $i*2+1;
$rows[$i]['name'] = "Name ".strval($i*2+1);
}
// $q = "SELECT id, name FROM $school_table";
//$result = mysqli_query($con, $q);
//while(($row = mysqli_fetch_array($result))) {
foreach ( $rows as $row )
{
//First line of <input>
echo '<input type="checkbox" name="check_list['.$row['id'].']" value="checked"';
//Keep the box checked after submit. PROBLEM MIGHT BE HERE!!!
if(isset($_POST['check_list'][strval($row['id'])])){
echo 'checked="checked"';}
//Echos the school name out after the checkbox.
echo '>' . $row['name'] . " <br>\n";
}
?>
<script language="javascript">
//Select all on/off function
function checkAll(bx)
{
var cbs = document.getElementsByTagName('input');
for(var i=0; i < cbs.length; i++) {
if(cbs[i].type == 'checkbox') {
cbs[i].checked = bx.checked;
}
}
}
</script>
<!--Check all mark. Works with Javascript written above-->
<input type="checkbox" name="check_all" onclick="checkAll(this)" <?php if(isset($_POST['check_all'])){
echo "checked";} ?>> Check all: On/Off
<input type="submit" name="submit" value="sort">
</form>
<!--End Checkbox system for schools-->
</body>
</html>
The key line is this one:
echo '<input type="checkbox" name="check_list['.$row['id'].']" value="checked"';
You need to set the array index in check_list to your row id. Otherwise the
rows in the array are going to be 0 based and have values = your row id. Your value for the post field really isn't used the way you are coding it.
check_list[0] = '1'
check_list[1] = '3'
check_list[2] = '5'
this is my textbox with id of brgy_name:
<select name="brgy_name" class="" style="width:240px" id="brgy_name" required >
<option value="">Select Barangay</option>
<option value="ALL">ALL</option>
<?php $result = pg_query("SELECT * FROM tbl_barangay order by cbrgyname");
while($row = pg_fetch_array($result)){ ?>
<option value="<?php echo $row['cbrgyname']; ?>"><font style="margin-top:-20px"><?php echo $row['cbrgyname'];?></font></option>
<?php } ?>
</select>
<input type="hidden" id="asgn_brgy" value="<?php echo $_POST['brgy_name']; ?>">
<input type="hidden" id="frm" value="<?php echo $_POST['fromyear']; ?>">
<input type="hidden" id="to" value="<?php echo $_POST['toyear']; ?>">
<input type="hidden" id="usertype" value="<?php echo $_SESSION['admin_usertype'] ?>"> <!--ADMIN-->
<input type="hidden" id="userbrgy" value="<?php echo $_SESSION['admin_brgycode'] ?>"> <!--TAGUIBO-->
This is my script:
<script text="text/javascript">
var holderu = document.getElementById('usertype').value;
var holderb = document.getElementById('userbrgy').value;
if(holderu=='ADMIN'){
}else{
}
</script>
if holderu == 'ADMIN' is true.. i want the value of holderb to be put into the textbox..
i hope this will help..
<script text="text/javascript">
var holderu = document.getElementById('usertype').value;
var holderb = document.getElementById('userbrgy').value;
if(holderu=='ADMIN'){
$("#brgy_name").empty();
var select = '<option>'+holderb+'</option>';
$("#brgy_name").append(select);
$("#brgy_name").prop('disabled',true);
}else{
//your code
}
<script text="text/javascript">
var holderu = document.getElementById('usertype').value;
var holderb = document.getElementById('userbrgy').value;
if(holderu=='ADMIN'){
document.getElementById('brgy_name').innerHTML = ('<option>+holderb+
</option>');
}
else{
}
To add an option to select and remove one from it, you can do this:
var holderu = document.getElementById('usertype');
var holderb = document.getElementById('userbrgy');
if (holderu.value == 'ADMIN') {
var sel = document.getElementById('brgy_name');
var option = document.createElement("option");
option.text = holderb.value;
option.value = holderb.value;
sel.add(option);
sel.removeChild( sel.options[0] ); //To remove the 1st option which is `Select Barangay`
}
// JQuery script
<script>
$(function(){
$('.select-change').click(function(){
????
//what would come here to put textbox's text of con_name_class inside dropdown1 dropdownlist!!
});
});
</script>
Now the PHP and HTML code
<?PHP
connection...blah blah
while($record=sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)){
$recordx = $record['x'];
$recordy = $record['y'];
$recordz = $record['z'];
}
?>
<input type="text" class="con_name_class" id="<? php somefunction_which_echos_out_a_text ?>" value="<? php
SAMEfunction_which_echos_out_a_text ?>" />
<input class = "select-change" type="button" id="<? php echo $recordx; ?>" value = "<? php echo $recordx; ?>" /><br>
<? PHP
}
function xyz(){ // I am calling it some where!!
connection...blah blah
echo "<select name = "dropdown1" id="dropdown1">";
echo "<option value="NULL">Select one</option>";
while($rec=sqlsrv_fetch_array($stmtxyz, SQLSRV_FETCH_ASSOC)){
echo "<option value='".$rec['con_code']."')>".$rec['con_name']."</option>";
}
</select>
}
?>
How can I map the textbox's text into the dropdown1 and select it?
You may something like
$(function() {
$("#textboxID").on("change",function(){
$("#selectBoxID").val($(this).val());
//Set the option from dropdown list by textbox's value
})
});
Here's the plunker
Cheers!
I am modifyng NLN's code.You can give a specific part in name like "textbox_"
<input type="text" class="con_name_class" id="textbox_<? php somefunction_which_echos_out_a_text ?>" value="<? php SAMEfunction_which_echos_out_a_text ?>" />
Then use this script
$(function() {
$(input[id^="textbox_"]).on("change",function(){
$("#selectBoxID").val($(this).val());
//Set the option from dropdown list by textbox's value
})
});
I did it with javascript function..not jquery..because of my ID problem for the textbox. Call the below function at onClick of the textbox and pass parameters.Thanks!
Here-
function xyz(par){
var dd1= document.getElementbyId('dropdown1');
var opts = dd1.options.length;
for (var i =0; i<opts; i++){
if(document.getElementbyId('dropdown1').options[i].value == par){
getElementbyId('dropdown1').selectedIndex = i;
break;
}
}
}