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.
Related
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>
I tried doing an isset($_POST['btnSubmit']. It gives me nothing so tried to var_dump it. It sais itis empty both before and after i click the button . I even tried to print_r it like this print_r($_POST['btnSubmit']);. What it gives me is:
Undefined index: btnSubmit in
Same thing happens if I use $_GET, $_SESSION , $_COOKIE.
Here is the .tpl file:
<html lang="sv">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="passwordRetrivalStyle.css">
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script src="skriptRetrival.js"></script>
<title>{$title}</title>
</head>
<body>
<header><img src="arrow-back.svg" alt="arrow-back.svg" onclick="goBackFunction()" id="arrow-back"></header>
<div id="content">
<form method="post" action="passwordRetrival.inc.php">
<center><span id="headText">{$headText}</span><br/><br/></center>
<center><span id="smallText">{$smallText}</span></center><br/>
<center><input type="text" name="txtForgot" class="txtForgot" placeholder="Email" />
<br/><br/><br/>
</center>
<center><input type="submit" name="btnSubmit" value="Retrieve Password" class="forgotSubmit" /></center>
<center><input type="submit" name="btnDone" value="Ok, got it" class="newButtonFinished" /></center>
<br/><br/>
<center><div id="opsMSG"></div></center>
<center><div id="errorMsg"></div></center>
</form>
</div>
</body>
</html>
I have dynamically loaded a page. In that page I have two div with the required values or the data displayed in one div or iframe and the values passed using POST to another file that should reflect in another div or iframe as a result.
Please help me to solve this....
Thank you.
Following is my Sample code
main.html
<html>
<head>
</head>
<body>
<div id="leftbar" style="background-color:#eeeeee;width:400px;height:1000px;float:left;position:absolute;">
<iframe src="form1.html" width="1050px" height="1500px" seamless></iframe>
</div>
<div id="container" style="background-color:#FFD700;height:1000px;width:990px;float:right;">
<iframe src="process.php" name="content" width="1050px" height="1500px" seamless></iframe>
</div>
</body>
</html>
form1.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello!</title>
</head>
<body>
<form name="myform" action="process.php" method="POST" >
<input type="hidden" name="check_submit" value="1" />
Choose the colors: <br>
<input type="checkbox" name="Colors[]" value="green" checked="checked" onclick="document.forms.myform.submit();"/> Green<br>
<input type="checkbox" name="Colors[]" value="yellow" onclick="document.forms.myform.submit();" /> Yellow <br>
<input type="checkbox" name="Colors[]" value="red" onclick="document.forms.myform.submit();"/> Red <br>
<input type="checkbox" name="Colors[]" value="gray" onclick="document.forms.myform.submit();" /> Gray <br>
<br /><br />
</form>
</body>
</html>
process.php
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello!</title>
</head>
<body>
<?php
if (array_key_exists('check_submit', $_POST)) {
if (isset($_POST['Colors']) ) {
$_POST['Colors'] = implode(', ', $_POST['Colors']);
}
echo "Colors you chose: {$_POST['Colors']}";
}
?>
</body>
</html>
Change your main.html to main.php and for form name instead of process.php just use main.php
<html >
<head>
</head>
<body>
<div id="leftbar" style="background-color:#eeeeee;width:400px;height:1000px;float:left;position:absolute;">
<iframe src="form1.html" width="1050px" height="1500px" seamless></iframe>
</div>
<?php
if (isset($_POST['Colors'])) {
if (array_key_exists('check_submit', $_POST)) {
$_POST['Colors'] = implode(', ', $_POST['Colors']);
}
echo "Colors you chose: {$_POST['Colors']}";
<div id="container" style="background-color:#FFD700;height:1000px;width:990px;float:right;">
<iframe src="process.php" name="content" width="1050px" height="1500px" seamless> </iframe>
</div>
<?PHP
}
?>
</body>
</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