jQuery AJAX form is not working [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I recently tried to use AJAX in a PHP form, but it doesn't work.
I don't understand why.
This is mi code:
<!DOCTYPE html>
<html lang="es">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn-enviar").click(function(){
var url = "http://www.interplazaindependencia.com/dame-datos.php";
$.ajax({
type: "POST",
url: url,
data: $("#formulario").serialize(),
success: function(data){
$("#resultado").html(data);
}
});
return false;
});
});
</script>
</head>
<body>
<form method="post" id="formulario">
Introduce un nombre: <input type="text" name="nombre">
<input type="button" id="btn-enviar" value="enviar">
<div id="resultado"></div>
</form>
</body>
</html>
Can someone help me?
Please, I have tried for hours and I can't solve it.

When your code is run, this error is returned in the Chrome Developer Console:
XMLHttpRequest cannot load
http://www.interplazaindependencia.com/dame-datos.php. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'null' is therefore not allowed access.
You can find more information about this error on this topic.

Related

Jquery Ajax not returning any response in the success body [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I have tried all possible ways to get the result in my jquery ajax success body but i am failed. I dont find where I am wrong. I have already added the jquery library but still no result forIf someone guide me in my code will be a great help and will save my day.
my jquery ajax code is as follows:
i am calling a function on click of a button.
<html>
<head>
<title>Farm Game</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form name="farm_game" method="POST">
<button type="button" name="feed" id="feed" onclick="PerformGame();">Feed</button>
</form>
<script>
function PerformGame()
{
var vars = "data sent to php file";
$.ajax({
url: 'perform_game.php',
type: "POST",
data: {'send_data': vars},
dataType: 'json',
sucess: function(data) {
alert(data);
}
});
}
</script>
</body>
</html>
and, my php code as follows:
<?php
$ajaxRes = $_POST['send_data'];
echo json_encode($ajaxRes);
?>
I dont find where i am doing wrong. Please help me !
Not sure if this is it, but in the ajax definition you spelled sucess wrong. It should be success.

How to send "HTML SELECT VALUE" to another webpage with ajax without refresh page [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Where is a problem ? . I want to send selected value to another webpage without refresh page. Than i try using ajax.
Here is all script (only one file) i want to send value 0,2,4 like parameter "t" to another web page. But function $.ajax didn't work. but after part with alert yes.
<!DOCTYPE html>
<html>
<head>
<title>jQuery With Example</title>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.btnClick').click(function () {
$.ajax({
url:'http://ip adress:84/?t='+ $('.sendnumber').val(), //the page for example http://192.168.100.100:84/?t=2
type: 'POST',
});
alert('Value = ' + $('.sendnumber').val());
alert('Text = ' + $('.sendnumber option:selected').text());
});
})
</script>
</head>
<body>
<div>
<select class="sendnumber">
<option value="0">24</option>
<option value="2">25</option>
<option value="4">26</option>
</select>
<br /><br />
<input type="button" class="btnClick" value="Click" />
</div>
</body>
</html>
Please help me.
Thanks Hunt3r
Just noticed that your jquery selector is wrong for the option value, use this instead:
$('.sendnumber option:selected').val()
Without seeing the HTML it's hard to say, but remember that posting to a page on a different domain will require the appropriate CORS setting up, as this is a cross origin security setting

redirect using document ready does not work [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
here below is my code i can't seem to find what is wrong it is not redirecting to the link.
<html>
<head>
<script type="text/javascript" src="<?= baseurl(); ?>/public/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(function() { $("formRedirect").submit(); });
});
</script>
</head>
<body>
<form id='formRedirect' action="http://www.example.com/something/something.aspx" method="post"><input type="submit" name="redirect" value='<?= $token ?>'</form>
</body>
Try this:
<html>
<head>
<script type="text/javascript" src="<?= baseurl(); ?>/public/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#formRedirect").submit();
});
</script>
</head>
<body>
<form id='formRedirect' action="http://www.example.com/something/something.aspx" method="post"><input type="submit" name="redirect" value='<?= $token ?>'</form>
</body>
For id jquery detect them with #
Try like this
$("#formRedirect")[0].submit();
Use
$(document).ready(function() {});
or
$(function(){})
Both same
U have added $(function(){}); inside document.ready
$(function(){}); is similar to $(document).ready(function() {});
Use following code:
$(document).ready(function() {
$("#formRedirect").submit();
});
I find the Chrome console to be very helpful in debugging situations like this. I would start by making sure you are getting a result from your jQuery selector.
You can open the Chrome console by pressing F12
In the Chrome console, type $("formRedirect") and see if you get any results. You probably won't, since you are missing the # ID selector.
Next, try submitting your corrected jQuery object. If it doesn't work, try accessing the actual HTML object by adding in a [0] at the end of your selector, as suggested by #Anik.

Blocking redirection with JQuery - What am I doing wrong? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 years ago.
Improve this question
I am trying to do some Ajax and jQuery here, submitting a form while staying on the same page. I read the following topic to start what I wanted to do (which is consisting of several good examples) : jQuery AJAX submit form
Here is my HTML file :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery File Tree Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>
<script src="addTag.js" type="text/javascript"></script>
</head>
<body>
<form id="form_addtag" method="post" name="form_addtag" action="add_tag.php">
<legend>Add a tag</legend>
<input type="text" name="tag_name" id="tag_name" class="text" size="30" placeholder="Tag Name" />
<input type="text" name="tag_text_color" id="tag_text_color" class="text" size="6" placeholder="#ffffff"/>
<input type="text" name="tag_bg_color" id="tag_bg_color" class="text" size="6" placeholder="#000000" />
<button type="submit" id="button_save_tag">Add</button>
</form>
</body>
</html>
And the JS file :
$("form_addtag").submit(function(e) {
e.preventDefault();
var url = "add_tag.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("form_addtag").serialize(), // serializes the form's elements.
});
});
The execution is perfect : I can fill the form, click on the Submit button and it will pass everything field to add_tag.php. However, I always end up on mydomain.com/add_tag.php while I wanted to stay on the first page.
Your selector is incorrect:
$("#form_addtag").submit(function(e) {
You need the leading # to indicate that you want to search for an element by its "id". Without that, you were telling jQuery to add an event handler to every <form_addtag> element it could find, which is of course an empty list.
It's sort-of a big stumbling block with jQuery that the library doesn't treat such situations as errors. It can't really, because that would make life even more difficult, but it's still something that causes everybody some pain now and then.
In this case, you could remove the "action" attribute from the form, though that'd mean the page wouldn't work at all without JavaScript.
There are two problems.
Your jQuery needs to either be executed after the element it refers to on the page exists, usually by placing the code before the closing body tag, or it should be wrapped in a document ready call in the head of the page by using:
$( document ).ready(function() {
// your code here;} );
You're missing a # on your form selector. It should be: $("#form_addtag")

How do I make an Ajax post to a Twitter-like API [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I am very new to JavaScript and to AJAX. A friend has started helping me with a form that will post a status update to App.net, but I can't get it to work. I'm sure there are many errors in the code, but thanks in advance for any help.
<html>
<head>
<title>Post to App.net</title>
<link rel="stylesheet" type="text/css" href="style_post.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script>
function post()
</script>
<script type="text/javascript" language="javascript" src="count.js"></script>
<form id="post" method="post">
<textarea name="fixlength" value="What's on your mind?" id="posttext" maxlength="256" lengthcut="true"></textarea><br>
<input type="submit" value="Post" id="submit">
</form>
<label id="limitlbl_0" ><script> parseCharCounts(); </script></label>
<script type="text/javascript">
var frm = $('#post');
var token = window.location.href.substring(45,143),
var text = $('input[type="text"]').val()
frm.submit(function () {
$.ajax({
type: 'POST',
url: 'https://alpha-api.app.net/stream/0/posts',
data: {
text: 'test'
token: + token +'
},
success:
});
return false;
});
</script>
</body>
</html>
If you are making a larger app then you will definitely need to get the ajax calls working (you can make cross-domain posts as well as gets using CORS). However, for this particular situation, there is a simpler solution:
http://developers.app.net/docs/other/web-intents/
Using web intents you can use an iframe or redirect a user to a post form very easily. Just use the right URL and you are done. No JS required at all.
Here is the example above:
https://alpha.app.net/intent/post/?text=%40adn%20When%20is%20the%20next%20meetup%3F

Categories

Resources