When I click all the button output will be same (i.e 1).I want to display specific value of specified button for EXAMPLE:- When I click button 1 then It must display output as 1 and when I click 2 it must display output as 2.please help me.
<?php
for ($i=0; $i < 10 ; $i++) {
echo '<br><button value="'.$i.'" class="my_remark_btn">'.$i.'</button>';
}
?>
<script type="text/javascript">
$('.my_remark_btn').click(function(){
remark_aftr_click();
});
function remark_aftr_click(){
var k = $(".my_remark_btn").val();
$.ajax({url: "my_remark_act.php",
cache: true,
type: "POST",
data: {go:k},
success: function(data_remark_mi){
alert(data_remark_mi);
}
});
}
</script>
my_remark_act.php:-
<?php echo $_POST['go']; ?>
$('body').append("<button data-value='val' class='my_remark_btn'>val</button>")
$(document).on('click', '.my_remark_btn', function() {
alert($(this).attr('data-value'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Button has no value.
Use data attribute like data-value.
Get it like $(this).attr('data-value') using this context for clicked button.
Use event delegation for dynamically added elements.
Try This Example.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$("button").click(function() {
alert(this.id); // or alert($(this).attr('id'));
});
});
</script>
</head>
<body>
<button id="some_id1"></button>
<button id="id2"></button>
<button id="id3"></button>
<button id="id4"></button>
<button id="id5"></button>
</body>
</html>
You can use JQuery. try the below code.
// this will fire for all button having class '.my_remark_btn'
$('.my_remark_btn').click(function(){
// using $(this) you will get the current element
var value = $(this).val();
console.log(value);
});
In you code you are accessing value by var k = $(".my_remark_btn").val(); , This will only return value of the first button with class my_remark_btn.
Have a try of this
jQuery
$('.my_remark_btn').click(function(){ // when a button is clicked
var value = $(this).value; // get the value of that specific button
alert(value); // alert the value to the page (to make sure it is correct)
remark_aftr_click(value); // run function, with value as a parameter
});
function remark_aftr_click(val){
$.ajax({
url: "my_remark_act.php",
cache: true,
type: "POST",
data: {go: val}, // post data to Ajax with CORRECT value
success: function(data){
alert(data); // alert returned data
}
});
}
Why your code was not working:
When you were retrieving the value of .my_remark_btn before, you were only ever getting the value of the first element with that specific class.
How you can get it to work:
Instead, you need to pass the value as a parameter within your function (while using this as a selector to get the value of that specific button).
Hope this helps :-)
You need $(this).attr("value") like below:-
<script type="text/javascript">
$('.my_remark_btn').click(function(){
var k = $(this).attr("value");
$.ajax({url: "my_remark_act.php",
cache: true,
type: "POST",
data: {go:k},
success: function(data_remark_mi){
alert(data_remark_mi);
}
});
});
</script>
Example:-
$('.my_remark_btn').click(function(){
var k = $(this).attr("value");
alert(k);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button value ="1" class="my_remark_btn">1</button><br>
<button value ="2" class="my_remark_btn">2</button>
Related
I want to store the value "20_2018" (for example) with an id in my database. I want to count clicks on each downloading.
This is what I tried:
<html>
<body>
<a id="20_2018" rel="link1" href="folder.pdf">Download</a>
<script type="text/javascript">
$(document).ready(function(){
$(\'a[rel="link1"]\').click(function() {
$.ajax({
type:'POST',
url: 'send.php', // folder for sending value in id to the database
data: 'id='+$(this).attr("id"), // take the value in the id
async: false
});
return true;
});
</script>
</body>
</html>
Somehow this does not work. How can I implement a click count for downloads?
First, prevent the default action with preventDefault, then send your request. After success, bring them to the file URL.
$(document).ready(function(){
$('a[rel="link1"]').click(function(event) {
event.preventDefault();
// Gets href of the clicked anchor
var href = $(this).attr('href');
$.ajax({
type:'POST',
url: 'send.php',
data: 'id='+$(this).attr("id"),
success: function(){
// After recording click count, bring them there
location.assign(href);
},
error: function(){
alert('failed');
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="20_2018" rel="link1" href="folder.pdf">Download</a>
I want to increment count field in database when a link is clicked in php file.
So, I've added the following jquery part to my .php file. But still, it doesn't work. Please help!
<body>
click here
<script>
$(function ()
{
$('#click').click(function()
{
var request = $.ajax(
{
type: "POST",
url: "code.php"
});
});
}
</script>
</body>
code.php:
<?php
$conn=mysqli_connect("localhost","root","","sample");
mysqli_query($conn,"UPDATE e set count=(count+1) WHERE sid='1'");
mysqli_close($connection);
?>
You made a several mistakes in your code.
Update
You can send your SID input type text from ajax with data and you can get the value in your php file with the $sid = $_POST['sid'].
<body>
click here
<input type="text" value="" name="sid" id="sid">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(e){
$('#click').click(function(event)
{
var sidvalue = $("#sid").val(); /*from here you get value of your sid input box*/
event.preventDefault();
var request = $.ajax(
{
type: "POST",
url: "code.php",
data: 'sid='+sidvalue ,
success: function() {
window.location.href = 'https://www.google.com/';
}
});
});
});
</script>
After the ajax success response you can make redirect to your desire location.
Code.php
<?php
$conn=mysqli_connect("localhost","root","","sample");
$sid = $_POST['sid']; // use this variable at anywhere you want.
mysqli_query($conn,"UPDATE e set count=(count+1) WHERE sid='1'");
mysqli_close($conn);
?>
in code.php in mysqli_close you should use $conn not $connection.
Go with this code. It might help you. I have just tested all the things in localhost. This is working perfect.
use preventDefault() when click event is called.check jquery :
<body>
click here
<script>
$(function ()
{
$('#click').click(function(e)
{
e.preventDefault();
var request = $.ajax(
{
type: "POST",
url: "code.php"
});
});
}
</script>
</body>
Redirect your link on ajax success. Like this -
<body>
click here
<script>
$(function ()
{
$('#click').click(function()
{
var request = $.ajax(
{
type: "POST",
url: "code.php",
success: function(response){
window.location="http://www.google.com";
}
});
});
}
</script>
I made this following function :
function populatetable(){
$.ajax({
type: 'GET',
url: 'backend/conn.php?action=populatetable'
}).done(function(data){
var response = data.data;
$.each(response, function(key, element){
row += '<tr> <<td>' + element.phone + '</td> <td> <button class="trigger"> Edit Data </button> </td> </tr>';
});
$('table.loadeddata > tbody').html(row);
})
}
and stored it to a file called script.js. Then in another file named index.php I included that file within the tag <script src='script.js'></script>
and below the above script tag, I made once again a <script> and put this following code into the second <script> tag :
$('document').ready(function(){
populatetable();
$('button.trigger').click(function(){
window.alert('button works');
});
});
why did the button not showing the alert when clicked?
The button appeared perfectly, it seems that the closure caused the problem but I'm not sure.
the button is dynamically created, so it is not in the DOM at load time. try:
$('body').on('click', '.trigger', function(){
window.alert('button works');
});
fiddle https://jsfiddle.net/sn36oyfo/
Read more about event delegation
I'm trying to write a function to get the value from a select statement, and echo the value to the screen. It works when I put the exact select name inside of the ajax function, but it stopped working when I tried to pass the select name through the parameters. I know it was passed through the parameter successfully, and I know it was the right select name by alerting it to the screen inside the function when I was testing it. So I think the actual problem might be on this line:
data: { select: $('select[name=theName]').val()},
But I'm not sure what is wrong with it. I have 2 versions of my codes below. The first version works, and the second version doesn't. The first version has the exact select name inside the parameter, and the second version is passed through the parameter called 'theName'. Please take a look:
ajax.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript">
function ajax(url,theName,id) {
alert(theName)
$.ajax({
type: "POST",
url: url,
data: { select: $('select[name="select1"]').val()},
error: function(xhr,status,error){alert(error);},
success:function(data) {
document.getElementById( id ).innerHTML = data;
}
});
}
</script>
test1
<?php
echo "<select name = 'select1' onchange = 'ajax(\"test2.php\",\"select1\",\"output\")'>";
?>
^---This version works.
ajax.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript">
function ajax(url,theName,id) {
alert(theName)
$.ajax({
type: "POST",
url: url,
data: { select: $('select[name=theName]').val()},
error: function(xhr,status,error){alert(error);},
success:function(data) {
document.getElementById( id ).innerHTML = data;
}
});
}
</script>
test1
<?php
echo "<select name = 'select1' onchange = 'ajax(\"test2.php\",\"select1\",\"output\")'>";
?>
^---This version does not work.
You have omitted double quotes and concatenation here:
data: { select: $('select[name="'+theName+'"]').val()},
data: { select: $('select[name=' + theName + ']').val()},
I currently have this javascript/ajax request for my advanced search page
<script>
// window.setInterval(function()
// {
$(function ()
{
var SearchTerm = '<?php echo $_POST['Search']; ?>';
$.ajax({
url: 'Ajax/AjaxAdvSearch.php?SearchTerm='+SearchTerm, dataType: 'json', success: function(rows)
{
$('#output').empty();
for (var i in rows)
{
var row = rows[i];
var id = row[0];
var FunctionName = row[1];
$('#output').append("<a href='Page.php?ID="+id+"'>"+FunctionName+"</a><br>");
}
}
});
});
// }, 5000);
</script>
The $_POST['Search']; is obtained from a HTML textarea:
<textarea name='Search' style='width: 100%; height: 150px;'></textarea><br>
I want to dynamically update my javascript var each time the user types into the textarea, without the user having to press the submit..
so whilst the user is typing, the var SearchTerm is dynamically updated each time the textarea is updated with content.
Could anyone provide some assistance?
Use the .change() method in jQuery
var variableToUpdate = '';
$('#Search').change(function() {
variableToUpdate = $(this).val();
// call your search from within if you want
});
For search-as-you-type tutorials and plugins...
http://dbachrach.com/blog/2007/04/spotlight-like-search-as-you-type-with-css-ajax-js/
http://www.jquery4u.com/plugins/14-jquery-live-search-plugins/
Let me provide you an example
<html>
<head><style>
</style>
<script>
var DataCon;
function UpdateDIV(){
document.getElementById('updater').innerHTML=DataCon;
}
</script>
</head><body>
<div id="updater">
</div>
<textarea onkeydown="DataCon=this.value;UpdateDIV()"></textarea>
</body>
</html>
And here you can see, as you type a global variable updates and along with it, to check its working a UpdateDIV function also given which updates the div with id updater...
Now just assign certain vars and get your job done