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
Related
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>
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.
I'm using form validation jquery. And form input like this
<form id="form-valid">
<select id="country" name="country" class="input-group form-control input-sm">
<option value="Asia">Asia</option>
<option value="America">America</option>
<option value="Eropa">Eropa</option>
<option value="Africa">Africa</option>
<option value="Australia">Australia</option>
</select>
<input type="text" id="codetax" name="codetax"><input>
<select id="status" name="status" class="input-group form-control input-sm">
<option value="small">samll island</option>
<option value="big">big island</option>
<option value="medium">medium island</option>
</select>
<button class="btn btn-default btn-primary btn-sm btn-form-filter form-control" data-target="tmppo" id="btnsave" type="button">Save</button>
</form>
But my problem is, i need to check if country are Asia, taxcode and status must filled. But if country not Asia, taxcode and status can be empty. How do i did that when i'm using submit button?? I'm still new about jquery form validate. Pls help me.
Update ok it's works now, i do this on my from validate using depends
$('#form').validate({
errorElement: 'span',
errorClass: 'help-block',
rules: {
country: {
required: true
},
taxcode: {
required: {
depends: function(element) {
if ($('#country').val() == 'Asia') {
return true;
} else {
return false;
}
}
}
},
},
messages: {
codetax : "Pleasa instert taxcode
},
});
And on code html i have to use "name" to get rules. For all tq for helping me :)
I think you want to use the built-in method supplied by the validate library via .addMethod() found on the documentation site. I modified your form to better conform.
<script>
$(document).ready(function() {
// Add the method here, you can modify the code inside as need be
$.validator.addMethod("country", function(value, element) {
if(value == 'Asia') {
var getCodeTax = $('input[name=codetax]').val();
if(getCodeTax === '') {
return false;
}
}
return true;
}, 'You must select tax code');
$('form').validate({
rules: {
status:"required",
// This applies the country method above to the country dropdown
country: "country"
},
messages: {
}
});
});
</script>
<form id="form-valid" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<select name="country" id="country" class="input-group form-control input-sm">
<option value="">Select</option>
<option value="Asia">Asia</option>
<option value="America">America</option>
<option value="Eropa">Eropa</option>
<option value="Africa">Africa</option>
<option value="Australia">Australia</option>
</select>
<input type="text" id="codetax" name="codetax" />
<select id="status" name="status" class="input-group form-control input-sm">
<option value="small">samll island</option>
<option value="big">big island</option>
<option value="medium">medium island</option>
</select>
<input class="btn btn-default btn-primary btn-sm btn-form-filter form-control" value="save" data-target="tmppo" id="btnsave" type="submit">
</form>
You create a function to check what type of country selected on button click event
$( "btnsave" ).click(function() {
var country = $("country").val();
if (country == 'Asia')
{
//show required message here.
}
}
Change type of the button to submit.
$(document).on('submit', '#form-valid' function(e){
var country = $("#country").val();
if(country == 'Asia'){
if($('#codetax').val()=="" || $('#status').val()==""){
e.preventDefault();
//now form won't submit. Still need to add error messages.
}
}
});
If you don't want to change the type of button to submit then :
$(document).on('click', '#btnsave' function(e){
var country = $("#country").val();
if(country == 'Asia'){
if($('#codetax').val()!="" && $('#status').val()!=""){
$('#form-valid').submit();
}
else{
//add your error messages
}
}
});
I have a HTML attribute in my script:
<select name="cars" onChange="getPrice(this.value)">
<option value="1">Volvo XC90</option>
<option value="2">Saab 95</option>
<option value="3">Mercedes SLK</option>
<option value="4">Audi TT</option>
</select>
When I select the first item and post this to the database my script sends the wrong data to the database. In my database I get the value instead of the text.
By selecting the first <option> I want to post Volvo XC90 instead of s. How can I solve this?
The Ajax script I am using is:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function getPrice() {
// getting the selected id in combo
var selectedItem = jQuery('#cars option:selected').val();
// Do an Ajax request to retrieve the product price
jQuery.ajax({
url: 'get.php',
method: 'POST',
data: {'cars': selectedItem },
success: function(response){
// and put the price in text field
jQuery('#cars').val(response);
},
error: function (request, status, error) {
alert(request.responseText);
},
});
}
</script>
send.php
<?php
$correct = true;
$product1 = $_POST['product1'] ;
if($correct){
$db = new PDO('mysql:host=localhost;dbname=database', 'root', '');
$query = "INSERT INTO forms(product1) VALUES (?)";
$stmt = $db->prepare($query);
$stmt->execute(array($product1));
header("Location: ./print.php");
}
else
{
echo "<br /><br />Error.<br />\n";
}
?>
Update 1:
Something like this is ideal for my situation:
html:
<select name="cars" onChange="getPrice(this.value)">
<option id="1" value="Volvo XC90">Volvo XC90</option>
<option id="2" value="Saab 95">Saab 95</option>
<option id="3" value="Mercedes SLK">Mercedes SLK</option>
<option id="4" value="Audi TT">Audi TT</option>
</select>
function:
$('[id=cars]').change(function()
{
alert($('[id=cars] option:selected').text());
});
Use html as
<select name="cars" onChange="getPrice(this.value)">
<option value="">Select</option>
<option value="Volvo XC90">Volvo XC90</option>
<option value="Saab 95">Saab 95</option>
<option value="Mercedes SLK">Mercedes SLK</option>
<option value="Audi TT">Audi TT</option>
</select>
and little change in your js function as
function getPrice(selectedItem) {
Instead of
function getPrice() {
You are already sending onChange="getPrice(this.value)" selected value here, just needed to catch it.
so there is no need to code to get again, remove this line
var selectedItem = jQuery('#cars option:selected').val();
Also added new option with blank value as you are sending value in onchange, there will be no effect on first load and it will be selected first column.
I suggest first check not empty for selectedItem then go for ajax.
function getPrice(selectedItem) {
alert(selectedItem);
}
<select name="cars" onChange="getPrice(this.value)">
<option value="">Select</option>
<option value="Volvo XC90">Volvo XC90</option>
<option value="Saab 95">Saab 95</option>
<option value="Mercedes SLK">Mercedes SLK</option>
<option value="Audi TT">Audi TT</option>
</select>
Bunch of things :
1.Replace .val() with .text().
2.Use name selector ( since there is no such element with id = cars )
var selectedItem = jQuery('[name=cars] option:selected').text();
EDIT:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function getPrice()
{
var selectedItem = $( "#cars" ).val();
alert(selectedItem);
}
</script>
<select name="cars" onChange="getPrice(this.value)" id="cars">
<option id="1" value="Volvo XC90">Volvo XC90</option>
<option id="2" value="Saab 95">Saab 95</option>
<option id="3" value="Mercedes SLK">Mercedes SLK</option>
<option id="4" value="Audi TT">Audi TT</option>
</select>
I am Have html table inside each td i have dropdown see below image how it looks like
if i select 1201 in dropdown of second td also i want to change the value of to other dropdown with the same id,if the id is not matched it will not change
<td style="width:141px" id="CPH_GridView1_route'.$rows['net_id'].'" >
<select name="mySelect" id="mySelect" class="edit1 route '.$rows["net_id"].'" >
<option value="-1">Choose..</option>';
<option value="-1">1201</option>';
<option value="-1">1101</option>';
</select>
</td>
ajax
<script>
$(document).ready(function(){
$('.edit1').on('change', function(){
$.ajax({ type: "POST",
url:"xxxxx/routestatusupdate.php",
data:"value="+$(this).val()+"&rowid="+arr[2]+"&field="+arr[1]+"&clientid="+clientid+"&account_id="+account_id,
success: function(res){
data = jQuery.parseJSON(res); //added line
alert('Saved Successfully!');
$('#CPH_GridView1_route').empty();
$('#CPH_GridView1_route').append(data.routeupdate);
$('.ajax').html($(this).val());
$('.ajax').removeClass('ajax');
}
});
});
});
</script>
<select name="mySelect" id="mySelect" class="edit1 route '.$rows["net_id"].'" onChange="foo()">
<option value="-1">Choose..</option>';
<option value="-1">1201</option>';
<option value="-1">1101</option>';
</select>
<select name="second" id="mySelect" >
<option value="-1">Choose..</option>';
<option value="-1">1</option>';
<option value="-1">2</option>';
</select>
<script>
function foo(){
alert("cahnge");
document.getElementById("div1').innerHTML="<select name="second" id="mySelect" >
<option value="-1">Choose..</option>';
<option value="-1">1</option>';
<option value="-1">2</option>';
</select>";
}
</script>