Hi I am trying to display my address field when I select my authority code but the address field does not appear nor does the text is filled. My knowledge is pretty limited as I just started learning not long ago.
Main page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.hide{
display: none;
}
.show{
display: block;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<select name="auth" id="auth">
<option value = "">Select</option>
<?php
$connection = new mysqli("localhost", "null", "null", "null");
$stmt = $connection->prepare("SELECT AuthorityId FROM AuthorityList");
$stmt->execute();
$stmt->bind_result($authorityid);
while($stmt->fetch()){
echo "<option value = '$authorityid'>$authorityid</option>";
}
$stmt->close();
$connection->close();
?>
</select>
</div>
</div>
<div id="address" class="hide">
<label>Address</label>
<textarea id='add_text' name="address"></textarea>
</div>
</body>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#auth').change(function(){
$.ajax({
url:'getData.php',
type:'POST',
data:{
val: $('#auth').val()
},
success:function(result){
console.log(result);
if(result != ''){
$('#add_text').html(result);
$('#address').removeClass('hide');
$('#address').addClass('show');
} else {
$('#add_text').html('');
$('#address').removeClass('show');
$('#address').addClass('hide');
}
}
})
});
});
getData.php
<?php
$connection = new mysqli("localhost", "null", "null", "null");
$stmt = $connection->prepare("SELECT Address FROM AuthorityList WHERE AuthorityId = '$authorityid'");
$stmt->execute();
$stmt->bind_result($address);
$stmt ->fetch();
if($stmt -> num_rows != 0){
echo "<br><br> $address";
}
//echo "$address";
$stmt->close();
$connection->close();
?>
Main.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.hide{
display: none;
}
.show{
display: block;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<select name="auth" id="auth">
<option value="">Select Auth</option>
<option value="1">Auth_Code_1</option>
<option value="2">Auth_Code_2</option>
<option value="3">Auth_Code_3</option>
<option value="4">Auth_Code_4</option>
</select>
</div>
</div>
<div id="address" class="hide">
<label>Address</label>
<textarea id='add_text' name="address"></textarea>
</div>
</body>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#auth').change(function(){
$.ajax({
url:'getData.php',
type:'POST',
data:{
val: $('#auth').val()
},
success:function(result){
console.log(result);
if(result != ''){
$('#add_text').html(result);
$('#address').removeClass('hide');
$('#address').addClass('show');
} else {
$('#add_text').html('');
$('#address').removeClass('show');
$('#address').addClass('hide');
}
}
})
});
});
getData.php (Ajax Req. File)
<?php
//echo $_POST['val'];
echo "address";
?>
In getData.php file write query for get address into the database table and simply echo the address it's set in address textarea. try this.
Try to solve this using jquery
$(document).ready(function () {
$('#auth').click(function () {
if($('#auth').val() == '')
{
$('#address').removeClass('show');
$('#address').addClass('hide');
} else {
$('#address').removeClass('hide');
$('#address').addClass('show');
}
})
})
.hide{
display: none;
}
.show{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div>
<label>Authorize Code</label>
<select name="auth" id="auth">
<option value=""></option>
<option value="1">Auth_Code_1</option>
<option value="2">Auth_Code_2</option>
<option value="3">Auth_Code_3</option>
<option value="4">Auth_Code_4</option>
</select>
</div>
<div id="address" class="hide">
<label>Address</label>
<textarea name="address"></textarea>
</div>
i hope it's works
Related
I am trying to send the form values to another php file. After confirming to send the data, I will not receive the alert notification from the php file.
What i tried doing: I tried creating a test file with the shortened down version of the code, surprisingly that works
This is the first file.
<!DOCTYPE html>
<?php
include('../class/Appointment.php');
include('../main/databaseConnection.php');
$object = new Appointment;
if(!$object->is_Adminlogin()){
header("Location: ../main/error.php");
}
?>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Doctor's Schedule</title>
<link rel="stylesheet" href="../css/add_schedule_popup.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="add_schedule_button" >Add Doctor Schedule</button>
<div id="add_schedule_popup" class="modal">
<div class="modal-content">
<div class="form-header">
<span class="close">×</span>
<h2>Add Doctor Schedule</h2>
</div>
<div class="form-body">
<form method="POST" action="" id="doctor_schedule_form">
<input type="hidden" name="action_type" id="action_type" value="add">
<div class="form-group">
<label>Select Doctor</label>
<select name="doctor_id" id="doctor_id" class="form-control" required>
<option value="">Select Doctor</option>
<?php
$object->query = "SELECT * FROM doctor_info ";
$result = $object->get_result();
foreach($result as $row){
echo '
<option value="'.$row["doctor_id"].'">'.$row["doctor_firstname"].' '.$row["doctor_lastname"].'</option>';
}
?>
</select>
</div>
<div class="form-group">
<label>Select Schedule Date</label>
<input type="date" name="schedule_date" id="schedule_date" required><br>
</div>
<div class="form-group">
<label>Select Timeslot</label>
<select name="schedule_timeslot" id="schedule_timeslot" class="form-control" required>
<option value="">Select Timeslot</option>
<?php
$object->query = "SELECT * FROM timeslot";
$result = $object->get_result();
foreach($result as $row){
echo '
<option value="'.$row["schedule_timeslot"].'">'.$row["starting_time"].'-'.$row["ending_time"].' ('.$row["duration"].')</option>';
}
?>
</select>
</div>
<div>
<label>Select Availability</label>
<select name="schedule_status" id="schedule_status" class="form-control" required>
<option value="1">Available</option>
</select>
</div>
</div>
<br><br>
<div class="form-footer">
<button type="button" id="close_button">Close</button>
<input type="submit" id="submit_button" value="Confirm" name="submit_button">
</div>
</form>
</div>
</div>
<script>
var modal = document.getElementById("add_schedule_popup");
var btn = document.getElementById("add_schedule_button");
var span = document.getElementsByClassName("close")[0];
var close_button = document.getElementById("close_button");
btn.onclick = function() {
modal.style.display = "block";
}
function closeModal() {
modal.style.display = "none";
document.getElementById("doctor_schedule_form").reset();
}
span.onclick = closeModal;
close_button.onclick = closeModal;
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
document.getElementById("doctor_schedule_form").reset();
}
}
$(document).ready(function() {
$("#submit_button").click(function(){
e.preventDefault();
var doctor_id = $("#doctor_id").val();
var schedule_date = $("#schedule_date").val();
var schedule_timeslot = $("#schedule_timeslot").val();
var schedule_status = $("#schedule_status").val();
var action_type = $("#action_type").val();
console.log(doctor_id, schedule_date, schedule_timeslot, schedule_status, action_type);
$.ajax({
url: "modify_schedule_action.php",
type: "POST",
data: {doctor_id:doctor_id,schedule_date:schedule_date,schedule_timeslot:schedule_timeslot,schedule_status:schedule_status,action_type:action_type},
success: function(data) {
alert(data);
// Refresh the page or show a success message
},
success: function(data) {
console.log("Success", data);
},
error: function(data) {
console.log(jqXHR.responseText);
}
});
});
});
</script>
</body>
</html>
And this is the php file that i am trying to send the values to
<?php
include('../class/Appointment.php');
$object = new Appointment;
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
echo 'Received form data: ' . var_export($_POST, true);
}
if($_POST['action_type'] == 'add')
{
$data = array(
':schedule_date' => $_POST['schedule_date'],
':schedule_day' => date('l', strtotime($_POST["schedule_date"])),
':schedule_status' => $_POST['schedule_status'],
':schedule_timeslot' => $_POST['schedule_timeslot'],
':doctor_id' => $_POST['doctor_id'],
);
$object->query = "INSERT INTO `schedule` (`schedule_date`, `schedule_day`, `schedule_status`, `schedule_timeslot`, `doctor_id`)
VALUES (:schedule_date,:schedule_day,:schedule_status,:schedule_timeslot,:doctor_id)";
$object->execute($data);
$output = 'Data added successfully';
}
until now, the php file does not react to anything i do inthe first file. can anyone help me troubleshoot this error?
You have e.preventDefault(); in your event handler but e is not defined.
This will cause an error preventing your ajax code from running and your form will submit normally to itself as its action is blank.
$("#submit_button").click(function(e){// define the event parameter
e.preventDefault();
I would like to create a dynamic form with add and remove field using jquery and ajax. but unfortunately,my insert button supposedly go to insert.php wont work.When I click insert button,nothing is happened. When the insert button clicked,it will be redirect to insert.php store data inside the database.Here is my coding
repeater.js
jQuery.fn.extend({
createRepeater: function (options = {}) {
var hasOption = function (optionKey) {
return options.hasOwnProperty(optionKey);
};
var option = function (optionKey) {
return options[optionKey];
};
var generateId = function (string) {
return string
.replace(/\[/g, '_')
.replace(/\]/g, '')
.toLowerCase();
};
var addItem = function (items, key, fresh = true) {
var itemContent = items;
var group = itemContent.data("group");
var item = itemContent;
var input = item.find('input,select');
input.each(function (index, el) {
var attrName = $(el).data('name');
var skipName = $(el).data('skip-name');
if (skipName != true) {
$(el).attr("name", group + "[" + key + "]" + "[" + attrName + "]");
} else {
if (attrName != 'undefined') {
$(el).attr("name", attrName);
}
}
if (fresh == true) {
$(el).attr('value', '');
}
$(el).attr('id', generateId($(el).attr('name')));
$(el).parent().find('label').attr('for', generateId($(el).attr('name')));
})
var itemClone = items;
/* Handling remove btn */
var removeButton = itemClone.find('.remove-btn');
if (key == 0) {
removeButton.attr('disabled', true);
} else {
removeButton.attr('disabled', false);
}
removeButton.attr('onclick', '$(this).parents(\'.items\').remove()');
var newItem = $("<div class='items'>" + itemClone.html() + "<div/>");
newItem.attr('data-index', key)
newItem.appendTo(repeater);
};
/* find elements */
var repeater = this;
var items = repeater.find(".items");
var key = 0;
var addButton = repeater.find('.repeater-add-btn');
items.each(function (index, item) {
items.remove();
if (hasOption('showFirstItemToDefault') && option('showFirstItemToDefault') == true) {
addItem($(item), key);
key++;
} else {
if (items.length > 1) {
addItem($(item), key);
key++;
}
}
});
/* handle click and add items */
addButton.on("click", function () {
addItem($(items[0]), key);
key++;
});
}
});
index.php
<?php
//session_start();
$servername = "localhost";
$username = "root";
$password = "bptm2012";
$dbname = "icompex";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "select panel_id,panel_kp,panel_nm from mem_panel";
$result = mysqli_query($conn, $sql);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Add Remove Panel Group and Category</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="repeater.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<br/>
<h3 align="center">Kemaskini Ahli dan Kumpulan Panel Penilai</h3>
<br/>
<div style="width:100%; max-width: 600px; margin:0 auto;">
<div class="panel panel-default">
<div class="panel-heading">Menu Kumpulan dan Ahli Panel</div>
<div class="panel-body">
<span id="success_result"></span>
<div id="div1"><h2></h2></div>
<form method="post" id="repeater_form">
<div class="form-group">
<label>Pilih Group</label><br>
<select class="form-control" name="cat">
<option value="" disabled selected>Sila Pilih Kategori</option>
<option value="A">A - Rekabentuk Alam Bina & Rekabentuk Dalaman</option>
<option value="B">B - Pembinaan dan Bahan</option>
<option value="C">C - Mesin, Peralatan dan Proses Pergilangan</option>
<option value="D">D - ICT & Multimedia</option>
<option value="E">E - Elektrik, Elektronik dan Telekomunikasi</option>
<option value="F">F - Pengangkutan, Automatif & Penerbangan</option>
<option value="G">G - Pertanian, Alam Sekitar dan Tenaga Boleh Diperbaharui</option>
<option value="H">H - Pengajaran dan Pembelajaran</option>
<option value="I">I - Perkhidmatan dan Pemasaran Produk</option>
</select>
<label>Sila Pilih Kumpulan Panel</label><br>
<select name="group" class="form-control">
<option value="" disabled selected>Sila Pilih Kumpulan Panel</option>
<option value="1">Panel 1</option>
<option value="2">Panel 2</option>
<option value="3">Panel 3</option>
<option value="4">Panel 4</option>
<option value="5">Panel 5</option>
<option value="6">Panel 6</option>
<option value="7">Panel 7</option>
<option value="8">Panel 8</option>
<option value="9">Panel 9</option>
<option value="10">Panel 10</option>
<option value="11">Panel 11</option>
<option value="12">Panel 12</option>
<option value="13">Panel 13</option>
<option value="14">Panel 14</option>
<option value="15">Panel 15</option>
</select>
</div>
<div id="repeater">
<div class="repeater-heading" align="right">
<button type="button" class="btn btn-primary repeater-add-btn">Tambah Ahli</button>
</div>
<div class="clearfix"></div>
<div class="items" data-group="programming_languages">
<div class="item-content">
<div class="form-group">
<div class="row">
<div class="col-md-9">
<label>Pilih Nama Ahli Panel</label>
<select class="form-control" data-skip-name="true" data-name="skill[]"
required>
<?php
echo "<option>Sila Pilih Ahli Panel</option>";
if (mysqli_num_rows($result) > 0) {
// output data of each row
while ($row = mysqli_fetch_assoc($result)) {
echo '<option value="' . $row['panel_id'] . '">' . $row['panel_nm'] . '</option>';
}
} else {
echo "<option>Maaf Belum ada pendaftaran ahli panel dibuat</option>";
}
mysqli_close($conn);
?>
</select>
</div>
<div class="col-md-3" style="margin-top:24px;" align="center">
<button id="remove-btn" class="btn btn-danger"
onclick="$(this).parents('.items').remove()">Remove
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="form-group" align="center">
<br/><br/>
<input type="submit" name="insert" class="btn btn-success" value="insert"/>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#repeater").createRepeater();
$('#repeater_form').on('submit', function (event) {
event.preventDefault();
$.ajax({
url: "insert.php",
method: "POST",
data: $(this).serialize(),
success: function (data) {
$('#repeater_form')[0].reset();
$("#repeater").createRepeater();
$('#success_result').html(data);
/*setInterval(function(){
location.reload();
}, 3000);*/
}
});
});
});
</script>
</body>
</html>
insert.php
<?php
connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");
if (isset($_POST["name"])) {
$skill = implode(", ", $_POST["skill"]);
$data = array(
':panel_cat' => $_POST["cat"],
':panel_group' => $_POST["group"],
':panel_mem' => $skill
);
$query = "
INSERT INTO panel_penilai
(panel_cat, panel_group,panel_mem)
VALUES (:panel_cat, :panel_group, :panel_mem)
";
$statement = $connect->prepare($query);
if ($statement->execute($data)) {
echo '
<div class="alert alert-success">
Data Successfully Inserted
</div>
';
}
}
//?>
You can use XMLHTTP request to send the request. It is easier than your function and fully working. Check a sample request here XMLHTTP REQUEST
Let me know if you were successfull
Remove event.preventDefault(); .
preventDefault() method is used to stop submitting the form. Removing it will allow the form to submit the data to insert.php
first in insert.php your code will run if there is a "name" parameter that is posted, whereas in the index.php form there is no field with the name "name".
so the insert.php file doesn't display any results when you post with the current form
And as reminder you forget about $ and there is a database difference between insert.php and index.php
connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");
should be
$connect = new PDO("mysql:host=localhost;dbname=icompex", "root", "bptm2012");
and in ajax you better add error handling so that you can see the error information in the console browser
$.ajax({
url:"insert.php",
method:"POST",
data:$(this).serialize(),
success:function(data)
{
$('#repeater_form')[0].reset();
$("#repeater").createRepeater();
$('#success_result').html(data);
/*setInterval(function(){
location.reload();
}, 3000);*/
},
// like this
error : function(err){
console.log(err);
}
});
You just change the submit button type to button
<input type="submit" name="insert" class="btn btn-success" value="insert" />
change to
<input type="button" id="submit" name="insert" class="btn btn-success" value="insert" />
And event must be click not submit
$('#repeater_form').on('submit', function(event){}
change to
$('#submit').on('click', function(event){}
so page will not redirect, data post throw ajax.
Below is my code.
Firstly, run the index.php Then there is a dropdown list will display and need to select a value from the dropdown. so far, dropdown will display value 1 or 2. If you select 2 it will display the value that has been selected together with the "date" field called from the display-date.php and from the "date" field, you may choose the date from calendar which called using datepicker plugin.
Now.. the problem is...I had select the date from calendar but the date selected didn't appear in the date input field. where am I wrong?
Hope anyone could help me please... :)
Thanks.
Here is index.php
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<script>
function getData(str){
var xhr = false;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
}
else {
// IE5/IE6
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("results").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "display-date.php?q="+str, true);
xhr.send(null);
}
}
</script>
<div>
<?php
echo '<select title="Select one" name="selectcat" onChange="getData(this.value)">';
echo '<option value="None">-- Select Option --</option>';
echo '<option value="1">One</option>';
echo '<option value="2">Two</option>';
echo '</select>';
?>
</div>
<br/><br/>
<p>You selected: <span id="results"></span></p>
</body>
</html>
Here is display-date.php
<?php
$Q = $_GET["q"];
echo $Q;
?>
<?php
if ($Q == '2'){
?>
<html>
<head>
<style>
#date_input{
text-indent: -500px;
height:25px;
width:200px;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<input id ="date_input" dateformat="dd-M-yy" type="date"/>
<span class="datepicker_label" style="pointer-events: none;"></span>
<script type="text/javascript">
$("#date_input").on("change", function () {
$(this).css("color", "rgba(0,0,0,0)").siblings(".datepicker_label").css({ "text-align":"center", position: "absolute",left: "10px",
top:"14px",width:$(this).width()}).text($(this).val().length == 0 ? "" :
($.datepicker.formatDate($(this).attr("dateformat"), new Date($(this).val()))));
});
</script>
</body>
</html>
<?php
}
?>
Modify the display-date.php . Html base structure is no longer needed.
<?php
$Q = $_GET["q"];
echo $Q;
?>
<?php
if ($Q == '2'){
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<input id ="date_input" dateformat="dd-M-yy" type="date"/>
<span class="datepicker_label" style="pointer-events: none;"></span>
<script type="text/javascript">
$("#date_input").on("change", function () {
$(this).css("color", "rgba(0,0,0,0)").siblings(".datepicker_label").css({ "text-align":"center", position: "absolute",left: "10px",
top:"14px",width:$(this).width()}).text($(this).val().length == 0 ? "" :
($.datepicker.formatDate($(this).attr("dateformat"), new Date($(this).val()))));
});
</script>
<?php
}
?>
There is no need to use ajax in your case, Ajax must not be used the way you showed in your question.
Ajax not used to draw html in DOM
No need to use ActiveXObject , It is insecure and I don't think we should support IE 5 or IE 6 anyways in modern development.
If you need to use ajax, Use JQuery's ajax function instead of XMLHttpRequest, As i see you are already using it.
Here is the code which works without ajax and works as it should be.
function getData(str){
$('.showInput').hide();
$('.showText').text('');
if(str != ""){
str = parseInt($.trim(str));
if(str == 2){
$('.showInput').show();
}else{
$('.showText').text(str);
}
}
}
$(document).ready(function(){
$("#date_input").datepicker({ dateFormat: 'dd-M-yy' });
});
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
</head>
<body>
<style>
.showInput{
display:none;
}
</style>
<div>
<select title="Select one" name="selectcat" onChange="getData(this.value)">
<option value="">-- Select Option --</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
<br/><br/>
<p>You selected: <span id="results">
<span class="showText"></span>
<span class="showInput">
<input id="date_input" dateformat="dd-M-yy" type="text"/>
</span>
</p>
</body>
</html>
Here is my code of html, ajax and php. The value returned by selected is to be passed in php
I want to use these four selected value (bank, state, district and city) in text form (bank_name, state_name, district_name, city_name) in my php file to show the data based on these value. If I use $bank=$_POST['bank[1]']; it gives the bank_id and so on, not the bank_name which was selected
<?php
include_once 'dbconfig.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Dependent Select Box using jQuery and PHP</title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".state").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "get_district.php",
data: dataString,
cache: false,
success: function(html)
{
$(".district").html(html);
}
});
});
$(".state").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "get_city.php",
data: dataString,
cache: false,
success: function(html)
{
$(".city").html(html);
}
});
});
});
</script>
<style>
label
{
font-weight:bold;
padding:10px;
}
div
{
margin-top:100px;
}
select
{
width:200px;
height:35px;
}
</style>
</head>
<form name="frm_ifsc" method="post" action="show_ifsc.php">
<body>
<center>
<div>
<label>Bank:</label>
<select name="bank" class="bank">
<option selected="selected">--Select Bank--</option>
<?php
$stmt = $DB_con->prepare("SELECT * FROM tbl_banks");
$stmt->execute();
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row['bank_id']; ?>"><?php echo $row['bank_name']; ?></option>
<?php
}
?>
</select>
<br>
<br>
<label>State:</label>
<select name="state" class="state">
<option selected="selected">--Select State--</option>
<?php
$stmt = $DB_con->prepare("SELECT * FROM tbl_state");
$stmt->execute();
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row['state_id']; ?>"><?php echo $row['state_name']; ?></option>
<?php
}
?>
</select>
<br>
<br>
<label>District:</label> <select name="district" class="district">
<option selected="selected">--Select District--</option>
</select>
<br>
<br>
<label>City:</label> <select name="city" class="city">
<option selected="selected">--Select City--</option>
</select>
<br>
</div>
<br />
<br>
<input type="submit" name="submit" value="Search" class="btnRegister">
</center>
</form>
</body>
</html>
You can fix this a number of ways. I think the two easiest are:
Modify JavaScript to get option text:
var id = $( this ).html();
var dataString = "id=" + id;
Modify select HTML:
<option value="<?php echo $row['bank_name']; ?>"><?php echo $row['bank_name']; ?></option>
Good luck!
I use dropdown list with PHP to retrieve data from my sql database, It exists on this link.
It worked well but when I change the menu style what I want, does not work.
this menu code is what I want:
<select name="parent_cat" id="parent_cat" data-native-menu="false" class="filterable-select" data-iconpos="left">
I think the problem exists because the menu shows in popup : `#&ui-state=dialog`
but I do not know how to solve this problem.
this full HTML code :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dependent DropDown List</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#parent_cat").change(function() {
$(this).after('<div id="loader"><img src="img/loading.gif" alt="loading subcategory" /></div>');
$.get('loadsubcat.php?parent_cat=' + $(this).val(), function(data) {
$("#sub_cat").html(data);
$('#loader').slideUp(200, function() {
$(this).remove();
});
});
});
});
</script>
</head>
<body>
<form method="get">
<label for="category">Parent Category</label>
<select name="parent_cat" id="parent_cat" data-native-menu="false" class="filterable-select" data-iconpos="left">
<?php while($row = mysql_fetch_array($query_parent)): ?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['category_name']; ?></option>
<?php endwhile; ?>
</select>
<br/><br/>
<label>Sub Category</label>
<select name="sub_cat" id="sub_cat"></select>
</form>
</body>
</html>
Please help