I have a table with one column which has the list of values .The list is same in all the rows.
Now when user selects the value for first row, I want to disable it for all the rows, and when user select second value in second row, that value should be disabled in all upcoming rows and so on.So that user don't have the option to choose one value for more than one column.
I could disable the first selected value in all the columns but dont know how to do it for all the rows.
DB Table
sqlite> select * from outdoor_games;
games
----------
Badminton
Football
Basketball
Golf
Code
<?php
$db = new PDO("sqlite:c:/sqlite/games.db");
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$query_game = $db->prepare("select distinct games as di from outdoor_games;");
$query_game->execute();
$data = $query_game->fetchAll();
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<form action="<?php $_SERVER['PHP_SELF'];?>" method="post">
<TABLE id="STable" width="350px" border="1">
<tr> <th bgcolor="WHITESMOKE">Game Id </th> </tr>
<TR> <td><select name= "Game_id[]" class='Game'/> <option value="">Games</option>
<?php foreach ($data as $row){echo '<option value="' . $row['di'] . '">' . $row ['di'] . '</option>';} ?>
</select></td>
</TR>
</TABLE></br>
<label>No. of games <input type= "text" id="s_cnt" name= "d_Count"></label>
<button type="button" class='loadgames' >Load Games</button>
<input type="submit" name ="add_SP" value ="Add Student Info" style="float: right;" /> </br> </br>
<input type="submit" name ="exit" value ="EXIT" />
</form>
<script>
$('.Game').on('click', function()
{
var selected = $(this).val();
$('.Game').not(this).find('option[value="'+selected+'"]').prop('disabled', true);
});
$(".loadgames").on('click',function()
{
var num = $("#s_cnt").val();
$("#STable tr").slice(2).remove();
for (var i = 2; i <= num; i++)
{
var data = "<tr><td><select name='Game_id[]' class='Game'><option value='null'>Games</option><?php foreach ($data as $row){echo "<option value=".$row['di'] . ">" .$row['di']. "</option>";}?></select></td></tr>";
$("#STable").append(data);
}
});
</script>
</body>
</html>
try this:
$('select').on('change',function(){
var val = $(this).val();
var selected = $(this);
$('select').nextAll('select').find('option').each(function(){
if($(this).attr('value')==val) {
$(this).attr('disabled','disabled');
}
})
});
see the demo.
You can try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).on('change', '.Game', function() {
$('.Game option').removeClass("active");
$(this).addClass("active");
});
});
<script>
// For class
.Game option.active {opacity: 0.3;cursor: pointer}
Related
Department
dept_ID dept_name
1 Account
Job Title
job_title_ID job_title_name dept_ID
1 Account Manager 1
2 Account Clerk 1
user.php
<html>
<head>
<link rel="stylesheet" href="js/jquery-ui-themes-1.11.1/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.1/jquery-ui.js"> </script>
<script>
$(document).ready(function(){
//---SELECT DEPARTMENT DROP DOWN LIST---
$("#userdepartment").change(function(){
var departmentID = $(this).val();
$.ajax({
type: 'POST',
url: 'change.php',
data: {departmentID: departmentID},
success: function(html)
{
$("#userjobtitle").html(html);
}
});
});
});
</script>
</head>
<body>
<form name="adduser" method="post" action="user.php">
<table>
<tr>
<td>Department:</td>
<td>
<select name="userdepartment" id="userdepartment">
<?php
//---Db connection---
$query = "SELECT *
FROM department
ORDER BY dept_name ASC";
$result = mysql_query($query);
print("<option value=\"\">select one</option><br>");
while($row = mysql_fetch_array($result))
{
print("<option value=\"" . $row['dept_ID'] . "\">" . $row['dept_name'] . "</option><br />");
}
?>
</select>
</td>
</tr>
<tr>
<td>Job Title:</td>
<td>
<select name="userjobtitle" id="userjobtitle">
<option value="">select one</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" name="submit" value="Add" /></td>
<td><input type="reset" name="reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>
change.php
<?php
//---DB connection---
$departmentID = $_POST['departmentID'];
$q = "SELECT j.job_title_ID, j.job_title_name
FROM job_title j, department d
WHERE j.job_title_dept = d.dept_ID && d.dept_ID = $departmentID";
$r = mysqli_query($dbc, $q);
echo '<option value="">select one</option>';
while($row = mysqli_fetch_array($r, MYSQLI_ASSOC))
{
echo '<option value="'.$row['job_title_ID'].'">'.$row['job_title_name'].'</option>';
}
?>
From above code, when I select Account from department drop down list, job title drop down list will show Account Manager and Account Clerk. My question is when I click reset button, how should I clear the value in job title drop down list? This is because when I click reset button, the job title drop down list doesn't clear the value. Can somebody help me?
Try emptying the select:
$('input[type="reset"]').click(function(e){
e.preventDefault();
$('#userjobtitle').empty().append('<option value="">select one</option>');
});
You can do this by using Javascript like this:
HTML:
<input type="reset" name="reset" value="Reset" onclick="reset();" />
Javascript:
function reset(){
$('#userjobtitle').prop('selectedIndex',0);
}
you should clear it by jquery on onclick event, also any dropdown:
$('#userjobtitle').val('');
you can use and onclick event
<input type="reset" name="reset" value="Reset"
onclick="document.getElementById('userjobtitle').value='';" />
I am new in php.I made and html Dynamic Table on which there are 2 following fields that are dynamically generated
for each time the user presses Add/Remove Button:
Image Sample given below:
Here the html Code given below:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border-collapse: collapse;
}
</style>
<script>
function addMore() {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(-1);
var cell2 = row.insertCell(-1);
var x = document.getElementById("myTable").rows[1].cells;
cell1.innerHTML = x[0].innerHTML;
cell2.innerHTML = x[1].innerHTML;
}
function removeLast() {
document.getElementById("myTable").deleteRow(-1);
}
</script>
</head>
<body>
<form action="data.php" method="post">
<table id="myTable">
<tr>
<th>Options</th>
<th>User Input</th>
</tr>
<tr>
<td>
<select class="mySelect" name="DESCR" >
<option disabled="" selected="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</td>
<td> <input type="text" name="ALAMT"></td>
</tr>
</table>
</form>
<br>
<button onclick="addMore()">Add New</button>
<button onclick="removeLast()">Remove</button>
<button onclick="myFunction()">Try it</button>
</body>
</html>
After choosing option and inputing vaules to this table,i want to submit their data to php using $_POST[ ]
Because they are Dynamic,it will be time consuming & inefficient to maintain unique name or Id for each of
them.So,What code should i write in php to do so.please let me know for any further information.Thanks
You Have to Take array as name of the new added field everytime. and that find the array count and make loop and get the value and put that value in the insert query.
used this script to add whole the textboxes
<script type="text/javascript">
$(document).ready(function () {
$('.add_more').live('click', function () {
$(this).before('<div class="one del"> <div class="two"><label class="label" for="name">Title:</label><input type="text" class="validate[required]" value="" name="caption[]" /></div><div class="two"><label class="label" for="name">Value:</label><input type="text" class="validate[required]" value="" name="values[]"/></div><i class="fa fa-trash-o add_del"></i></div>');
});
$('.add_del').live('click', function () {
$(this).parent().remove()
});
});
</script>
Then
for ($i = 0; $i < count($_POST['caption']); $i++) {
$caption = $_POST['caption'][$i];
$sp_values = $_POST['values'][$i];
$sql1 = "INSERT INTO `sub_project` (`parent`, `sp_title`, `sp_values`) VALUES ('$insert', '$caption', '$sp_values')";
$insert1 = $obj_db->sqlquery($sql1);
}
Hope this help you
I have a database table named tblCityState with the following data:
CITY New York,Los Angeles,Atlanta
STATE New York,California,Georgia
I have a dropdown (ddCity) bound to the table (Select City from tblCityState).
When the user Selects "Los Angeles" from the DropDown, I want a textbox (tbState) to be populated with "California".
Now, I could set the value of the DropDown Item to be the State, but I want the Item value to be the City.
What is the best / easiest way to achive this../this is so much important for me..Please help me with some code.I searched everywhere but not get anything like that.I am new in php& ajax.suggest me some code.
index.php
<script src="jquery.min.js" type="text/javascript"></script>
<script type='text/javascript' src='jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript">
$().ready(function() {
$("#customer").autocomplete("state.php", {
width: 160,
autoFill: true,
selectFirst: false
});
$("#customer").blur(function() {
$("#customer1").val('');
$(".ac_results").next().css('height','0px');
var vState = $("#customer").val();
$("#customer1").autocomplete("city.php?state="+vState, {
width: 160,
autoFill: false,
data:{},
length:0,
});
});
});
</script>
<form name="thisForm1" method="post" id="thisForm1" action="" >
<table cellpadding="5" cellspacing="5" width="50%" align="center" class="ac_results">
<tr><td>
Enter state<input name="customer" type="text" id="customer" value="" style="width:300px;" autocomplete="off" >
</td><td>
Enter Keyword<input name="customer1" type="text" id="customer1" value="" style="width:500px;" autocomplete="off" >
</td></tr>
</table>
</form>
state.php
<?php
$db = mysql_pconnect('localhost','root','');
mysql_select_db('test',$db);
$q = strtolower($_GET["q"]);
$a = mysql_query("SELECT * FROM state");
while($b = mysql_fetch_object($a))
{
echo "$b->name\n";
}
?>
city.php
<?php
$db = mysql_pconnect('localhost','root','');
mysql_select_db('test',$db);
$q = strtolower($_GET["q"]);
$vState = $_REQUEST['state'];
if (!empty($vState)) {
$a = mysql_query("SELECT * FROM best_hotel WHERE class = '$vState'");
while($b = mysql_fetch_object($a)) {
echo "$b->name\n";
}
}
?>
I have here my Javascript code that adds dynamic textbox (row) my problem is how can I save the values from the dynamic textbox to database using PHP script? Hope you can help me guys.. Thanks!
<script type="text/JavaScript">
function addRow(r){
var root = r.parentNode;//the root
var allRows = root.getElementsByTagName('tr');//the rows' collection
var cRow = allRows[0].cloneNode(true)//the clone of the 1st row
var cInp = cRow.getElementsByTagName('input');//the inputs' collection of the 1st row
for(var i=0;i<cInp.length;i++){//changes the inputs' names (indexes the names)
cInp[i].setAttribute('name',cInp[i].getAttribute('name')+'_'+(allRows.length+1))
}
root.appendChild(cRow);
}
function shownames(){
var allInp=document.getElementsByTagName('input');
for(var i=0;i<allInp.length;i++){
alert(allInp[i].name)
}
}
</script>
My HTML code:
<form method="POST" action="#"> <table width="1024" border="0" cellspacing="6" cellpadding="0"> <tr>
<td width="195"><div class="user"><input type="text" name="user_a" id="user" tabindex="6"/></div></td>
<td width="410"><div class="reported"><input type="text" name="user_b" id="reported" tabindex="7"/></div></td>
<td width="399"><div class="reported"><input type="text" name="user_c" id="reported" tabindex="8"/></div></td>
<td width="10"><input name="button" type="button" value="+" onclick="addRow(this.parentNode.parentNode)"></td> </tr> </table> </form>
You have to use just name of the text box which is added by dynamically.
$('form').submit(function() {
var data=($(this).serialize());
return false;
});
This function get all the elements value and create one string which is store in data, now data will pass in ajax call.
$('form').submit(function() {
var data=($(this).serialize());
$.ajax({
type: "POST",
url: "your_some.php",
data: data,
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
});
<html>
<head>
<title>Dynamic Form</title>
<script language="javascript">
<?php $i = 1; ?>
function changeIt()
{
//alert(i);
//var i = 1;
my_div.innerHTML = my_div.innerHTML +"<br><input type='text' name='mytext[<?php echo $i;?>]'><input type='text' name='mytext[<?php echo $i+1;?>]'><input type='text' name='mytext[<?php echo $i+2;?>]'><br>";
<?php $i = $i+3; ?>
}
</script>
</head>
<body>
<form name="form" action="http://localhost/try.php" method="post">
<!--<input type="text" name=t1>-->
<input type="button" value="test" onClick="changeIt()">
<div id="my_div"></div>
<p class="submit"><button type="submit">Register</button></p>
</body>
try.php(this is the file where you will be catching values and then inserting into sql
)
<?php
$var = $_POST['mytext'];
echo $var[1].$var[2];
?>
I am trying to populate drop down lists one after the other. These drop down lists contain categories and subcategories. I would like to continue creating drop down lists until there are not more subcategories for a particular category.
I am populating my drop down lists with results from MySQL.
I have searched all over and could not find any references to cascading drop down lists using more than two lists.
My code works for two lists, but not for more.
partRequest.php
<HTML>
<HEAD>
<script type="text/javascript" src="..\jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#1").change(function(e) {
e.preventDefault();
getNextCategory("1");
});
$("#2").change(function(e) {
e.preventDefault();
getNextCategory("2");
});
$("#3").change(function(e) {
e.preventDefault();
getNextCategory("3");
});
});
function getNextCategory(htmlID) {
var categoryID = ""
var newHTMLID = 0
var newCategory = ""
categoryID = $("#" + htmlID ).val();
newHTMLID = Number(htmlID) + Number(1)
newCategory = "category" + newHTMLID
$.ajax({
type: "POST",
url: "findNextCategory.php",
data: "ID=" + categoryID + "&Number=" + newHTMLID,
success: function(output){
$("#" + newCategory).html(output);
}
});
}
</script>
</HEAD>
<BODY>
<form name="partSubmissionForm" id="partSubmissionForm" action="" method="POST">
<table width=147 cellpadding=0 cellspacing=0>
<tr><td><select id="1">
<?PHP
$query = "SELECT Name, ID FROM categories WHERE ParentID = 0";
$result = mysql_query($query);
while ($row=mysql_fetch_array($result)){
?>
<option value="<? echo $row['ID'];?>"> <? echo $row['Name'];?></option>
<?}?>
</select>
</td>
<td>
<div id="category2">
test2
</div>
</td>
<td>
<div id="category3">
test3
</div>
</td>
</tr>
<tr><td><input type="submit" name="submit" id="submit" value="GO"></td></tr>
</table>
</form>
</BODY>
</HTML>
findNextCategory.php
<?PHP
define('INCLUDE_CHECK',true);
include ('..\db.php');
$categoryID = $_POST['ID'];
$categoryFieldNum = $_POST['Number'];
echo $categoryID;
echo $categoryFieldNum;
$query = "SELECT Name, ID FROM categories WHERE ParentID = $categoryID";
echo $query;
echo "<select id=$categoryFieldNum>";
$query = "SELECT Name, ID FROM categories WHERE ParentID = $categoryID";
$result = mysql_query($query);
while ($row=mysql_fetch_array($result)){
$optionValue = $row['ID'];
$optionText = $row['Name'];
echo "<option value='$optionValue'> $optionText </option>";
}
echo "</select>";
?>
The problem is that your click function definitions only apply to items that are already on the page at page load. Because you do not yet have a select object on the page with an id of "2", your $("#2").change function does not ever get attached.
What you need to do to get around this is to apply that click definition after you add the select to the page. Try changing your success function to this:
success: function(output){
$("#" + newCategory).html(output);
$("#" + newHTMLID).change(function(e) {
e.preventDefault();
getNextCategory(newHTMLID);
});
}