I want to make a check box checked automatically (using jquery) when a user select an option from a certain select input element .
Coding :
$("#cboUser").change(function(){
$.ajax({
type: "POST",
url: "sysnuser",
data: "slcbo=slcbo&uid="+ $("#cboUser").val() ,
success: function(html){
$("#divmsg").html('');
}
});
});
<select class="textboxforall" id="cboUser" name="cboUser" >
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="checkbox" id="check1" name="check1" ?>
If you mean you want checkbox to be checked on changing select, then:
$(document).ready(function() {
$("#cboUser").change(function(){
var optId = $(this).val();
//check the checkbox
$("#check"+optId).attr("checked", "checked");
$.ajax({
type: "POST",
url: "sysnuser",
data: "slcbo=slcbo&uid="+ $("#cboUser").val() ,
success: function(html){
$("#divmsg").html('');
}
});
});
});
Hope it helps
Related
i want to make a ajax call to controller when a value
is selected from select box.
this is my code:
<select class="form-control required" name="law_name" id="law_name">
#foreach($law_name as $lawname)
<option value="{{$lawname->id}}">{{$lawname->law_name}}
</option>
#endforeach
</select>
<script>
$("#law_name").on('change', function(){
alert('123');
$.ajax({
type: 'POST',
dataType: "json",
data: data,
url: "{{ URL::to('admin/SubLawController/index') }}",
success: function (response) {
}
});
});
</script>
my script is not running when i change value from select box
following is jquery code for making ajax call on change event of dropdown box,
$(function() {
$("#law_name").change(function () {
alert( $('option:selected', this).text() );
$.ajax({url: "http://xyz"+ $( this ).text(), success: function(result)
{
$("#div1").html(result);
}});
});
});
Code is in jquery , you have to use xmlhttprequest object for pain javascript.
I have scenario form like this
if option selected it will come out a new field i named "hah" i call it using ajax script like this
$('#bahan').change(function() {
var id = $('#bahan').val()
var datana = 'id=' + id
var urlna = "<?=base_url()?>controller/food/getdetailstok";
$.ajax({
type: 'POST',
url: urlna,
data: datana,
success: function(data) {
$('#hah').html(data);
}
})
return false;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<select class="form-control select2" name="bahan" id="bahan">
<option value="">-- Choose One --</option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
</select>
</div>
<div id="hah"></div>
How to reset "hah" if i click button save. hah in reset because the value field options again become null
$('#hah').empty() will do the trick.
.empty() will remove every element from the DOM. In your case every element in your #hah div.
$('#bahan').change(function() {
$('#hah').html("");
var id = $('#bahan').val()
var datana = 'id=' + id
var urlna = "<?=base_url()?>controller/food/getdetailstok";
$.ajax({
type: 'POST',
url: urlna,
data: datana,
success: function(data) {
$('#hah').html(data);
}
})
return false;
})
How to post one variable in ajax call to multiple php file's using URL method..
My data is as follow..
<select name="districts" id="district_list" class="update" onChange="getDist(this.value)" >
<option value="d1">east</option>
<option value="d2">west</option>
</select>
I want to pass these id value to another two php files using ajax and i tried as follow..
function getState(val) {
$.ajax({
type: "POST",
url: "get_dist.php",
url: "get_city.php",
data:'states_id='+val,
success: function(data){
$("#district_list").html(data);
}
});
}
Please try this
<select name="districts" id="district_list" class="update" onChange="getDist(this.value) ; getCity(this.value)" >
<option value="d1">east</option>
<option value="d2">west</option>
</select>
<script>
function getDist(val){
$.ajax({
type: "POST",
url: "get_dist.php",
data:'states_id='+val,
success: function(data){
$("#district_list").html(data);
}
});
}
function getCity(val){
$.ajax({
type: "POST",
url: "get_city.php",
data:'states_id='+val,
success: function(data){
$("#city_list").html(data);
}
});
}
</script>
I have a form in a php file that takes user entered values and sends the data into a .txt file.
Now it works fine when the form is filled, the 'submit' button is clicked and the user is sent to a 'confirmation/completed' page, whilst the data received is put into a .txt file.
What i want to do is use ajax and jquery to have the form => completed/confirmation without being sent to the other page.
The problem is the user data is not being transmitted now to the .txt file.
PHP: (confirmation.php)
<?php
$color = $_POST['color'];
$fp = fopen('userdata.txt', 'w');
$valstring = "What Color: " . $color . "\r\n";
fwrite($fp, $valstring);
fclose($fp);
?>
AJAX/JQUERY: (button clicked from form.php)
$(document).ready(function() {
var cir = {
load: $('<div />', { class: 'loading' }),
contain: $('#contain')
}
$('input[type="submit"]').on('click', function(e) {
e.preventDefault();
$.ajax({
url: 'confirmation.php',
type: 'POST',
beforeSend: function() {
cir.contain.append(cir.load);
},
success: function(data) {
cir.contain.html(data);
}
});
});
});
When using the ajax above the userdata.txt file only has the What Color: entered into it. The $color value that the user selected has not been recognised.
I know the code works without the ajax, but i would like to have the ajax (no page refresh) method, if possible.
Thanks in advance for any help.
You must set the data parameter in your ajax call, something like this should work:
<form>
<select name="color" id="color">
<option value="Red">Red</option>
<option value="Green">Green</option>
</select>
<select id="age">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" id="name" />
<input type="submit" value="SEND" />
</form>
$('input[type="submit"]').on('click', function(e) {
$.ajax({
url:'confirmation.php',
type:'POST',
// get the selected values from 3 form fields
data:'color=' + $('#color').val() +
'&age=' + $('#age').val() +
'&name=' + $('#name').val(),
success:function(data) {
// ...
}
});
return false;
});
You should probably read more about jQuery.ajax
you are not sending any data in your ajax post, for this reason the variable $color it's empty in the confirmation.php
try changing this:
$.ajax({
url: 'confirmation.php',
type: 'POST',
beforeSend: function() {
cir.contain.append(cir.load);
},
success: function(data) {
cir.contain.html(data);
}
with:
var formColor = $("#colorId").val(); //where ColorId it's the color input type ID
$.ajax({
url: 'confirmation.php',
type: 'POST',
data: { color: formColor },
beforeSend: function() {
cir.contain.append(cir.load);
},
success: function(data) {
cir.contain.html(data);
}
Here is what I have done so far:
<label for="popupDatepicker">DOB<span class="red">*</span></label>
<input class="text1" type=text id="popupDatepicker" name="popupDatepicker" maximun=30>
<label for="gender">I am<span class="red">*</span></label>
<select name="gender" id="gender">
<option value="M">Male</option>
<option value="F">Female</option>
</select>
jQuery code:
$(document).ready(function() {
$("#gender").blur(function() { // when focus out
//$("#message").html(''); //before AJAX response
var form_data = {
action: 'gender',
gender: $(this).val(),
popupDatepicker: $(this).val(),
};
$.ajax({
type: "POST",
url: "functions.php",
data:form_data,
success: function(result) {
$("#genders").html(result);
//alert("Hiiiiiiiiiiiiiiiii");
}
});
});
});
I want to pass both birthdate and gender after selecting the gender.
Another way of doing this, is simply adding the individual post variables within the data blob directly within the ajax call.
For example (not tested - may break):
data: ({
a:'gender',
g:$('#gender').val(),
d:$('#popupDatepicker').val()
}),
On the server side you'll see the 'a', 'g' and 'd' post variables!