jqlib.js is https://code.jquery.com/jquery-3.2.1.js
nothing is happing i m trying to add to number using ajax using jquery 3.2.1.js
cant find the error in this code can anyone tell me where is the error in this code
add.php
<html>
<body>
<script type="text/javascript" src="jqlib.js"></script>
<form id="tt">
<table>
<tr>
<td>Enter first Number</td>
<td><input type=text name=t1 ></td>
</tr>
<tr>
<td>Enter 2nd Number</td>
<td><input type=text name=t2></td>
</tr>
<tr>
<td><input type=button value="OK" onClick="cal()"></td>
</tr>
<tr>
<td>Addition</td>
<td><input type=text name=t3 id="tt1"></td>
</tr>
</table>
</form>
</body>
</html>
<script type="text/javascript">
function cal()
{
var frm = $("#tt");
$.ajax(
{
type:"POST",
url:"ajax.php",
data:frm.serialize(),
sucess:function (data)
{
$("#tt1").val(data);
}
});
}
</script>
ajax.php
<?php
if(!empty($_POST))
{
if(($_POST['t1']!="" )|| ($_POST['t2']!=""))
{
$z = $_POST['t1'] + $_POST['t2'];
}
else
{
$z ="please enter data";
}
echo $z;
}
else
{
echo "please enter data";
}
?>
you have a typo error:
sucess should be success
Change your script as follow and check whether any alert is showing or not
<script type="text/javascript">
function cal()
{
var frm = $("#tt");
$.ajax(
{
type:"POST",
url:"ajax.php",
data:frm.serialize(),
sucess:function (data)
{
$("#tt1").val(data);
alert('Success: '+data); ///---> this show alert with success and content
},
error:function(a,b,c)
{
alert(c); //---> If error happen it will show alert();
}
});
}
</script>
Related
I design a simple page were user can put name, password and image using html.
I try to sent those data using ajax to specific php page, but I cannot implement this.
how I do this thing
Html code
<?php include('connection.php'); ?>
<form id="form" enctype="multipart/form-data">
<table>
<tr>
<td>Name:</td>
<td><input type="name" id="name"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" id="pass"></td>
</tr>
<tr>
<td>Photos:</td>
<td><input type="file" id="photos"></td>
</tr>
<tr>
<td><input type="submit" id="go"></td>
</tr>
</table>
</form>
Jquery and ajax
<script>
$(document).ready(function(){
$('#go').click(function(){
var img_name = $('#img_name').val();
var name = $('#name').val();
var pass = $('#pass').val();
$.ajax({
type : "POST",
url : "singup_submit.php",
data : { img_name:img_name, name:name, pass:pass},
success : function(done){
alert(done);
}
});
});
});
</script>
Php code
<?php
include('connection.php');
if(isset($_POST)){
$name = $_POST['name'];
$pass = $_POST['pass'];
$img_name=$_FILES['img_name']['name'];
$qr="INSERT INTO data (name,pass,img_name) VALUES ('$name','$pass','$img_name')";
$ex=mysqli_query($con,$qr) or die(mysqli_error($con));
if($ex==1)
echo 'done';
else
echo 'not done';
}
Follow this code ..It may help you
<script>
$(document).ready(function(){
$("#go").click(function(){
var name = $("#name").val();
var pasword = $("#password").val();
var photos = $("#photos").val();
if(name==''||pass==''||photos==''){
alert("Please Fill All Fields");
}
else{
$.ajax({
type : "POST",
url : "singup_submit.php",
data : formData,
cache : false,
success: function(result){
alert(result);
}
});
}
return false;
});
});
</script>
you are not sending any file in your ajax request.
$(document).ready(function(){
$("#go").on('submit',function(e){
e.preventDefault()
$.ajax({
url: 'singup_submit.php',
type: 'POST',
data: new FormData(this),
contentType: false,
processData: false,
success: function(response){
alert(done);
},
error: function(data){
console.log("error");
console.log(data);
}
},
});
});
});
and then take data from global variables in php as you are doing now.
and please assign name to your form fields like so
<form id="form" enctype="multipart/form-data">
<table>
<tr>
<td>Name:</td>
<td><input type="name" name="name" id="name"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" id="pass"></td>
</tr>
<tr>
<td>Photos:</td>
<td><input type="file" name="img" id="photos"></td>
</tr>
<tr>
<td><input type="submit" name="submit" id="go"></td>
</tr>
</table>
</form>
and it should work.
I have two same name multiple input fields. I want to send all fields value from another page using jquery ajax post method but i am not getting all rows input fields value. Please review my code.
Javascript code
<script type="text/javascript">
function getValue()
{
$.post("paidamt.php",
{
paidamt : $('#paidamt').val(),
uid : $('#uid').val()
},
function( data){
/*alert(data);*/
$("#divShow").html(data);
});
}
</script>
Html Code
<div>
<form method="post">
<table border="1">
<tr>
<th>Product</th>
<th>Price</th>
<th>Paid Amount</th>
<th>Check</th>
</tr>
<?php
$sql = mysql_query("SELECT * FROM `tbldemo`");
while ($result = mysql_fetch_array($sql)) {
?>
<tr>
<td><?php echo $result['pname']; ?> </td>
<td><?php echo $result['price']; ?></td>
<td><input type="text" name="paidamt[]" id="paidamt"></td>
<td><input type="checkbox" name="uid[]" id="uid"
value="<?php echo $result['id']; ?>"></td>
</tr>
<?php }
?>
</table><br>
<input type="button" name="submit" id="submit"
onclick="getValue(1)" value="Save Amt.">
</form>
</div>
<div id="divShow">
</div>
Try this one
var paidamt = $("input[name=paidamt]").map(function(){
return $(this).val();
}).get().join(",");
var uid = $("input[name=uid]").map(function(){
return $(this).val();
}).get().join(",");
$.ajax(
{
type: "POST",
url: 'paidamt.php',
data:
{
paidamt:paidamt,
uid:uid
}
});
Firstly you have given the input elements the same id which is repeated in the loop. This will end up in your HTML being invalid, you should change the id to class:
<form method="post">
<table border="1">
<tr>
<th>Product</th>
<th>Price</th>
<th>Paid Amount</th>
<th>Check</th>
</tr>
<?php
$sql = mysql_query("SELECT * FROM `tbldemo`");
while ($result = mysql_fetch_array($sql)) { ?>
<tr>
<td><?php echo $result['pname']; ?> </td>
<td><?php echo $result['price']; ?></td>
<td><input type="text" name="paidamt[]" class="paidamt"></td>
<td><input type="checkbox" name="uid[]" class="uid" value="<?php echo $result['id']; ?>"></td>
</tr>
<?php }
?>
</table><br>
<button type="submit" name="submit" id="submit">Save Amt.</button>
</form>
To actually send the input values in the AJAX request you can simply serialize() the containing form when the form is submit:
$(function() {
$('form').submit(function(e) {
$.ajax({
url: "paidamt.php",
type: 'POST',
data: $(this).serialize(),
success: function(data) {
$("#divShow").html(data);
});
});
});
});
I suggest to add class instead of id, since identically class can be repeated but id should not.
<script type="text/javascript">
function getValue()
{
var paidamtval = [];
$('#paidamt').each(function(){
paidamtval.push($(this).val());
});
$.post("paidamt.php",
{
paidamt : paidamtval,
uid : $('#uid').val()
},
function( data){
/*alert(data);*/
$("#divShow").html(data);
});
}
</script>
Since you will have many of these, id - needs to be unique, which in your case isn't, so remove "id="paidamt"
<td><input type="text" name="paidamt[]" id="paidamt"></td>
That's your first mistake. And secondly don't use $.post, to submit this form. Either remove AJAX submit, or bind form using something like jQuery Form plugin.
You try this code
$('document').ready(function(){
$('#submit').click(function(){
jQuery.ajax({
type: "POST",
url: "paidamt.php",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(html){
try{
$("#divShow").html(data);
}catch (e){
alert(JSON.stringify(e));
}
},
error : function(e){alert("error "+JSON.stringify(e)); }
});
});
});
in you paidamt.php file
$paidamt=$_POST['paidamt'];// its can array values
print_r($paidamt);// result display
I am new in PHP and I made simple login page where I applied a ajax script to check "user already exist or not".
but script always returns me "user already taken" message whether I inserted new value. I checked whole code I cannot get the clue where I did mistake.
admin.php
==========
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src ="usernameavail.js"></script>
</head>
<form action="admin.php" method="post" name="loginfrm">
<table width="600" border="0">
<tr>
<td>User Name</td>
<td><input name="txtusername" type="text" maxlength="15" id="txtusername" /></td>
<span id="message"></span>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>Password</td>
<td><input name="txtpass" type="password" maxlength="7" />
<span style="color:#FF0000">*</span> Minimum 5 alphanumeric
</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="submit"/></td>
</tr>
<tr>
<td>Forget password?</td>
<td>New Register</td>
</tr>
</table>
</form>
=========
check.php
=========
<?php
include ("includes/dbConfig.php");
$username=$_POST["txtusername"];
$query=mysql_query("SELECT * from logininfo where username='$username' ");
$find=mysql_num_rows($query);
echo $find;
?>
===================
usernameavail.js
===================
$(document).ready(function()
{
$("#txtusername").change(function()
{
$("#message").html("<img src='images/ajax-loading.gif' /> checking...");
var username= $("#txtusername").val();
$.ajax(
{
type:"post",
url:"check.php",
data:"username="+username,success:function(data)
{
if(data==0)
{
$("#message").html("<img src='images/accept.png' /> Username available");
}
else
{
$("#message").html("<img src='images/error.png' /> Username already taken");
}
}
});
});
});
in javascript file, put quotes for zero
if(data == '0')
Change this to
$.ajax(
{
type:"post",
url:"check.php",
data:"username="+username
this
$.ajax(
{
type:"post",
url:"check.php",
data: username:username
It's better if in check.php you replace
echo $find;
with
if($find>0)
{
echo 'something';
}
And in your ajax call check if data has value.
Change this line
'data:"username="+username,success:function(data)'
to
data:{"txtusername":username},success:function(data)
And this will work
i am making a website in which i am to embbed the functionality of delete using multiple checkbox. here is my code. my problem is
1. Ajax call is not working.
2. how can i make search from database for array .
<?php
if(isset($_POST['Delete']))
{
$array=$_POST['check_box'];
}
?>
<form method="post" id="form">
<table width="200" border="1">
<tr>
<td>select</td>
<td>NAme</td>
<td>Action</td>
</tr>
<?php
while($selectnumberarr=mysql_fetch_array($selectnumber))
{
?>
<tr>
<td><input type="checkbox" name="check_box[]" class="check_box" id="<?php $selectnumberarr[0]; ?>" /> </td>
<td><?php echo $selectnumberarr[1]; ?></td>
</tr>
<?php
}?>
<input type="submit" name="Delete" id="delete">
</table>
</form>
and below is my ajax and javascript code.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#delete').click(function() {
$.ajax({
type: "POST",
url: "checkbox.php",
data: $('#form').serialize(),
cache: false,
success: function(html)
{
alert("true");
}
});//end ajax
});
});
</script>
any help would be appriciated
your code is almost correct. You need to remove `onChange="show()" for input checkbox, because if you have jquery then you don't need to put events on HTML elements.
Use jquery 'on' method for compatibility for latest php library.
Replace your jquery code with following jquery code :-
<script>
$(document).ready(function(){
$('#delete').on('click',function()
{
var cat_id = $('.check_box:checked').map(function() {
return this.id;
}).get().join(',');
console.log(cat_id);
$.ajax({
type: "POST",
url: "checkbox.php",
data: { "kw ":cat_id },
datatype:'json',
success: function(html)
{
alert("true");
}
});//end ajax
});
});
</script>
Use ".check_box" instead of "element" in jquery to prevent checks for all checkboxes, instead of desired ones.
Hope it helps.
Why you don't use an array for sending the checkboxes like:
HTML part:
<?php
if (isset($_POST['check_box'])) {
var_dump($_POST['check_box']);
echo "ajax call is working";
}
?>
<form id="form">
<table width="200" border="1">
<tr>
<td>select</td>
<td>NAme</td>
<td>Action</td>
</tr>
<?php
while ($selectnumberarr = mysql_fetch_array($selectnumber)) {
?>
<tr>
<td><input type="checkbox" name="check_box[]" class="check_box" value="<?php echo $selectnumberarr[0]; ?>" /> </td>
<td><?php echo $selectnumberarr[1]; ?></td>
</tr>
<?php
}
?>
</table>
<input type="button"name="delete" id="delete" value="Delete" />
</form>
JQuery part:
<script type="text/javascript">
$(document).ready(function(){
$('#delete').click(function() {
$.ajax({
type: "POST",
url: "checkbox.php",
data: $('#form').serialize(),
cache: false,
success: function(html)
{
alert("true");
}
});//end ajax
});
});
</script>
So you can easily get an array of the selected checkboxes in php with:
$idsArray = $_POST["check_box"];
this looks now like:
array(
"1", "2","etc.."
);
so this array contains all the ids of the selected checkboxes for delete.
<script>
function loadXMLDoc() {
$("input[class=search]").bind("keyup",function(){
$.get("search.php?search="+$(this).val(),
function(data){
if(data==1) {
alert("this is valid search")
} else {
alert("this is a right user search");
}
}
);
});
}
</script>
Below is the button image code
<table width="165" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="images/search_box_left_im.png" width="3" height="28" />
</td>
<td class="inputbox_bg" width="118px">
<input type="text" name="search" class="username">
</td>
<td>
<input type="image" onclick="loadXMLDoc()" src="images/search_go_btn.png" border="0" width="44" height="28" />
</td>
</tr>
</table>
It is going to the function but not executing the ajax code
Change this:
<script>
function loadXMLDoc()
{
$("input[class=search]").bind("keyup",function(){
$.get("search.php?search="+$(this).val(),function(data){
if(data==1){
alert("this is valid search")
}else{
alert("this is a right user search");
}
})
})
}
</script>
to this:
<script>
function loadXMLDoc()
{
$("input[name=search]").bind("keyup",function(){ //<- important bit here
$.get("search.php?search="+$(this).val(),function(data){
if(data==1){
alert("this is valid search")
}else{
alert("this is a right user search");
}
})
})
}
</script>
$(document).ready(function(){
$(".username").keyup(function(event){ //<- important bit here
$.get("search.php?search="+$(this).val(),function(data){
if(data==1){
alert("this is valid search")
}else{
alert("this is a right user search");
}
});
});
$('input[type=image]').click(function() {
$('.username').keyup();
});
});
Please try this:
<script>
function loadXMLDoc() {
$.ajax({
type: 'GET',
url: 'search.php?search='+$(".username").val(),
success: function(data){
if(data==1) {
alert("this is valid search")
} else {
alert("this is a right user search");
}
}
});
}
</script>
Your <input type="image" ... /> is a submit button for the form.
What you want to do is change its default behaviour (submitting form) to alternative - execute some code.
Here is a good question about this: event.preventDefault() vs. return false
Besides that, you are assigning an event listener twice - once in your <input onclick="" /> and second time inside the event handler $("input[class=search]").bind()
Try removing your <input onclick="" /> and define event listener in $(document).ready():
<script>
$(document).ready(function() {
$("input[class=search]").bind("keyup",function(e){
e.preventDefault();
$.get("search.php?search="+$(this).val(),function(data){
if(data==1){
alert("this is valid search")
}else{
alert("this is a right user search");
}
});
});
});
</script>
...
<input type="image" src="images/search_go_btn.png" border="0" width="44" height="28" />
...