We Keep Coding

How to auto select "select" option in html input after ajax request?

I have an AJAX request going to my PHP file to pull data from the database that pertains to the users. I want to autofill the form inputs. I was able to fill most of the inputs, but the HTML "select" option is really stumping me. Does anyone know how to autoselect the value in the database?
HTML
<select class="gender-reg" name="gender-reg">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="optout">Rather Not Say</option>
</select>
AJAX REQUEST
$(function () {
$.ajax({
type: 'GET',
url: 'http://localhost:8090/HELPERSITE/src/php/session.php',
dataType: 'json',
data: '',
success: function (response) {
console.log(response);
$(".username-reg").attr("value", (response['username']));
$(".pwd-reg").attr("value", (response['password']));
$(".email-reg").attr("value", (response['email']));
$(".acct-type").text(response['type']);
$(".fname-reg").attr("value", (response['fname']));
$(".lname-reg").attr("value", (response['lname']));
$(".gender-reg").attr("value", (response['gender']));
$(".street-reg").attr("value", (response['street']));
}
})
});

You can simply use .val():
$(".gender-reg").val(response['gender']);

passing value from javascript to sql via ajax

I have some problem when I pass variable across php , javascript and ajax.
html - when I change the selected value, ajax will post the new value:
<select name="PACKAGE_CATEGORY" id="PACKAGE_CATEGORY" onclick="fireAjax()" class="form-control" >
<option value="0" disabled selected hidden> -- select an option -- </option>
<option value="PLINE">Phone Line Only</option>
<option value="UNIFI">Unifi for New Registration</option>
<option value="STREAMYX">Streamyx for New Registration</option>
<option value="WEBE">Webe</option>
<option value="DOME">Lease Line (DOME)</option>
</select>
ajax - I get the value by javascript and save it in var1:
<script>
function fireAjax(){
$.ajax({
url: 'form.php',
type: 'POST',
data: {var1: document.getElementById('PACKAGE_ID').innerHTML },
success: function(data) {
console.log("success");
}
});
}
javascript function - I want to take the value var1 from ajax, but fail:
<script>
$(function () {
var pricestore = [
<?php
$var1 = $_POST['var1']; // I cannot get the var1, please help me T.T
$sqlpid=mysqli_query($conn, "select no from product where P_NAME = '$var1' ");
//some function
//.............
?>
];
});
</script>

Change onclick() to onchange()
<select name="PACKAGE_CATEGORY" id="PACKAGE_CATEGORY" onchange="fireAjax()" class="form-control" > //Here
<option value="0" disabled selected hidden> -- select an option -- </option>
<option value="PLINE">Phone Line Only</option>
<option value="UNIFI">Unifi for New Registration</option>
<option value="STREAMYX">Streamyx for New Registration</option>
<option value="WEBE">Webe</option>
<option value="DOME">Lease Line (DOME)</option>

Try the following:
Html:
<select name="PACKAGE_CATEGORY" id="PACKAGE_CATEGORY" onchange="fireAjax()" class="form-control" >
<option value="0" disabled selected hidden> -- select an option -- </option>
<option value="PLINE">Phone Line Only</option>
<option value="UNIFI">Unifi for New Registration</option>
<option value="STREAMYX">Streamyx for New Registration</option>
<option value="WEBE">Webe</option>
<option value="DOME">Lease Line (DOME)</option>
</select>
Javscript:
<script>
function fireAjax(){
$.ajax({
url: 'form.php',
type: 'POST',
data: {var1: document.getElementById('PACKAGE_CATEGORY').value},
success: function(data) {
console.log("success");
}
});
}
Changed onclick to onchange, changed id, changed innerHtml to value

Try to change your ajax call into change event of selector,
$('#PACKAGE_CATEGORY').change(function(){
$.ajax({
url: 'form.php',
type: 'POST',
data: {
'var1': $(this).val()
},
success: function(data) {
console.log("success");
}
});
})

Selection OnChange change PHP Variable

Hello StackOverflow People.
I need you help. I have this code:
<select name="type" onChange="idk?" class="form-control">
<option value="H">Week 51</option>
<option value="V">Week 52</option>
</select>
And if an user change the week i want to change the file get content :s
$Week = "";
echo file_get_contents('http://rooster.farelcollege.nl/'.$Week.'/c/c00050.htm');
Thanks!
greetings from the Netherlands =)

you can send Ajax request to the "file_get_contents" url.
This is what I am using and it works fine :)
<select name="type" class="form-control">
<option value="H">Week 51</option>
<option value="V">Week 52</option>
</select>
$(document).ready(function() {
$( ".form-control" ).change(function() {
$.ajax({
data: {
// You are not sending any post variables right? Then leave this empty :-) otherwise use it as array 'var1': 'value', 'var2': 'value2' ...
},
url: 'http://rooster.farelcollege.nl/'+$(this).val()+'/c/c00050.htm',
method: 'POST',
success: function(msg) {
alert(msg); // Optional, show text that was given by URL, can be removed
}
});
});
});
jquery.com/jquery.ajax

select option value send to php file with ajax

I have a select dropdown box
<select name="status" id="status" onchange="changeStatus()">
<option value="step_1">step_1</option>
<option value="step_2">step_2</option>
<option value="step_3">step_3</option>
<option value="step_4">step_4</option>
</select>
And my javascript
<script>
function changeStatus() {
$('select.changeStatus').change(function(){
$.ajax({
type: 'POST',
url: 'update_status.php',
data: {changeStatus: $('select.changeStatus').val()},
dataType: 'html'
});
});
});
</script>
So I want the value selected from the select dropdown box send to the php file(update_status.php)

Select id using #. Since you are already using javascript onchange event in select field so no need to use jquery change() event. jQuery use # to select id and . to select class. since you are using id="status" so you must use # to select the id. The way you are trying to collect the value of the select field in this line $('select.changeStatus').val() is wrong. Because there are no class named changeStatus there.
function changeStatus() {
$.ajax({
type: 'POST',
url: 'update_status.php',
data: {changeStatus: $('#select').val()},
dataType: 'html'
});
}

$('#status').val() is used to get value of select options.
So try this
<script>
function changeStatus() {
$.ajax({
type: 'POST',
url: 'update_status.php',
data: {changeStatus: $('#status').val()},
dataType: 'html'
});
});
</script>
or
<script>
function changeStatus() {
$.post("update_status.php", {changeStatus: $('#status').val()}, function(data, status){
});
}
</script>

You don't need to mix jQuery and inline JS
HTML - we'll use your selects name in the function. I've removed the inline function call:
<select name="status" id="status">
<option value="step_1">step_1</option>
<option value="step_2">step_2</option>
<option value="step_3">step_3</option>
<option value="step_4">step_4</option>
</select>
jQuery - I have taken the code out of the function you were calling inline, it was not needed.
<script>
$(document).ready(function() {
$('select[name="status"]').change(function(){
var status = $(this).val();
$.ajax({
type: 'POST',
url: 'update_status.php',
data: {changeStatus: status},
dataType: 'html'
});
});
});
</script>
You can directly test when the select changes and grab its value right then. Here is an EXAMPLE
I have also wrapped the jQuery in a document ready handler. Depending on where you're loading the script in your page you may need to do this to make sure that your jQuery is run as soon as the DOM elements have been loaded.

Remove the onchange field from select and put the below code to your script and this is working. Use JQuery post functionality instead.
$("#status").change( function() {
alert($( this ).val());
$.post('update_status.php', { changeStatus: $(this).val()},
function(response) {
console.log( response);
});
});

<select name="status" id="status" onchange="changeStatus(this.value)">
<option value="step_1">step_1</option>
<option value="step_2">step_2</option>
<option value="step_3">step_3</option>
<option value="step_4">step_4</option>
</select>
function changeStatus(value) {
$.ajax({
type: 'post',
url: 'update_status.php',
data: {'get_data:value'},
success: function (response) {
document.getElementById("loadto").innerHTML=response;
}
});
}
I Hope it will be helpful .....

pass id from php while loop to jquery

i have a form that has select boxes. this form has a table and each row has been created by php while loop from database. for example
<select name="1265483" id="1265483" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<select name="5894253" id="5894253" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
the id of each select is that entry's id in database. i want to get those ids to make an onchange function then send that id to ajax.

You can use something like:
$("select").change(function () {
$this = $(this);
$.post("some/url/dot.php", {data: $this.attr("id")}, function () {
// code...
});
});

you can do by below code
var your_selected_value = $('#5894253 option:selected').val();
$.ajax({
type: "POST",
url: "your_url",
data: {selected: your_selected_value},
success: function(data) {
// Stuff
},
error: function(data) {
// Stuff
}
});
put this code in onchange function

Try using the select class name:
$("select.form-control").change(function (e) {
var selectId = $(this).attr('id'),
ajaxUrl = "demo_test.php?id=" + selectId;
$.ajax({
url: ajaxUrl,
success: function (result) {
if (result) {
//success code
}
}
});
});