We Keep Coding

How to show selected value of dependent dropdown if value exist in database using jquery?

<script>
var stateID = <?php echo $registration->state ?? null; ?>;
$(document).ready(function() {
$('#country').on('change', function() {
var country_id = this.value;
$("#state").html('<option value="">Select State</option>');
$.ajax({
url:"{{ route('get-states-by-country') }}",
type: "POST",
data: {
country_id: country_id,
_token: '{{csrf_token()}}'
},
dataType : 'json',
success: function(result){
$.each(result.states,function(key,value){
$("#state").val(stateID).attr("selected","selected");
$("#state").append('<option value="'+value.id+'" >'+value.state_name+'</option>');
});
}
});
});
</script>
I have created dependent dropdown of country and state. Now, I want to show state auto selected if the value of state is exist in database table. How can I do this? Please help me.
Thank You

ajax jQuery auto reload data when browser page refresh

how can i use ajax jquery to autoreload data from selected field related data to input field? it's only working when i am using $("#id_books").change(function()! but i want to load data when browser page refresh or on page load....
create-form.html
<select name="books" class="form-control" id="id_books">
<option value="1" selected="">haxer</option>
<option value="2">django</option>
<option value="3">HCV</option>
<option value="4">python</option>
<option value="5">CBC</option>
</select>
<div class="form-group col-sm-2 text-center">
<input class="form-control" type="text" name="price" id="priceData" readonly>
</div>
<script>
$("#id_books").load(function () {
var id = $(this).val();
$.ajax({
url: `http://localhost:8000/report/${id}`,
data: { 'id': id },
dataType: 'json',
success: function (response) {
if (response != null) {
$('#priceData').val(response.price);
}
}
});
});
</script>

Try using $(document).ready(), which will fire on page load. e.g:
$(document).ready(function() {
alert("Page has loaded!");
});
You'll most likely need to refactor your code as $(this).val(); won't work (as 'this' is no longer '#id_books')
I've not tested the following (but it should give you an idea), try the following:
<script>
$(document).ready(function() {
loadData()
});
$("#id_books").change(function () {
loadData()
});
function loadData()
{
var id = $("#id_books").val();
$.ajax({
url: `http://localhost:8000/report/${id}`,
data: { 'id': id },
dataType: 'json',
success: function (response) {
if (response != null) {
$('#priceData').val(response.price);
}
}
});
}
</script>

Call change and click event together jquery

I'm not able to access skills value using id while I can access finduserType value.
I don't know why, It should call on change event and click event as well.
$(function() {
$("#findUserType").change(function () {
var user_type = $("#findUserType").val();
var skills = $("#skills").val();
var phone = $("#phones").val();
var src = '{{Request::root()}}/api/user/suggestion/email';
var srcPhone = '{{Request::root()}}/api/user/suggestion/phone';
/* var skills = $("#skills").val();
var phone = $("#phones").val();*/
// Load the Users from the server, passing the usertype as an extra param
$("#skills").autocomplete({
source: function(request, response) {
$.ajax({
url: src,
method: 'GET',
dataType: "json",
data: {
term : skills,
user_type : user_type
},
success: function(data) {
response(data);
}
});
},
min_length: 3,
delay: 300
});
// Load the Users from phone to the server, passing the usertype as an extra param
$("#phones").autocomplete({
source: function(request, response) {
$.ajax({
url: srcPhone,
dataType: "json",
data: {
term : phone,
user_type : user_type
},
success: function(data) {
response(data);
}
});
},
min_length: 3,
delay: 300
});
});
});
<form>
<div class="input-group">
<select class="form-control" id="findUserType" name="finduser">
<option value="">--Select--</option>
<option value="2">D</option>
<option value="3">P</option>
</select>
</div>
<div class="input-group">
<input type="text" id="skills" class="form-control">
<input type="text" id="phones" class="form-control" name="phone">
</div>
</form>
Updated the code please take a look what exactly i'm going to stuck it does not take email's values. When I call ajax change event does work fine but skills value does not have the any value. Also suggest how can i compress this code. I just want to check on change event call ajax base on skills and phone values.

I think this will work better:
$("#findUserType").change(function() {
if ($(this).val() == "") {
$("#textboxes").hide();
} else {
$("#textboxes").show();
}
});
$("#skills").autocomplete({
source: function(request, response) {
$.ajax({
url: src,
method: 'GET',
dataType: "json",
data: {
term: $("#skills").val(),
user_type: $("#findUserType").val()
},
success: function(data) {
response(data);
}
});
},
min_length: 3,
delay: 300
});
// Load the Users from phone to the server, passing the usertype as an extra param
$("#phones").autocomplete({
source: function(request, response) {
$.ajax({
url: srcPhone,
dataType: "json",
data: {
term: $("#phones").val(),
user_type: $("#findUserType").val()
},
success: function(data) {
response(data);
}
});
},
min_length: 3,
delay: 300
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select class="form-control" id="findUserType" name="finduser">
<option value="">--Select--</option>
<option value="2">Doctor</option>
<option value="3">Pharmacy</option>
</select>
<br/>
<div id="textboxes" hidden>
<input type="text" id="skills" class="form-control">
<br/>
<input type="text" id="phones" class="form-control" name="phone">
</div>
</form>
At present your two later autocomplete handlers are not bound until the "findUserType"'s "change" event has happened at least once, because they are declared within that code block. And also if that "change" event happens multiple times then multiple handlers will be attached to the other two elements, and then when those events are triggered, multiple copies of the code will run - I doubt that's what you intended.

The change handler for #skills and the click handler for #phone will only be registered after the first change event firing on #findUserType.
Move those two handlers outside of #findUserType's change handler.

$(document).ready(function(){
$("#findUserType").change(function () {
var user_type = $(this).val();
});
$("#skills").change(function () {
var skills = $(this).val();
var phone = $("#phones").val();
});
$("#phone").change(function () {
var phone = $(this).val();
});
});
I hope you this will help you get the values of skills and phone when user type is selected.

How to post jquery ajax data object with multiple values

I have a form with two inputs (later more inputs). One input is a text input and the second one is a checkbox. I would like to send these two inputs with $.ajax.
I created an Object formData with one input. The second one I would like to append to the Object if the checkbox is active or not.
Unfortunately, I can't pass the Object because of a wrong format.
My Code:
<form id="myForm">
<input type="text" name="search_text" id="search_text" placeholder="Search by a name">
<input type="checkbox" name="exact" value="Exact">Exact
</form>
<br>
<div id="result"></div>
<script type="text/javascript">
$(document).ready(function(){
$('#myForm').on('change', ':checkbox', function(){
if($(this).is(':checked')) {
console.log($(this).val() + ' is now checked');
}
else {
console.log($(this).val() + ' is now unchecked');
}
});
var formData = {'qry':search};
$('#search_text').on('keyup', function(e){
e.preventDefault();
var search = $(this).val();
$('#result').html('');
$.ajax({
url:"fetch.php",
method: "POST",
data: formData,
dataType: "text",
success:function(data) {
$('#result').html(data);
}
});
});
});
</script>

You need to serialise the form data and then add more data if required:
var data = $('#myForm').serializeArray();
data.push({name: 'sample', value: "something_more"});
Your ajax should then be something like:
var data = $('#myForm').serializeArray();
data.push({name: 'sample', value: "something_more"});
$.ajax({
url:"fetch.php",
method: "POST",
data: data,
dataType: "text",
processData: false,
success:function(data) {
$('#result').html(data);
}
});

Trying to insert text into textboxes automatically upon option value selection

I am trying to pull text from another page (ajaxuseradd.psp) which is in JSON format. I am then trying to insert this text into several text boxes and/or select lists. For right now, I am merely trying to do the text boxes.
Here's my code, a good deal of which was given to me, because I am not all that familiar with jQuery:
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$('#username').change(function() {
var userName = $(this).val();
$.ajax({
type: 'GET',
url: 'ajaxuseradd.php',
data: {
uname: userName
},
success: function(data, status, xhr) {
$.each(data, function(key, value) {
$('#' + key).val(value);
});
},
dataType: 'json'
})
});
</script>
<form action="adduser.psp" method="get">
<fieldset>
<label for="uname">Username:</label>
<select name="uname" id="useruname" onchange="updateAdduser();">
<%
Random Python Code That Isn't Important But Generates Option Values
%>
<%= options %>
</select>
</fieldset>
<fieldset>
<label for="fname">First Name:</label>
<input type="text" name="fname" />
</fieldset>
<fieldset>
<label for="lname">Last Name:</label>
<input type="text" name="lname" />
</fieldset>
<fieldset>
<label for="email">Email:</label>
<input type="text" name="email">
</fieldset>
Output from ajaxuser.psp should be as follows, or some variation thereof. This will be displayed on the page ajaxuser.psp when the argument ?uname=neverland is used, for example:
{"fname" : Neverland, "lname" : Conference Room, "email" : nobody#mediaG.com, "deptid" : deptid, "active" : active, "sentient" : sentient}
So my code should look like this?
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#username').change(function() {
var userName = $(this).val();
$.ajax({
type: 'GET',
url: 'ajaxuseradd.php',
data: {
uname: userName
},
success: function(data, status, xhr) {
$("#fname").val(data.fname);
});
},
dataType: 'json'
})
});
});
</script>
EDIT: This is still not working - I select a drop down value, and NO CHANGE for any of the fields.

The first thing I see is that you need to wrap the onchange handler in this:
$(document).ready(function () {
});
So it looks like this:
$(document).ready(function () {
$('#username').change(function() {
var userName = $(this).val();
$.ajax({
type: 'GET',
url: 'ajaxuseradd.php',
data: {
uname: userName
},
success: function(data, status, xhr) {
$.each(data, function(key, value) {
$('#' + key).val(value);
});
},
dataType: 'json'
})
});
});
Also, this:
$.each(data, function(key, value) {
$('#' + key).val(value);
});
Is not going to work like you think. You get back ONE object with the properties, so more like this:
success: function(data, status, xhr) {
$("#fname").val(data.fname);
....
},