Get data from submit button, display text file , clear text box - php

My need is bit more complicated for me,
but for many it will be easy..
Here is what i want,
in my form i have 3 objects, Textbox, Submit Button, and Display area.
Users have to enter some details in Text Box and to Press Submit button,
The details have to be displayed in the Display Area (Display Box) which is below.
After Displaying the details the text box must be empty. Users cannot or should not edit the details in display area.
Here is what i had tried,
Enter Text , Click Submit button- The data will be saved in Text file1
Open the Text file2 in appending mode and add Text file1 into Text file2
Display Text file2 , Clear Text file1 (for Next Use)

Its pretty Basic HTML + Javascript . Anyway here the code :)
<html>
<head>
<script>
function display()
{
document.getElementById("displayarea").innerHTML = document.getElementById("myinput").value;
document.getElementById("myinput").value = "";
}
</script>
</head>
<body>
<input type="text" name="myinput" id="myinput">
<input type="button" value="Submit" name="submit" id="submit" onClick="display()"/>
<div id="displayarea">Sample Text. This data will disappear if you press button</div>
</body>
</html>

//view.php
<?php
if (isset($_POST['submit'])
{
$text = $_POST['text1'];
echo $text;
echo "<br />";
}
echo "<form action= '' method='post'>
Text Box: <input type='text' name='text1' />
<input type='submit' name='submit' />
</form>";
?>

Related

How to get Multiple Inputs?

I want to get Multiple Inputs and use them later when Press Submit Button
<!DOCTYPE html>
<html>
<head>
<title>Class Details</title>
</head>
<body>
<?php
$noOfSections=0;
$sectionNameArray= array();
$sectioerr="";
if($_SERVER["REQUEST_METHOD"]=="POST"){
if(!empty($_POST["noOfSections"]))
$noOfSections = $_POST["noOfSections"];
else
$sectioerr="Must Enter Number of Sections";
}
?>
<form action="classdetails.php" method="POST">
<p>Enter Number of Sections : </p>
<input type="text" name="noOfSections">*<?php echo $sectioerr?>
<input type="submit" name="submit" value="Enter"><br>
</form>
<form action="classdetails.php" method="POST">
//Thats the real area about which I am Asking Questions
<?php
if($_SERVER["REQUEST_METHOD"]=="POST"){//it is USED to prosses THE STATEMETS BELOW only when the above Submit Button is pressed
echo "<p>Enter Names of Sections : </p><br>";
for($x=0;$x<$noOfSections;$x++){
echo "Enter Name of Section No. ".($x+1)."<br>";
echo "<input type=\"text\">*";
}
echo "<input type=\"submit\" name=\"submitnames\"><br>";
}
?>
</form>
</body>
</html>
I want to Get Multiple Inputs when I press Submit Button Having name attribute "submitnames"
Try adding [] to the end of your dynamic input names
echo "<input type=\"text\" name=\"names[]"\>*";
Edit :Thanks to Magnus Eriksson for pointing out my mistake in the comments.

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;
}
?>

how to get the text of submit button in php

Hello im having problem of getting the text on submit button .
what im going to do is use if statement to use a single button to insert and update records. ive found a code in this site but it doesn't give me desired output
foreach($_POST as $name => $content) { // Most people refer to $key => $value
echo "The HTML name: $name <br>";
echo "The content of it: $content <br>";
}
another problem how do i change the text of the button control using javascript
the code below doesn't work
<script type="text/javascript">
$(document).ready(function () {
//Attach button clicke event hanlder
$('.btnedit').click(function () {
var title = document.getElementById('btnsubmit');
title.innerHTML = "Update";
});
});
</script>
this is the code for button
<input type="submit" name="submit" id="btnsubmit" class="btn btn-default" value="Save" />
Give name and value to your submit button
<input type="submit" name="submit" value="SUBMIT" />
The echo in foreach will be
The HTML name: submit
The content of it: SUBMIT
To get the value without foreach(), you should do like this.
echo $_POST['submit'];// will echo SUBMIT
^ name of your submit button.
See demo HERE

Ignoring initial loading of PHP_SELF

I am learning PHP and I have a page that reloads back to itself. I want to know if you can ignore a certain function on the initial loading of the page and only call it once the form submit button has been clicked.
The page is passed a 'ticketID' and loads the information from it. I then want to be able to add a note using the following form method:
<form method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<strong>Add Note:</strong>
<textarea name="note" rows="5" cols="40" value=><?php echo htmlspecialchars($note);?></textarea>
<span class="error">*<?php echo $noteErr;?></span><br>
The user then clicks on a submit button to submit the note for processing:
<button type='submit' name='ticketID' value= <?php echo $_POST['ticketID'];?> >View</button>
</form>
The 'ticketID' is then passed back to the page to reload the information.
If the submit button is pressed and no note has been entered I want a message box to display informing the user to include a note. I have tried:
if (!empty($_POST["note"]))
{
echo "This has updated...";
} else {
echo "Missing!";
}
However this loads the error message even on the initial load of the page. I have tried setting a variable to the POST ticketID value and clearing the POST value after the page has displayed and before testing for the error message:
$tempTicketID = $_POST['ticketID'];
$_POST['ticketID'] = NULL;
Then testing the error message, and finally setting the POS value back before the page ends to allow it to reload correctly again:
$_POST['ticketID'] = $tempTicketID;
However the POST value doesn't save and the page reloads with no information.
Any help would be great appreciated.
Here's the full code layout:
##LOAD THE PAGE INFO...
#Set the temp variable and clear the post value
$tempTicketID = $_POST['ticketID'];
$_POST['ticketID'] = NULL;
#Load the form
<form method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<strong>Add Note:</strong>
<textarea name="note" rows="5" cols="40" value=><?php echo htmlspecialchars($note);?></textarea>
<span class="error">*<?php echo $noteErr;?></span><br>
<button type='submit' name='ticketID' value= <?php echo $_POST['ticketID'];?> >View</button>
</form>
#Test if the note is empty and the form button has been pressed
if (!empty($_POST["note"]))
{
echo "This has updated...";
} elseif (empty($_POST["ticketID"] {
echo "Missing!";
}
#Set POST value back to reload the page
$_POST['ticketID'] = $tempTicketID;
We need to restructure the form just a bit to make this happen. You can check if the form is submitted by testing for the button that must be clicked to submit. However, you're using that button for multiple purposes. To simplify, we'll have a separate submit button, and pass the ticketID value through the form with a hidden input. You shouldn't need the code that unsets the $_POST values.
<button type='submit' name='submit'> View</button>
<input type='hidden' name='ticketID' value= <?php echo $_POST['ticketID'];?> />
Then you can test if the form has been submitted with this quick check:
if (isset($_POST['submit'])) {
if (!empty($_POST["note"]))
{
echo "This has updated...";
} else {
echo "Missing!";
}
}

display image onclick inside of php

I'm trying to show all files in a folder with php and place a radio button next to each image. When a radio button is selected I'd like redisplay the image somewhere on the page. the end goal is to have three collections of images, and the user can select three and see the selection together, as a triptych.
I know that i must implement some onclick code, but I don't know how to go about doing it.
my code:
<?php
$dir = "image_gallery/";
//open dir
if ($opendir = opendir($dir))
{
//read dir
while (($file = readdir ($opendir)) !==FALSE)
{
if ($file!="."&&$file!=".."&&$file!="DS_Store")
echo "<img src='$dir/$file' width='200'><input type='radio' value='$file' name='filename'><br>";
//echo "<input type='radio' value='yes' name='$file' />";
}
}
?>
<input type="submit" name="submit" value="That's Right!">
</form>
</body>
</html>
I'm hoping to be able to display the $file variable onclick rather than reading all the image sources into an array and call upon the nth entry of the array.
I appreciate any input.
also a link to working code, http://www.evan-livingston.com/test/list.php
EDIT
non functioning code;
<html>
<head>
<script type="text/javascript">
function listSelectedImages() {
var selected = $('input[type=radio]:checked'),
selection = $.map(selected, function(e){
return e.value;
});
$('#selection').text(selection.join(', '));
}
$('input[type=radio]').change(listSelectedImages);
</script>
</head>
<body>
<form action="bad_words.php" method=post>
back to main page
<br/>
<br/>
<img src='image_gallery//11.01.29.3-13.jpg' width='200'>
<input type='radio' value='11.01.29.3-13.jpg' name='filename'>
<br>
<img src='image_gallery//11.01.29.3-3.jpg' width='200'>
<input type='radio' value='11.01.29.3-3.jpg' name='filename'>
<br>
<input type="submit" name="submit" value="That's Right!">
</form>
<div id="selection"></div>
</body>
</html>
#Dagon means (in the comments to your question), that you have to deal with the events triggered by a selection (change) of an image in the browser (using Javascript) rather than on the server (using PHP).
I understand that you want to list the values of the selected radio buttons somewhere next to the list?
Here's a simple example using jQuery which does that to get you started:
function listSelectedImages() {
var selected = $('input[type=radio]:checked'),
selection = $.map(selected, function(e){
return e.value;
});
$('#selection').text(selection.join(', '));
}
// This will ensure that the inputs you're trying to access
// are actually loaded onto the page already
$(function(){
$('input[type=radio]').change(listSelectedImages);
});
Working example: http://jsfiddle.net/dXUYb/
UPDATE
In order to show the images rather than a list of file names, you could e.g. do something like this:
function listSelectedImages() {
$('input[type=radio]:checked')
.prev('img')
.clone()
.insertAfter('#selection');
}
$('input[type=radio]').change(listSelectedImages);
I would recommend to wrap the images and inputs in <label> tags to allow clicking on the image itself as well too select it.
Here's an updated example: http://jsfiddle.net/dXUYb/5/

Categories