jquery ajax POST method doesn't execute function - javascript

I'm new to JavaScript and AJAX, and am trying to to create a simple web app consisting of a server and a JavaScript/JQuery client. It has an input field and a button. After pushing the button, a POST request consisting of the text in the field should be sent to the server, and the page should be changed to the response from the server. If there is an error, the page should be changed to an error message.
Here's my partial solution:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.input {
width: 600px;
height: 100px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#send").click(function(){
$.post("http://localhost:8080/Web/", $("#text").val(), function(result, status){
$( "#content" ).html(result);
});
});
});
</script>
</head>
<body>
<div id="content">
<textarea class="input" id="text" placeholder="Write text to send to server" textarea rows="4" cols="50"></textarea>
<p>
<button id ="send">Send request</button>
</div>
</body>
</html>
This does not change the content of the page to the response from the server (which I've tested works). Putting in an alert except of changing the content of the page also doesn't work. I've read up a bit on AJAX JQuery, but didn't seem to manage to get it right.
Thank you

You can read the API Docs
The AJAX post method must have key valued object, e.g:
{ text : $("#text").val() }
or Form Data object in the second parameter.
I hope this helped.

Related

Get form data and put into a href link?

I'd like to send a SMS on website by
<a href="sms:+12345678?body=form data"
and popup the SMS application on cellphone.
I'd like user to fill the form, javascript get form data and insert into body= in a link.
Does javascript or jquery can do it?
Here is the code I've tried with input
sms-link.min.js is for make SMS links compatible cross devices, but it only works on Android not iOS.
<html>
<body>
<div class="container">
<input type="text" maxlength="5" id="ca_no">
<div class="col-md-12"> Register </div>
</div>
</body>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="sms-link.min.js"></script>
<script>
var card_no=document.getElementById('ca_no').value;
document.addEventListener('DOMContentLoaded', (function () {
link = new SMSLink.link();
link.replaceAll();
}), false);
</script>
</body>
</html>
enter data and click link won't work, it will works when click back with same data which already filled.
You can achieve this in following manner:
Put an event listener on button or anchor click that collects the form data and out it in some variable.
Make an ajax call to some server side scripting language with that stored data.
From server side scripting language you can hit the SMS API with the specified parameter using GET or POST method.
Reference
Here is a simple jquery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#ca_no").blur(function()
{
var card_no=$('#ca_no').val();
$("#register").text(card_no); //you can remove this
$("#register").attr('href',window.location.href+'?body=EDS'+card_no);
});
});
</script>
</head>
<body>
<div class="container">
<input type="text" maxlength="5" id="ca_no">
<div class="col-md-12">
Register
</div>
</div>
</body>
</html>
Javascript and jquery can do that. but you need to clear what exactly you want to happen
please specify an example of output

Pass id to php using JQuery

The general problem:
I want to pass an id of a div element to php using the ajax function from jQuery. The whole code is in one file so the ajax function should pass the id to the same file.
What I did:
1. I took the id of the clicked element (#iamaid) and saved it
2. I tried to send it to the php code in the same file using the ajax function from jQuery
3. I tried to echo it with the post method.
What happend:
The developer console gave me an output and said that the data has been sent successfully but php said it hasn't been sent and said it is an undefined index.
I also used two different ajax functions from jQuery to pass the code but both didn't seem to work.
Here is my full code (it's all in one file):
<html>
<head>
<title>Check POST/GET-Method to same file</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<h1>Page to check the POST/GET-Method to same file</h1>
<div id="iamaid">Click me</div>
<h1>The output</h1>
<?php
if (isset($_POST["id"])) {
echo "<p>The id is: " . $_POST["id"] . "</p>";
}
else {
echo "<p>No id found, edit code</p>";
};
?>
</body>
<script type="text/javascript">
// try it with post function
$("#iamaid").on("click", function() {
var the_id = $(this).attr("id");
$.post("", {id:the_id})
});
// try it with ajax function
$("#iamaid").on("click", function() {
var the_ajax = $(this).attr("id");
$.ajax({
url:"",
method: "POST",
data: {id:the_ajax}
});
});
</script>
<style>
body {
font-family:Verdana;
}
#iamaid {
width:100px;
height:50px;
background:black;
color:white;
}
#iamaid:hover {
cursor:pointer;
}
</style>
</html>
If any more information is needed than feel free to comment I will give you all informations you need to help me.
I looked for hours in the internet but I couldn't find any solution.
Please help me.
EDIT
I got myself an answer. It was a general misunderstanding of how php works.
Passing an id with ajax to the same file results in the same output because the file gets called again.
The solution is very simple:
Just put the output code or php code in another file then pass the id with an ajax call to the file and echo the wanted html code back and then paste it to an container
Here an example of what I mean:
HTML CODE WITH SCRIPT
<html>
<head>
<title>Check POST/GET-Method to same file</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<h1>Page to check the POST/GET-Method to same file</h1>
<div id="iamaid">Click me</div>
<h1>The output</h1>
<p id="output"></p>
</body>
<script type="text/javascript">
/* the id gets posted to the php file
the php file echos one line and the
echo output gets pasted into the #output container
this also works when you echo html code you just need
one main container to paste it in
*/
$("#iamaid").on("click", function() {
$.post("output.php", {id:$(this).attr("id")}, function(output) {
$("#output").html(output);
});
});
</script>
<style>
body {
font-family:Verdana;
}
#iamaid {
width:100px;
height:50px;
background:black;
color:white;
}
#iamaid:hover {
cursor:pointer;
}
</style>
</html>
PHP CODE (output.php)
<?php
echo "The id is: " . $_POST["id"];
?>
As you can see moving the php code to another file makes it much more simple and you don't need to load the whole page again because the output container is the only object that gets new content.
I hope it helped some people who got stuck with ajax and the problem to use the same page and not changing it.
this will fix your issue
$.post("", {"id":"the_id"})
As per the jQuery documentation for .post(), if you want to send a data payload then you should be using promises. In your case you can use the .done() promise to handle the response, but you should look into .always() and .fail() as well if you're interested in handling errors.
$.post(
"output.php",
{ id: $(this).attr("id") }
).done(function( data ) {
$("#output").html(output);
});
Edit: I guess I should pay attention to timestamps. This question is pretty stale.

Jquery with dynamic paragraphs

im doing a school work with Jquery and I just want to know if its possible and how to do the following:
Page A has the following : external JS file that has the function to allow a user to enter some text and then when they press the submit button that text is automatically put as the paragraph text as ive use JS to get the element and replace the text using innerhtml.
External JS file:
function grabText() {
var grabThePara = document.getElementById("firstP").value;
var intoParagraph = document.getElementById("pOne").innerHTML = grabThePara;
}
HTML FILE :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.10.2"></script>
<script type="text/javascript" src="ts.js"></script>
</head>
<body>
<input type="text" id="firstP" name="firstP">
<br />
<p id="pOne">Static works fine -- > this is the static</p>
<input type="button" onclick="grabText()" value="Submit">
GO to JD Panel
</body>
</html>
Page B has the Jquery part, this has the code that will grab the text from the Page A's first paragrpah called ID pOne, it gets the text without an issue if its STATIC input but the moment you use as described previous by using the textbox and dynamically changing the text of the paragraph the page A does the change but Page B still shows the static text input, not the new dynamic changes that occurred after input-ed into the textbox and submitted. I will show code.
Page B code :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="ts.js"></script>
</head>
<body>
Change the text again
<script type="text/javascript">
jQuery.ajax({
url: "adminPanel.html",
success: function (printIt) {
var html = jQuery('<p>').html(printIt);
var grabIt = html.find("p#pOne").html();
var sendItToParaOne = document.getElementById("paraOne").innerHTML = grabIt;
}
});
</script>
<p id="paraOne"></p>
</body>
</html>
Sorry for my English i know its not the best. thanks for taking the time in reading my issue and any helps is appreciated
Thanks again!
M
You need to save your data somewhere. If you don't want to work with a database, you can use HTML 5 web storage: http://www.w3schools.com/html/html5_webstorage.asp
Furthermore, looking at your external JS file, you might want to have a look at jQuery selectors: http://www.w3schools.com/jquery/jquery_selectors.asp
I hope this helps you.
You're confusing yourself by thinking that pages are able to talk to each other. Your page A has to send the changes to the server, but the server also has to be programmed to listen to those changes in server code like PHP or ASP.NET. Only then can page B get the changes made by page A.

jQuery and HTML forms

I have an iframe with a HTML form dynamically added. I need the parent page to have a button which submits this form (to a page set in the iframe), but then also is able to receive the return value.
The part I am struggling with is how to receive the return value. Submitting the form is fine, but getting the parent page to receive the return value - like with an AJAX request - is eluding me.
Here is an example of the kind of thing I am trying to achieve:
<html>
<head>
etc...
<script type="text/javascript">
$(doument).ready(function() {
$("#myFormButton").click(function () {
// This is what doesn't exist, a callback with the data
// this is what I would like to acheive somehow...
$("#myForm").submit(function(data) {
// do stuff with the data
});
});
});
</script>
</head>
<body>
<iframe>
etc...
<form action="mypage.ashx">
various inputs...
</form>
etc...
</iframe>
</body>
</html>
Thank you all very much for your help,
Richard Hughes

How to submit a form in a shadow box?

I'm using shadow box to submit a form, and since I'm new to JavaScript it's little difficult for me. I have three pages, a parent window, a child window(shadow box content) with the form and an update page to show the results. When I submit the form data in the child window, the form doesn't close and I am unable to retrieve the vales in my update page.
Can you please suggest me a tutorial or example that will help me to get a better idea of how to do this?
This is my code so far
// parent window(index.php)
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
</head>
<body>
Example shaodow box
<script language="javascript">
$('#mylink').click(function(){
Shadowbox.open({
content: 'mybox.php',
player: 'iframe',
height: 550,
width: 800,
options: {
onClose:
function() {
top.location = "update.php";
}
}
});
});
</script>
//mybox.php
<form name="theform" action="update.php" method="POST">
<input type="text" name="nametxt" id= "nametxt"><br>
<input type="submit" value="submit">
</form>
//update.php
<?php
if(isset($_POST['nametxt']))
echo $_POST['nametxt'];
?>
please consider, this is just an example.when the form is submitted data needs to be shown in update php.
can any one help, Thanks in advance
Check out this simple example of submitting a form on NetTuts: http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
First, since the form you are submitting is in an iframe, by default, the result of the POST will be also. You can use target="_top" on the iframe to redirect this to the top level,sothe page is submitted to update.php and the output replaces the whole page. Check the documentation for Shadowbox to see how to set this parameter.
Another option would be to store the output in the session and send it back in the second GET request that results from your top.location = "update.php".
This is easiest if you name the resultts page something else, but it depends on your application.

Categories