how to fetch a result from php page using javascript? [duplicate] - javascript

This question already has answers here:
jQuery Ajax POST example with PHP
(17 answers)
Closed 7 years ago.
what i am trying is to fetch a data from my php page using javascript,but it seems that the javascript is not working properly.in this when click my submit button the datas should be sent to the action page,but i dont want to go to the php page and the result in php page should be displayed in the intial page(in this at div id:result)
view of the page
enter image description here
this is my index page,this is just example view
register.html
<!DOCTYPE>
<html>
<head>
<title>REGESITER</title>
<script src="script/jquery-1.11.2.min.js" type="text/javascript"></script>
<script>
$("sub").click( function() {
$.post($("#myform").attr("action"),
$("#myform :input").serializeArray(),
function (data) {
$("#res").empty();
$("#res").html(data);
});
$("#myform").submit( function() {
return false;
});
});</script>
</head>
<body>
<form id="myform" action="helper.php" method="post">
FIRSTNAME:<input type="text" name="txtfname" id="fname">
<br><br>
LASTNAME:<input type="text" name="txtlname" id="lname">
<br><br>
AGE:<input type="text" name="txtage" id="age">
<br><br>
<button id="sub">SUBMIT</button>
</form>
<div id="res">Result</div>
</body>
</html>
this is my php file,from where the echoed result is to fetched
helper.php
<?
$fname=$_POST['txtfname'];
$lname=$_POST['txtlname'];
$age=$_POST['txtage'];
$con=mysql_connect('localhost','root','');
if ($con)
{
$db=mysql_select_db('register',$con);
}
if ($db)
{
$q1=mysql_query("insert into regdb(firstname,lastname,age) values('$fname','$lname','$age')",$con);
echo"inserted into database";
}
else
{
echo "error in query";
}
?>

complete working html code:-
<!DOCTYPE>
<html>
<head>
<title>REGESITER</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$( document ).ready(function() {
$( "#sub" ).click(function(event) {
$.post('helper.php',
$("#myform :input").serializeArray(),
function (data) {
$("#res").empty();
$("#res").html(data);
});
});
});
</script>
</head>
<body>
<form id="myform" action="" method="post">
FIRSTNAME:<input type="text" name="txtfname" id="fname">
<br><br>
LASTNAME:<input type="text" name="txtlname" id="lname">
<br><br>
AGE:<input type="text" name="txtage" id="age">
<br><br>
<input type="button" id="sub" value="Enter" />
</form>
<div id="res">Result</div>
</body>
</html>

Related

JQuery(JavaScript)+PHP syntax explanation

Going through some exercise which including JQuery + PHP combined together .The part I am not completely understand is in the Jquery code when the if statement starts ,can someone please explain from this point on what's going on?
HTML code:
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
<label for="name">Name:</label><br>
<input type="text" name="name"><br><br>
<label for="email">Email:</label><br>
<input type="text" name="email" id="email" autocomplete="off"><br><br>
<label for="password">Password:</label><br>
<input type="text" name="password"><br><br>
<input type ="submit" name="submit" value="Sign up">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
PHP code:
<?php
if(! empty($_GET['email'])){
$email=filter_var($_GET['email'],FILTER_VALIDATE_EMAIL);
if($email){
$con="mysql:host=localhost;dbname=eshop;charset=utf8";
$db= new PDO($con,'root','');
$query=$db->prepare("SELECT email FROM users WHERE email = ?");
$query->execute([$email]);
$email=$query->fetch(PDO::FETCH_ASSOC);
if($email){
echo true;
}
}
}
JQuery code:
$('#email').on('keyup', function(){
var userEmail= $(this).val().trim();
$('#result').remove();
var emailRegex= /^[_a-z0-9-]+(.[_a-z0-9-]+)*#[a-z0-9-]+(.[a-z0-9-]+)*(\.[a-z]{2,3})$/i;
if(emailRegex.test(userEmail)){
$.get('check_email.php',{email:userEmail},function(res){
if(res ==1){
$('#email').after('<span id="result">*Email is taken</span>');
}
});
}
});

how to output textbox value in javascript ajax

basically i have a form which inside that form i have a textbox and a submit button, now what i want is to output text box value into console when a user type something, i found this link https://codepen.io/jnnkm/pen/WxWqwX?editors=1111 which works just perfect but when i copied the html and script code and putted it my editor and ran it trough my browser, it doesn't works at all,
here is how i tried it out:
<!DOCTYPE HTML>
<html>
<head>
<script src="JquerySock.js"></script>
<script>
function postUsernameToServer() {
console.log('executed function')
var username = $("#Registeration_Username_box").val();
console.log(username);
}
$('#Registeration_Username_box').on('input', function() {
console.log('excuted input');
postUsernameToServer();
});
</script>
</head>
<body>
<div id="Registeration_Div" class="Registeration_Div">
<form class="Registration_Form" id="Registration_Form" action="../postr" method="POST">
<div id="Registeration_Username_DIV" class="Registeration_Username_DIV">
<input type="text" id="Registeration_Username_box" class="Registeration_Username_box" placeholder="" name="UserName" maxlength="30" />
</div>
<div class="Registration_Submit_Div">
<input type="submit" value="Submit" id="SumbitForm_btn" class="SumbitForm_btn" name="Submit_btn" />
</div>
</form>
</div>
</body>
</html>
you can try it yourself too, but it didn't worked for me.
okay i found what the problem was, first i had to specify
$(document).ready(function() {
and then input my ajax code, i mean fully it was suppose to be this way
<!DOCTYPE HTML>
<html>
<head>
<script src="JquerySock.js"></script>
<script>
function postUsernameToServer() {
console.log('executed function')
var username = $("#Registeration_Username_box").val();
console.log(username);
}
$(document).ready(function() {
$('#Registeration_Username_box').on('input', function() {
console.log('excuted input');
postUsernameToServer();
});
});
</script>
</head>
<body>
<div id="Registeration_Div" class="Registeration_Div">
<form class="Registration_Form" id="Registration_Form" action="../postr" method="POST">
<div id="Registeration_Username_DIV" class="Registeration_Username_DIV">
<input type="text" id="Registeration_Username_box" class="Registeration_Username_box" placeholder="" name="UserName" maxlength="30" />
</div>
<div class="Registration_Submit_Div">
<input type="submit" value="Submit" id="SumbitForm_btn" class="SumbitForm_btn" name="Submit_btn" />
</div>
</form>
</div>
</body>
</html>
now it works perfect!

click function is not working on button

i am trying to make a list and submit button and the user enters the list size and then after clicking on a button the form is submitted (list size is sent to the servlet ) and an alert should appear .. but the alert is not working .. here is my code
<body>
<form action="ServerSide" method="post">
Enter list Size:<input type="text" name="listsize">
<input type="submit" value="Submit" id="btn">
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
alert("anything");
});
});
</script>
</body>
You can try this:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
alert("Submitted");
});
});
</script>
</head>
<body>
<form action="">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Also read this document DOCS
First of all make sure you are including/referencing JQuery Libray before you use JQuery. it should work.
Secondly you can use this
<body>
<form action="ServerSide" method="post" id="myform">
Enter list Size:<input type="text" name="listsize">
<input type="button" value="Submit" id="btn">
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").on('click',(function(){
alert("anything");
}));
});
</script>
</body>
I also notice that you had used input type submit it will submit form instead of calling click function. you should change type to button
if you want to do something on form submission you have to use onsubmit event
<body>
<form action="ServerSide" method="post" id="myform">
Enter list Size:<input type="text" name="listsize">
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#myform").submit(function(){
alert("anything");
});
});
</script>
</body>
For this you don't need to add click listener on the submit button. once you submit form it will show you alert.

How can I run client side function ( JQuery / JavaScripte ) after PostBack

I am new to jQuery and JavaScript.
I have a Html page. There is a Form with Method="Post" and I have a JavaScript function.
On the server side I use ASP classic.
I need to post my form with my Submit Button and after submit and load my page, Run a JavaScript method.
This is a sample :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>..........</title>
<style>
...........
</style>
<script>
function initialize() {
.....
}
</script>
<body>
<div style="height:250px">
<form id="form1" runat="server" method="Post">
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
<br>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
<br>
<input type="submit" value="Ok" />
</form>
</div>
<div id="map-canvas"></div>
</body>
</html>
I need after PostBack run initialize method
I use this JQuery but it dose not work.
<script>
$(document).ready(function () {
$.ajax({
url: "ISPostBack.html",
context: document.body
}).done(function () {
initialize();
});
});
</script>
How can I do this?
you can look this https://api.jquery.com/jQuery.ajax/ use ajax to request

Posting a javascript variable to PHP.

I have a javascript function to count the number of clicks. I wish to post the variable storing the count to PHP. I'm unsure why when I submit the form, the count is not echoed out. Below is the HTML file.
<html>
<head>
<title> js php </title>
<script>
var cnt=0;
function CountFun(){
cnt=parseInt(cnt)+parseInt(1);
var divData=document.getElementById("showCount");
divData.innerHTML="Number of Downloads: ("+cnt +")";//this part has been edited
}
</script>
</head>
<body>
<div id="showCount"></div>
<form action "submitClicks.php"id="form">
<input type="hidden" name="numberOfClicks" />
<input type="button" id="btnClick" value="Click me" onclick="CountFun()"/>
<input type="submit" value="Submit Clicks" />
</form>
</body>
</html>
Then this is my submit clicks page:
<?php
$number_of_clicks = $_POST["cnt"];
echo $number_of_clicks;
?>
Does this implementation look correct to you as when I click submit clicks, nothing happens. I'm expecting the number of clicks to be echoed.
<form action "submitClicks.php"id="form">
Should be:
<form action="submitClicks.php" id="form" method="post">
And shouldn't you have something like:
In HTML:
<input id="count" type="hidden" name="cnt" value="">
In your Javascript CountFun function:
document.getElementById('count').value = cnt;
Try this code:
<html>
<head>
<title> js php </title>
<script>
var cnt=0;
function CountFun(){
cnt=parseInt(cnt)+parseInt(1);
var divData=document.getElementById("showCount");
divData.value=cnt;//this part has been edited
document.getElementById("JustShow").innerHTML= cnt;
}
</script>
</head>
<body>
<div id="JustShow"></div>
<form action="submitClicks.php" id="form" method="post">
<input type="hidden" id="showCount" name="cnt" value="0" />
<input type="button" id="btnClick" value="Click me" onclick="CountFun()"/>
<input type="submit" value="Submit Clicks" />
</form>
</body>
</html>

Categories