I'm trying to run a very basic PHP code via AJAX and get the data back from PHP page into AJAX success.
however, I don't get anything in the AJAX success from the PHP page and its bugging me badly.
this is the AJAX code:
$(document).ready(function(){
$(function(){
$('#form-post').on('submit', function(e){
// prevent native form submission here
e.preventDefault();
// now do whatever you want here
$.ajax({
type: $(this).attr('method'), // <-- get method of form
url: $(this).attr('action'), // <-- get action of form
data: $(this).serialize(), // <-- serialize all fields into a string that is ready to be posted to your PHP file
beforeSend: function(){
//$('#result').html('<img src="loading.gif" />');
},
success: function(data){
$('#messageme').html(data);
}
});
});
});
});
and this is the Form:
<form id="form-post" action="post-code.php" method="post" >
<input type="hidden" value="Post" name="submit" />
<input type="text" class="inp-form" name="postcode" id="postcode" placeholder="Enter Post Code " /><br /><br /><input type="text" id="messageme" /><br /><br />
<input id="findAd" type="button" value=" Search For Address" />
</form>
and a very simple php:
<?php
$street = "some";
echo $street;
?>
could someone please advise on this?
Please try this: just change type="button" to type="submit".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<form id="form-post" action="post-code.php" method="post" >
<input type="hidden" value="Post" name="submit" />
<input type="text" class="inp-form" name="postcode" id="postcode" placeholder="Enter Post Code " /><br /><br />
<input type="text" id="messageme" /><br /><br />
<input id="findAd" type="submit" value=" Search For Address" />
</form>
<script>$(document).ready(function(){
$(function(){
$('#form-post').on('submit', function(e){
// prevent native form submission here
e.preventDefault();
// now do whatever you want here
$.ajax({
type: $(this).attr('method'), // <-- get method of form
url: $(this).attr('action'), // <-- get action of form
data: $(this).serialize(), // <-- serialize all fields into a string that is ready to be posted to your PHP file
beforeSend: function(){
//$('#result').html('<img src="loading.gif" />');
},
success: function(data){
alert(data);
$('#messageme').html(data);
}
});
});
});
});
</script>
</body>
</html>
Related
after the success of the ajax call by clicking on the submit button I am getting the bellow error page in the browser and I can't find any errors in the console.
This page isn’t working If the problem continues, contact the site
owner. HTTP ERROR 405
I am new to javascript, jquery, and ajax calls. So please give me suggestions for solving this error
HTML code:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css" />
<title>Document</title>
</head>
<body>
<div>
<h1 class="myclass">HELLO!WELCOME</h1>
</div>
<div id="maindiv">
<form id="loginform" method="post">
<div class="form-group">
<input type="number" class="form-control" id="inputphone" placeholder="Enter phone number">
</div>
<div class="form-group">
<input type="password" class="form-control" id="inputpassword" placeholder="Enter Password">
</div>
<div class="forgot-password">
forgot password
</div>
<button id="submit" class="submit-button" >Submit</button>
<!-- <input type="submit"value="Login"/>-->
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/index.js" type="text/javascript"> </script>
</body></html>
JS code:
$('#submit').click(function () {
alert(".click() called.");
var inputphoneno = document.getElementById("inputphone").value;
var inputpassword = document.getElementById("inputpassword").value;
const jdata = {
"phonenumber": inputphoneno,
"password": inputpassword
};
try {
$.ajax({
type: "POST",
url: "http://localhost:8085/Smatr/signIn",
data: JSON.stringify(jdata),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
console.log(data)
alert(data);
}
});
}
catch (ex) {
alert(ex);
}
});
You should add attribute type="button" to prevent submitting form. If there is no attribute type, button behave like a submit button.
<button id="submit" type="button" class="submit-button" >Submit</button>
<form id="myForm" name="gadaj"> <input type="text" name="fname" id="fname"/>
<input type="submit" name="click" value="button"> </form> <p id="status"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function info()
{
document.getElementById("status").innerHTML="Message Sent";
setTimeout(function() {
$('#status').fadeOut('slow');
}, 1000);
}
$(document).ready(function(){
$(function(){
$("#myForm").submit(function(event){
event.preventDefault();
$.ajax({
method: 'POST',
url: 'submit.php',
data : $('#myForm').serialize(),
success: function (response){
{
document.forms['myForm'].reset();
info();
}
},
error: function(XMLHttpRequest, textStatus,errorThrown) {
alert("Some Error.");
}
});
});
});
});
</script>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<form id="myForm" name="gadaj">
<input type="text" name="fname" id="fname"/>
<input type="submit" name="click" value="button" id="klik">
</form>
<p id="status"></p>
</body>
</html>
Now it's only one time shows Message Sent. It's kind of webchat txt field and I wanna show message text every time after sent. How do this ?
I do not know Ajax. I just found it but I do not how to do any change.
I Use below html page for tag-it. But when i submit the form, i can't get the value from form.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="http://girlzunderground.com/code/tagit.js"></script>
<script >
$(function() {
$('#demo3').tagit({
tagSource:function( request, response ) {
$.ajax({
url: "http://localhost/test.com/tag/tagdb.php",
dataType: "json",
data: {
q: request.term
},
success: function( data ) {
response( data );
}
});
},
triggerKeys:['enter', 'comma', 'tab'],
allowNewTags: false
});
});
//http://girlzunderground.com/php/profile-tags.php?t=books&txt=book
</script>
</head>
<body>
<div class="box">
<form action="display.php" method="post">
<ul id="demo3" class="tagit">
<li class="tagit-new" >
<input id="test1" name="test1[]" style="width:200px;" class="tagit-input ui-autocomplete-input" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"/>
</li>
</ul>
<input type="text" value="qqq" name="q"/>
<input type="submit" value="submit"/>
</form>
</div>
</body>
</html>
But when i submit the form, i can't get input "test1" value. But i can get input "q" value.
This is my display.php page
<?php
$Category=$_POST['test1'];
$q=$_POST['q'];
echo $q;
//exit();
$allCourse=NULL;
$count=0;
foreach($Category as $Cat)
{
$count=$count+1;
$allCourse=$allCourse.'~'.$Cat;
}
$allCourse=$allCourse.'~';
echo $allCourse;
?>
How can i get my tag-it value from html form..
I am trying to use jQuery/AJAX to run a PHP file on a server. This PHP simply adds a row with some constants to a database. Here is my code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Submit Application</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
function doSomething() {
$.get("http://.../submitApp.php");
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="javascript:doSomething()">
<p>
<label for="programName"></label>
<input type="text" name="programName" id="programName" />
</p>
<p>
<label for="greQuant"></label>
<input type="text" name="greQuant" id="greQuant" />
</p>
<p>
<label for="greVerbal"></label>
<input type="text" name="greVerbal" id="greVerbal" />
</p>
<p>
<input type="submit" name="submitApp" id="submitApp" value="Submit" />
</p>
</form>
</body>
</html>
Upon pressing the submit button on the above form, nothing seems to happen. I should mention I am running this locally via DreamWeaver. I know for a fact that the code is reaching the JavaScript method and that the PHP code is functional. Anyone know what's wrong?
Use POST instead of GET to do this work.
function doSomething() {
var programName = $('#programName').val();
var greQuant = $('#greQuant').val();
var greVerbal = $('#greVerbal').val();
$.ajax({
type: "POST",
url: "submitApp.php", //URL that you call
data: { programName: programName, greQuant:greQuant, greVerbal:greVerbal } //var in post: var from js
}).done(function(msg) {
alert(msg);//change to something to indicate action
}
});
and with your php, handle like this
<?php
$programName = $_POST['programName'];
$greQuant = $_POST['greQuant'];
$greVerbal = $_POST['greVerbal'];
//do something important
?>
this is just a simple example, you need apply some security to this php code
Let's say I submit a form with anything in the value of user_input like "I am free." I submit it through AJAX and it gets returned to me as a string. Ok now it's an Object... how would I turn that into a string?
Thank you,
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<title>Sin título 3</title>
</head>
<body>
<div id="result_target" style="display:none;"></div>
<form id="form_to_post" action="#" method="post">
<input type="hidden" name="url" value="example.php" />
<input type="text" name="user_input" />
<input type="submit" value="Submit" />
</form>
<script>
$(document).ready(function() {
$("#form_to_post").submit(function() {
var hiddenURL = $("input[name=url]");
var userInputForm = $("input[name=user_input]");
//var dataString = "userInput="+inputForm;
$.ajax({
type: "POST",
url: hiddenURL;
data: {userInput: userInputForm},
success: function(return_contents) {
//returns jquery object...
var output =//
$("#result_target").html(output);
}
});
});
});
</script>
</body>
</html>
use val() to get values from inputs
data: {userInput: userInputForm.val()},