I have 2 buttons "removeD" and "updateRecord"(by id) and I have written same ajax for them as follows:
$.ajax({
url: 'DB/tableDisplay.php',
type: 'POST',
data: 'id='+uid,
dataType: 'html'
})
But in tableDisplay.php I want to have different functionality for both the buttons.How to check the id of the button clicked in php?
I've tried using :
if(isset($_POST['removeD'])){
}else{
}
But this is not working.
Try this:
$(document).ready(function(){
$('button').click(function(){
var id = $(this).attr('id');
$.ajax({
url: 'DB/tableDisplay.php',
type: 'POST',
data: {id: id},
dataType: 'html'
})
});
});
$('body').on('click','#id1',function(){
$.ajax({
url : 'url',
data : {variable:values},
type : 'html',
dataType : 'GET/POST',
success : function(data){
console.log('Message after Success');
},
error : function(){
console.log('Error Message')
}
});
});
In your url page you can find whether ajax request is posted or not
if(isset($_REQUEST['variable'])){
write your php code here........
}
Try the following code to detect the button clicked:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('.click-button').on('click',function () {
var button_id = $(this).attr('id');
if(button_id == 'removeD'){
alert('removeD button clicked');
}else if(button_id == 'updateRecord'){
alert('updateRecord button clicked');
}
});
});
</script>
</head>
<input type="button" class="click-button" id="removeD" value="removeD">
<input type="button" class="click-button" id="updateRecord" value="updateRecord">
You can use target it return which DOM element triggered the event. see below code its too easy and short to get id of clicked element.
$('button').click(function(e){
alert(e.target.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="remove">Remove</button><br>
<button id="update">Update</button><br>
Related
I am trying to pass data from a hyperlink to a page via a get request using Ajax
Initially I am able to do this without Ajax directly as below
<a id="link" href="page.php?id=12&pid=12" >pass data</a>
and I catch below in php
<?php $_GET['id'] ?>
<?php $_GET['pid']?>
now I want to do this using Ajax so the page does not need to load
I am trying with the below
<a class="choice" id="link" href="page.php?id=12&pid=12" >pass data</a>
$(document).ready(function() {
$(".choice").click(function(e) {
e.preventDefault();
$.ajax( {
<!--insert.php calls the PHP file-->
url: "votes.php",
method: "get",
dataType: 'html',
success: function(strMessage) {
$("#vote").html(strMessage);
}
});
});
});
but I am unable to get this to work. I need help on the correct implementation of send data using Ajax to my php file
First of all, a <script> tag is required for JavaScript part. Ajax URL can read from <a> tag href attribute by $(this).attr('href'). Also based on your code, a div with vote id is needed so <div id="vote"></div> added.
<a class="choice" id="link" href="page.php?id=12&pid=12" >pass data</a>
<div id="vote"></div>
<script>
$(document).ready(function() {
$(".choice").click(function(e) {
e.preventDefault();
$.ajax( {
url: $(this).attr('href'),
method: "get",
dataType: 'html',
success: function(strMessage) {
$("#vote").html(strMessage);
}
});
});
});
</script>
Document
pass data
<script>
$(document).ready(function() {
$("#choice").click(function(e) {
e.preventDefault();
$.ajax({
url: $(this).attr('href'),
method: "GET",
dataType: 'html',
success: function(strMessage) {
$("#vote").html(strMessage);
}
});
});
});
</script> </body>
I want to create an ajax post request that gets the value of the radio button then use it in a PHP conditional statement.
So far i have tried this code (all code is from one php file):
$(document).ready(function () {
$('.radio-buttons input[type="radio"]').click(function(){
var subject= $(this).val();
$.ajax({
url: 'home.php',
type: 'POST',
data: {
'subject': subject
},
success: function(response) {
alert(response);
}
});
});
});
<form id="form1" method="POST" class="radio-buttons ">
<input class="radio-filter" type="radio" name="subject" value="A">A</input>
<input class="radio-filter" type="radio" name="subject" value="B">B</input>
</form>
if (isset($_POST['subject'])) {
echo "Showing!";
}
the alert message shows the value of the radio button when I clicked them but the echo in PHP condition is not showing.
You are using alert(subject); which will just alert the value of the radio button as you've mentioned.
Change that line to alert(response); to alert the response on success.
The alert(subject) needs to be alert(response).
Change alert(subject) to alert(response)
because 'subject' is what you have been sent! so after it 'subject' will receipt by your PHP process and returned as response(echo "Showing") on value of the function an object success: function(response)
and alert the response to see data/text "Showing"
$(document).ready(function () {
$('.radio-buttons input[type="radio"]').click(function(){
var subject= $(this).val();
$.ajax({
url: 'home.php',
type: 'POST',
data: {
'subject': subject
},
success: function(response) {
alert(response);
}
});
});
});
the problem is that i am unable to insert data in my database without reloading
i have tested it without the note_sql.js and my note_sql.php works fine but there seems to be a problem in my js file if some body could point me in the right direction it would be wonderful
Index.php
<form id="noteform" action="note_sql.php" method="POST">
<input type="text" name="note"></input>
<input id="sub" type="submit" value="Save Note" />
</form>
<span id="result_note"><span>
<script type ="text/javascript" src="jquery/note_sql.js"></script>
note_sql.js
$("#sub").click(function(){
var data = $("#noteform: input").serializeArray();
$.post($("#noteform").attr("action"),data,function(info){$("result_note").html(info); });
clearInput();
});
$("#noteform").submit(function(){
return false;
});
function clearInput(){
$("#noteform :input").each(function(){
$(this).val('');
});
}
Use Jquery Ajax the working code is given below :
please add ID to Note Form Element :
<pre>
<script>
$(document).ready(function () {
$("#sub").click(function () {
var name = $("#note").val();
var message = $("#message").val();
$.ajax({
type: "post",
url: "note_sql.php",
data: "name=" + name,
success: function (data) {
alert(data);
}
});
});
});
</script>
</pre>
I'm trying to get data via ajax then send it through a form. However it doesn't seem to be working. Any ideas what im doing wrong?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form method="get" action="test.php">
<input id="myvar" type="hidden" name="albumid" />
<button type="submit" id="btnsubmit">Submit</button>
</form>
<script type="text/javascript">
$('form').submit(function() {
$.ajax({
url: "newAlbum.php",
success: function(data){
var album = data;
$('#myvar').val(album);
}
});
});
</script>
newAlbum.php
<?PHP echo '11'; ?>
test.php
<?php echo $_GET["albumid"]; ?>
Okay try adding as follows:
$('form').submit(function() {
$.ajax({
url: "newAlbum.php",
async:false,
success: function(data){
var album = data;
$('#myvar').val(album);
}
});
});
As someone else pointed out - you need to add the data parameter. But I would also use $(this).serialize(), since that will fetch all form input elements.
<script type="text/javascript">
$('form').submit(function() {
$.ajax({
url: "newAlbum.php",
data: $(this).serialize(),
success: function(data){
var album = data;
$('#myvar').val(album);
},
error : function(data) {
console.log(data);
}
});
});
</script>
Try receiving the data as JSON
$.getJSON()
I have a Google Instant style jQuery script which uses a jQuery tab script to define what search type the user wants. Currently, no matter what tab link you click on it will only query web.php?q=QUERY. Why could this be?
<script type="text/javascript">
$(document).ready(function(){
$("#query").keyup(function(){
var query=$(this).val();
var type=$("a").attr("id");
var yt_url=''+type+'.php?q='+query;
window.location.hash=''+type+'/'+query+'/';
$.ajax({
type:"GET",
url:yt_url,
dataType:"html",
success:function(results){
$('#results').html(results);
}
});
});
});
</script>
<ul>
<li>Web</li>
<li>Images</li>
<li>Videos</li>
<li>News</li>
<li>Social</li>
</ul>
<input type='text' id='query'>
<div id="results"></div>
You need to differentiate your clicks from your keyup. You need to store your request url and then change it when tabs are clicked, you also need to seperate your url and data for a get request.
So your js would be:
$(document).ready(function(){
$("#query").keyup(function(){
var query=$(this).val();
var type='web' //substitute text, default whatever
var yt_url=type+'.html';
alert(yt_url);
window.location.hash=''+type+'/'+query+'/';
$.ajax({
type:"GET",
url:yt_url,
data: type+"="+query,
error: function(a,b,c,d)
{
$("#results").html("A:"+a+"B: "+b+" C "+c);
},
dataType:"html",
success:function(results){
console.log("Result"+results);
}
});
});
$("a").click(function() {
var query=$("#query").val();
var type=$(this).attr('id');
var yt_url=type+'.html';
window.location.hash=''+type+'/'+query+'/';
$.ajax({
type:"GET",
url:yt_url,
data: type+"="+query,
error: function(a,b,c,d)
{
console.log("A:"+a+"B: "+b+" C "+c);
},
dataType:"html",
success:function(results){
console.log("Result"+results);
}
});
})
});