HTML
select box bringing data from database and displaying it in options.
Next, data
(customer-display.php) is appending inside customer-content and it also holds a hidden div which get displayed on change
.
<div class="form-group">
<select class="form-control select2" id="customer-select">
<option value="" id="">---- Search Customers ----</option>
<option value="add-new-customer" id="add-customer-option">---- add customer ----</option>
<?php
// user_type = 3, which is customer in user table
foreach($dbf->fetchOrder("user", "user_type=3") as $users){
?>
<option value="<?= $users['full_name'];?>" class="customer-option"><?= $users['full_name'];?></option>
<?php
}?>
</select>
</div>
<div id="customer-content">
<div id="add-customer-form" style="display: none;">
<div class='form-group'>
<label for='exampleInputName'>Customer Name</label>
<input type='text' class='form-control' value='' name='f_name' placeholder='full name...'>
</div>
<div class='form-group'>
<label for='exampleInputEmail'>Email</label>
<input type='text' class='form-control' value='' name='c_email' placeholder='enter email...'>
</div>
<div class='form-group'>
<label for='exampleInputPhone'>Phone</label>
<input type='text' class='form-control' value='' name='c_phone' placeholder='enter phone...'>
</div>
<div class='form-group'>
<label for='exampleInputAddress'>Address</label>
<input type='text' class='form-control' value='' name='c_address' placeholder='enter phone...'>
</div>
<div class="form-group">
<button class="btn btn-warning" id="add-customer-btn">add customer</button>
</div>
</div>
</div>
PHP is bringing data and displaying it through ajax
data from PHP
<?php
include_once '../includes/class.Main.php';
$dbf = new User();
$customer_name = $_POST['customer_name'];
foreach($dbf->fetchOrder("user", "full_name='$customer_name'") as $customers){
$output = "
<div id='display-customer-form'>
<div class='form-group'>
<label for='exampleInputName'>Customer Name</label>
<input type='text' class='form-control' value='{$customers['full_name']}' name='fname' placeholder='first name...' disabled>
</div>
<div class='form-group'>
<label for='exampleInputEmail'>Email</label>
<input type='text' class='form-control' value='{$customers['email']}' name='customer_email' placeholder='enter email...' disabled>
</div>
<div class='form-group'>
<label for='exampleInputPhone'>Phone</label>
<input type='text' class='form-control' value='{$customers['contact_no']}' name='customer_phone' placeholder='enter phone...' disabled>
</div>
<div class='form-group'>
<label for='exampleInputAddress'>Address</label>
<input type='text' class='form-control' value='{$customers['full_name']}' name='customer_address' placeholder='enter phone...' disabled>
</div>
</div>
";
};
echo $output;
jQuery
$(document).on('change', '#customer-select', function (e) {
e.preventDefault();
var customer = $(this).val();
if(customer == 'add-new-customer'){
$('#display-customer-form').css("display", "none");
$('#add-customer-form').css("display", "block");
}else if(customer == ''){
$('#add-customer-form').css("display", "none");
$('#display-customer-form').css("display", "none");
}else if(customer != 'add-new-customer' && customer != ''){
// $('#add-customer-form').css("display", "none");
$.ajax({
method: "POST",
url: "async/customer-display.php",
data: {customer_name: customer},
success: function (data){
$('#customer-content').html(data);
}
});
}
});
dom is changing as i select customer names
. But after name change i can not able to add the hidden form #add-customer-form
on changing ---add customer---
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…