To display data I have to use onClick on the li tag otherwise I could pass data,
I need to submit clicked item from list, noted that this list is created by loop that mean this name is an array.
How can I submit(post) the value of a clicked (li:input)? I mean the current list index which I clicked?
<ul>
<?php
for($i=0;$i<5;$i++){?>
<li>.....value....</li>
<input type="hidden" name="hide[]" value="..value.."/>
<?php }?>
</ul>
I tried before foreach but I cant get my proper own value that I need.
This is only an example of onclick. You have to modify it as per your requirement.
$(document).ready(function(){
$("#class").click(function(){
var name = $(this).val();
$.ajax({
type:"POST",
data:{"name":name},
url:"page_name.php",
success:function(data){
$(".success").html(data);//Here you can show success data
}
});
});
});
Related
I have fetched the values(card details) from an array and put them in an html table, I have also added the delete button for deleting the particular card.
I am deleting this through ajax. When i click on the delete button of the first row, it works perfect but when i click on the other delete buttons from 2nd or 3rd row, there is no action.
Please suggest the correct path to sort out this problem.
Thanks in advance
Here is my code
<tr>
<td><?php echo $val['last4'];?></td>
<td><?php echo $val['exp_month'];?></td>
<td><?php echo $val['exp_year'];?></td>
<td><button id = "del">Delete</button></td>
</tr>
Ajax part
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$('#del').click(function() {
//var a=document.getElementById("").value;
var val0 = $('#id').val();
var val01 = $('#cust').val();
var fade = document.getElementById("fade");
var show = function(){
fade.style.display = "block";
}
show();
$.ajax({
type: 'POST',
url: 'mywebsite.com/deleting.php',
data: { card_id: val0,cust_id: val01 },
success: function(response) {
fade.style.display = "none";
// alert(response);
mystring = response.replace(/^\s+|\s+$/g, "");
$('#result11').html(mystring);
}
});
});
</script>
You have the same id on your buttons. Id's must be unique within the html document and can not be shared between multiple elements. Read more about the html id attribute
Change the button to use a class instead:
<td><button class="del">Delete</button></td>
Then change your jQuery to bind to that class instead:
$('.del').click(function(e) {
// Since we're using ajax for this, stop the default behaviour of the button
e.preventDefault();
// Get the value from the clicked button
var val0 = $(this).val();
I also added the event e in the function call, and stopped the default behaviour of the button (which is to submit the form) when it's clicked.
You need to give delete buttons a class and bind event on that class not with id. Then on bind function select values from that row elements and then pass them to Ajax.
I built a for each loop that pulls back several rows from the database. Each row it pulls has a link, and a hidden input box with a value of posting_id. This link will work similar to a like button on facebook in a way. The hidden input box just stores the posting_id. When you click the "like" link, it sends over the posting_id to a jQuery page and pings back a page called community to tell it the user has "liked" the post.
Here's the problem
I'm pulling several rows, and it seems that only the top row being pulled is actually sending the data to the jQuery page when you click the "like" button. If I click on any other "like" button other than the top one it will not work at all.
Jquery Page
$('.bump_link').click(function(){
var posting_id = $('.posting_id').val();
$.post("community.php", {
posting_id: posting_id
});
alert(posting_id);
$(this).toggleClass("bumped");
});
Foreach Loop
foreach ($result as $value) {
$group_postings .= '
<input type="text" class="posting_id" value="'.$value['posting_id'].'">
<div id="bump_icon" class="bump_link"></div>
<span id="counter"></span>
';
}
I hope I've made the issue clear, it was and is difficult to explain.
The problem is you are using a class to get the posting_id, since all the hidden fields have the same class only the first elements value is passed no matter what button you click.
i recommend using this html, without the hidden input, pass the value as a data attribute
<div id="bump_icon" class="bump_link" data-postid="'.$value['posting_id'].'">
and in this js, get the posting id from the data attribute
$('.bump_link').click(function(){
var posting_id = $(this).data('postid'); // get the posting id from data attribute
$.post("community.php", {
posting_id: posting_id
});
alert(posting_id);
$(this).toggleClass("bumped");
});
You are calling val() on selector you might return more then one elements, but val() will give you the value of one (first) element only. You can use map() to get all values of input having class posting_id
var posting_id_values = $('.posting_id').map(function(){
return this.value;
}).get().join(',');
Your problem is this line:
var posting_id = $('.posting_id').val();
This will return the first posting_id value every time, not the one associated with the bump_link you are clicking on.
There are lots of ways to solve this. One way is to use .prev() to select the previous element:
var posting_id = $(this).prev('.posting_id').val();
this selects the previous posting_id element from the current div. This relies on the fact that the posting_id element is before the associated bump_link div.
If you want to send just the posting_id of the clicked button, you could change your PHP/HTML code like this:
foreach ($result as $value) {
$group_postings .= '
<div id="bump_icon" class="bump_link">
<input type="text" class="posting_id" value="'.$value['posting_id'].'">
</div>
<span id="counter"></span>
';
}
And your JS code like this:
$('.bump_link').click(function(){
var posting_id = $(this).find('.posting_id').val();
$.post("community.php", {
posting_id: posting_id
});
alert(posting_id);
$(this).toggleClass("bumped");
});
use on delegated event since you are adding the content dynamically and
$(this).prev('.posting_id') // to get the posting data value
$(document).on('click','.bump_link',function(){
var posting_id = $(this).prev('.posting_id').val(); //<-- use $(this) reference
$.post("community.php", {
posting_id: posting_id
});
alert(posting_id);
$(this).toggleClass("bumped");
});
I'm missing something in my code. I have a list of text boxes that are meant for percentage values, and there could be numerous inputs.
// loop through unknown inputs with different values
<input name="DESIREDPERCENT[<?php echo $recid; ?>]" class="percinputbox" />
// end loop
// attach click event to this element
<span id="updatepercs">Update Percentages</span>
I then have a simple span element to send all the inputs with the class percinputbox
$(document).ready(function(){
$('#updatepercs').click(function(){
var allinputs = $("input.percinputbox").serialize();
console.log(allinputs); //DESIREDPERCENT%5B73%5D=50.00&DESIREDPERCENT%5B104%5D=50.00
$.ajax({
url:'update.php',
data:"formId=updatepercentages" + allinputs,
success:function(response){ alert(response); }
});
});
I have my php listening for the $.ajax:
update.php
<?php
if($_POST['formId'] == 'updatepercentages'){
foreach( $_REQUEST['DESIREDPERCENT'] as $key ){
echo $key;
}
}
?>
So far I'm only getting one input value. So I'm definitely doing the sending wrong.
I'm open to a better/optimized way here. I generally use the <form> tag to submit forms, but I want to know how to submit these inputs with jquery.
You are missing an & between formId=updatepercentages and allinputs
data:"formId=updatepercentages&" + allinputs,
I have a jQuery tabbed search script that gets content from a PHP file defined by the link and parses it to the results div element. The ID for each link is used to pull content from the correct file however type_ is needed in the link ID for the tabs to work which then doesn't pull content from the right place. How can I resolve this issue?
This is my current jQuery code:
$(document).ready(function(){
$("[id^=type_]").click(function(){
type=$(this).attr("id");
$("[id^=type_]").removeClass("selected");
$("#"+type).addClass("selected");
return false;
});
$("#type_tab1").click();
$("#query").keyup(function(){
var query=$(this).val();
var yt_url=''+type+'.php?q='+query;
if(query==''){
window.location.hash='';
document.title='My Search Script';
}
$.ajax({
type:"GET",
url:yt_url,
dataType:"html",
success:function(results){
$('#results').html(results);
}
});
});
});
This is my HTML code:
<ul>
<li><a id="type_tab1" href="javascript:void(null);">Tab1</a></li>
<li><a id="type_tab2" href="javascript:void(null);">Tab2</a></li>
<li><a id="type_tab3" href="javascript:void(null);">Tab3</a></li>
</ul>
If I've understood your question correctly, you want to use only the part after the underscore character when you send your GET request.
If that's the case, you can do this in your click event hander:
type=$(this).attr("id").replace("type_", "");
Note that you can simplify this, because you don't need to use jQuery to get the id attribute:
type=this.id.replace("type_", "");
I'm generating an html file which looks like:
<tr id="ID001" property1="PROPERTY001"><td><input type="checkbox"
name="row_checkbox_ID001"></td><td>...</td><td>...</td></tr>
<tr id="ID002" property1="PROPERTY002"><td><input type="checkbox"
name="row_checkbox_ID002"></td><td>...</td><td>...</td></tr>
When the user selects individual rows for deletion, how can I (through jQuery), pass this to a php script?
I will need to build something like this:
$(document).ready(function () {
$('#contact-form input.contact-delete').click(function (e) {
e.preventDefault();
$.get("deleterecord.php", ...);
});
});
There can be 0, 1 or multiple rows... The HTML being generated is under my control and can be modified.
Clarification:
I want to have a button above all these rows which the user can click on AFTER he has selected the rows from the table.
<div id='contact-form'><h2>Contacts</h2>
<input type='button' name='contact-delete' value='Delete Record(s)'
class='contact-delete'/>
The TRs need to be deleted, but BEFORE that, the deleterecord.php script needs to be called with the TR ids.
Use HTML arrays
<input type="checkbox" name="chk[]" value="01234">
<input type="checkbox" name="chk[]" value="98765">
You could create a JSON object containing details of any rows selected (ID's or whatever you need) and send that to your php script. Check out this article on json, php + jquery.
I believe, you are looking for similar behavior:
$('#contact-form input.contact-delete').click(function (e) {
var $this = $(this);
// find the table row, in which are elements contained
var $tr = $this.closest('tr');
// take id
var id = $tr.attr('id');
// ajax with id
$.get("deleterecord.php?id="+id, function (data) {
// remove table row on success
$tr.remove();
});
e.preventDefault();
});
Sorry for answering my own question, but the SO post at: Getting all selected checkboxes in an array neatly solves my problem!
For future visitors to this page, pay attention to variable names in your HTML and how you're accessing the input checkboxes in jQuery!