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;
})
Related
i have a selectbox, on selection of option of this box datatable gets populated.
this table displays all the information of selected option in select box.
<select name="status" id="status" onchange="changeassigned()">
<option>-- Select Status --</option>
<option value="1">New</option>
<option value="2">Inprogress</option>
<option value="3">Completed</option>
<option value="4">Rejected</option>
</select>
my ajax code to pass data to controller:
<script>
$(document).ready(function()
{
$('#querymasterdata').DataTable();
});
<script>
function changeassigned()
{
var status_id = $('#status').val();
var id = $('#assigned_to').val();
$.ajax({
type: 'GET',
dataType: "json",
data: {id:id},
url: "{{ URL::to('admin/poststatusid/') }}?status_id=" + status_id,
success: function (data) {
$('tbody').html(data.res);
}
});
}
my rows of datatable is a link tag, when i click i am redirected to new page.
my problem is when i come back to same page my datatable is lost.
what is the reason for this..??
i have a ScanField. In this field i'm scanning a barcode. After that i'm cutting the last four character of the bardcode-string and give it to the hiddenField. And from that hidden field when i click on the search button i pass it to the php site via ajax.
for example: i'm scanning a barcode: TWRG000000009102 in the hiddenfield shows 9102 and after that im passing the value to ajax.
Everthing works fine but i would like to do it automatically. When the hidden inputField was filled it should fire an event and pass the value to ajax.
my code:
<label for="myType">
<select id="myType" name="myType" size="5">
<option value="01">B&C</option>
<option value="02">James Nicholson</option>
<option value="F.O.L">Fruit Of The Loom</option>
<option value="TeeJays">TeeJays</option>
</select>
</label>
<br>
<label for="hiddenField">hiddenField:</label>
<input type="text" name="hiddenField" style="width:300px"><br>
<label for="myScan">Scanfield:</label>
<input type="text" name="myScan" style="width:300px" autofocus>
<button type="submit">Search</button>
<div id="result"></div>
<script>
$(document).ready(function(){
$('input[name=myScan]').on('keypress', function(e){
if(e.which == 13) {
var scanField = $(this).val();
console.log(scanField);
var lastFour = scanField.substr(scanField.length - 4);
$('input[name=hiddenField]').val(lastFour);
}
});
$('button').on('click', function(){
var postForm = {
'myType' : $('#myType').val(),
'myScan' : $('input[name=hiddenField]').val()
};
$.ajax({
url: "index.php",
type: "POST",
data: postForm,
dataType: "text",
success: function(data){
$('#result').html(data);
}
});
});
});
here the html example: https://jsfiddle.net/froouf9f/
Once you save value to hidden field, you can trigger button click event using:
$("button").trigger("click");
Try this:
$('input[name=myScan]').on('keypress', function(e){
if(e.which == 13) {
var scanField = $(this).val();
console.log(scanField);
var lastFour = scanField.substr(scanField.length - 4);
$('input[name=hiddenField]').val(lastFour);
$("button").trigger("click");
}
});
I have a jQuery Ajax problem.
I have a select tag with options of courses, the select holds div id="course". I have a button with id of "go" and an empty div with id of "courseInfo". I need to make it so that when a course number is selected, the teacher name in my php file that goes with it is displayed on the page. I have all my Ajax written, everything is linked, but it wont work and no error when I debug.
$(document).ready(function(){
findCourse = function(){
var file = "Course.php?course="+$("#course").val();
$.ajax({
type: "GET",
url: file,
datatype : "text",
success : function(response) {
$("#courseInfo").html(response);
}
});
}
clear = function(){
$("#courseInfo").html("");
};
$("#course").click(clear);
$("#go").click(findCourse);
});
Form:
<form action="" method="post">
<select name="course" id="course">
<option value="420-121">420-121</option>
<option value="420-122">420-122</option>
<option value="420-123">420-123</option>
<option value="420-221">420-221</option>
<option value="420-222">420-222</option>
<option value="420-223">420-223</option>
<option value="420-224">420-224</option>
</select>
Select a course to see the course name and teacher assigned<br><br>
<input type="button" id="go" value="go!">
</form>
<br><br>
<div id="courseInfo"></div>
Assuming that the PHP side is working properly, the code below should fix the issue.
$(document).ready(function(){
findCourse = function(){
var file = "Course.php?course="+$("#course").val();
console.log(file);
$.ajax({
type: "GET",
url: file,
datatype : "text",
success : function(response) {
$("#courseInfo").html(response);
}
});
}
clear = function(){
$("#courseInfo").html("");
};
$("#course").click(clear);
$("#go").click(findCourse);
});
You miss the = in var file.
Yours was
var file = "Course.php?course"+$("#course").val();
It should be
var file = "Course.php?course="+$("#course").val();
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);
}
I am currently using Ajax to submit an input field without a page refresh or button click. The function works well with a text input field But it doesnt work with posting the value of a select box and then php echoing the result. I check with the firebug tool and nothing is being posted by Ajax/js function.
How can I submit the value of a select box so I can then echo with the php? EXAMPLE
JS
<script>
$(document).ready(function() {
var timer = null;
var dataString;
function submitForm(){
$.ajax({ type: "POST",
url: "index.php",
data: dataString,
success: function(result){
$('#item_input').text( $('#resultval', result).html());
}
});
return false;
}
$('#item_name').on('keyup', function() {
clearTimeout(timer);
timer = setTimeout(submitForm, 050);
var name = $("#item_name").val();
dataString = 'name='+ name;
});
});
</script>
PHP
<?php
if ($_POST)
{
$item_name = $_POST['name'];
echo ('<div id="item_input"><span id="resultval">'.$item_name.'</span></div>');
}
?>
HTML
<html>
<form method="post" id="form" name="form">
<select name="item_name" value="<? $item_name ?>" size="4" id="item_name">
<option value="">Item1</option>
<option value="">Item2</option>
<option value="">Item3</option>
<option value="">Item4</option>
</select>
</form>
<div id="item_input"></div>
</html>
select tags does not trigger keyup event , you should use change instead, try the following:
$('#item_name').on('change', function() {
clearTimeout(timer);
var name = $(this).val();
dataString = 'name='+ name;
timer = setTimeout(submitForm, 050);
});
$('#item_input').html(result);
Trigger submitForm() with an onchange event so that every time the value of <select> changes, it submits.
KeyUp is for input boxes and others that use the keyboard. Select boxes you can either use onClick or onChange, preferrably onChange:
$('#item_name').change(function() {
clearTimeout(timer);
timer = setTimeout(submitForm, 050);
var name = $("#item_name").val();
dataString = 'name='+ name;
}
This will work for you.
Good Luck!
It seems that your js is right problem is in your html part. you not provided the select list values. pls provide values to select list options.
$(document).ready(function() {
var timer = null;
var dataString;
function submitForm(){
$.ajax({ type: "POST",
url: "index.php",
data: dataString,
success: function(result){
//$('#item_input').html( $('#resultval', result).html());
//$('#special').text(result);
//$('#item_input').html( $('#resultval').html() + '<p>' + result + '</p>');
$('#item_input').html(result);
}
});
return false;
}
$('#item_name').on('change', function() {
clearTimeout(timer);
var name = $(this).val();
dataString = 'name='+ name;
timer = setTimeout(submitForm, 050);
});
});
it should be like this or whatever values you want to post
<select name="item_name" value="" size="4" id="item_name">
<option value="item1">Item1</option>
<option value="item2">Item2</option>
<option value="item3">Item3</option>
<option value="item4">Item4</option>
</select>