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!
Related
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;
})
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);
}
This is my html code
<select name="course" id="course" onchange="valuesOfAll(this.value)">
<option value=""> select </option>
<option value="1"> Diploma in Computing</option>
</select>
<input name="course_credits" id="course_credits" type="text" />
and my database table is like this
courseId courseName courseCredits
1 Diploma in Computing 5
So my request is, if i change the value in the 'select' the 'courseCredits' value should appear in the textbox. for this how can i write jquery code?
"Ajax with Jquery" is what your are looking for. It will work like this:
the user chooses an option from the select box
you submit via Javascript the chosen option to a PHP script
the php script fetches the data from the database
the php script returns the result as json encoded data
there is a callback function in your javascript code. This js code will manipulate the HTML in whatever way you want, e.g. "add the option to your select box"
There are tons of tutorials on how to do Ajax requests in detail, e.g. http://openenergymonitor.org/emon/node/107
Check out one of those tutorials - eventually you will want to update your question so that it becomes a bit more specific? :-)
it is good practice to seperate you html from scripts so i would like to change :
<select name="course" id="course" onchange="valuesOfAll(this.value)">
to
<select name="course" id="course" >
then my script will be following (hoping you add reference of latest jquery )
<script>
$(document).ready(function(){
//bind change event once DOM is ready
$('#course').change(function(){});
getResult($(this).val());
});
function getResult(selectedValue){
//call ajax method to get data from database
$.ajax({
type: "POST",
url: url,//this should be replace by your server side method
data: "{'value': '"+ selectedValue +"'}", //this is parameter name , make sure parameter name is sure as of your sever side method
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (Result) {
alert(Result.d);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
}
</script>
use $.post.. (ajax or get)... i am using post here....go through the docs if you want to read more about jquery post..
javascript
function valuesofAll(val){
$.post('test.php',{data:val},function(result){
$('#course_credits').val(result.coursecredit)
}, "json"); //expect response as json..
}
test.php
$data=$_POST['data']; //this is the value posted
//make you query in db get result..
$courseCredits= $row; //db returned courseCreadit value
echo json_encode(array('coursecredit'=>$courseCreadits)); //send response as json
this will helps you .....
<script>
function valuesOfAll(value)
{
var base_url="http://.../../hello.php";
var ip=new Object();
ip.course=value;
var inputParam=JSON.stringify(ip);
var module="getcourseCredits"
$.ajax({
type: "POST",
url: base_url,
data: {coursevalue:inputParam,module :module},
dataType: "json",
success: function(msg)
{
$("#course_credits").val(msg.credit);
}
});
}
</script>
<body>
<select name="course" id="course" onchange="valuesOfAll(this.value)">
<option value=""> select </option>
<option value="1"> Diploma in Computing</option>
</select>
<input name="course_credits" id="course_credits" type="text" />
</body>
In your PHP file
<?php
if(isset($_POST['module']))
{
if($_POST['module']=='getcourseCredits')
{
$val=json_decode($_POST['coursevalue'],true);
$courseval=$val['course'];
// do the connectivity and query here and finally echo the result as json format that is the response to the ajax call
.
.
.
.
}
}
?>
I have the following form, which has 3 values. Class, Section and School. The school is selected from a drop down list that is brought from database.
(for simplicity I have not included those details here.. ) (in reality my code works)
<form id="form1" name="form1" method="post" action="">
<input type="hidden" name="class" value="someclass">
<input type="hidden" name="section" value="somesection">
<select name="school" id="school">
<option> "school 1" </option>
<option> "school 2" </option>
<option> "school 3" </option>
<option> "school 4" </option>
<option> "school 5" </option>
</select>
</form>
I am doing this for the Ajax, and for only 1 variable (the item from list) was working fine, however after adding the class and the section values, I was not able to get those 3 into the Ajax, so that I can post them into the PHP. (syntax might be wrong as this is just copy paste some of the portion of the code.)
$("#school").change(function ()
{
resetValues();
var school = { school:$(this).attr('value') };
var class= { class:$(this).attr('value') };
var section= { section:$(this).attr('value')};
jQuery.ajax({
url: 'getTheData.php',
type: "POST",
dataType: "xml",
data:school&class§ion,
async: false,
success: schoolOnSuccess
});
And naturally I am using _POST to get the values on the getTheData.php the traditional way.
Where am I going wrong ?
Instead of using like this, you can serialize the form elements and send.
$("#school").change(function ()
{
resetValues();
var data = $("#formid").serialize();
jQuery.ajax({
url: 'getTheData.php',
type: "POST",
dataType: "xml",
data:data,
async: false,
success: schoolOnSuccess
});
});
You can access the values in php function by using the name of form elements.
The advantage of this method is, you don't have to change your script when you add or modify any form element.
You can try this:
$('#school').change(function(){
$.get('getTheData.php', $('#form1').serialize(),
function(){
alert('Success!');
},function(){
alert('Unsuccess!');
});
});
and request will send with data on url.
try this, make your object-data
data:{
'post-field-name' : 'post-field-value'
}
so your ajax script will become :
jQuery.ajax({
url: 'getTheData.php',
type: "POST",
dataType: "xml",
data:{
'school' : school,
'class' : class,
'section' : section
}
async: false,
success: schoolOnSuccess
});
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