i want to set value in bootstrap modal dropdown using jquery, that dropdown is also populated by mysql database, and when i select the any value from data table, model open and that selected value should already placed is modal drop down.picking up the value by jquery closest() function
this is where im getting the value of b_name
<td class="p_brand_name">Apple</td>
here is my Modal Code.
<div class="col-md-6">
<div class="form-group">
<label for="field-2" class="control-label">Brand</label>
<select class="form-control" name="p_brand_name" id="p_brand_name">
<option>Select Brand</option>
<option value="1">Apple</option>
<option value="2">Sony</option>
<option value="3">huawei</option>
<option value="4">Toshiba</option>
<option value="5">Dell</option>
<option value="6">Hp</option>
<option value="7">Samsung</option>
<option value="8">LG</option>
<option value="9">Aspire</option>
<option value="10">Lenovo</option>
<option value="11">Oppo</option>
<option value="14">Vivo</option>
<option value="16">Dawlance</option>
</select>
</div>
</div>
Here is my jquery code
var $row = $(this).closest('tr');
var b_name = $row.find('.p_brand_name').text(); // e.g it has value apple (b_name = apple)
console.log(p_id,b_name);
// $('select option[value='+b_name+']').prop({defaultSelected: true});
// $('#p_brand_name').val(b_name).attr('selected', 'selected');
// $('#p_sct_name').find($row.find('.p_sct_name').text()).attr('selected', 'selected');
// $('#p_color_name select').attr('value',$row.find('.p_color_name').text());
// $("#p_brand_name").val("b_name");
// $("#p_brand_name").get(0).selectedIndex = b_name;
// $("#p_brand_name").val(b_name).change();
// $("#p_brand_name")[b_name].selectedIndex=b_name;
// $('#p_brand_name').val(b_name).attr("selected", "selected");
// $('#p_brand_name').val(b_name).trigger("chosen:updated");
i have tried these all but none of this work
first of all i have demonstrated here how to get the option value and text on the change event of the select box:
$(document).ready( function(){
$('.form-control').on('change', function() {
let option_value = $(this).val();
let option_text = $(this).children("option:selected").text();
console.log(option_value, option_text);
});
});
Now, if i understand you correct, i hope, you want to file the select box like you have selected the option your self, well: in PHP you can do this like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>StackOverFlow</title>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<td class="p_brand_name">Apple</td>
<?php
$select_box_options = ['1' => 'Apple', '2' => 'Sony', '3' => 'huawei'];
?>
<form>
<div class="col-md-6">
<div class="form-group">
<label for="field-2" class="control-label">Brand</label>
<select class="form-control" name="p_brand_name" id="p_brand_name">
<option>Select Brand</option>
<?php
foreach ($select_box_options as $value => $text) {
$selected = ($text === 'Apple') ? 'selected' : '';
?>
<option value="<?=$value?>" <?=$selected?>><?=$text?></option>
<?php } ?>
</select>
</div>
</div>
</form>
</body>
</html>
and in JQuery to fire event:
$('.form-control').val('2').trigger('change');
Related
How do I pass the id value to the function?
What I am doing is, When the user changes the dropdown then it will get the value of dropdown and also get the input value which is hidden inside foreach.
I tried from my side I am getting on change the value from the dropdown but how do I get the input value in the jquery? now I am getting the last value of the input field.
$x=1;
foreach ($duration as $row) {?>
<input type="hidden" name="activeID" id="activeID<?php echo $x;?>" value="<?php echo $row->activity_name_id;?>">
<select name="Duration<?php echo $x;?>" class="form-control" id="Duration<?php echo $x;?>">
<option selected disabled >Select year</option>
<option value="12m" <?php if($row->Duration == '12m' ){ echo 'selected="selected"'; } ?>>1 Year</option>
<option value="6m" <?php if($row->Duration == '6m' ){ echo 'selected="selected"'; } ?>>6 months</option>
</select>
<div id="results<?php echo $x;?>"></div>
<?php $x++;}
jquery
$('[id^="Duration"]').change(function () {
var a=$('input[id^="activeID"]').attr('id');// how to I display the input id here
alert(a);
var value = $('input[id^="activityID"]').val();// i tried this one as well
alert(value);
var end = this.value;
alert(end);//getting drodpown id value
});
You can put your input and select inside a div. When the dropdowns are changed, get the input sibling
<?php
$x=1;
foreach ($duration as $row) {
?>
<div>
//Your input and select here
</div>
<?php } ?>
<script>
$('[id^="Duration"]').change(function () {
var input = $($(this).siblings("input")[0]); // get the input element
var id = input.attr("id"); //id of the input
var value = input.val(); //value of the input
alert(value);
});
</script>
One thing I have observed in your code:
$x=1;
foreach ($duration as $row) {
<input type="hidden" name="activeID" id="activeID<?php echo $x;?>" value="<?php echo $row->activity_name_id;?>">
<select name="Duration<?php echo $x;?>" class="form-control" id="Duration<?php echo $x;?>">
<option selected disabled >Select year</option>
<option value="12m" <?php if($row->Duration == '12m' ){ echo 'selected="selected"'; } ?>>1 Year</option>
<option value="6m" <?php if($row->Duration == '6m' ){ echo 'selected="selected"'; } ?>>6 months</option>
</select>
<div id="results<?php echo $x;?>"></div>
}
You are not at all increasing $x anywhere and hence each and every hidden input tag is getting id = 'activeId1'
<?php
$x=1;
foreach ($duration as $row) {
?>
<input type="hidden" name="activeID" id="activeID<?php echo $x;?>" value="<?php echo $row->activity_name_id;?>">
<select name="Duration<?php echo $x;?>" class="form-control DurationClass" id="Duration<?php echo $x;?>">
<option selected disabled >Select year</option>
<option value="12m" <?php if($row->Duration == '12m' ){ echo 'selected="selected"'; } ?>>1 Year</option>
<option value="6m" <?php if($row->Duration == '6m' ){ echo 'selected="selected"'; } ?>>6 months</option>
</select>
<div id="results<?php echo $x;?>"></div>
<?php } ?>
<script>
$('.DurationClass').change(function () {
var a=$('input[id^="activeID"]').attr('id');
var selectID=$(this).attr('id');
//alert(a);
var value = $(this).val(); // in loop every dropdown select current option value return
alert(value);
});
</script>
You can use onchange event in your HTML part of the code
$x=1;
foreach ($duration as $row) {?>
<input type="hidden" class="activeID" name="activeID" id="activeID<?php echo $x;?>" value="<?php echo $row->activity_name_id;?>">
<select name="Duration<?php echo $x;?>" onchange="myfunction();" class="form-control" id="Duration<?php echo $x;?>">
<option selected disabled >Select year</option>
<option value="12m" <?php if($row->Duration == '12m' ){ echo 'selected="selected"'; } ?>>1 Year</option>
<option value="6m" <?php if($row->Duration == '6m' ){ echo 'selected="selected"'; } ?>>6 months</option>
</select>
<div id="results<?php echo $x;?>"></div>
<?php $x++;}
Here is the function
function myfunction () {
alert($(this).parent()); //what are you getting
alert($(this).parent().find(".activeID").value()); //what are you getting?
alert("Id of the select box is "+ this.id);
alert("Value of the select box is "+this.value );
};
$(".select").change(function(){
alert("Id of the select box is "+ this.id);
alert("Value of the select box is "+this.value );
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Form control: select</h2>
<p>The form below contains two dropdown menus (select lists):</p>
<form>
<div class="form-group">
<label for="sel1">Select list (select one):</label>
<select class="form-control select" id="Sell">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<label for="sel1-item">Select list sell item (select one):</label>
<select class="form-control select" id="Sell-item">
<option>car</option>
<option>bike</option>
<option>cycle</option>
<option>auto</option>
</select>
</div>
</form>
</div>
</body>
</html>
I'm want to show php include based on the drop down menu choice.
But the trick is that I want to show the include before submitting the page.
<?php include 'page.php'; ?>
<select name="s1"style="width: 70px;" >
<optgroup label="My Input">
<option value="">Select...</option>
<option value="one kind</option>
<option value="second kind</option>
</select>
How can I show my page based on option selected before page is submited?
I found it!
<!DOCTYPE html>
<html>
<body>
<p>Select a new car from the list.</p>
<select id="mySelect" onchange="myFunction()">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
</body>
</html>
I have two dropdown in html page.1st dropdown Contain Class-1, class-2,class3..
and 2nd dropdown contain StudentNameID for selected Classes. I wanted to multiple selection for classes in first dropdown and respective classes manage second dropdown selection for studentID.
1st Dropdown-want mutiple selection
<select>
<option value=".$row['classID'].">Class-1</option>
....like wise generate dropdown...
<option>Class-2</option>
<option>Class-3</option>
<option>Class-4</option>
</select>
2nd Dropdown-On selection of 1st dropdown show 2nd dropdown value.
<select> //same for 2nd dropdown list..
<option>StudentNameID1-Class-1</option>
<option>StudentNameID2-Class-1</option>
<option>StudentNameID1-Class-2</option>
<option>StudentNameID2-Class-2</option>
<option>StudentNameID3-Class-2</option>
<option>StudentNameID1-Class-3</option>
<option>StudentNameID2-Class-3</option>
<option>StudentNameID3-Class-3</option>
</select>
I want multiple selection is there and selected Id store in variable.So,by exploding I will use it on my next page where page redirect.
My question Is I want multiple selection fron both dropdowns.
If I choose Class-1 and Class-2 from 1st drop down then atomatic 2nd dropdown will shows related values from selected ClassID's.
Also same multiple selection for 2nd dropdown.
Can you please tell me How I will approched using php and java script?
What you are expecting is not a basic html element, it requires jquery integration as well.. Take css and js from https://github.com/harvesthq/chosen/releases/
Index.php as belwo:
<?php
require 'config.php';
$stmt = "SELECT id, ClassId from classes ORDER BY id DESC";
$query = $dbcon->query($stmt);
$results = ( $query ) ? $query->fetchAll(PDO::FETCH_ASSOC) : '';
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>imaphpdeveloper#gmail.com</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/prism.css">
<link rel="stylesheet" href="css/chosen.css">
<style type="text/css" media="all">
/* fix rtl for demo */
.chosen-rtl .chosen-drop { left: -9000px; }
</style>
</head>
<body>
<form>
<div id="container">
<div id="content">
<h2><a name="multiple-select" class="anchor" href="#multiple-select">Multiple Select</a></h2>
<div class="side-by-side clearfix">
<div>
<em>Classes</em>
<select data-placeholder="Choose a Country..." class="chosen-select class-select" name="classes" multiple style="width:350px;" tabindex="4">
<option value=""></option>
<?php foreach($results as $result): ?>
<option value="<?php echo $result['id'];?>"><?php echo $result['ClassId'];?></option>
<?php endforeach; ?>
</select>
</div>
<div>
<em>Students</em>
<select data-placeholder="Choose a Country..." class="student-select" name="classes" multiple style="width:350px;" tabindex="4">
<option value=""></option>
</select>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="js/chosen.jquery.js" type="text/javascript"></script>
<script src="js/prism.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var config = {
'.chosen-select' : {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>
<script>
$('.class-select').change(function(){
var classId = $(this).val();
console.log(classId);
$.ajax({
url : 'getSub.php',
type: 'POST',
dataType : 'JSON',
data : {
'classId' : classId,
},
success : function(data){
var optionBox = '<option value=""></option>';
$.each(data, function(key, val){
optionBox += '<option value="'+val.id+'">'+val.StudentNm+'</option>';
});
$('.student-select').empty().append(optionBox);
console.log(optionBox);
}
});
});
</script>
</form>
And getSub.php as below:
<?php
require 'config.php';
$classIds = implode(',', $_POST['classId']);
$stmt = "SELECT id, StudentID, ClassID, StudentNm from students where ClassID IN ($classIds)";
$query = $dbcon->query($stmt);
$results = ( $query ) ? $query->fetchAll(PDO::FETCH_ASSOC) : '';
echo json_encode($results);
?>
Config.php:
<?php
$dbcon = new PDO("mysql:host=localhost;dbname=test", 'root', '');
?>
Not sure what you are asking but maybe this will help.
<form action="redirect_page.php" method="POST">
<input type="radio" name="class">
Class-1</input>
<input type="radio" name="class">Class-2</input>
<input type="radio" name="class">Class-3</option>
<input type="radio name="class4">Class-4</option>
</form>
On your second page do
$classes[]=$_POST['class'];
<select>
<?php
foreach($class as $num){
echo "<option>StudentNameID1".$num."</option>";
}
?>
</select>
I have used javascript to dynamically produce form fields in the form i used using addInput() function in javascript... but after i trigger javascript code and submit the form PHP code cannot access form field elements....
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="test.php" method="post">
University Name: <input type="text" name="college">
No. of branches:
<div id="dynamicInput">
<select name="branches" id="branches" onchange="if (this.selectedIndex) addInput('dynamicInput');;" ">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
<script>
var counter = 0;
var limit = 3;
function addInput(divName)
{ var counter = 0;
var k=parseInt(document.getElementById("branches").value);
var newdiv;
while(k>0)
{
newdiv = document.createElement('div');
newdiv.innerHTML = "Entry " + counter + " <br><input type='text' name='branch["+counter+"]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
k--;
}
}
</script>
<input type="submit" value="submit" />
</form>
</body>
</html>
and the php code lets assume like this:
<?php
$name=$_POST["college"];
$text=$_POST["branch[0]"];
echo $name." ".$text"
?>
I want to display a number of textboxes in a form based on the selected option from a dropdown listbox.
For example, if user selects 1 then 1 textbox should be shown and if user selects 2 then 2 textboxes should be displayed. And I need to do it in PHP.
I found some answers using jQuery. Can we use jQuery inside PHP? If yes, then how?
Edit
#Edwin Alex
This is how my select option looks like.
<h2><u>DEPENDENT DETAILS</u></h2><br />
<table border="1" style="border-style:dotted" width="100%" id="dependenttable">
<tr><td>No of Dependent</td><td><select name="numDep" id="dropdown">
<option value="">Please Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option></select></td></tr>
<tr id="textboxDiv"></tr>
At the end of file inside <> these I have written your code.
You can use Jquery to get this. Try this,
HTML :
<tr><td>No of Dependent</td><td><select name="numDep" id="dropdown">
<option value="">Please Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option></select></td>
</tr>
<tr id="textboxDiv"></tr>
Jquery :
<script type="text/javascript">
$(document).ready(function() {
$("#dropdown").change(function() {
var selVal = $(this).val();
$("#textboxDiv").html('');
if(selVal > 0) {
for(var i = 1; i<= selVal; i++) {
$("#textboxDiv").append('<input type="text" name="textVal[]" value="" />');
}
}
});
});
</script>
Paste this code at the bottom of your page inside tag.
Your select box ID should be dropdown.
You need to have a div with an ID textboxDiv to place your generated textboxes.
I think you can do it easily with the help of JavaScript. Here is an example of it. Try it and modify it according to your requirement
<html>
<head>
<title>Select DIV to show</title>
<script type="text/javascript">
function show(obj) {
no = obj.options[obj.selectedIndex].value;
count = obj.options.length;
for(i=1;i<count;i++)
document.getElementById('myDiv'+i).style.display = 'none';
if(no>0)
document.getElementById('myDiv'+no).style.display = 'block';
}
</script>
</head>
<body>
<form name="myForm">
<select onChange="show(this)">
<option value="0">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</form>
<div id="myDiv1" style="display:none"> <form>
<select>
<option value="0">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</form></div>
<div id="myDiv2" style="display:none"><form><input type="text" ><br>
<input type="text"/><br>
<input type="submit"/></form></div>
<div id="myDiv3" style="display:none"><form><input type="text" ><br>
<input type="text"/><br>
<input type="submit"/></form></div>
</body>
</html>
In this example just change the code in "myDiv1", "myDiv2", "myDiv3". I think it will hep you.:)