I'm new in AJAX and want to send 2 IDs on an AJAX page here is my code
Click Here
<script>
$(document).ready(function() {
$(".edit3").click(function() {
var moduleID = $(this).attr('id');
var studentID = $_POST['studentAssignID']; //Problem is Here
$.ajax({
type: "POST",
url: 'assign-assignment-ajax.php',
data: "moduleID="+moduleID+"&studentID="+studentID,
success: function(data)
{
$("#editform2").html(data);
$("#editform2").show('slow');
}
});
});
});
I'm getting module ID by clicking on a href, while I also want student ID with it, which part i'm doing wrong?
try this :
var studentID = "<?php echo $_POST['studentAssignID']; ?>";
Declare 'StudentAssignID' in hidden field.
<input type='hidden' class="StudentAssignID" value="<?echo $_POST['studentAssignID'];?>">
Then Use This Value in Script.
<script>
.
.
var studentID = $('.StudentAssignID').val();
.
.
</script>
Related
I want to pass id and value of the selected option as parameters to my ajax. Somehow I can see id passing but not the value.
How can this be achieved, I am posting my code here, please any advice will be helpful.
I have tried many ways but still the datString shows up Object { id: "3", designationname2: "3" } on console.log.
<b>Designation</b>
<select name="designation" class="form-control" id="desig" >
<option value="">Select a Designation/Role</option>
<?php
$sql = mysql_query("SELECT id, designation FROM tbl where status =1 and designationtype_id = 1 ");
while ($rows = mysql_fetch_assoc($sql)) {
$des_id2 = $rows['id'];
$designationname2 = $rows['designation'];
echo "<option value=" . $des_id2 . ">" . $designationname2 . "</option>";
}
?>
</select>
And AJAX,
<script src = "http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#desig").change(function () {
var id = $(this).val();
var designationname2 = $('#desig').val();
var dataString = {'id': id, 'designationname2': designationname2};
console.log(dataString);
$.ajax({
type: "POST",
url: "escalation_ajax.php",
data: dataString,
cache: false,
success: function (html) {
$("#rephead").html(html);
}
})
})
})
</script>
You can change below line
var designationname2 = $('#desig').val();
This line will get the value of the selected option, that you don't required
to
var designationname2 = $(this).find("option:selected").text()
Above line will give you text of the selected option of text of the current element.
OR
var designationname2 = $('#desig option:selected').text()
Above line will give the text of any selector with option selected
Try this:
var designationname2 = $(this).find('option:selected').text();
try this one
Use text() instead of val()
var designationname2 = $( "#desig option:selected" ).text();
try this :
var designationname2 = $('#desig option:selected').val();
I've header file in which I have search box where user can search for products, this works on ajax request & for getting the info I've livesearch.php file.
Now with the searched products, I want to add 'Add to Cart' button directly. So in fact for every search result there will be one button to add that product in cart. To achieve this, I need to add another ajax request for adding that product into cart.
But nothing's happening while I click on add button. Here's my code.
Header.php
<script type="text/javascript">
$(document).ready(function()
{
$(".searchproductbrand").keyup(function()
{
var kw = $(".searchproductbrand").val();
if(kw != '')
{
$.ajax
({
type: "POST",
url: "livesearch.php",
data: "kw="+ kw,
success: function(option)
{
$("#livesearch").show();
$("#livesearch").html(option);
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
});
}
else
{
$("#livesearch").html("");
document.getElementById("livesearch").style.border="0px";
}
return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function()
{
$(document).live('click', '.buynow', function()
{
var productid = $(this).attr('id');
var quantity = $('.quantity_'+productid).val();
var type= $('.type_'+productid).val();
$.ajax
({
type: "POST",
url: "db_addtocart.php",
data: {'quantity'=quantity, 'type'=type, 'productid'=productid},
success: function(option)
{
this.attr('value','Added');
}
});
return false;
});
});
</script>
<?php
<input type="text" id="text" class="searchproductbrand">
?>
livesearch.php
<?php
while(blah blah){
echo "<input type='text' id='quantity' class='quantity_".$row["productid"]."'>".
" <select name='type' class='type_".$row["productid"]."'>".
"<option value='Unit'>Unit</option>";
"</select>";
echo " <input type='button' class='button' id='".$row["productid"]."'
class='buynow' value='Buy Now'>";
}
?>
db_addtocart.php
This file gets the values of variables & insert into table, nothing sort of important.
What wrong am I doing? Any help will be appreciated.
Try updating your js to the code below. I used .delegate() instead of .live() as according to the manual it is better to use with jQuery 1.4.3+.
$(document).ready(function() {
$(".searchproductbrand").keyup(function(){
var kw = $(".searchproductbrand").val();
if(kw != ''){
$.ajax({
type: "POST",
url: "livesearch.php",
data: {kw:kw},
success: function(option){
$("#livesearch").show();
$("#livesearch").html(option);
$("#livesearch").css("border","1px solid #A5ACB2"); // used $('#...') instead of document.getElementById() AND .css() instead of style.border
}
});
}
else {
$("#livesearch").html("").css("border","0px"); // used $('#...') instead of document.getElementById() AND .css() instead of style.border
}
return false;
});
$(document).delegate('.buynow','click', function(){
var productid = $(this).attr('id');
var quantity = $('#quantity_'+productid).val(); // changed from .quantity_ to #quantity - requires change in php code
var type= $('#type_'+productid).val(); // changed from .type_ to #type - requires change in php code
$.ajax({
type: "POST",
url: "db_addtocart.php",
context: this, // added as 'this' below was out of scope. see the docs for more info
data: {quantity:quantity,
type:type,
productid:productid},
success: function(option){
this.value = 'Added'; // changed from this.attr('value','Added');
}
});
return false;
});
});
This will also require you to update the html created in livesearch.php to the following code. Mainly changing from class=... to id=...
<?php
while(blah blah){
echo "<input type='text' id='quantity_".$row["productid"]."' />";
echo " <select name='type' id='type_".$row["productid"]."'>".
"<option value='Unit'>Unit</option>".
"</select>";
echo " <input type='button' class='button buynow' id='".$row["productid"]."' value='Buy Now'>";
}
?>
Here is a working JSFiddle example - http://jsfiddle.net/X8n3d/
What's going on is that your $(".buynow").click is bound to the element which are in the dom on load of your page. Any button with .buynow added after that has no event.
You need to use jQuery's on() method so the click event works for all elements.
Juste replace $('.buynow').click(function(e){..}) with $(document).on('click', '.buynow', function(e){..}) and it should work.
I have this script here that outputs a result from a sql db query but I can not figure out how to get it to put the result in the table cell specified.
Here is query:
<script type="text/javascript">
$(document).ready(function(){
$('.typeval').change(function(){
var movement = $(this).val();
var client_id = $(this).parent().siblings().find('.clientval').val();
var class_id = <? echo $class_id; ?>;
$.ajax({
type: "POST",
url: "movement_count.php",
data: {movement:movement, client_id:client_id, class_id:class_id},
dataType: "json",
success:(function(output) {
$.each(output, function(index, value){
alert(value);
$(".count").append(output[value]);
}) // each
}) // success
}); // ajax
}); // .typeval
}); // document
</script>
I want to put the result of this (value):
alert(value);
into here:
<td><label class="count"></label></td>
The <td> I am targeting on the same row as the <select> menu that is triggering the result. There will also be multiple table rows with this exact same cell <td>. So I need to target the <td> on this row only somehow. Can someone help me with this? Im not sure if I need the $.each but my php query is a mysql_fetch_row array even though the value returned will always be just one number.
Here is the HTML markup for the table cell I need the value in:
<td><label class="count"></label></td>
JS source code for class=count:
$(".count").append(output[index]);
ITS WORKING!!!! here is the code below
$(document).ready(function(){
$('.typeval').change(function(){
var movement = $(this).val();
var client_id = $(this).parent().siblings().find('.clientval').val();
var class_id = <? echo $class_id; ?>;
$count = $(this).parents('tr').find('label.count');
$.ajax({
type: "POST",
url: "movement_count.php",
data: {movement:movement, client_id:client_id, class_id:class_id},
dataType: "json",
success:(function(output) {
$.each(output, function(index, value){
//alert(value);
$count.append(output[index]);
}) // each
}) // success
}); // ajax
}); // .typeval
}); // document
Replace this
$("label.count<?php echo $client_id; ?>").append(output[value]);
With
$("label.count<?php echo $client_id; ?>").append(value);
Or alternately with this
$("label.count<?php echo $client_id; ?>").append(output[index]);
Hope this will help !!
Working code:
$(document).ready(function(){
$('.typeval').change(function(){
var movement = $(this).val();
var client_id = $(this).parent().siblings().find('.clientval').val();
var class_id = <? echo $class_id; ?>;
$count = $(this).parents('tr').find('label.count');
$.ajax({
type: "POST",
url: "movement_count.php",
data: {movement:movement, client_id:client_id, class_id:class_id},
dataType: "json",
success:(function(output) {
$.each(output, function(index, value){
//alert(value);
$count.append(output[index]);
}) // each
}) // success
}); // ajax
}); // .typeval
}); // document
Working on a project where I want to be able to delete a dynamic record using jQuery and PHP. I already have the option for users to add a record dynamically it is just getting the delete option to work. While I am trying to develop this function I have set the Delete to INSERT. Where I am having trouble is getting the value from the hidden field to delete-class.php (the bottom script). Below I have posted the code:
<form id="frmDelete" method="post" action="delete-class.php">
<input id="btnSubmit" type="submit"/>
<ul id="class">
<?php
//this is being loaded from a different page and is here just to reference the fields
while ($row = mysql_fetch_array($result)) {
echo '<li id="liClass" class="ui-widget"><img src="trash-can-icon.png" id='.$row["id_distance_class"].' class="delete"/>' . $row["class_section"] . '<input type="hidden" name="hdid" id="hdid" value="'.$row["id_distance_class"].'"/></li>';
?>
</ul>
</form>
<script>
$(function() {
$(".delete").click(function() {
$('#load').fadeIn();
var commentContainer = $(this).parent();
var id = $(this).attr("id");
var string = id ;
// console.log(id);
$.ajax({
type: "POST",
url: "delete-class.php",
data: $(this).serialize(),
cache: false,
success: function(){
commentContainer.slideUp('slow', function() {$(this).remove();});
$('#load').fadeOut();
}
});
return false;
});
});
</script>
//this is the delete-class.php
$results = mysql_query("INSERT INTO distance_class (class_section) VALUES ( '".$_POST['hdid']."' ) ");
The problem is you're not passing this information in your AJAX request. You're passing
data: $(this).serialize()
...presumably thinking this points to the form. It doesn't; it points to the deletion button clicked, since this code is running in the button's event handler callback.
Change the above to target the form.
main.php:
<SCRIPT type="text/javascript">
$("#btnSubmit").click(function () {
alert("What will i put here!");
});
</SCRIPT>
<input type = "submit" id = "btnSubmit" value = "Try IT!" />
<div id = "show_search2">
</div>
output.php:
<?php $val = $_POST['btnSubmit'];
echo "<H1>$val</H1>"; ?>
What specific jQuery functionality can get the value of the btnSubmit and access it through $_POST and output it to the div show_search2? I used prototype.js but it provides conflict with my other JS scripts in the index.
Note: all my script source is included in index and that's why I didn't include the source in this post.
Do you mean something like this:
$("#btnSubmit").click(function (e) {
e.preventDefault();
var submitVal = $(this).val();
$.ajax({
type: "POST",
url: "url_of_your_output.php",
data: {btnSubmit : submitVal},
success: function(response) {
$("#show_search2").html(response); //response from output.php
}
});
});