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 2 years ago.
Improve this question
My HTML document is refreshed when I submit the form. Is there any way to prevent this ??
how to send data using Ajax without refreshing the page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#">
<input type="text" name="" id="">
<button type="submit">asdf</button>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
$("button").submit(function (e) {
e.preventDefault();
var dataString = $("input").val();
$.ajax({
type: 'post',
url: 'data.php',
data: { album: dataString},
success: function(response) {
alert(response);
}
});
});
</script>
</body>
</html>
You are attaching the event to the wrong HTML element. Forms have onsubmit events, buttons do not.
Replace your
$("button").submit(function (e) {
by (assuminng you add an ID of form to your form):
$("#form").submit(function (e) {
Related
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 last month.
Improve this question
I was trying to create a website where I could put in some data, and it would send GitHub API a POST request to create a file with the specified data. I am using GitHub Pages to host.
I created a test script that should create a file once the page loads, and it worked originally, but as I came back to test it again 2 hours later, it didn't create a file. What am I doing wrong? Note: I'm using personal tokens for this, is that an issue?
Here's my code:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Dev portal</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
Hello world
<script type="module" src="script.js"></script>
</body>
</html>
script.js:
import { Octokit } from "https://cdn.skypack.dev/#octokit/rest";
const octokit = new Octokit({
auth: 'iputmytokenhere'
})
await octokit.request('PUT /repos/{owner}/{repo}/contents/{path}', {
owner: 'Skoolgq',
repo: 'skoolgq.github.io',
path: 'test2.txt',
message: 'Test commits for JSON API',
committer: {
name: 'Skool Developers',
email: 'help#skool.gq'
},
content: 'bXkgbmV3IGZpbGUgY29udGVudHM='
})
Turns out I was using an existing filename. Silly me!
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 10 months ago.
Improve this question
I have created a login page where I can login with my username and password and it is working fine when I validated it with JavaScript using onsubmit attribute in the form tag. But when i modify it to add innerhtml to my h3 tag where I want to show Wrong Credential when user input wrong username or password then it is not showing the same and also it is been redirected to the successful login page even when I have added return false statement in JavaScript.
function validate(){
var uname=document.getElementById('username').value;
var password=document.getElementById('password').value;
var users=["mustafa","param","swapnil","abhi"];
var pwd=["1234","4567","8524","7418"]
for (let i = 0; i < users.length; i++) {
if((uname==users[i])&&(password==pwd[i])){
location.href("sucess.html");
return true;
}
}
document.getElementById('wrong-output').innerHTML="Wrong details";
return false;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="index_js.js"></script>
</head>
<body>
<h3 id="wrong-output" style="background-color:red"></h3>
<form action="sucess.html" onsubmit="return validate()">
<label for="uname">User Name</label>
<input id="username" type="text"> <br> <br>
<label for="pwd">Password</label>
<input type="password" id="password"><br><br>
<input type="submit" value="submit">
</form>
</body>
</html>
It doesn't return true.
location.href is a string, not a function. Trying to call it as a function throws an exception and terminates the script.
Since the script terminates, the function doesn't return false, so the default behaviour of the event handler is never prevented and the form submits as normal.
If you want to navigate using location.href you need to assign a new value to it with = … but then the function will return true and the form submission will replace that navigation instruction so it won't have any effect.
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.
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.
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