I'm starting to study web development and as exercise I was trying to make a form for redirecting in HTML with javascript and PHP.
HTML
<html>
<head>
<title>FORM</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
<form>
<input type="text" name="url"><br>
<input class="btn" type="button" id="send" value="Send" />
</form>
</body>
</html>
JavaScript
$(document).ready(function() {
$("#send").click(function(){
var url = $("#url").val();
$.ajax({
type: "POST",
url: "engine.php",
data: "url=" + url,
dataType: "html"
});
PHP
<?php
session_start();
$url = $_POST['url'];
header("Location: /".$url.");
session_destroy();
exit;
?>
The main problem is that seems that the js isn't read. Futhermore I don't know if the PHP is correct. What's wrong?
There's no need to make an AJAX request if you want to redirect to another URL. Also, the way your doing it at the moment wouldn't redirect anyway.
Below, when your click function fires, it will get the URL from your input field, and re-direct to that page.
<html>
<head>
<title>FORM</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#form_name").submit(function(event){
event.preventDefault();
var url = $("#url").val();
document.location.href = url;
});
})
</script>
<form id="form_name" name="form_name">
<input type="text" name="url" id="url"><br>
<input class="btn" type="submit" id="send" value="Send" />
</form>
</body>
</html>
you need to add id to input
<input type="text" name="url" id="url"><br>
and also header() don't work in ajax
you need to use javascript for redirect
in php
<?php
session_start();
$url = $_POST['url'];
echo '<script>document.location.href = '.$url.'</script>';
session_destroy();
exit;
?>
and put echo text into document with ajax respond function
also you can use a better way ( with out Ajax and submit form )
$(document).ready(function() {
$("#send").click(function(){
var url = $("#url").val();
window.location.href = url;
});
here is the best answer for you How to redirect to another webpage in JavaScript/jQuery?
UPDATE:
also you need delete , tags, here the html code instead of ...
<input type="text" name="url" id="url"><br>
<input class="btn" type="submit" id="send" value="Send" />
So you think your javascript isn't being executed? Does that mean you've debugged this?
If none of your javascript runs - including your ready handler, then the server isn't finding the js files. If some of your javascript is running it's possible that an error is causing it to stop. You probably just need to do a little debugging.
Related
After I submit my data from form I don't see it immediate on my screen, I have to refresh it via browser refresh button.
<form action="" method="post">
<input type="submit" name="submit" >
I was using the setTimeout function but it gave me lot of issues in submitting to the database and retrieving from it. I could not debug it properly, and so I removed this function. Without setTimeout, I am able to store in the database and retrieve via the refresh button. But how do I make it immediately auto refresh?
i have done with the help of jquery and ajax without refresh and page loading
html file with ajax
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sub").click(function(){
$.ajax({
url: 'dbadd.php',
type: 'POST',
data: {naam:$("#nm").val()},
success:function(response){
$("#d1").html(response)
}
});
});
});
</script>
</head>
<form method="post">
Name : <input type="text" id="nm" name="name">
<div id="d1"></div>
<input type="button" name="submit" id="sub" value="submit">
</form>
</html>
php file : adddb.php
<?php
$con=mysql_connect("localhost","root");
mysql_select_db("empl",$con);
$q=mysql_query("insert into emp(name) values ('".$_POST['naam']."')");
$qq=mysql_query("select name from emp where name='".$_POST['naam']."'");
while ($data=mysql_fetch_object($qq)) {
echo $data->name;
}
?>
For refresh page use this code:
<META HTTP-EQUIV ='Refresh' Content ='0; URL =/'>
You can use like this end of your code:
<?php echo "<META HTTP-EQUIV ='Refresh' Content ='0; URL =/'>"; ?>
Set your action as:
<?php echo $_SERVER['PHP_SELF']?>
and it will do the trick.
<form action="<?php echo $_SERVER['PHP_SELF']?>" method="post">
Action is the directive that trigger what to do with the data. If you don't specify it how is the browser supposed to do anithing?
I want to post simple form with ajax and update content of div (id result), but I get redirected to server.php file.
index.php:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/ajax.js" type="text/javascript"></script>
<form id="wbForm" action="server.php" method="POST">
Date1: <input type="text" name="date1" value="2000-01-21"><br>
Date2: <input type="text" name="date2" value="2000-01-02"><br>
<input type="submit" name="submit" value="Submit">
<div id="result"></div>
</form>
</body>
</html>
ajax.js:
$(document).ready(function showHint(form) {
$.ajax({
type:'POST',
url: 'server.php',
data:$('#wbForm').serialize(),
success: function(response) {
$('#wbForm').find('.result').html(response);
}});
});
server.php:
<?php
$input=$_POST;
//... compute something
echo "result";
?>
String "result" should appear in div with id=result, but I get redirected to /server.php where I can see "result", why?
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/ajax.js" type="text/javascript"></script>
<form id="wbForm" action="server.php" method="POST">
Date1: <input type="text" name="date1" value="2000-01-21"><br>
Date2: <input type="text" name="date2" value="2000-01-02"><br>
<input type="submit" name="submit" value="Submit">
<div id="result"></div>
</form>
</body>
</html>
ajax.php
$(document).on("ready", function(){
//Form action
$("#wbForm").on("submit", function(event){
// Stop submit event
event.preventDefault();
$.ajax({
type:'POST',
url: 'server.php',
data:$('#wbForm').serialize(),
success: function(response) {
$('#wbForm').find('.result').html(response);
}});
});
});
server.php
<?php
$input = $_POST;
print_r( $input );
?>
Happy Codding!!
There are several issues. First, you are getting redirected to server.php when you hit submit because of your form action "server.php". If you want the AJAX call to happen when clicking the button you should put the AJAX call in a JavaScript function and call that function onclick()
The reason the jQuery .AJAX call isn't triggering success is because it's expecting JSON. Try:
<?php
header("content-type:application/json");
$input=$_POST;
//... compute something
echo json_encode("result");
?>
Hope this helps.
I have this code.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form action = "" method = "POST" id = "form">
<img src = "circle.gif" id="loading" style="display:none; "/>
<input type="text" name = "text2">
<input type="submit" name="submit2" value="Send">
</form>
<?
if (isset($_POST['submit2'])){
echo $_POST['text2'];
}
?>
<script>
$('#form').submit(function(e) {
$('#loading').show();
return false;
});
</script>
</body>
</html>
I want to store in my db the value written in the textbox using PHP, and while it's being saved, I want to show a gif using jQuery, once the page is loaded, this gif should be removed.
Then, If I don't comment nothing, gif appears when submit button is submitted but echo fails.
If I comment the jQuery script, PHP echoes the vale written.
If I comment the PHP script, gif is shown but no echo of course...
How could I do what i'm asking. I know that my full script does until only showing the gif, but this without this I can't continue.
You can achieve your desired behaviour, but you need to do it by submitting an AJAX request to the server and then handling the return value. So basically you'd add this ajax request to the click or submit event of the form, and handle the behaviour and request via javascript.
Perhaps something like this:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form action = "formSubmitHandler.php" method = "POST" id = "form">
<img src = "circle.gif" id="loading" style="display:none; "/>
<input type="text" name = "text2">
<input type="submit" name="submit2" value="Send">
</form>
<script>
$(document).ready(function(){
$('#form').submit(function(){
// Show the loading icon before the processing begins
$('#loading').show();
// Send the query/form details to the server
jQuery.ajax({
data: $(this).serialize(),
url: this.action,
type: this.method,
success: function(results) {
// Now that the processing has finished, you
// can hide the loading icon
$('#loading').hide();
// perhaps display some other message etc
}
})
return false;
});
});
</script>
</body>
</html>
I want my form to load webpages. I want to turn html textbox into address bar. Just like whenever I write URL into that, It loads webpages in the same window.
My current HTML code is:
<html>
<body>
<title>BlogSoc Browser</title>
<h1 style="font-family:verdana;font-size:50px;color:#000000;text-align:center;">Address Bar</h1>
<center><form method="GET" action="/load.php"><input type="text" name="url" value="http://" /><input type="submit" value="Go" name="submit" /></form></center>
</body>
</html>
It looks like this: (couldn't post image)
or you can just open http://blogsoc.org/load
Please tell me the appropriate load.php code. Thanks in advance.
<?php
header("Location: " . $_GET['url']);
?>
should be what you need.
Using client side scripting:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myform').submit(function(){ //when form is submitted..
window.location = $('#url').val(); //..get url from the textbox and load that url
return false; // prevent the form from being submitted
});
});
</script>
</head>
<body>
<form id="myform">
<input type="text" id="url" value="http://" />
<input type="submit" id="submit" value="Submit" />
</form>
</body>
</html>
I used jQuery. For reference: https://developer.mozilla.org/en-US/docs/DOM/window.location
I am posting a form in an expressionengine (1.6.8) template. I'm doing it using jquery but have tried an HTML form too - same result. The PHP superglobal $_POST is empty after posting the form, even though I have PHP enabled on my templates (on input for the template containing the form and output on the processing template) and can see the POST variables in firebug.
Can anyone suggest what might cause this?
<html>
<head>
<script type="text/javascript" src="/_scripts/jquery-1.6.1.min.js"></script>
</head>
<body>
<form action="/select-locale/processing" method="POST">
<input type="text" name="test"/>
<input type="submit" name="submit" value="submit">
</form>
<a id="test" href="">link</a>
<script type="text/javascript">
$(function(){
$('#test').bind('click', function(e){
e.preventDefault();
var path = "/select-locale/processing"
var form = $('<form/>');
form.attr("method", "post");
form.attr("action", path);
var field = $('<input></input>');
field.attr("type", "hidden");
field.attr("name", 'locale');
field.attr("value", 'NZ');
form.append(field);
$('body').append(form);
form.submit();
});
});
</script>
</body>
</html>
server-side code (inherited, not my own) :
<?php
var_dump($_POST);
var_dump($_GET);exit;
if ( ! isset($_POST['locale']))
{
$locale = FALSE;
$returnPage = "/";
}
else
{
$locale = $_POST['locale'];
$returnPage = $_POST['returnPage'];
}
if (isset($_GET['locale'])) {
$locale = $_GET['locale'];
$returnPage = "/";
?>
{exp:cookie_plus:set name="cklocale" value="<?php echo $locale;?>" seconds="2678400"}
{exp:session_variables:set name="userLocale" value="<?php echo $locale;?>"} <?php
}
?>
{exp:cookie_plus:set name="cklocale" value="<?php echo $locale;?>" seconds="2678400"}
{exp:session_variables:set name="userLocale" value="<?php echo $locale;?>"}
{exp:session_variables:get name="testSession"}
{if '{exp:session_variables:get name="testSession"}'=='yes' }
{redirect="<?php echo $returnPage;?>"}
{if:else}
{redirect="/nocookies/"}
{/if}
check the network tab if the parameters you want are really sent out
check the url if it's correct
if you use any sort of routing mechanism or url rewrite, you might wanna review it also
check your validation and XSS rules (if any) as it may reject the whole array once hints of XSS is found.
happened to me a while ago (CI) and i was sending it to the wrong url
You might want to re-check the action attribute, are u sure you're sending the data to the right url? I doubt that anything could be filtered.
it seems like form is getting submitted twice because of either action attribute of form tag or oath value in jquery function
It may be useful
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body name="test">
<form action="/select-locale/processing" method="POST">
<input type="text" name="test"/>
<input type="submit" name="submit" value="submit">
</form>
<a id="test" href="">link</a>
</body>
</html>
<script type="text/javascript">
$(function(){
$('#test').bind('click', function(){
var form ='<form action="/select-locale/processing" name="newform" method="POST"><input type="hidden1" name="locale" value="NZ"></form>';
$('body').append(form);
alert('added');
document.newform.submit();
});
});
</script>`