This question already has answers here:
jquery mobile w/ php login form
(2 answers)
Closed 5 years ago.
am trying to submit a form from a jquery-mobile page to a php file for processing but whenever i press the submit button it displays an "Error Loading Page" dialog.
I have tried looking at the w3schools website form submission example and am pretty sure my code is the same.This is my code.
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery Mobile</title>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
.ui-content {
margin-top:150px;
margin-left:500px;
margin-right:500px;
}
/* For mobile screens */
#media screen and (max-width: 480px) {
.ui-content{
margin:0px;
}
</style>
</head>
<body>
<div data-role="page" id="chat">
<div data-role="header"><h1>Welcome to the Streamline Chat App</h1></div>
<div data-role="main" class="ui-content">
<h3>Select a username to continue</h3>
<form method="post" action="login.php">
<label for="username" >Username:</label>
<input type="text" id="username" name="username">
<input type="submit" data-inline="true" value="Submit">
</form>
</div>
</div>
</body>
</html>
login.php
<?php
$username = $_POST['username'];
echo $username;
?>
Am wondering if am doing something wrong. Please help me out. Both files are in the same directory
I got the answer from another post here
Just needed to add data-ajax="false" to the form tag
<form method="post" action="login.php" data-ajax="false">
<label for="username" >Username:</label>
<input type="text" id="username" name="username">
<input type="submit" data-inline="true" value="Submit">
</form>
Related
This question already has answers here:
PHP code is not being executed, but the code shows in the browser source code
(35 answers)
How do I make a redirect in PHP?
(34 answers)
Closed 5 years ago.
i have a problem with PHP and HTML, I want a link to redirect to a PHP page for a login form, doing like so:
<p>Login</p>
redirect the browser to the file, but it shows just the code, without showing the form, is there something that i'm missing?
the link is referring to a PHP script, the code is this:
<?php
header("location:WebPage1.html");
include('login.php');
if(isset($SESSION['login.php'])){
header("location:login.php");
}
?>
<!doctype HTML>
<html>
<head>
<title>Login PC SHOP</title>
<a href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<h1>Esegui il login al sito</h1>
<div id="login">
<h2>Login Form</h2>
<form action="" method="post">
<label>UserName :</label>
<input id="name" name="username" placeholder="username" type="text">
<label>Password :</label>
<input id="password" name="password" placeholder="**********"
type="password">
<input name="submit" type="submit" value=" Login ">
<span><?php echo $error; ?></span>
</form>
</div>
</div>
</body>
</html>
This is what i get when clicking the login link on the main webpage:
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>
PC Shop - Home Page
</title>
</head>
<body>
<h1> PC Shop </h1>
<p>Login</p>
<table border=1>
<tr>
<td>
Carrello
</td>
<td>
Area Clienti
</td>
</tr>
</table>
</body>
</HTML>
Executing PHP is done by a server. When no server is running/installed your browser will most likely just show the contents of that file. You'll need something like WAMP (windows), XAMPP (linux) or MAMP (osx).
I have problem to turn off Ajax navigation using data-ajax="false" on your form definition
Where I to setting this.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>textinput</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
</head>
<body>
<form name="form1" method="post" action="PageUploadToMySQL2.php" data-ajax="false" enctype="multipart/form-data">
ชื่อรถ : <input type="text" name="txtcarNAME"><br>
ราคา: <input type="text" name="txtcarPRICE"><br>
Picture : <input type="file" name="filUpload"><br>
<input name="btnSubmit" type="submit" value="Submit">
</form>
</body>
is my code.
You can change the properties right before jQuery Mobile starts working.
Refer to this, take a look at the ajaxFormsEnabled property and ajaxLinksEnabled if you need: http://demos.jquerymobile.com/1.0a3/#docs/api/globalconfig.html
i have a few pages and when the input is submitted it will go to a php file which checks the url variable this could be executeeffects.php?option=blockuser
but when i go to the page the page just says "undefined" in the executeeffects php file it has a checking feature to check if a variable is set, it echos out one thing if it is or another thing if it isnt, however i didnt make it echo undefined so i dont no where that is coming from, the code is below
can someone tell me if this is a problem with jquery mobile or if im missing something please?
block.php
<!DOCTYPE html>
<html>
<head>
<title>Ryan Kelly</title>
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="effects.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Ryan Kelly</h1>
</div><!-- /header -->
<div data-role="content">
<label for="basic">Username:</label>
<input type="text" name="name" id="basic" value="" />
<input type="text" name="name" id="blocked" value="" />
Submit
<?php include('listusers.php'); ?>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
executeeffects.php
<?php
if(isset($_GET['option'])){
echo 'something is set!';
} else {
echo 'nothing is set!';
}
?>
You Said "i have a few pages and when the input is submitted it will go to a php file which checks the url variable this could be executeeffects.php?option=blockuser"
This:
<input type="text" name="name" id="basic" value="" />
<input type="text" name="name" id="blocked" value="" />
Submit
will not submit the value of the inputs unless you are using some type of jQuery that you have not posted in which case this will need to be done differently.
to submit the value of the inputs you need to use a <form>
I'm new to php and am trying to make a very simple two page form. Any help or guidance would be very appreciated!
Problem:
The second page does not run error validation when coming to it from the first page.
Both pages run error validation correctly URL's entered directly
Setup:
Page 1 one is HTML. It POSTS to Page2.
Page 2 is php and the data from Page 1 is stored in an input field
Live example:
http://www.linplusg.com/page1.html
In IE the Page 2 URL after coming from Page 1 looks to be incorrect:
http://www.linplusg.com/page1.html#/page2.php
In FF and Chrome the URL looks fine but I think there's a flicker/refresh happening.
Does something else happen besides just opening the page when doing a POST to a page? Does something value get stored the new fields? Am I doing the form action wrong? Dazed and confused...
Thank you so much for any help or suggestions. I've been searching around for answers all night and my brain feels like jello. It seems like I'm missing something simple?!
Page1 Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/my.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js">
</script>
<script>
$(document).ready(function(){
$("#initialForm").validate();
});
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="content">
<form id="initialForm" method="post" action="page2.php">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="textinput3">
Zip Code
</label>
<input name="zip" id="zip" maxlength=5 value="" type="text" class="required" />
</fieldset>
</div>
<input type="submit" data-theme="e" value="Submit" />
</form>
</div>
</div>
</body>
</html>
Page 2 code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/my.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js">
</script>
<script>
$(document).ready(function(){
$("#fullForm").validate();
});
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="content">
<form id="fullForm" method="get" action="">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<input name="zip" id="zip" value="<?php echo $_POST["zip"]; ?>" type="" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="textinput3">
First Name
</label>
<input name="first_name" id="first_name" placeholder="" value="" type="text" class="required"/>
</fieldset>
</div>
<input type="submit" data-theme="e" value="Submit" />
</form>
</div>
</div>
</body>
</html>
To prevent this you need to specify data-ajax="false" in the form element in page1.
<form id="initialForm" method="post" action="page2.php" data-ajax="false">
see http://jquerymobile.com/test/docs/forms/forms-sample.html for more information.
Without the PHP code, I can just guess, but maybe it is because in the second form you have a method="get" instead of method="post", and in PHP you check the $_POST variable?
You could preserve the ajax transitions and still have your javascript execute on your second page by moving your script inside the div with the data-role "page".
See this answer here: https://stackoverflow.com/a/6428127/2066267
When the form is submit my jquery accordion stops working my file name is add.php here is its code
<?php require_once('database.php');?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/accordionTheme.css">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.ui.core.js" type="text/javascript"></script>
<script src="js/jquery.ui.widget.js" type="text/javascript"></script>
<script src="js/jquery.ui.accordion.js" type="text/javascript"></script>
<script>
$(function() {
$("#myAccordion").accordion();
});
</script>
<head>
<body>
<div id="myAccordion"><!-- Start Accordion --->
<h2>
Add Student
</h2>
<div>
<form action="add.php" id="form1" method="get" >//here my form start
<p>Please add Student Data</p>
<label for="stname">Enter Student Name:</label>
<input name="stname" type="text" id="stname" size="37" />
<br /><br />
<label for="stclass">Enter Student Class :</label>
<select name="stclass">
<option>MPhil</option>
<option>M.Sc.</option>
</select>
<br />
<input name="Add" type="submit" id="Add" value="Add" />
</form>
<?php
//lets start submit data to database
if(isset($_GET['stname'])&& isset($_GET['stclass']))
{
$stname=$_GET['stname'];
$stclass=$_GET['stclass'];
if(mysql_query("insert into student(teacher_id,student_name,student_class) values ('1','$stname','$stclass')"));
{
print "<p>record added</p";
}
}
?>
</div>
<h2>
Add course
</h2>
<div></div>
<h2>
Add publication
</h2>
<div></div>
</body>
</html>
I am printing php inside body you can see recordadded when form is submitted.
The p tag you print using PHP is not closed, which is what makes JavaScript go crazy. Close it and it should work OK.