Return dynamic select to null onChange - javascript

I have two select boxes, the second of which is dependent upon the selection in the first. I want to get the second select box (course) to have a value of null when the first box (subject) is changed. Any help on accomplishing this would be greatly appreciated.
This is what I have tried:
Javascript:
function autoSubmit() {
var formObject = document.forms['theForm'];
formObject.submit();
}
PHP:
<form name="theForm" method="get">
<select name="subject" onChange="autoSubmit();">
<option value="null">Select a Subject...</option>
<php
$sql = "SELECT DISTINCT subj_name, subj_id FROM table1 ORDER BY subj_name
$result = mysql_query($sql) or die ("couldn't execute query");
while($row = mysql_fetch_array($result))
{
echo ("<option value=\"$row[subj_id]\" " . ($subject == $row["subj_id"] ? "
selected" : "") . ">$row[subj_name]</option>");
}
?>
</select>
<select name="course" onChange="autoSubmit();">
<option value="null">All Courses</option>
<php
if($subject != null && is_numeric($subject))
{
$sql = "SELECT DISTINCT subj_id, course_id, course_name FROM table1
WHERE subj_id = $subject ORDER BY course_name
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
{
echo ("<option value=\"$row[course_id]\" " . ($course == $row["course_id"] ?
" selected" : "") . ">$row[course_number] - $row[course_name]</option>");
}
}
?>
</select>
</form>

You can put in the onChange of the first select, before the autoSubmit() :
this.form.course.value='null';
or
this.form.course.selectedIndex=0;
This way the value on the get will be ?subject=[the_subject]&course=null ( and then $course == $row["course_id"] will be false ).
( http://jsfiddle.net/HMT34/ )

Related

Disable Select Box option after its creation

I have a select box that is dynamically created from a mySQL database and then afterwards I use a function to add a "Please Select" option at Index[0] then I force Index[0] to be the selected option. My problem is trying to figure out how to make Index[0] disabled after the fact of its creation or maybe I have to do it during its creation in my function. So at the end of the day the "Please Select" option is not a valid choose-able option.
Thanks in advance for any advice.
<?php
$con = mysqli_connect("localhost","root","","karaoke");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql = "Select * FROM regulars ORDER BY Regulars ASC";
$result = mysqli_query($con, $sql) or die("Bad SQL: $sql");
$opt = "<select id = 'regulars' name = 'regulars'>";
while($row = mysqli_fetch_assoc($result)) {
$opt .= "<option value'{$row['Regulars']}'>{$row['Regulars']}</option>\n";
}
$opt .="</select>"
?>
<center><div>
<?php
echo $opt;
?>
</div></center>
<script>
function myFunction() {
var x = document.getElementById("regulars");
var option = document.createElement("option");
option.text = "Please Select";
x.add(option, x[0]);
}
</script>
<script>
myFunction()
document.getElementById("regulars").selectedIndex = "0";
</script>
Just set the disabled attribute to true for the newly created option.
function myFunction() {
var x = document.getElementById("regulars");
var option = document.createElement("option");
option.text = "Please Select";
option.disabled = true;
x.add(option, x[0]);
}
myFunction();
document.getElementById("regulars").selectedIndex = "0";
<select id="regulars">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Simplest way is to do everything in PHP. No need of all the js to add the option.
The plus is that it will be part of the DOM and it will be easier to manipulate it later (i.e. to remove the disabled)
<?php
$con = mysqli_connect("localhost","root","","karaoke");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql = "Select * FROM regulars ORDER BY Regulars ASC";
$result = mysqli_query($con, $sql) or die("Bad SQL: $sql");
$opt = "<select id = 'regulars' name = 'regulars'>";
$opt .= "<option value=\"\" disabled>Please select...</option>";
while($row = mysqli_fetch_assoc($result)) {
$opt .= "<option value'{$row['Regulars']}'>{$row['Regulars']}</option>\n";
}
$opt .="</select>"
?>

how to show checkbox checked if value of checkbox is already in mysql?

code:
<?php
if(isset($_POST['save']))
{
$checkbox1=$_POST['company_name'];
$chk=implode(',',$checkbox1);
$sql = "update all_university set placement = '$chk' where university_name = '".$_POST['university_name']."'";
$value = mysqli_query($link,$sql);
if($value == true)
{
$msg .="<h5 style='color:green'>Successfull</h5>";
}
else
{
$msg .="<h5 style='color:red'>Error!</h5>";
}
}
?>
<?php
extract($_POST);
$sql = mysqli_query($link,"select * from placement order by company_name ASC");
while ($row = mysqli_fetch_array($sql))
{
echo "<li>
<input type='checkbox' name='company_name[]' id='company_name' value=".$row['image_name']."> ".$row['company_name']."<br/>
</li>";
}
?>
Here I want to checked checkbox if the string is already in mysql database like image1,image2,image3. So, How can I do this ? please help
Thank You
Check in your while loop and assign the checked value if condition is satisfied. Like shown in below code.
while ($row = mysqli_fetch_array($sql))
{
$isCheked = "";
if($row['isCheked']) {//test if the values is checked in the db
$isCheked = "checked";
}
echo "<li><input type='checkbox' ".$isCheked." name='company_name[]' id='company_name' value=".$row['image_name']."> ".$row['company_name']."<br/></li>";
}
Try like this.Use ternary operator(:?) for checking whether the name is set or not.
while ($row = mysqli_fetch_array($sql))
{
$name = $row['image_name'];
$check = isset($name)?"checked":"";
echo "<li>
<input type='checkbox' name='company_name[]' id='company_name' value='".$name."'".$check." > ".$row['company_name']."<br/>
</li>";
}

Sending two values to PHP via ajax POST to query SQL db

I'm trying to send two values from a form to another PHP using ajax post method. One value is the value that's already entered in an input box, and the other is a value that is being typed into another input box. It acts like a search box. I tried executing the SQL query in my SQL workbench and it returns the value properly. What am I doing wrong in my code?
function searchq6(){
var searchstate = $("input[name='region']").val();
var searchTxt = $("input[name='suburb']").val();
$.post("search-suburb.php", {searchVal: searchTxt, st:searchstate},function(sbb){
$("#sbb").html(sbb);
//searchq7();
});
}
This is the input box where I search and get the value from:
<input type="text" name="region" list="state" value="<?php echo $region; ?>" placeholder="Select State" id="output">
Suburb:
<input type="text" name="suburb" list="sbb" value="<?php echo $suburb; ?>" onkeyup="searchq6()" id="output">
<datalist id="sbb" name="taskoption6" >
<option> </option>
</datalist>
This is the search-suburb.php file:
$output = '' ;
if (isset($_POST['searchVal'])){
$searchq = $_POST['searchVal'];
$st = $_POST['st'];
$query = mysqli_query($link, "SELECT DISTINCT title FROM `wp_locations` WHERE state="'.$st.'" AND `title` LIKE '%".$searchq."%' ")or die("Could not search!");
$count = mysqli_num_rows($query);
if($count == 0){
$output = '<option>No results!</option>';
}else{
while($row = mysqli_fetch_array($query)){
$suburb = $row['title'];
?>
<option value="<?php echo $suburb; ?>"><?php echo $suburb; ?> </option>
<?php
} // while
} // else
} // main if
<input type="text" name="region" list="state" value="<?=(isset($_POST['region'])?$_POST['region']:'');?>" placeholder="Select State" id="output">
Suburb:
<input type="text" name="suburb" onkeyup="searchq6()" list="sbb" value="<?=(isset($_POST['suburb'])?$_POST['suburb']:'');?>" onkeyup="searchq6()" id="output">
<datalist id="sbb" name="taskoption6"></datalist>
Javascript:
function searchq6(){
var searchstate = $("input[name='region']").val();
var searchTxt = $("input[name='suburb']").val();
$.post("search-suburb.php", {searchVal: searchTxt, st:searchstate},function(sbb){
var decode = jQuery.parseJSON(sbb); // parse the json returned array
var str = ""; // initialize a stringbuilder
$.each(decode, function (x, y) {
str+="<option value='" + y.title +"'>";
});
$("#sbb").html(str);
}); // end of post
}// end of searchq6 function
Php:
$output = '' ;
if (isset($_POST['searchVal'])){
$searchq = $_POST['searchVal'];
$st = $_POST['st'];
$query = mysqli_query($link, "SELECT DISTINCT title FROM `wp_locations` WHERE state='{$st}' AND `title` LIKE '%{$searchq}%' ")or die("Could not search!");
$count = mysqli_num_rows($query);
if($count == 0){
$output = '<option>No results!</option>';
} else{
$data = array();
while($row = mysqli_fetch_array($query))
$data[] = $row;
echo json_encode($data);
}
} // main if
Got the answer from small snippets gathered through the comments
Changed the query to:
$query = mysqli_query($link, "SELECT DISTINCT title FROM `wp_locations` WHERE state='".$st."' AND `title` LIKE '%".$searchq."%' LIMIT 10")or die("Could not search!");
And the ajax to:
function searchq6(){
var searchstate = $("input[name='region']").val();
var searchTxt = $("input[name='suburb']").val();
$.post("search-suburb.php", {searchVal: searchTxt, st:searchstate})
.done(function(sbb) {
$("#sbb").html(sbb);
});
//searchq7();
}
Thanks for all the comments guys

How to pass the value dropdownlist without using form

I have two sets of option value. I created another dropdown that if I choose r it echo <option value $row['nego'] > or n echo <option value $row['rfq'] >. What I want is to pass the value of dropdown without using form. If it possible to do that?
<script>
function showUser(str) {
var $txtHint = $('#txtHint');
if (str == "") {
$txtHint.html('');
return;
}
$txtHint.load('rfq_list.php?q=' + str) // or rfq_list.php?q
}
</script>
</head>
<body onload=showUser(str="ALL")>
<select>
<option value="r">rfq</option>
<option value="n">nego</option>
</select>
<?php
if (isset($_POST['n'])) {
$mysqli = new mysqli("localhost", "root", "", "app");
$result = $mysqli->query("SELECT nego FROM purchase_order GROUP BY shop ORDER BY nego");
$option = '';
while($row = $result->fetch_assoc()) {
$option .= '<option value = "'.$row['nego'].'">'.$row['nego'].'</option>';
}
}
?>
<?php
if (isset($_POST['r'])) {
$mysqli = new mysqli("localhost", "root", "", "app");
$result = $mysqli->query("SELECT rfq FROM purchase_order WHERE rfq LIKE '13-___' OR rfq LIKE '1_-___' OR rfq LIKE '2_-___' GROUP BY rfq ORDER BY rfq");
$option = '';
while($row = $result->fetch_assoc()) {
$option .= '<option value = "'.$row['rfq'].'">'.$row['rfq'].'</option>';
}
}
?>
<select name="users" onchange="showUser(this.value)" style="overflow:scroll;width:100px;">
<option value="ALL" selected='ALL'>ALL</option>
<?php echo $option; ?>
</select>
<div id="txtHint"></div>

I am populating a text box with data from a select, it works, but

My select consists of two fields and the text field only picks up one of them. Here is my code:
<script>
function ProdValue(data) {
document.getElementById("ProdName").value = data.value;
}
</script>
<select name="ProdName" id="ProdName" onchange ="ProdValue(this)">
<?php
$sql = "Select * from tblProduct";
if ($result = mysqli_query($conn, $sql));
while ($row = mysqli_fetch_assoc($result))
{
echo "<option value='". $row['Brand']."', '".$row['ProductName']."'>".$row['Brand']." ".$row['ProductName']. '</option>';
}
?>
</select>
How can I get ProductName too?
Since your option value contains brand and productname separated by comma, you could do:
function ProdValue(data) {
var optval = data,
prod_name = optval.split(",")[1];
console.log( prod_name ); //here is your product name
document.getElementById("ProdName").value = optval;
}
use this instead. If both columns are actually defined as NOT NULL, CONCAT() will be quite enough:
<?php
$sql = "Select CONCAT(Brand, ProductName) as CombineColumn from tblProduct";
if ($result = mysqli_query($conn, $sql))
{
while ($row = mysqli_fetch_assoc($result))
{
echo "<option value='". $row['CombineColumn']."'>".$row['CombineColumn']."</option>";
}
}
?>

Categories