I want a user to fill in a website url and when clicking on the submit button I want a ajax request to fire and show the response on the same page in <div id="test"></div> but when I fill in the input field and click submit nothing shows. But if I check the console I see the ajax page getting requested.
Here is pagespeed.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<form method="post">
<input type="text" id="website" name="website">
<button id="button_1" value="val_1" name="but1">button 1</button>
</form>
<script>
$("button").click(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "/lighthouse.php",
data: {
email: $('#website').val() // < note use of 'this' here
},
success: function(result) {
$('#test').html(data);
},
error: function(result) {
alert('error');
}
});
});
</script>
<div id="test">
</div>
And here is lighthouse.php
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
// INTRODUCTION RIGHT
$("#test").text("Let's get in touch");
});
</script>
So the jQuery function is not showing on the pagespeed.html page because the <div id="test"></div> keeps empty.
Thanks for your time!
You need to change from
$('#test').html(data);
to
$('#test').html(result);
because
Related
I'm trying to make a simple register/login system but when I press the button for both, it doesn't do what I need it to do.
I put
alert("I work!");
at the beginning of each function supposed to work to see if it actually gets triggered but it doesn't. I also checked if the onclick events for both are referenced correctly and they are. I even tried to copy the actual scripts into the html file to ensure that it's not a reference issue. At this point, I'm really stuck, and if this is some syntax error, it doesn't alert me and I'm not aware of any.
The codes are:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Opportunities</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
</head>
<body>
<p>Uwu</p>
<form>
<p>Username <input type="text" class="username" /></p>
<p>Password <input type="password" class="password" /></p>
<button onclick="loginUser()">Login</button>
</form>
<p>Not yet registered? Click here to create an account. </p>
</body>
</html>
registration.html:
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src=/js/script.js"></script>
</head>
<body>
<p>Registration page</p>
<form>
<p>Username <input type="text" class="username" /></p>
<p>Password <input type="password" class="password" /></p>
<button onclick="registerUser()">Register</button>
<!--onclick event doesn't work-->
</form>
<p>Click here to go back.</p>
</body>
</html>
and script.js:
var url = "http://localhost:8888";
function test(){
console.log('hello');
}
function registerUser(){
alert("I work!");
var username = document.getElementbyClassName("username");
var password = document.getElementbyClassName("password");
$.ajax{(
url: url + "/register",
method: "post",
data: {
username: username[0].value,
password: password[0].value
}
success: function(respons){
alert(response.message);
}
}).error(function(response){
alert(response.message);
});
}
function loginUser(){
alert("I work!");
var username = document.getElementbyClassName("username");
var password = document.getElementbyClassName("password");
$.ajax({
url: url + "/login",
method: "post",
data: {
username: username[0].value,
password: password[0].value
}
}).success(function(response){
alert(response.message);
}).error(function(response){
alert(response.message);
});
}
Whenever I press the buttons for each, it just clears the texts in my inputs but doesn't launch an alert like I intend to. Please do tell me what I should check regarding this. Thank you.
I think your script is not loaded
Remove the frist backslash ('/') from
<script type="text/javascript" src=/js/script.js"></script>
If you are using your browser I would try first that you dont have any "popup" script blocking extensions, I had the same issue and the issue was chrome popup js blocker cause simple adblocker doesnt work for some sites.
cheers
Looks like a typo in the registerUser() function try changing the ajax call to
$.ajax({
url: url + "/register",
method: "post",
data: {
username: username[0].value,
password: password[0].value
},
success: function(respons){
alert(response.message);
}
}).error(function(response){
alert(response.message);
});
Basically i find code on the internet to test and use it.
the problem is that when i reload the page, the data disappears.
what i want to happen is for the data or the value to just stay.
Thanks guys
Here is the code in index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pass Data to PHP using AJAX without Page Load</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Enter Some Data Pass to PHP File</h2>
<div class="row">
<div class="col-md-3">
<form>
<div class="form-group">
<input type="text" id="pass_data" class=" form-control">
<input type="button" class="btn btn-success" onclick="passData();" value="Set">
<p id="message"></p>
</div>
</form>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function passData() {
var name = document.getElementById("pass_data").value;
var dataString = 'pass=' + name;
if (name == '') {
alert("Please Enter the Anything");
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "post.php",
data: dataString,
cache: false,
success: function(data) {
$("#message").html(data);
},
error: function(err) {
alert(err);
}
});
}
return false;
}
</script>
</html>
and here is my php code
<?php
$pass=$_POST['pass'];
echo json_encode($pass);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pass Data to PHP using AJAX without Page Load</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Enter Some Data Pass to PHP File</h2>
<div class="row">
<div class="col-md-3">
<form>
<div class="form-group">
<input type="text" id="pass_data" class=" form-control">
<input type="button" id="success" class="btn btn-success" value="Set">
<p id="message"></p>
</div>
</form>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$("#success").click(function () {
var name = document.getElementById("pass_data").value;
var dataString = 'pass=' + name;
if (name == '') {
alert("Please Enter the Anything");
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "post.php",
data: dataString,
cache: false,
success: function (data) {
$("#message").html(data);
localStorage.setItem("data",data);
},
error: function (err) {
alert(err);
}
});
}
return false;
})
$(document).ready(function () {
var someVarName = localStorage.getItem("data");
console.log(someVarName)
$("#message").html(someVarName);
});
</script>
</html>
First of all i changed your js code to use more jquery syntax, as you already have included it (i trigger the on click event on the script and i don't put it in in html). After that in order not to lose your variable after refresh on ajax success i pass the value of data to localstorage, and after refresh (on document ready) i retrieve it and display it in the label.
Of course every time you put a new value and display it, it over-writes the previous one, so after refresh you display the latest value put in your input field.
I am not sure I understand what you mean but...
Before this line:
<!DOCTYPE html>
enter
<?php session_start(); ?>
In this line add
<input type="text" id="pass_data" class=" form-control" value="<?php echo $_SESSION['VAL']; ?>">
and in your php file:
<?php session_start();
$pass=$_POST['pass'];
$_SESSION['VAL'] = $pass;
echo json_encode($pass);
?>
I am using ajax for fetching records using following code.
<html>
<head>
<script>
$(function() {
$('.go-btn').on('click', function() {
var selected = $('#my-dropdown option:selected');
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "boxplot.html",
dataType: "html", //expect html to be returned
success: function(response){
$("#responsecontainer").html(response);
//alert(response);
}
});
//alert(selected.val());
});
});
</script>
</head>
<body>
some text
<button class="go-btn" type="submit">Go</button>
<div id="responsecontainer">
<br><hr><br>
<h2>PCA Plot Distribution:</h2><br>
</body>
</html>
In the above code, content page gets loaded on clicking button (at ) but anything after this gets disappeared. How can i fix this issue?
Because you are setting your response to whole div. Fix your html such that
<div id="responsecontainer"></div>
<div>
<br><hr><br>
<h2>PCA Plot Distribution:</h2><br>
</div>
So you are settings your response to responsecontainer and rest remains same.
You haven't closed your div in the HTML in the bottom
You just have to close that #responsecontainer div.
var response = "my Response";
$("#goButton").on("click", function(){
$("#responsecontainer").html(response);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
some text
<button class="go-btn" type="submit" id="goButton">Go</button>
<div id="responsecontainer"></div>
<br><hr><br>
<h2>PCA Plot Distribution:</h2><br>
</body>
</html>
I have created a form in which on submitting name my url is getting redirected but i want after form action it should get redirect to my mobile validation page. after putting the code, i want it to show the offer page. I am not able to write ajax. my function is not getting called. here is what i have tried till now
http://plnkr.co/edit/3DA7YGb58BgcVcD0d10f?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<form name="msform" action="another.html" method="post" id="msform">
<input name="name" type="text" placeholder="First Name" />
<input class="bl" id="submitbl" type="submit" value="Submit" />
</form>
<script type="text/javascript">
$("#submitbl").click(function(){
if($("#msform").valid() === true) {
var name = $('input[name|="name"]').val();
//use ajax to run the check
$.ajax({
type : 'POST',
url : 'mobile.html',
success: function(responseText){
resp = responseText.trim().substring(14);
if(resp == 'qualified') {
url_redirect({url: "offer.html",
method: "post",
data: { "fname": name }
});
}
}
});
}
});
</script>
</body>
</html>
For this you can do something like:
write a jQuery onsubmit function and trigger click event for submit button.
$("#msform").on('submit',function(){
$("#submitbl").trigger('click');
});
Or
submit your form through ajax and in success function redirect to mobile.html
<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
$.get("invite_friends_session.php", function(){
});
});
});
</script>
</head>
<body>
<form >
<input type="submit" name="submit" id="submit" style="margin-top:100px; margin-left:100px;" />
</form>
</body>
the $.get("invite_friends_session.php") part does not work. But it works if i keep it outside the callback function.
But i need to call the invite_friends_session.php whenever there is a click on the #submit.
how to do that?
Since the submit button is inside a form, clicking the submit button bubbles up and submits the form. You need to add a return false to the end of the handler:
$("#submit").click(function(){
$.get("invite_friends_session.php", function(){
});
return false;
});
[Edit] You should prevent the default form submit action upon click.
$(document).ready(function(){
$("#submit").click(function(e){
e.preventDefault(); //edit
$.get({ url: "invite_friends_session.php",
success: function() {
alert('success');
},
error: function() {
alert('error');
},
complete: function() {
alert('complete');
}
});
});
});
Remove the <form> tags around the submit button. Since you're using jQuery's .get method, you don't need that form tag (technically, it doesn't even need to be a submit input button). Right now, it's trying to post using the form instead of getting the page via jquery.
Example: http://jsfiddle.net/R3CWp/
<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
alert("i got clicked");
$.get("invite_friends_session.php", function(){
});
});
});
</script>
</head>
<body>
<input type="submit" name="submit" id="submit" style="margin-top:100px; margin-left:100px;" />
</body>