I'm building a mobile website using jQuery Mobile and PHP.
Currently, when I submit a form with PHP, it redirects me to the previous page.
However, I want to stay on the same page.
Here's my code:
<form action="#" method="post" data-ajax="false">
<center>
<div data-role="page">
<div data-role="collapsible" data-iconpos="right" data-theme="a" style="width:500px">
<h3>Offer 1</h3>
<img src="images/special1.jpg"/>
<h3>Valid through: 06/30/2013</h3>
<div data-role="collapsible" data-collapsed="true" data-iconpos="right" data-theme="a" style="width:400px; background-color:#FFFFFF">
<h3>Redeem this offer</h3>
<div >
<h4 style="color:#CC0000"> To be used by our staff only!</h4>
<p style="color:#CC0000;font-family:Arial, Helvetica, sans-serif">Do <strong>not</strong> press the Redeem button now. Ask our store associate for assistance.</p>
<input type="submit" name="offer1btn" value="Redeem" data-theme="b" style="background:#FF0000 !important"/>
</div>
<div style="display:none">
<h4 style="color:#CC0000">Offer has been Taken</h4>
</div>
</div>
</center>
</form>
Or you can use
action="<?php echo $_SERVER['PHP_SELF'];?>"
hope that helps.
jQuery Mobile is a little bit specific with form submitting. If you disable classic jQuery Mobile form handling with data-ajax="false" attribute then only correct way to submit a form is through $.ajax call.
I made a working example here: jQuery Mobile: How to correctly submit form data
Related
I am trying to $_GET a hidden input using PHP.
When I check the html code in Chrome, Safari, etc., I can see the value of the hidden variable but when I try to echo it with PHP it is empty. All of this is inside a modal.
I don't really understand what I am doing wrong.
I hope some of you can help me.
<form method="get">
<input name="hiddencontainer" type="hidden" id="hiddencontainer" value="default"/>
</form>
<div id="frame" class="modal">
<div class="modal-content">
<!-- Body content -->
<div class="modal-body">
<p id="content">
<?php
// Get information
$id = $_GET["hiddencontainer"];
echo $id;
?>
</p>
</div>
</div>
</div>
You need to submit the form to get the value, try this
<form method="get">
<input name="hiddencontainer" type="hidden" id="hiddencontainer" value="default"/>
Click the button to submit the form and you will see the value
<input type="submit" name="Submit form"/>
</form>
<div id="frame" class="modal">
<div class="modal-content">
<!-- Body content -->
<div class="modal-body">
<p id="content">
<?php
// Get information
$id = $_GET["hiddencontainer"];
echo $id;
?>
</p>
</div>
</div>
</div>
This is my code..I want to fetch data from textarea..
Im using ckeditor to make it active i have use contenteditable="true"...but when i use this it is not able to fetch textarea value
<body>
<form action="sample_posteddata.php" method="post">
<div id="container">
<div id="header">
<div id="headerLeft">
<h2 id="sampleTitle" contenteditable="true">
<textarea name="article_title" ></textarea>
</h2>
</div>
</div>
</div>
<div id="columns">
<div id="column1">
<div contenteditable="true">
<textarea name="article_body" ></textarea>
</div>
</div>
</div>
<input type="submit" name="submit" value="Submit">
</form>
</body>
from this code it gives me error of undefined index article_body
please suggest me with some solution
In PHP you can fetch form data by form attribute name Try this
$_POST['article_body']` and `$_POST['article_title']
OR
$_REQUEST['article_body']` and `$_REQUEST['article_title']
Remember ckeditor may change the name of that textarea.
Dump post data using
echo'<pre>';
print_r($_POST);
And check the exact variable name.
OR
For exact name you can use inspect element (or press f12)
I have a simple dialog box:
<div data-role="dialog" id="uploadImage" data-title="Upload Image" data-needs-auth="true">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Upload Image</h1>
</div><!-- /header -->
<div data-role="content">
<form name=uploadForm method=post enctype="multipart/form-data" action="uploadbi.php" data-ajax="false">
<input type=file name=filename>
<input type=hidden name=MAX_FILE_SIZE value=8000000>
<input type="submit" value="Upload Image" data-theme="a" data-inline="true">
</form>
</div>
</div>
</div>
The problem is that it does not pass the filename field. From Firebug:
Post Parameters
application/x-www-form-urlencoded
MAX_FILE_SIZE 8000000
seid 6e540f68067707233241eb170ca83c43
Source
MAX_FILE_SIZE=8000000&seid=6e540f68067707233241eb170ca83c43
This is running under Firefox and I verified that it also fails under Chrome. It's been forever since I've dealt with file uploads in a form. What am I missing?
Last month I had a similar problem. Try to add data-ajax="false" on your form definition and see if that will help.
For more information, you could check this link.
I have been given some work to do on a site which uses Expression Engine. To produce a login for the user the site uses freemember plugin.
This produces a popup login form, what I have got stuck on is:
The user clicks on login
The form pops p
The user clicks on forgotten password
The user enters their email address and clicks submit
The popup disappears and the page shows behind.
It is the last bit I am attempting to alter as per the clients wish:
They are hoping that I can get the popup to:
1. stay on screen
2. display a 'password has been sent to email address' message on submit
3. wait 5 seconds and refresh popup so it displays the login page
The current code used on the page is
<div class="signuppopup popupsgroup" style="display:none">
<div class="signuppopup-close"><img onclick="$('.popupsgroup').hide();" src="{site_url}themes/site_themes/agile_records/images/close_button.png" alt="X" /></div>
<div id="signin_navigation">
<ul>
<li>Create Account</li>
<li style="margin-left:20px;">Sign In</li>
</ul>
</div>
{exp:freemember:login return="{segment_1}/{segment_2}" error_handling="inline" error_delimiters='<span class="error">|</span>' form_id="sign_in_form" form_class="formholder"}
<div class="form-tab">
<div class="tab">
<label for="email">Email Address</label>{field:email}<br />
{error:email}
</div>
<div class="tab">
<label for="password">Password</label>{field:password}<br />
{error:password}
</div>
<div class="tab">
<input type="submit" class="sendbtn" value="Sign In" />
</div>
<div class="tab">
<a class="orange" onclick="forgot_password();" href="#">Forgot your password?</a>
</div>
</div>
{/exp:freemember:login}
{exp:freemember:forgot_password form_id="reset_password_form" form_class="formholder"}
<div class="form-tab">
<div class="tab">
<label for="email">Email address</label>{field:email}<br />
{error:email}
</div>
<p id="password_message">Please enter your email address and <input type="submit" value="click here" class="orange"> to receive an email with your new password.</p>
</div>
{/exp:freemember:forgot_password}
<div id="password_confirmation" style="display:none;">A new password has been sent to you</div>
</div> <!-- End signuppopup -->
You are looking for a way to let the browser and server communicate with eachother in an asynchronous way. Since I do not remember Freemember to support Ajax you can do two things:
Look for an alternative http://devot-ee.com/search/tags/tag/ajax-login
Write the javascript and php yourself.
I would advise the first because you are probably also having troubles with the popup to 'stay on screen' when someone enters an invalid e-mail address...
I'm currently creating a simple jQuery Mobile sign in page. Here's my code:
<div data-role="page">
<div data-role="header"><h1>Header</h1></div>
<?php
if(isset($_POST['username']) && isset($_POST['password'])){
die("hello");
}
?>
<div data-role="content">
<form method="post">
<div data-role="fieldcontain">
<label for="username">Username:</label>
<input id="username" type="text" name="username" />
</div>
<div data-role="fieldcontain">
<label for="password">Password:</label>
<input id="password" type="password" name="password" />
</div>
<input type="submit" value="Sign In" data-inline="true" data-theme="b" />
</form>
</div>
<div data-role="footer"><h4>Footer</h4></div>
</div>
Whenever I type in a username and password, using firebug, I can tell that the correct post was sent, however, the page that is returned through ajax to load into the page does not have the die("hello") in it. It is just the same page that I entered the login information on.
Am I using jQuery Mobile's form system wrong?
You may want to consider turning off Ajax, while you are troubleshooting your form submission. The Ajax handling of form submissions inside JQuery Mobile is implemented automatically to create a smooth transition between the form and the result. Details, here. To submit a form without Ajax, you can either disable Ajax form handling globally, or per form via the
data-ajax="false"
attribute. Or, globally,
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});