I try to append data in select option
but it's not showing/append in it
The AJAX works perfectly, but the append is fail
<select class="form-control show-tick" style="font-size: 14px;" id="office_code" name="office_code" data-live-search="true">
<option value="choose" disabled selected>-- Choose Office --</option>
</select>
<select class="form-control show-tick" style="font-size: 14px;" id="kode_kantor" name="office_code" data-live-search="true">
<option value="choose" disabled selected>-- choose office --</option>
</select>
This is the AJAX code
<script type="text/javascript">
$.ajax({
'url': 'http://x.x.x.x/test/API/getOfficeBySearch',
'method': 'POST',
'data': {
'request': JSON.stringify({
"username": "test",
"password": "test",
"searchparam": "type",
"searchvalue": "office"
})
},
'success': function(result) {
result = JSON.parse(result)
result.data.forEach(function(value, index) {
var element =`<optionvalue="${value.officeid}">${value.name}</option>`
$('#office_code').append(element)
})
}
})
</script>
There's a missing space, replace <optionvalue with <option value.
Related
I tried to do the same for the input but With no chance however I did not understand if I has to be done with the change function should it be inserted seperately from the rest of the rest of the modal data
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example" name="TypeCo" id="TypeCo">
<option selected name="TypeCo" id="TypeCo">Type de concentrateur</option>
<option value="Concentrateur Fixe">Concentrateur Fixe</option>
<option value="Concentrateur transportable">Concentrateur transportable</option>
</select>
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example" name="CapCo">
<option selected name="CapCo" id="CapCo">Capacité de concentrateur</option>
<option value="5L">5L</option>
<option value="7L">7L</option>
<option value="10L">10L</option>
<option value="15L">15L</option>
</select>
and here is my script
$(document).ready(function() {
$(document).on('click', '#save', function() {
var fname = $('#fname').val();
var lname = $('#lname').val();
var tel = $('#tel').val();
var email = $('#email').val();
var TypeCo = $('#TypeCo').val();
var CapC = $('#CapCo').val();
alert(fname + lname + tel + email + TypeCo);
$.ajax({
url: "insert.php",
type: "post",
data: {
fname: fname,
lname: lname,
email: email,
tel: tel,
TypeCo: TypeCo,
CapCo = CapCo
},
success: function(data) {
$("#save").modal('hide');
alert('jj');
location.reload();
}
});
});
});
any help please ? it's my first project with ajax and I cannot really find a vid that can help me
This is indeed how you get the value from a form element in jQuery:
var TypeCo = $('#TypeCo').val();
However, you are targeting the wrong element. #TypeCo is currently targeting an <option> element:
<option selected name="TypeCo" id="TypeCo">Type de concentrateur</option>
You want to get the value of the <select> element itself (which contains <option> elements for the user to select that value). Move the name and id there:
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example" name="TypeCo" id="TypeCo">
<option selected>Type de concentrateur</option>
<option value="Concentrateur Fixe">Concentrateur Fixe</option>
<option value="Concentrateur transportable">Concentrateur transportable</option>
</select>
Then you can use .val() exactly like you already do:
$('#TypeCo').on('change', function () {
let value = $('#TypeCo').val();
console.log(value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example" name="TypeCo" id="TypeCo">
<option selected>Type de concentrateur</option>
<option value="Concentrateur Fixe">Concentrateur Fixe</option>
<option value="Concentrateur transportable">Concentrateur transportable</option>
</select>
how to create the 'if-else' condition with the following ajax jquery:
<script type="text/javascript">
$(document).ready(function () {
$('select[name="org_id"]').on('change', function () {
var stateID = $(this).val();
if (stateID){
$.ajax({
url: '<?php base_url();?>pasien_lama/dokter/'+stateID,
type: "GET",
dataType: "json",
success:function (data) {
$('select[name="person_id"]').empty();
$('select[name="person_id"]').append('<option >- Pilih Dokter -</option>');
$.each(data, function (key, value) {
$('select[name="person_id"]').append('<option value="'+ value.person_id +'">'+ value.person_nm +'</option>')
});
}
});
} else {
$('select[name="person_id"]').empty();
}
});
});
</script>
if not selected, the select option will return empty automatically
here is html code :
<label>Poli Tujuan</label>
<select class="form-control select2" name="org_id" style="width: 100%;">
<option selected="selected">- Pilih Poli -</option>
<?php foreach ($xocp_orgs as $nama_poli): ?>
<option value="<?php echo $nama_poli['org_id']; ?>"><?php echo $nama_poli['org_nm']; ?></option>
<?php endforeach; ?>
</select>
<label>Poli Dokter Spesialis</label>
<select id="imageSelector" class="form-control select2" name="person_id" style="width: 100%;" required>
<option>- Pilih -</option>
</select>
You can try something like jQuery.when() to get your task done, by making your method async. Resolve your actions based on your choice and then continue with necessary changes.
IF you want a learn better, this answer should help you.
Set the value for the default option to a empty string
<option selected="selected" value="">- Pilih Poli -</option>
change your if statement to
if (stateID.length) {//
demo:
$('select[name="org_id"]').on('change', function () {
var stateID = $(this).val();
if (stateID.length){
console.log('has values');
} else {
console.log('empty');
$('select[name="person_id"]').empty();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Poli Tujuan</label>
<select class="form-control select2" name="org_id" style="width: 100%;">
<option selected="selected" value="">- Pilih Poli -</option>
<?php foreach ($xocp_orgs as $nama_poli): ?>
<option value="<?php echo $nama_poli['org_id']; ?>">
<?php echo $nama_poli['org_nm']; ?>
</option>
<?php endforeach; ?>
</select>
<label>Poli Dokter Spesialis</label>
<select id="imageSelector" class="form-control select2" name="person_id" style="width: 100%;" required>
<option>- Pilih -</option>
</select>
HTML:
<select id="s2_basic" class="form-control" id="userid" name="userid">
<option value="" selected>-- Choose option --</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Javascript:
function submitForm() {
var userid = $('#userid').attr('selected', 'selected');
$.ajax({
type: "POST",
url: "submit.php",
data: "userid=" + userid,
success: function(text) {
if (text == "success") {
formSuccess();
} else {
formError();
submitMSG(false,text);
}
}
});
}
Submit PHP returns error message:
Value: ([object Object])
I have also tried
var userid = $('#userid').val();
var userid = $('#userid option').val();
Still, the option value never gets passed correctly.
What am I doing wrong?
I want just the value="x" number to be posted as userid=x.
remove id="s2_basic" from your select.
change :
<select id="s2_basic" class="form-control" id="userid" name="userid">
to
<select class="form-control" id="userid" name="userid">
$('#userid').on('change',function(){
console.log('value '+$('#userid option:selected').val())
console.log('text '+$('#userid option:selected').text())
console.log('index '+$('#userid option:selected').index())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select class="form-control" id="userid" name="userid">
<option value="" selected>-- Choose option --</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
try this
I build search query with option value.i get the country,state,city by json code.i get country list on onload by json code.but when i change value of country then top content are also show before get result with pagination.The loading img work fine in pagination but not in option values.
this is first link of select option image:-https://www.dropbox.com/s/jvie2x82l2vx4kp/search1.png?dl=0
second link is search image:-https://www.dropbox.com/s/1pe5r5uy9wi19m8/search2.png?dl=0
session_start();
if(isset($_GET['search']))
{
$q=$_GET['profession'];
$_SESSION['name']=$_GET['profession'];
}
else
{
session_unset();
}
if(isset($_GET['country']))
{
$_SESSION['country']=$_GET['country'];
}
if(isset($_GET['state']))
{
$_SESSION['state']=$_GET['state'];
}
if(isset($_GET['region']))
{
$_SESSION['region']=$_GET['region'];
}
enter code here
<script>
$(document).ready(function(){
$("#country").bind("change", function() {
$.ajax({
type: "GET",
data: "country="+$("#country").val(),
cache: false,
beforeSend: function(){ $("#ajaxLoader").show(); },
complete: function(){ $("#ajaxLoader").hide(); },
success: function(html) {
$("#pagination").html(html).show();
}
});
});
});
</script>
<div id="mhead"><h2>Search Result</h2></div>
<div class="content">
<body onload="listOfCountries('country');">
<form>
<p>Country:
<select name="country" id="country" onchange="listOfStatesOrCities(this,'state');" style="width:150px;"> */
<option value=""></option>
</select>
State:
<select name="state" id="state" onchange="listOfStatesOrCities(this,'region');" style="width:150px;">
<option value=""></option>
</select>
city:
<select name="region" id="region" style="width:150px;" >
<option value=""></option>
</select>
</p>
</form>
<div id="ajaxLoader" style="display:none"><img src="images/loading.gif" alt="loading..."></div>
<div id="loading" style="display:none"><img src="images/loading.gif" alt="loading..."></div>
<div id="pagination" cellspacing="0">
</div>
</div>
You can pass selector #pagination to fetch only the div with id pagination.
Try this:
$("#country").bind("change", function() {
$("#ajaxLoader").show();
$("#pagination").load(window.location.href + ' #pagination', { country: $("#country").val() }, function() {
$("#ajaxLoader").hide();
});
});
Here is the piece of my dropdown list:
<li><label>City:</label>
<select id="car" id="city">
<option value="New York">New York</option>
<option value="Sydney">Sydney</option>
</select>
</li>
Ajax code:
$("#SaveChanges").click(function () {
var data = {
email: $('#email').val(),
firstname: $('#firstname').val(),
lastname: $('#lastname').val(),
city: $('#city option:selected').text()
};
$.ajax({
url: "<?php echo site_url('ajax/saveChanges');?>",
type: 'POST',
async: false,
data: data,
success: function(msg) {
alert(msg);
},
error: function(e) {
alert("error");
}
});
return false;
});
I want to send all the data to ajax function. I am getting all the details there except city.
Try changing to this:
$( "#city" ).val();
Your select have to look like this:
<li><label>City:</label>
<select id="city">
<option value="New York">New York</option>
<option value="Sydney">Sydney</option>
</select>
</li>
Hope it helps you!
You just need to access the val() function for the select:
$('#city').val()
That will give you the value.
Note that the value is not the same as the display text, in that case you'll want to use the text() function.