Show forms from php with jquery in php - php

I have a php file that has 3 forms inside and some insert queries and i separate them with if(isset()) based on what variable comes from $_POST. I want to make the forms appear for example on the center of the page and when the user presses submit the form fades out and the next one from the isset appears. How can i do that?
For example this is the first form
<?php if (!isset($_POST['date'])): ?>
<?php if (!isset($_GET['id'])):?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']?>">
Date :
<input type="text" name="date" id="date"> </br>
<input type="submit" value="Submit" />
</form>
<script>
$("#date").datepicker();
</script>
<?php endif;?>
<?php endif;?>
And then if the user presses submit there is an if(isset()) with an insert query.
After the insert query there is another form
<?php if (isset($_GET['id'])): ?>
<form action="<?php echo $_SERVER['PHP_SELF']?><?php echo " ?id=" . $_GET['id'] . " &date=" . $_GET['date'] . " &seats=" . $_GET['seats']; ?>" method="post">
Ώρα :
<input type="text" name="time">
<input type="submit" name="submit">
</form>
<?php endif;?>
So what i want is to display them on the center of my page but i dont have to open another page every time i press submit and they will fadeout (or something similar) and display the next form.

Sounds like you could do this with css. Not sure I understand your question though.
display all 3 forms on the page at once -> no isset stuff, I don't get what that is there for
hide the ones you don't want the user to see with a class ".hide"
submit the forms with jquery, as you don't want the page to reload. after submitting, hide the one you just sumbmitted by setting its class to hide and removing hide from the next form
form{
transition: opacity 2s;
}
form.hide{
opacity:0;
}

Related

Issue with PHP button activation

I want to show a button in my page only if a certain condition is met.
Also i want to run a query (DELETE QUERY) when i press that button.
<?php if (isset($_POST['finduser_btn']) && $noerr) :
echo "<div class='green'>
<button type='submit' class='btn' name='scoreDel'>Delete scores</button>
</div>
endif ?>
I use $noerr as FLAG to display or not the button if another button is pressed (the other button is not shown in code)
Well, how do i use scoreDel button to run a query like:
DELETE FROM scores
WHERE name = '$username$;
I think i have some issue with " and ' into the PHP echoing html tags but i'm not sure... I hope in some help, i'm getting mad.
Thanks in advance
You need a form in order to submit your action.
echo '<form action="mypage.php" method="POST"><div class="green">
<button type="submit" class="btn" name="scoreDel">Delete scores</button>
</div></form>';
Try the following:
<?php if (isset($_POST['finduser_btn']) && $noerr) : ?>
<div class='green'>
<form method="post">
<input type="text" name="finduser">
<button type='submit' class='btn' name='scoreDel'>Delete scores</button>
</form>
</div>
<?php endif ?>
Use a form to submit the button tag. Also, write html outside of PHP code if possible.

HTML + PHP how to prevent webpage from displaying anything until submit is pressed

I am new to both HTML and PHP and I encountered a problem when working on some simple projects. Lets say I have a text bar on my webpage and I want to display the text written in text bar on webpage after the user enters some text and presses the submit button. My problem is that the webpage shows the output when the webpage first loads. Is there a way to prevent the php code from executing untill the submit is pressed ?
Here is a sample code code that indicates the problem I am referring to.
<html>
<body>
<form action="./index.php" method="GET">
First Name: <input type="text" name="first" maxlength="50"><br/>
<input type="submit" value="GO"/>
</form>
</body>
</html>
<?php
$text_var = $_GET[first];
echo "This was typed into text bar" . $text_var;
?>
So "This was typed into text bar" is outputted right away when website loads.
I want it to be outputted only after submit button is pressed.
Thanks.
you need to split it up the form should be showed if nothing is submited so either check the value or the submit button
make sure you keep the html format. look at label tags to describe form inputs
<html>
<body>
<form action="./index.php" method="GET">
<label for="first">First:</label>
<input id="first" type="text" name="first" maxlength="50"><br/>
<input type="submit" value="GO"/>
</form>
<?php
if (!empty($_GET['first'])) {
//take care you escape things never output user input (XSS)
$op = htmlspecialchars($_GET['first']);
echo "This was typed into text bar" . $op;
}
?>
</body>
</html>
Check if $_GET['first'] exists. This is is usually done as the following:
View
<form action="index.php" method="post">
<!-- input fields here -->
<input type="submit" name="submit" value="GO"/>
</form>
Controller
<?php
if (isset($_POST['submit'])) {
// process post
} else {
// display the form
}
<?php
if(isset($_GET['submit'])){
$text_var = $_GET[first];
echo "This was typed into text bar" . $text_var;
}
?>

jQuery making forms disappear and appear after each other

As the title says This is the code that I tried with. The forms must appear one by one because information from previous forms determine how the next ones will look.
$(document).ready(function(){
$('#first_form').submit(function(){
$('#first_form').fadeOut('fast');
$('#second_form').fadeIn('fast');
});
});
<form action="new_patch.php" method="POST" id="first_form">
Title: <input type="text" name="patch" placeholder="Patch 4.20">
<br/>
Number of Champions: <input type="number" name="champ_number" min="1" max="99">
<br/>
<input type="submit" value="submit">
</form>
<form action="new_patch.php" method="POST" id="second_form" style="display: none;" >
<input type="text" value="text">
<input type="submit" value="submit">
<?php
$champ_number = null;
if(isset($_POST['champ_number']))
{
$champ_number = $_POST['champ_number'];
for($champ_number;$champ_number>0;$champ_number--)
{
echo "<br/>Champion ".$champ_number."<input type=\"number\" name=".$champ_number." min=\"1\" max=\"99\">";
}
}
?>
</form>
You're mixing client-side and server-side form code. Submitting the form will reload the page entirely, so from the looks of your code it will fade in the new form when the old form is submitted, but then reload the page so the old form will show again anyway.
You could either:
Let the PHP determine how the next form appears based on the submission of the first form, e.g. if (isset($_POST["First_form_submit"]) { Show second form... }
Probably better and more user-friendly: make the second form appear below once the user has filled in the relevant inputs on the first form before they've submitted
you can use:
$('#first_form').submit(function(){
$('#first_form').fadeOut(function() {
$('#second_form').fadeIn('fast');
});
return false;
});
From the jQuery documentation the syntax is fadeIn( [duration ] [, complete ] ) it accepts a duration and a onComplete callback that you can use to execute the next action when the first is completed.
I did this once too, just add a submit class to the button and make it like this:
<input type="submit" value="submit" class="submit">
Change script to a click function.
$(document).ready(function(event){
event.preventDefault();
$('.submit').click(function(){
$('#first_form').fadeOut(400);
$('#second_form').fadeIn(400);
});
});
PS, also you need to prevent submit default...otherwise it will just submit the form, see this JSfiddle

Displaying Database Query Results

Suppose I have a form. After I submit my form, the data is submitted to dataprocess.php file.
The dataprocess.php file processes the variable sent via form and echoes desirable output.
It seems impossible to echo to a specified div in specified page only using PHP (without using AJAX/JavaScript as well). I do not want to use these because some browsers might have these disabled.
My concern is that I want to maintain the same formatting of the page that contained the form element. I want the form element to be there as well. I want the query result to be displayed below the form.
I could echo exact html code with some modification but that's memory expensive and I want it systematic.
Is it possible to process the form within the same page? Instead of asking another .php file to process it? How does one implement it?
The above is just for knowledge. It will be long and messy to include the PHP script within the same HTML file. Also, that method might not be efficient if I have same process.php file being used by several forms.
I am actually looking for efficient methods. How do web developers display query result in same page? Do the echo all the html formatting? also, does disabling JavaScript disable jQuery/AJAX?
Yes it is possible to process the form on the same page.
<?php
if (isset($POST))
{
//write your insert query
}
?>
<html>
<body>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<!-- Your form elements and submit button -->
</form>
<table>
<?php
//your select query in a while loop
?>
</table>
</body>
</html>
But if you choose this technique instead of ajax, you have to refresh all the page for each insert action.
An example
<div id="dialog-form">
<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post">
<table>
<tr>
<td>Job</td>
<td>
<input type="text" name="job" />
</td>
</tr
</table>
<input type="submit" value="Insert" />
</fieldset>
<input type="hidden" name="doProcess" value="Yes" />
</form>
</div>
<?php
$myQuery= $db->prepare("INSERT INTO Jobs (job) VALUES (:p1)");
if (isset($_POST['doProcess']) && $_POST['doProcess'] == 'Yes')
{
$myQuery->bindValue(":p1", $_POST['job'], PDO::PARAM_STR);
$myQuery->execute();
}
?>
if you really dont want to use ajax (which i think you should). You can do something like this.
<form action="" method="POST">
<input type="text" value="something" name="something_name"/>
<?php
if(isset($_POST['something_name'])){
echo '<div id="display_something_name_if_exists">';
echo $_POST['something_name'];
echo '</div>';
}
?>
</form>
Basically what it does is submits to itself and then if there is a submission (tested with isset), it will echo a div with the correct information.

Include value of submit button on forms

I have two submit buttons in a form which has different values, one to voteup a post and another to votedown a post, how do i submit the value of the input type="submit" buttons?
Without using javascript, i'm making my script flexible to browsers with javascript disabled.
<?php
if (isset($_POST)) {
var_dump($_POST);
}
echo '
<form action="" method="post">
<input type="submit" name="vote_up" value="up">
<input type="submit" name="vote_down" value="down">
</form>';
?>
The value of the clicked button will always be submitted with the form. This is how you can disambiguate between different submit buttons on the same form.
Further clarification can be found at: http://www.javascript-coder.com/html-form/html-form-submit.phtml
Just include it into the form you are submitting and do something like this for disambiguate the buttons:
<input class="submitButton" type="submit" name="up" id="up">
Then in your code you can do something like:
if (isset($_POST["up"])){
// do something
}
you can also use
print_r($_POST);
in place of
var_dump($_POST);

Categories