This is the dropdown
<select id="officer-id" placeholder="Choose an officer">
<option selected="selected" >----</option>
<optgroup id="pt1" label="To be checked">
<option value='ab2'>ab2</option>
--
</optgroup>
<optgroup id="pt2" label="Checked">
<option value='ab1'>ab1</option>
</optgroup>
</select>
What I want that on submit the selected item it optgroup pt1 should be removed and got added in optgroup pt2
I am trying something like this as i have to call this on sucess of submission
$("#myform").submit(function(e){
var officer_id = $('#officer-id').val();
e.preventDefault();
$.ajax({
type:'POST',
url: '<?php echo base_url();?>Home/insert_reviewofficer',
//dataType:'json',
data:$(this).serialize() + '&officer_id=' + officer_id,
success:function(resp){
// alert('success');
// console.log(resp);
$("#myform").hide();
var value=$('#officer-id').val();
$('#pt2').append($("#officer_id"));
}
});//end ajax
});
But $('#pt2').append($("#officer_id")) is not adding and displaying any option in optgroup #pt2
I want to implement this that when I click submit and on success of my ajax request the optgroup TO be checked should become empty and optgroup checked should contain options. ab1 and ab2
Try this:
$('#pt2').append($("select").find(":selected"));
JsFiddle
Related
I don't have much experience with JavaScript. Just PHP. I've been trying to create a JavaScript form that doesn't capture any information. It just redirects the user to a URL based on the State they select in a dropdown.
So if the user enters Alabama in the State dropdown list they get redirected to a set URL. So the code would have 50 URL possible redirects - one for each State.
I've been searching high and low and every attempt I make is horrific - if anyone has any advice on how to this it would be much appreciated.
<select class="form-control" name="stateId" id="stateId">
<option value="" selected="" disabled="">Select Country</option>
<option value="1">ABC</option>
<option value="2">DEF</option>
<option value="3">GHI</option>
$('#stateId').change(function(){
// get dropdown value to variable
var ID = $(this).val();
// redirect user with following dynamic url
window.location.href = "localhost/view/steteID/" + ID;
// or
window.location.href = "../view/steteID/" + ID;
// this is optional, if you required ajax call in future
$.ajax({
type: "get",
dataType: "json",
url: 'path/'+ID,
success:function(response){
$('#districtId').empty();
response[0].subProducts.forEach(function(elem,index){
$('#districtId').append('<option value="'+ elem.code +'"></option>');
});
},
error:function(xhr){
console.log(xhr);
}
});
});
You can write a method which will be fired upon the change of the select drop down and according to the value you can redirect the user.
Here is a PURE JAVASCRIPT implementation.
document.addEventListener('DOMContentLoaded',function() {
document.querySelector('select[name="states_select"]').onchange=changeEventHandler;
},false);
function changeEventHandler(event) {
if(!event.target.value) alert('Please Select state');
else{
alert('You like ' + event.target.value);
//handle the redirect here
// window.location = "YOUR_REDIRECT_URL";
}
}
<select name="states_select">
<option> Select a State </option>
<option value="State 1"> State 1 </option>
<option value="State 2"> State 2 </option>
<option value="State 3"> State 3 </option>
</select>
Read more about the change event here
$(function() {
$('#websites').change(function() {
this.action = document.getElementById('urls').value;
this.submit();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="websites" >
<select id="urls">
<option value="https://google.com">Google</option>
<option value="https://stackoverflow.com">Stack overflow</option>
<option value="https://example.net">Example net</option>
</select>
</form>
Here you can achieve this
I have two dropdown list, I want to know what user has selected in these dropdowns, based on that I need fetch data from DB using PHP. Please note that There is no submit button. I don't know how send javascript var value to PHP code.
Here it is what I've done so far
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$('select.day').on('change',function(){
var select = $(this).val();
alert(select);
});
$.ajax({
Type : "POST",
url : "new.php",
data : {name : select},
success : function(msg)
{
$('#d').text(msg);
alert(msg);
}
});
});
</script>
</head>
<body>
<p id="d"></p>
<Select class="day" onchange="getTimeFrame(this.value)">
<Option >Today</Option>
<Option>This Week</Option>
<Option>Last Week</Option>
</Select>
<Select class="filter" onchange="getFilterType(this.value)">
<Option >User</Option>
<Option>Client</Option>
<Option>Project</Option>
</Select>
</body>
</html>
Here it is PHP file
<?php
// $time = $_POST['select'];
$filter = $_POST['name'];
//echo "Hello from new";
echo $filter;
?>
But nothing seems working for me. Anybody know how to achieve this?
Add your Ajax code inside the onchange event of the select .
Updated
typo change type instead Type ,is not caps .All are small letter.Javascript is case sensitive
$('select.day').on('change', function() {
var select = $(this).val();
$.ajax({
type: "POST",
url: "new.php",
data: {
name: select
},
success: function(msg) {
$('#d').text(msg);
alert(msg);
}
});
})
Change Html as like this
<Select class="day">
<Option >Today</Option>
<Option>This Week</Option>
<Option>Last Week</Option>
</Select>
For send both drop down value try this
$('select.day').on('change', function() {
var select = $('select.day').map(function(){
return $(this).val()
}).get();
console.log(select)
$.ajax({
type: "POST",
url: "new.php",
data: {
name: select
},
success: function(msg) {
$('#d').text(msg);
alert(msg);
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<Select class="day" >
<Option >Today</Option>
<Option>This Week</Option>
<Option>Last Week</Option>
</Select>
<Select class="day filter" >
<Option >User</Option>
<Option>Client</Option>
<Option>Project</Option>
</Select>
In your onchange Event you only get with select = $(this)... the value of the changed selectbox. You have to reference to the other one, too with Name = $(".filter")..... and then send it with ajax
Currently I am doing it without the select2 plugin and it works but I want to use select2 plugin
What I am trying to do here is get the selected option using the Select2 plugin and then do an ajax call
so if an option is selected the id will be passed and the ajax call will be done
$('.select2').change(function(e){
var arraypos = $(this).children(":selected").attr("id");
jQuery.ajax({
url: '/wallfly-mvc/public/dashboard/selectedProperty',
type: "POST",
data: {
selected: arraypos
},
success: function (result) {
$('#showoption').attr('id');
window.location.reload();
},
error: function (result) {
alert('Exeption:' + exception);
}
});
});
You will retrieve the selected option of a select2 input using jquery just the same you would do for a normal select input
http://jsfiddle.net/jEADR/2162/
<select id="someInputId" style="width:300px">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
$("#someInputId").select2();
$('#someInputId').change(function(e){
console.log($(this).children(":selected").attr("value"));
});
i have this drop down in html which is created by java script i need to fetch value from these dynamically created down with the same or id and and post it to through ajax in php can you please help how to get value from these selected drop down
<select name="criteria[]">
<option value="null" disabled selected>- select -</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<select name="criteria[]">
<option value="null" disabled selected>- select -</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
so what you can do is loop through the select list using jquery .each() and store the values in the array.
here's what you can try.
$(function(){
var array = [];
$('#btnGetVal').on('click', function(){
$('select[name="criteria[]"]').each(function(){
console.log($(this).val());
array.push($(this).val());
});
console.log(array);
$.ajax({
type: 'post',
url: 'yourfile.php',
data: {values:array},
success: function(d){
// do something on success
}
});
});
});
here's a working JSFIDDLE. Please check the console for values. Hope this helps
Your question is not completely clear. You have two identical dropdown controls, with identical names/options. Is this intentional? How do you wish to use them?
If both are required, it is a good idea to make them unique by assigning each a unique ID:
<select id="s1" name="criteria[]">
...options...
</select>
You can then access their data easily:
var sel1_val = $('#s1').val();
Because the HTML is created by javascript, you may need to use event delegation:
$(document).on('change', 'select[name="criteria[]"]', function(){
var sel1_val = $('s1').val();
var sel2_val = $('s2').val();
$.ajax({
type: 'post',
url: 'your_php_ajax_processor_file.php',
data: 'sel1=' +sel1_val+ '&sel2=' +sel2_val,
success: function(d){
if (d.length) alert(d);
}
});
});
In your PHP file:
<?php
$s1 = $_POST['sel1'];
$s2 = $_POST['sel2'];
//now, do what you need to do with the two values
The .on() is necessary to detect events for injected markup.
Note that if you are using AJAX (you are), then you don't need to use a <form> structure -- you can just use a normal div.
See these additional posts for more on AJAX:
AJAX request callback using jQuery
Hi i am using jquery to pull data from database n if the field has some value, i am calling clone function to create a dropdown list and using that value to set the selected value for dropdownbox. Like in code below database returns score so i am trying to set selected value of dropdown to score. ANDCriteria2 is the dropdown created using clone. Even if i try to print ANDCriteria's selected value which by default should be total_balance, it show empty alertbox (alert($('#ANDCriteria2').val()) as if the dropdown doesnt even exist
HTML
<div id="ListOne">
<div id="crit">
<div id="innerDiv2">
<select name="ANDCriteria2">
<option value="total_balance">Total Balance</option>
<option value="collector_code">Collector Code</option>
<option value="score">Score</option>
<option value="standard_desc">SDC</option>
<option value="acct_age">Account Age</option>
<option value="attempts_total">Total Attempts</option>
<option value="phone_age">Phone Age</option>
</select>
</div>
</div>
</div>
Jquery ready function
(document).ready(function(){
$('#lst').change(function(){
$.ajax({
type: "GET",
url: "getter.php",
data: "list=" + $(this).val(),
success: function(data){
var items = JSON.parse(data)
var andc2 = items[5];
if(andc2 === 'score ') {
clone ();
alert("BEFORE");
//$('#ANDCriteria2 option').eq(2).attr('selected', 'selected');
//alert( $('.innerDiv2 ANDCriteria2').text());
$('#ANDCriteria2 > .innerDiv2 >.crit option[value=score]').attr('selected','selected');
alert("AFTER");
I think you mean $("[name='ANDCriteria']") and not $("#ANDCriteria"). # is for ID based selection.
Culprit:
<select name="ANDCriteria2">
And you're using:
$('#ANDCriteria2 > .innerDiv2 >.crit option[value=score]')