Form over several pages - URL should remain - php

Don´t know if my english is sufficient to explain this right:
I have made a Form that is needs 4 or 5 pages until final submit comes.
On every change the Post is added to the new page as a hidden field and a new script is called.
<form method="post" action="form4.php">
My problem is i dont want the browser to show the url to the new script and ideally keep it at the origin url.
I dont know the right terms to search on google or here for a solution. Maybe you can give me a hint how to accomplish this?

Another option is to handle the form by the same script in stages.
<form action="formhandler.php" method="post">
<input type="hidden" name="form_stage" value="1" />
....
</form>
and within the formhandler.php:
switch($_POST['form_stage']) {
case 5:
// handle the stage 5 stuff here
break;
case 4:
// handle stage 4 stuff here, output form for stage 5
break;
case 3:
// handle stage 3 stuff here, output form for stage 4
break;
case 2:
// ditto
break;
case 1:
default:
// display initial form here
}
Of course, you don't have to use a switch for this. A long sequence of if/else if works just as well, it comes down to personal preference/code complexity. But this basic workflow allows you to keep the same url and still display multiple different forms without having to resort to AJAX/javascript.

If the action of the form is form4.php, then you can't change which URL the form posts to. However, you can do a redirect immediately after processing the data of the post to the URL you want the user to be at.
Alternately, you can change your form actions so they all post to the same page and just allow for multiple types of posting in your PHP.

You can use Ajax and pass data from form to php script and than load new form. Or you can pass argument(hidden or not) to file:
<form action="form.php?p=1" method="post">
...
</form>
Hidden parameter:
<form action="form.php" method="post">
<input type="hidden" value="4" name="p">
...
</form>
Depending on p value you load proper form and do things with rest of data.

Load your php site inside an iframe within some page.. The url of this page will always remain.

think i found another solution and want to share it:
the solution with the switch and the solution with ajax made me think about how to solve this easier. why not make the form on one page and hide the different parts. what waas before a button to submit the part is now a button to hide previous part and show next.
<script type="text/javascript">
window.addEvent('domready', function()
{
$$('.blau').set('text', 'Erkennen Sie die Heilpflanze?');
$('page_2').slide('hide');
$('page_3').slide('hide');
$('page_4').slide('hide');
$('page_5').slide('hide');
var togglePrefix = 'toggle_', boxPrefix = 'page_', emptyPrefix = '';
$$('.submit_box a').addEvent('click', function(e)
{
e.stop();
var id = $(this.get('id').replace(togglePrefix,emptyPrefix));
var id_new = parseInt($(this).get('id').replace(togglePrefix, emptyPrefix)) + 1;
var next = ('page_'+id_new);
var id_old = $(this.get('id').replace(togglePrefix,boxPrefix));
$(id_old).set('slide', {duration: 'long', transition: 'linear'});
$(id_old).slide('out');
$(next).slide('in');
if (next == 'page_1')
{
}
if (next == 'page_2')
{
}
if (next == 'page_3')
{
}
if (next == 'page_4')
{
$$('.blau').set('text', '....und die letzte ist?');
}
if (next == 'page_5')
{
$$('.blau').set('text', 'Nur noch ein paar Daten:');
}
});
});
</script>
the html:
<form id="gewinnspiel" name="gewinnspiel" method="post" action="<?=$_SERVER[PHP_SELF]; ?>">
<div id="page_1">
<div class="inhalt-gewinn">
<div class="gewinn_bild"></div>
<div class="gewinn_form">
<div class="input_box">
<div><input type="radio" name="frage1" value="Kamille" /><span>Kamille</span></div>
<div><input type="radio" name="frage1" value="Kaktus" /><span>Kaktus</span></div>
<div><input type="radio" name="frage1" value="Krokus" /><span>Krokus</span></div>
</div>
<div class="submit_box"><a id="toggle_1" class="frage">nächste Frage...</a></div>
</div>
<div class="gewinn_werbung"></div>
</div>
</div>
<div id="page_2">
<div class="inhalt-gewinn">
<div class="gewinn_bild"></div>
<div class="gewinn_form">
<div class="input_box">
<div><input type="radio" name="frage2" value="Ringelblume" /><span>Ringelblume</span></div>
<div><input type="radio" name="frage2" value="Rotklee" /><span>Rotklee</span></div>
<div><input type="radio" name="frage2" value="Ringelkraut" /><span>Ringelkraut</span></div>
</div>
<div class="submit_box"><a id="toggle_2" class="frage">nächste Frage...</a></div>
</div>
<div class="gewinn_werbung"></div>
</div>
</div>
<div id="page_3">
<div class="inhalt-gewinn">
<div class="gewinn_bild"></div>
<div class="gewinn_form">
<div class="input_box">
<div><input type="radio" name="frage3" value="Enzian" /><span>Enzian</span></div>
<div><input type="radio" name="frage3" value="Eisenkraut" /><span>Eisenkraut</span></div>
<div><input type="radio" name="frage3" value="Eiche" /><span>Eiche</span></div>
</div>
<div class="submit_box"><a id="toggle_3" class="frage">nächste Frage...</a></div>
</div>
<div class="gewinn_werbung"></div>
</div>
</div>
<div id="page_4">
<div class="inhalt-gewinn">
<div class="gewinn_bild"></div>
<div class="gewinn_form">
<div class="input_box">
<div><input type="radio" name="frage4" value="Wollblume" /><span>Wollblume</span></div>
<div><input type="radio" name="frage4" value="Tulpe" /><span>Tulpe</span></div>
<div><input type="radio" name="frage4" value="Rose" /><span>Rose</span></div>
</div>
<div class="submit_box"><a id="toggle_4" class="frage">nächste Frage...</a></div>
</div>
<div class="gewinn_werbung"></div>
</div>
</div>
<div id="page_5">
<div class="inhalt-gewinn">
<div class="gewinn_bild"></div>
<div class="gewinn_form">
<div class="input_box_ende">
<?php echo '<input name="date" type="hidden" value="', time(), '" />'; ?>
<div class="nosee">eMail:<input name="email" type="text" id="email" value="<?=$_POST['email']; ?>" size="30" /></div>
<div><span>Vorname:</span><input type="text" name="vorname" value="<?=$_POST['vorname']; ?>"/></div>
<div><span>Nachname:</span><input type="text" name="nachname" value="<?=$_POST['nachname']; ?>"/></div>
<div><span>Strasse:</span><input type="text" name="strasse" value="<?=$_POST['strasse']; ?>"/></div>
<div><span>Ort:</span><input type="text" name="ort" value="<?=$_POST['ort']; ?>"/></div>
<div><span>PLZ:</span><input type="text" name="plz" value="<?=$_POST['plz']; ?>"/></div>
<div><span>eMail:</span><input type="text" name="imehl" value="<?=$_POST['imehl']; ?>"/></div>
</div>
<div class="submit_box"><input id="submit" name="senden" type="submit" value="Senden" /></div>
</form>
</div>
</div>
</div>
all working ! thx for the inspiration!

Related

Show up a title box,when you click a button

I am wondering if there is a way to show a title box containing a message when you click a button,or as a better example,you have an input,and after php script evalute the value,and it's wrong,a title box will show up , saying "Wrong" ... Any ideas? Just with php if its possible!!
EDIT:
What i am looking for,is not for a simple message like:
echo '<p></p>';
Of course i know how to do that,its basic...
I was just wondering if a TITLE box can show up,like this:
<input type=text title='Wrong'>
but after the value its evaluated...
You could achieve this by setting a GET or POST value with the button:
html:
<form method="post">
<input type="hidden" name="postvalue" value="yes">
</form>
php:
<?php
if(isset($_POST['postvalue'])){
echo "<p>messageboxtoshow</p>";
}
?>
however a solution with javascript would work way better and would look way more userfriendly, and this only works on page refresh.
Try this sample one
<?php
if(isset($_POST['submit'])){
echo "<p> Your message</p>";
}
?>
<form action=<?php $_SERVER['PHP_SELF']?> method="post" >
<input type="submit" name="submit" value="submit">
</form>
Do you mean validation per input field?
You can use JQuery for that.
I made a fiddle to give you a visual idea: http://jsfiddle.net/4b3tzreo/
For example, if this is your form:
<div class="container">
<div class="left">
Username
</div>
<div class="right">
<input type="text" name="username" id="username" />
</div>
</div>
<div class="container">
<div class="left">
Password
</div>
<div class="right">
<input type="password" name="password" id="password" />
</div>
</div>
<div class="container">
<div class="left">
<button id="submit">Submit values</button>
</div>
</div>
You can add a class to it when the input value is empty, like this:
$('#submit').click(function(){
var username = $('#username').val();
var password = $('#password').val()
if(username === '') {
$('#username').addClass('error');
alert('username is not filled');
}
if(password === '') {
$('#password').addClass('error');
alert('password is not filled');
});

PHP how to make form disappear after pressing submit button

Lets say i have a form that asks for name and exam result. Id like to make the form disappear and display another div when the user hits submit.
heres the form code
<form action="exam.php" method="post" id = "coursedata" class="form-horizontal">
<fieldset>
<legend>Please Complete the Details</legend>
<div class ="form-group">
<label for="name" class="control-label col-xs-2">Student name</label>
<div class="col-xs-6">
<input type="text" name="name" id="name" size="20" class="form-control" autofocus required pattern = "[A-Z][a-z]+( [A-Z][a-z]+)?" title="Please enter a name (Surname optional) with First Letter capitalised">
</div></div>
<div class ="form-group">
<label for="CA1" class="control-label col-xs-2">Assessment One</label>
<div class="col-xs-6">
<input type="number" class="form-control" min = "0" max = "100"name="CA1" id="CA1" size="3" maxlength ="3" onkey ="limit(this);" onkeyup="limit(this);" required>
</div></div>
<div class="buttonarea">
<input type="submit" value="Submit" name = "Submit">
<input type="reset" value="Clear the Info">
</div>
</fieldset>
</form>
The shortest way (asuming that form and exam.php are the same files...):
<?php
if (!isset($_POST['Submit'])) {
?>
Your form code
<?php
}
else {
// form engine
echo "<div>SUCCESS</div>";
}
?>
Hope it helps :). PS. This is a strict answer to Your question, whether there are many other questions, like how to handle form, how to verify it, etc. But this is another side of answered coin ;). Best regards :).
Use jQuery for this (JavaScript library).
Copy this in your head section
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button[type="submit"]').click(function(){
$("#coursedata").hide();
return false;
})
})
</script>

Zend get value from textbox and add it into search url

I have question,this is the following code.
<form action="" method="post" id="search">
<div class="row collapse">
<div class="ten columns mobile-three">
<input type="text" size="25" name="search" value="<?php echo $this->search ?>"/>
</div>
<div class="two columns mobile-three">
<input type="submit" name="/search/index/keyword/" value="Search"; ?>" class="button expand postfix" id="search_button"/>
</div>
</div>
</form>
when I click the submit button,the url should be
from id/ to id/search/index/keyword/(here's the search key)
HTML
<form action="" method="post" id="search" name="search" onsubmit="submitForm();">
<div class="row collapse">
<div class="ten columns mobile-three">
<input type="text" size="25" name="search" id="search_value" value="<?php echo $this->search ?>"/>
</div>
<div class="two columns mobile-three">
<input type="hidden" value="/search/index/keyword/" id="search_url"/>
<input type="submit" name="search" class="button expand postfix" id="search_button"/>
</div>
</div>
</form>
JS
<script>
function submitForm()
{
var search_button = document.getElementById('search_url').value;
var search_text = document.getElementById('search_value').value;
document.searchForm.action = search_button + '/' + search_text;
document.searchForm.submit();
return false;
}
</script>
PHP
<?php
if (isset($_POST['search'])) {
// add action code here
}
?>
I'd use a server-side language for that. Make a process page (unless you're familiar with AJAX), get the values by $_POST and make the process page redirect.
I'm pretty sure that it's possible using JavaScript as well, but I'm really bad at it so don't count on my solution.
You can use JS to accomplish your goal.
1) make a function that runs when user clicks submit button.
2) function grabs the word from search box.
3) function changes the "action" attribute on the form element
4) form is submitted

Form Submit without Refreshing using Plugin (malsup)

I just created a form submit without refreshing using this plugin : http://malsup.github.com/jquery.form.js
The simple example can be seen at
http://jquery.malsup.com/form/
I don't what I was doing, it was worked fine before until I modified something that I don't remember.
When I click SAVE, it should be processed on the background and it should stay on the same page. But now, it doesn't and it redirect me to the action page (process-001.php)
I created another page using the same method, and it works just fine.
Can you see if I'm doing it wrong?
Here is the form :
<div id="submit-form">
<form action="web-block/forms/process-001.php" id="select-block" class="general-form" method="post" enctype="multipart/form-data">
<div class="input-wrap">
<input class="clearme" name="Headline" value="<?php echo $Headline;?>" id="headline"/>
</div>
<div class="input-wrap">
<textarea class="clearme" name="Sub-Headline" id="subheadline"><?php echo $SubHeadline ;?></textarea>
</div>
<label>Bottom Left Image</label>
<div class="up-mask">
<span class="file-wrapper">
<input type="file" name="Pics" class="photo" id="pics" />
<span class="button">
<span class="default-txt">Upload Photo</span>
</span>
</span>
</div><!-- .up-mask -->
<input type="hidden" name="Key" id="Key" value="<?php echo $Key;?>"/>
<input type="submit" class="submit-btn" value="SAVE" />
<span class="save-notice">Your changed has been saved!</span>
</form>
</div>
The Javascript :
<script>
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#select-block').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
</script>

Submtting An animated form using jquery ajax and php to mysql database

I have been having problems for the past two days trying to submit a form using jquery ajax, php to mysql database. I reused a code for an animation form which I found online. The html code as follows (file name: "Slider.html"):
<html>
<body>
<div id="form_wrapper" class="form_wrapper">
<form class="register" style="right:-500px;backgroundcolor:grey;">
<h3>Register</h3>
<div class="column">
<div>
<label>First Name:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div>
<label>Last Name:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
</div>
<div class="column">
<div>
<label>Username:</label>
<input type="text"/>
<span class="error">This is an error</span>
</div>
<div>
<label>Email:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div>
<label>Password:</label>
<input type="password" id="r_passwordField"/>
<span class="error">This is an error</span>
</div>
</div>
<div class="bottom">
<div class="remember">
<input type="checkbox" />
<span>Send me updates</span>
</div>
<input type="submit" id="registrationform" value="register"/>
<a href="index.html" rel="login" class="linkform">You have an account already? Log in
here</a>
<div class="clear"></div>
</div>
</form>
<form class="login active">
<h3>Login</h3>
<div>
<label>Username:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div>
<label>Password: <a href="forgot_password.html" rel="forgot_password" class="forgot
linkform">Forgot your password?</a></label>
<input type="password" id="l_passwordField" size="10"/>
<span class="error">This is an error </span>
</div>
<div class="bottom">
<div class="remember"><input type="checkbox" /><span>Keep me logged in</span></div>
<input type="submit" id="loginform" value="Login"></input>
<a href="register.html" rel="register" class="linkform">You don't have an account yet?
Register here</a>
<div class="clear"></div>
</div>
</form> <form class="forgot_password">
<h3>Forgot Password</h3>
<div>
<label>Username or Email:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div class="bottom">
<input type="submit" id="forgortform" value="Send reminder"></input>
Suddenly remebered? Log in here
<a href="register.html" rel="register" class="linkform">You don't have an account?
Register here</a>
<div class="clear"></div>
</div>
</form>
</div>
<div id="graph-wrapper" class="graph-container" style="display:none">
<h3>Standard Diviation Bell Curve<h3>
<div class="graph-info">
Visitor
<span></span>
</div>
<div class="graph-container">
<div id="graph-lines"></div>
<div id="graph-bars"></div>
</div>
</div>
</div>
</body>
</html>
jquery ajax code as follows (jquery script on the same file as the html code):
<script>
$(document).ready(function(){
//animated code and other codes omitted
("#registrationform").click(function(){
$.post("postdata.php",
{fname:"Ibrahim",lname:"Ahmadu",email:"ibrostay#yahoo.com",uid:"ibro2stay",pwd:"ibro2stay",mean:"0.1",varience:"0.1",sdev:"0.
1",duration:"0.1"},function(responce){
if(responce==0){
alert("There was an error updating the record");
}else{
alert("update successful");
}
});
});
});
</script>
Below is the php code (php code file name: "postdata.php"):
<?php
$fname=$_REQUEST["fname"];
$lname=$_REQUEST["lname"];
$email=$_REQUEST["email"];
$uid=$_REQUEST["uid"];
$pwd=$_REQUEST["pwd"];
$mean=$_REQUEST["mean"];
$varience=$_REQUEST["varience"];
$sdev=$_REQUEST["sdev"];
$duration=$_REQUEST["duration"];
$con=mysql_connect('localhost','root','');
if(!$con)
{
die("Error Connecting to database;"+mysql_error());
}
$database=mysql_select_db('mydb');
if(!$database)
{
die("Error Connecting to database;"+mysql_error());
}
$update = mysql_query("insert into users values('$fname','$lname','$email','$uid','$pwd','$mean','$varience','$sdev','$duration')");
if(!$update)
{
die("Update wasn't Success full"+mysql_error());
}
echo "update successfull";
mysql_close($con);
?>
Whenever I click the register button nothing happens. The page only refreshes back to the login form since it has class "active" as the default form, and the browser address bar changes from this url: "localhost/slider.html" to this url: "localhost/slider.html?".
I hope my question was explicit enough, because I need an urgent answer, as this is my thesis project and I am running out of options.
and the browser address bar changes from this url: "localhost/slider.html" to this url: >"localhost/slider.html?".
use e.preventDefault();
$("#registrationform").click(function(e){
^
|
|_______________ you forgot the $
then add,
`e.preventDefault();
check javascript console and you will see all the errors. you have to eliminate one by one. For the start, check above.
advice: when you copy/paste codes, atleast try to know the structures. sometimes it wil conflict with your code and may stop running your code.
Looks like your Javascript has some errors and not executing hence. So, the form submit resorts to its default behavior - that is, submit to the tag's action attribute. Since you have not specified the action attribute in the tag, it will post the parameters to the current page.
You are getting the url localhost/slider.html? because of two reasons:
You have not specified method="post" in your . So, the form is trying to submit as GET. That is why the appended "?"
You do not have names for the inputs. So, the query string is empty. You need to specify name attribute for every input.
What you have to do first is to debug your Javascript. Use Firebug in Firefox or the console in Chrome or any similar tools to capture your JS errors and also examine your Ajax requests and responses.
Also, make sure that the last statement in the "click" function is a :
return false;
to force the form to stay on the page.
Another important thing is, as #steve pointed out, add method and action attributes to your tag. This will make sure that your script will not fail entirely on a JS disabled browser or on any such conditions.

Categories