I know there are some articles about something like this but I can't figure it out.
P.S. I'm new in programming so maybe my question is stupid.
All I wan't to do is to change 4 contents inside a tag with clickable buttons (button1, button2, button3, button4)
When page loads user see only content_1.php.
<div id="content_box">
<?
include 'content_1.php';
include 'content_2.php';
include 'content_3.php';
include 'content_4.php';
?>
</div>
Maybe somebody can show an example?
Thanks.
use ajax requests, for reference use below link:
http://www.w3schools.com/PHP/php_ajax_database.asp
You can either (A) send it all to the client and do do hide-and-show on the client side entirely, or you can (B) send the first block of content and load the rest on demand (via AJAX).
There are a few things to take into consideration when choosing between the two:
How often are users going to see other than the initial content (few times → B: Send only what's needed, a few will make another request)
How much data are we talking about (little → A: Send it all every time, fewer requests)
Does include-ing a PHP file have side-effects (it shouldn't!) (yes → B: Only include what's requested)
As for the first strategy, you could:
<script type="text/javascript">
function show(box) {
for (var i = 1; i <= 4; i++) {
document.getElementById('content_' + i).style = (i === box ? 'block' : 'none');
}
}
</script>
<div id="content_box">
<div id="content_1"><?php include 'content_1.php'; ?></div>
<div id="content_2" style="display: none;"><?php include 'content_2.php'; ?></div>
<div id="content_3" style="display: none;"><?php include 'content_3.php'; ?></div>
<div id="content_4" style="display: none;"><?php include 'content_4.php'; ?></div>
</div>
Show #1
Show #2
Show #3
Show #4
NOTICE
This assumes that the interaction has to be on the same page. If a full page load is desired, just go with GET parameters and a PHP switch.
there are more solutions, but the simplest would be, if you created four links like:
show content 1
then in the PHP side you create the logic by this user input:
<div id="content_box">
<?php
switch($_GET['content']){
case 1: include 'content_1.php'; break;
case 2: include 'content_2.php'; break;
case 3: include 'content_3.php'; break;
case 4: include 'content_4.php'; break;
default: include 'content_1.php';
?>
</div>
By the way, <? ?> short tags are not recommended to use because are not anywhere supported because of configuration.
To make this you need to use some javascripts, but instead of invent your own maybe is better use something that exists. Try this http://jqueryui.com/demos/tabs/ this should be what you need. After that you can use the ajax request to make the user loads only the part that he need
good luck!
I think instead of "pure" AJAX (which is also fine but its code is a little bit lengthy and not so easy to understand) you should use jQuery's AJAX API to reach the same functions in an easy way.
For example to load a file you should use jQuery's load() function.
To be more specific, in your code it would look like this:
$('#content_box').load('content_1.php');
But I would like to show a complete example which also works in browsers without JavaScript or with JS disabled, because it also understands $_GET parameters. There are three solutions: 1. select and option tags, 2. buttons, 3. radio buttons.
So the code is the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Load contents with jQuery</title>
<!-- jQuery CDN: http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery -->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
<!-- The code with jQuery -->
<script type="text/javascript">
$(document).ready(function(){
$('#change_content_select').submit(function(){
var which_to_load = $('#sel_number').val(),
source_of_file = 'data/content_'+which_to_load+'.php';
$('#content_box').load( source_of_file );
return false;
});
$('#button_1, #button_2, #button_3, #button_4').click(function(){
var which_to_load = ( $(this).attr('id')+"" ).replace('button_', ''),
source_of_file = 'data/content_'+which_to_load+'.php';
$('#content_box').load( source_of_file );
return false;
});
$('#change_content_radio').submit(function(){
if( $('input[name=nrOfPage]:checked').val() === undefined ){
alert('Select which page to load first...');
return false;
}
var which_to_load = $('input[name=nrOfPage]:checked').val(),
source_of_file = 'data/content_'+which_to_load+'.php';
$('#content_box').load( source_of_file );
return false;
});
});
</script>
</head>
<body>
<!-- Let's do it with select tags -->
<div id="content_changing_select_tag">
<b>Page to load with select:</b><br />
Which page would you like to load?
<form method="get" id="change_content_select" action="">
<p>
<select id="sel_number" name="nrOfPage">
<option value="1">1st page</option>
<option value="2">2nd page</option>
<option value="3">3rd page</option>
<option value="4">4th page</option>
</select>
<!-- We put this submit button for compatibility with browsers with JavaScript disabled -->
<input type="submit" value="Change content" />
</p>
</form>
</div>
<hr />
<!-- Let's do it with buttons -->
<div id="content_changing_buttons">
<b>Page to load with buttons:</b><br />
Which page would you like to load?
<form method="get" id="change_content_buttons" action="">
<p>
<input value="1" type="submit" id="button_1" name="nrOfPage" />
<input value="2" type="submit" id="button_2" name="nrOfPage" />
<input value="3" type="submit" id="button_3" name="nrOfPage" />
<input value="4" type="submit" id="button_4" name="nrOfPage" />
</p>
</form>
</div>
<hr />
<!-- Let's do it with radio buttons -->
<div id="content_changing_radio">
<b>Page to load with radio:</b><br />
Which page would you like to load?
<form method="get" id="change_content_radio" action="">
<p>
<input type="radio" name="nrOfPage" value="1" />
<input type="radio" name="nrOfPage" value="2" />
<input type="radio" name="nrOfPage" value="3" />
<input type="radio" name="nrOfPage" value="4" />
<!-- We put this submit button for compatibility with browsers with JavaScript disabled -->
<input type="submit" value="Change content" />
</p>
</form>
</div>
<hr />
<div>OK, here comes the content...</div>
<div id="content_box">
<?php
// default number of page to load
$defaultPageNumber = '1';
// check if content number is set
$numberOfPageToInclude = isset($_GET['nrOfPage']) ? $_GET['nrOfPage'] : $defaultPageNumber;
$options = array(
'options' => array(
'min_range' => 1,
'max_range' => 4,
));
if (filter_var($numberOfPageToInclude, FILTER_VALIDATE_INT, $options) !== FALSE) {
include 'data/content_' . $numberOfPageToInclude . '.php';
} else {
echo '<span style="color:red;">Wrong page number, including default page!</span><br />';
include 'data/content_1.php';
}
?>
</div>
</body>
</html>
And an example for the files to include:
content_1.php :
<h1>This is content <span style="color:red;font-size: 125%;">1</span>!</h1>
content_2.php :
<h1>This is content <span style="color:red;font-size: 125%;">2</span>!</h1>
content_3.php :
<h1>This is content <span style="color:red;font-size: 125%;">3</span>!</h1>
content_4.php :
<h1>This is content <span style="color:red;font-size: 125%;">4</span>!</h1>
Ask if something isn't clear.
Hope that helps someone!
(Btw. it's TESTED and WORKING.)
Related
I am having an issue with my html forms not submitting properly. I am new to forms and have been trying to get a login script going but it has been failing. I am using chrome mostly. Here is the super dumbed down code that hopefully demonstrates my issue. I am guessing what is wrong in this code is in the extended code. This is the website I used for my login coding: login account setup site mainly for reference
<?php
//this is here for testing
session_start();
//this shows
echo "something";
//none of these show
if(isset($_POST['submit'])){
echo "something";
echo "something";
echo "something";
echo "something";
}
if(isset($_POST['submit2'])){
echo "something";
echo "something";
echo "something";
echo "something";
}if(isset($_POST['submit3'])){
echo "something";
echo "something";
echo "something";
echo "something";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<footer>
<!-- I have tried it with and without an action -->
<form action="button_test.php" method="post" id="this" style="width: 100%; height: 100%; background-color: darkblue;">
<button type="submit" name="submit" id="submit" class="button" value="Submit">this is something</button>
<button type="button" name="submit2" id="submit2" class="button" value="this">this is something2</button>
<input type="button" name="submit3" id="submit3" class="button" value="true"/>
</form>
</footer>
</body>
</html>
The first button predictably reloads the page, while the others do nothing. This is the extended main code that I need working. Once again, I am guessing the code above probably explains what is wrong with the code beneath. The code beneath is primarily there to give context and more accurate answers.
<?php
//require once the DatabaseController.php file,
require_once 'Controllers/DatabaseController.php';
echo "this happend1";
// Creates a data connect object that creates a connection to
// a database
$connection = new DataConnect;
//Run the user_load function to set the user
$connection->user_load();
echo "this happend2";
/*
* Runs the in_loggedin function from a
* user object and checks if it is blank
*/
if($user->is_loggedin()!="")
{
echo "this happend3";
//return user to logged in home page if
//they are logged in
$user->redirect('index.php');
}
echo "this happend4";
/*
* THIS DOES NOT WORK FOR SOME REASON
*/
if(isset($_POST['btn-login']))
{
echo "this happend5";
//Load the variables with the new form data that has been executed
$uname = $_POST['txt_uname_email'];
$umail = $_POST['txt_uname_email'];
$upass = $_POST['txt_password'];
//If the user->login call is successful, go to home fully logged in
if($user->login($uname,$umail,$upass))
{
//Go to home, fully logged in
$user->redirect('index.php');
}
else
{
//Error
$error = "Wrong Details !";
}
}
?>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> Josiah</title>
<link href="Assets/Stylesheets/styles-home.css" type="text/css" rel="stylesheet" />
</head>
<body>
<?php
include_once 'header.php';
?>
<!-- recent blog post: contains the most recent blog post-->
<div id="main-content" class="content">
<div id="main-content-inner" class="inner-content">
<!-- this is the container for the form -->
<div class="form-container">
<!-- create a form that uses the "post" method which allows php to do $_POST on
corresponding variable names -->
<form method="post">
<h2>Sign in.</h2><hr />
<!-- checks if there was an error. If the error variable is set -->
<?php
if(isset($error))
{
?>
<!-- displays the error -->
<div class="alert alert-danger">
<i class="glyphicon glyphicon-warning-sign"></i> <?php echo $error; ?> !
</div>
<?php
}
?>
<!-- this is a form-group -->
<div class="form-group">
<!-- this is a text input. -->
<input type="text" class="form-control" name="txt_uname_email" placeholder="Username or E mail ID" required />
</div>
<!-- this is a form-group -->
<div class="form-group">
<!-- this is a text input. -->
<input type="password" class="form-control" name="txt_password" placeholder="Your Password" required />
</div>
<!-- splits parts of the form -->
<div class="clearfix"></div><hr />
<!-- this is a form group holdng the submit button -->
<div class="form-group">
<!-- the button interestingly has multiple classes -->
<button type="submit" name="btn-login" class="btn btn-block btn-primary">
<!-- splits parts of the form. Dont know specifically what this does. -->
<i class="glyphicon glyphicon-log-in"></i> SIGN IN
</button>
</div>
<br />
<label>Don't have account yet ! Sign Up</label>
</form>
</div>
</div>
</div>
<!-- footer: contains social media, site map, and an up arrow-->
<?php
include 'footer.php'
?>
</body>
</html>
Since php://input shows the form value (according to the test I had you run in comments), we know that PHP is properly receiving the data.
By default, PHP will place request parameters in $_GET and $_POST as appropriate. In your case this doesn't seem to be happening. I suggest you look at your php.ini file and add the setting below:
variables_order = "GPCS"
There may already be a variables_order line, so just edit it in that case (documentation).
So after some searching I forgot to disclose that I was using PHPstorm. The reason why this did not occur to me is that PHPstorm is not installed on another computer that I have been using, however since I use Intellij on both computers, this bug in PHPstorm transferred regardless since Intellij will use PHPstorm plugins. It seems that 10.1-10.3 this bug persists where POST remains empty. I am not sure if it was fixed so I moved over to Apache and have it doing the web serving instead. Everything works, or at least works better. The 2 solutions are either wait for PHPstorm to fix this bug, or better move over to Apache.
link to site post
I've been making a website that requires a login, and I made it so that if the form is submitted, a little text will appear under the H1 tag in PHP that says Form Submitted. Right now that text isn't popping up. What did I do wrong?
Here's the code:
<?php
if ($_POST["submit"]) {
$result = "Form Submitted";
}
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>My email form</h1>
<?php echo $result; ?>
<form method = "post">
<div class="form-group">
<label for = "name">Your Name: </label>
<input class="form-control" type="text" name = "name" />
</div>
<div class="form-group">
<label for = "email">Your Email: </label>
<input class="form-control" type="email" name = "email" />
</div>
<div class="form-group">
<label for = "comment">Your Comment: </label>
<textarea class="form-control" name = "comment" /></textarea>
</div>
<input type="button" id = "button" name = "submit" class="btn btn-success" value="Enter"/>
</form>
</div>
</div>
</div>
</body>
</html>
As I can see on http://www.remweb.org, PHP doesn't running on your server. (http://i.stack.imgur.com/kkwCW.png)
Change your button to a submit button..
That is, replace
<input type="button" id = "button" name = "submit" class="btn btn-success" value="Enter"/>
with
<input type="submit" id = "button" name = "submit" class="btn btn-success" value="Enter"/>
Try
<?php
if (isset($_POST["submit"])) {
$result = "Form Submitted";
}
?>
Try this
<input type="submit" id ="button" name ="submit" class="btn btn-success" value="Enter"/>
<?php
$result = "";
if (isset($_POST["submit"])) {
$result .= "Form Submitted";
}
?>
Sidenote: URL pulled from comments in another answer.
"If you want, this code is live at www.remweb.org, so you can see yourself. – Aaron Janke 2 hours ago"
There are a few things wrong here.
Firstly, your domain http://www.remweb.org/ has an index file named index.html (I typed in the index.html at the end just to make sure it was the same file/form), and in doing http://www.remweb.org/index.html it showed the form. Your server seems to be using the .html file as its default index.
I also (guessed and) went to http://www.remweb.org/index.php to see if you did have an PHP index file, and it showed "hello", therefore this tells me that PHP seems to be running.
Therefore, you need to replace the .html version with .php or rename your posted code's file as "form.php" for example, and it will work.
NOTA: http://www.remweb.org/index.html (being your form) contains PHP directives that are not being parsed by your server and does not by default.
Either you do as I suggest, or instruct Apache to treat .html files as PHP.
Plus, since your form contains 3 elements and the action is used for the same page, you need to use !empty() for those in order to echo the results of those input.
I.e.
if(!empty($_POST['name'])){
$name = $_POST['name'];
echo $name;
}
and do the same for the others.
Or, seperate your .html file from PHP and use a file pointer for the action and echo everything in the other file.
I.e.: action="action_file.php"
and hold the PHP directives in that file.
Your submit button's type <input type="button" needs to be a "submit" type and not "button" <input type="submit"
Ok. So I am using Sessions to store data because I am making a multi page form. The thing is, I need a back button with it. I have a submit button that will take the user to the next page and store the data into sessions but I need a back button next to the submit button in case they messed up for whatever reason. Is there anyway to make a back button with php that will take them back to the previous page while showing the data they entered? heres my code of one page.
Also, I have tried using the history.go but that only works for one page.
<?php
//let's start the session
session_start();
//now, let's register our session variables
$_SESSION['opinion1'] = 'opinion1';
$_SESSION['choice1'] = 'choice1';
//finally, let's store our posted values in the session variables
$_SESSION['opinion1'] = $_POST['opinion1'];
$_SESSION['choice1'] = $_POST['choice1'];
?>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<script src="jquery.cycle2.js"></script>
<title>Untitled Document</title>
</head>
<body>
<div class="nav">
<div class="container">
<h1 class="pull-left">Securing the Future of Village Walk</h1>
<div class="pull-right">
<ul class="nav nav-pills">
<li class="active">home</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
<div class="ammendment">
<div class="container">
<form method="post" action="page4_form.php">
<textarea id="opinion2" name="opinion2" value=""></textarea>
<label for="Yes">Yes</label>
<input type="radio" name="choice2" value="Yes">
<label for="No">No</label>
<input type="radio" name="choice2" value="No">
<label for="Neither">Neither</label>
<input type="radio" name="choice2" value="Neither">
**I NEED BACK BUTTON HERE**
<input type="submit" value="Next">
</form>
</div>
</div>
</body>
</html>
I would first organize session data in a way that it's easy for you to correlate data entered with the page it was entered.
One possibility could be to organize session data in an array:
$_SESSION['formData'] = array(
array(... data for step 1 ),
array(... data for step 2 ),
array(... data for step 3 ),
);
So $formData[0] would hold data entered in step 1, etc.
As for the button, another submit would be enough:
<input type="submit" value="Back" />
Then, you would have to determine which page you are going back to; which you can achieve by sending a hidden field with the current page number.
<form method="post" action="page_form.php">
<input type="hidden" name="page" value="X" />
One thing to note here is that the server side process would not longer be one-per-page; instead there would be only one page_form.php where you'll have to determine the action and the page to move to (although you could use one per page and set the right action in the , there's always several solutions to any problem):
<?php
...
$page = $_POST['page'];
if ( isset($_POST['Back']) ) // Going back
{
$page -= 1; // Previous page requested
// Retrieve data from session
$data = $_SESSION['formData'][$page-1]; // $page-1 because of zero based array indexes.
...
// Dynamically load the proper page processor.
// each pageX_form.php will know how to deal with the variable $data.
include "page{$page}_form.php"
}
else
{
$page += 1; // Next page requested
$data = $_POST; // In this case, the data is whatever was entered
}
When building the form for each page, you'd have to remember to add the hidden field with the page number:
<form method="post" action="page_form.php">
<input type="hidden" name="page" value="<?php echo $page; ?>" />
If you wanted to use one server-side process per page, then you could do something like this instead:
<form method="post" action="page<?php echo $page; ?>_form.php">
The server-side process would look different, since you would not have to ask for the page number; it would be implicit.
You could just add an additional form like so:
<form action="pageX.php" method="post>
<input name="submitBackButton" type="submit" value="Back">
</form>
This can be detected as a normal GET / POST field within PHP:
<?php
if (isset($_POST['submitBackButton']))
{
// Do required actions here
}
I have two php pages. In first php page I have two divisions, where in one division I have hyperlinked text which on click showing result in other division of same page, with the help of ajax. The code for same is below:
<body>
<div id="container">
<div id="content"> Sidebar <p> </p>
<div class="form">
<pre>
<a href=sample_disease_form.php><b>Disease</b></a><p>
<a href=sample_drug_form.php><b>Drug</b></a><p>
</pre>
</form>
</div>
</div>
<div id="sidebar">
</div>
</body>
Ajax code for this is:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function() {
$('a').each(function(){
$(this).on("click",function(e) {
console.log(e);
e.preventDefault();
$('#sidebar').load($(this).attr('href'));
});
});
});
</script>
Now, I have other PHP file, one which is opening after clicking hyperlink on same page but in other division, contains form. After being clicked submit button of this form I want the result gets displayed in same division but it will come from different PHP file. How can I achieve this?
The second file's code is below:
<pre><h2> Drug </h2></pre>
<pre><p><span class="error"> * required field </span></p></pre>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<pre> Name: <input type="text" name="drug" value="<?php echo $drug;?>"><span class="error">* <?php echo $nameErr;?></span>
<input type="checkbox" name="drug[]" value="disease">Disease</br>
<input type="checkbox" name="drug[]" value="target">chemical
<input type="submit" name="submit" value="Submit"></pre>
</form>
Since I am very new to these kinds of programming stuff, expecting help.
you need to submit the page through ajax and load the result in the same div
Im just learning javascript the last days (started PHP some months ago).
So, my code make this:
e.g
http://controljuridico.com/video01/
I have three files.
An Html file with the form.
A javascript file with the functions after click on "enviar" (send) button.
A php that process the data.
HTML file (index.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<link href="css/css.css" type="text/css" rel="stylesheet" media="screen" />
<script src="js/jquery.js" type="text/javascript" language="JavaScript"></script>
<script src="js/js.js" type="text/javascript" language="JavaScript"></script>
</head>
<body>
<div id="content">
<h1>Test.</h1>
<h1>Step 1) choose city</h1>
<br />
<br />
<label>test(*)</label>
<hr />
<br />
<form name="form_data" id="form_data">
<label>(*) City</label>
<br />
Medellin
<input type="radio" name="ciudad" value="Medellin" />
Manizales
<input type="radio" name="ciudad" value="Manizales"/>
Cali
<input type="radio" name="ciudad" value="Cali"/>
<br />
<label>(*) Especialidad</label>
<br />
<input type="button" value="Enviar" id="btn_enviar" />
<br />
<br />
<label id="mensaje"></label>
</form>
<div id="resultado" ></div>
</div>
</body>
</html>
js.js File
$(document).ready(function(){
$('#btn_enviar').click(function(){
if( validaRadio( 'ciudad','Ciudad' ) == false) return false;
$.ajax({
type:'POST',
url :'upload.php',
data: $('#form_data').serialize(),
beforeSend : function(){
$('#mensaje').html('Enviando datos...');
},
success: function (data){
$('#mensaje').html('Datos enviados correctamente.');
$('#resultado').html(data);
},
complete: function(){
$('#form_data').slideUp();
$('#resultado').slideDown();
}
});
});
});
Php File (upload.php)
<?php
$sergu = $_POST['ciudad'];
if ($_POST['ciudad'] == "Medellin") {
?>
<label>Ciudad Ingresada:</label>
<br />
<label><?php echo $_POST['ciudad'] ?></label>
<hr />
<?php
}else{
echo "it is not medellin....";
}
?>
So, this works very well but. What if I want this:
After click on "enviar" button also show another similar form at the left of this form.
I mean its just like choosing steps if you choose the step one I need another step and so on and I want that this another step just appear to the left of the previus form.
It is possible? how?
Thanks in advance for your help! I really appreciate it.
You could for example just hide the 'second form' when the page first loads via css like this:
<form id="second_form" style="display: none">...
and when your success function fires you remove the css like so:
success: function(){
...
$('#second_form').show();
}
Short answer: yes.
In jquery, there is .insertBefore(). An easy way to implement what you (kind of) want, is to just echo out the new form in the php, and instead of
$('#resultado').html(data);
Do the following:
$(data).insertBefore('#resultado');
This will insert the new form, echoed out by the PHP, under the previous one. Ofcourse you also have to delete the
$('#form_data').slideUp();
Else, the forms will be hidden.