As the user fills out the form, I have some buttons that dynamically add new questions. However, I can't get the value of these buttons to Post to the subsequent PHP page (all the other information posts fine).
In the example below, I'm not able to get the value of "add_email" in "process-form.php" via $_POST['add_email'];
Thanks in advance for your help. In reduced form, it looks like this:
HTML form
<form id="form" class="form" action="process-form.php" method="POST">
<input id="name" name="name" type="text" placeholder="Name">
<!-- Yes/No buttons asking if the user wants to enter their email-->
<div id="form_email">
<h4>Do you want to enter your email?</h4>
<input type="button" class="btn" id="add_email" name="add_email" value="Yes" onclick="showEmailQ(this.value)"></input>
<input type="button" class="btn" id="add_email" name="add_email" value="No" onclick="showEmailQ(this.value)"></input>
</div>
<input type="submit" class="btn" value="Submit ยป">
</form>
Javascript
<script>
//Function to process whether user wants to enter email and then display value
function showEmailQ(value){
var table_row = document.getElementById("form_email");
if(value == "Yes"){
table_row.innerHTML = '<input id="email" name="email" type="text" placeholder="Email">';
}
else{
table_row.innerHTML = '<p>You have chosen not to enter your email</p>';
}
}
</script>
PHP
//process-form.php
session_start();
$enteredEmail = $_POST['add_email'];
echo $enteredEmail; // Nothing prints to screen
You're destroying your form by overwriting the inputs with
table_row.innerHTML = '<input id="email" name="email" type="text" placeholder="Email">';
So maybe change the input name to match
table_row.innerHTML = '<input id="email" name="add_email" type="text" placeholder="Email">';
Related
I have a simple form to get user email address. But I also need to get the users name and age as well and display them in the page for only a one time. When the user submit his name and age, it will be displayed in the same page using HTML JavaScript DOM. Now what I need to do is that I want to prevent the whole page from refreshing once the user submit his email cause it will clear the users name and age which was given only for a temporary time and I also don't need to store them in the database as well. Is there have any idea of how to do that except using Ajax? Any help will be greatly appreciated!
function submitForm(){
if (document.getElementById("age").value > 10){
document.getElementById("postNameText").innerHTML = document.getElementById("name").value;
document.getElementById("form2").style.display = "block";
} else {
document.getElementById("showData").innerHTML = "You are not eligible to use this site.";
}
document.getElementById("showData").style.display = "block";
document.getElementById("form1").style.display = "none";
}
<form id="form1">
<input type="text" name="name" id="name" placeholder="Name">
<input type="number" name="age" id="age" placeholder="Age">
<button type="button" onclick="submitForm()">Send</button>
</form>
<h2 id="showData" style="display: none;">Your name is <span id="postNameText"></span> and you are eligible to use this site.</h2>
<form action="process.php" method="post" style="display: none;" id="form2">
<input type="email" name="email" id="email" placeholder="Email">
<input type="submit" value="Submit" id="submitData">
</form>
Thank you!
Try this!
function submitForm(){
if (document.getElementById("age").value > 10){
document.getElementById("postNameText").innerHTML = document.getElementById("name").value;
document.getElementById("form2").style.display = "block";
} else {
document.getElementById("showData").innerHTML = "You are not eligible to use this site.";
}
document.getElementById("showData").style.display = "block";
document.getElementById("form1").style.display = "none";
}
<form id="form1">
<input type="text" name="name" id="name" placeholder="Name">
<input type="number" name="age" id="age" placeholder="Age">
<button type="button" onclick="submitForm()">Send</button>
</form>
<h2 id="showData" style="display: none;">Your name is <span id="postNameText"></span> and you are eligible to use this site.</h2>
<iframe src="email.html" frameborder="0" id="form2" style="display: none;"></iframe>
Include your second form inside a new HTML file called email.html and this will prevent the page from reloading.
Thanks and best regards!
When I load a page, I need to show form for name, but when I click "submit" i need hide that form. How can i do that with javascript?
<div id="small-form">
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<input type="submit" value="Submit" onclick="hideForm()">
</form>
</div>
In the hideForm() function set display:none style for the div small-form.
Like that:
var myFormDiv = document.getElementById("small-form");
myFormDiv.style.display = "none";
You cannot just hide the form if it submits to the server unless you either Ajax the form to the server or target an iframe or new tab
When the form submits, a new page is loaded. If it loads the same page, you can either hide it on the server or set an instruction in localStorage to tell the page to not show the form
I also strongly suggest you do NOT use onclick of a submit button but the submit event
document.getElementById("myForm").addEventListener("submit",function(e) {
e.preventDefault(); // if you want to NOT submit the form
document.getElementById("small-form").classList.add("hide");
// here you can ajax or do other stuff without submitting
})
.hide { display: none; }
<div id="small-form">
<form id="myForm">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<input type="submit" value="Submit">
</form>
</div>
You can set the display style to none in the hideForm() function in javascript to hide the form.
But, because you are using a submit button on the form it will try to redirect when the submit button is pressed. A simple solution to this (if you don't want the form to actually be submitted) is to change the type of the input to button rather than submit.
function hideForm()
{
document.getElementById('small-form').style.display = 'none';
}
<div id="small-form">
<form >
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<input type="button" value="Submit" onclick="hideForm();">
</form>
</div>
If you wish to permanently hide the form you can do something like this. Just set the display property of the form to none. This will hide the form but it will exist there in the HTML code.
function hideForm() {
event.preventDefault();
var myForm = document.getElementById("My-Form");
myForm.style.display = "none";
var name = document.getElementById("Name");
alert(name.value);
}
<div id="small-form">
<form id="My-Form">
<label for="fname">First name:</label><br>
<input id="Name" type="text" id="fname" name="fname"><br>
<input type="submit" value="Submit" onclick="hideForm(event)">
</form>
</div>
Another way to achieve what you are trying to do is simply remove the form. You can do this by calling remove() function on the form. This permanently removes the form.
function hideForm(event) {
event.preventDefault();
var myForm = document.getElementById("My-Form");
var name = document.getElementById("Name");
alert(name.value);
myForm.remove();
}
<div id="small-form">
<form id="My-Form">
<label for="fname">First name:</label><br>
<input id="Name" type="text" id="fname" name="fname"><br>
<input type="submit" value="Submit" onclick="hideForm(event)">
</form>
</div>
I have made a form in my site, which will allow me to get suggestions about Rubik's cube algorithms, but how to know what input the user has? For better understanding, I've given the code below:
<form method="POST">
<label>Your name: </label><br>
<input type="text" name="name" placeholder="Your Name" required><br><br>
<label>Your E-mail: </label><br>
<input type="email" name="email" placeholder="email#domain.com" required><br><br>
<label>Select puzzle: </label><br>
<input type="radio" name="2x2" value="2x2">2x2<br>
<input type="radio" name="3x3" value="3x3">3x3<br><br>
<label>Select set/subset: </label><br>
<input list="set"><br><br>
<datalist id="set">
<option>Ortega OLL</option>
<option>Ortega PBLL</option>
<option>CLL</option>
<option>EG-1</option>
<option>EG-2</option>
<option>F2L</option>
<option>OLL</option>
<option>PLL</option>
<option>COLL</option>
<option>WV</option>
</datalist>
<label>Your Alg: </label><br>
<input type="text" name="alg"><br><br>
<input type="submit" name="submit" class="w3-black w3-button w3-hover-white w3-hover-text-blue w3-text-white">
</form>
Please add action attribute to your form tag and on submit here is the example
<form action="getvalue.php" method="post">
</form>
Note: Every form element must have unique name .
after adding action attribute then create getvalue.php file and add following code in to it
<?php
print_r($_POST);
?>
Above code will give all the form field values
do let me know if it was helpfull...
I'm not sure exactly what you want to do, but here is an example of a form that submits to itself. This will allow you to remain on the same page after the form has been submitted. You can change what the user sees to indicate that the form was done successfully/etc. I have tested this code and it works.
<main>
<?php
// When the form is submitted
if (isset($_POST["submitButton"])){
//Do something with the data from the form - you don't have to print it out.
//This is all done on the server.
//Connect to DATABASE, send an EMAIL, VALIDATE the form, etc.
print("<pre>");
print_r($_POST); // for all GET variables
print("</pre>")
?>
<!-- This HTML will be visible to the user after the form has been submitted. -->
<h1>The form has been submitted successfully!</h1>
<?php
}else{ //If the form has not been submitted
?>
<form method = "post" >
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" id = "submitButton" name = "submitButton" value="Submit">
</form>
<?php
} //End else
?>
</main>
I've form tag like this
sample name:register.php page
<form id="formElem" name="formElem" action="form10.php" method="post">
<input id="pd" name="pd" type="text" AUTOCOMPLETE=OFF />
<input id="pd1" name="fname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="mname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="lname" type="text" AUTOCOMPLETE=OFF />
6 more input boxes
<button name="submit" type="submit">Register</button>
<button name="preview" type="submit">Preview</button>
</form>
I'm sending this info to next form10.php page and displaying all the 10 input values on that page
I'm using $pd= htmlentities($_POST['pd']); $fname= htmlentities($_POST['fname']); to fetch values from form tag and such 10 variables and I'm echoing those entered value
on form10.php file after successful submit button.
like i entered fname, mname, lname came from form tag and displayed on form10.php page.
first name <?echo $fname?>
but now problem is user can see the next page (form10.php) after entering only 10 textboxes values inside form tag.
but I want to give preview option to user so that user can preview that next page either filling any of 1 to 10 textbox values. means he has filled fname and lname but not rest of 8 fields and he clicks on preview button I want to open form10_preview.php which same as form10.php but as user has entered only fname and lname so echo only those values which he as supplied.
Now problem is how can i can have two submit button and two actions in one form?
I think it is better to control form submit rules clientside. Remove the action from your form, and change the button type to be button :
<form id="formElem" name="formElem" action="" method="post">
<input id="pd" name="pd" type="text" AUTOCOMPLETE=OFF />
<input id="pd1" name="fname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="mname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="lname" type="text" AUTOCOMPLETE=OFF />
6 more input boxes
<button id="register" type="button">Register</button>
<button id="preview" type="button">Preview</button>
</form>
Then let javascript control the flow of the submitting :
var formElem = document.getElementById('formElem'),
btnSubmit = document.getElementById('register'),
btnPreview = document.getElementById('preview');
function formSubmit() {
switch (this.id) {
case 'register' :
formElem.action='post10.php';
break;
case 'preview' :
formElem.action='preview10.php';
break;
}
formElem.submit();
}
btnSubmit.onclick = formSubmit;
btnPreview.onclick = formSubmit;
You could have the form point to its own page and handle each submit value separately. At the top of the file with the form, you'll need to start the output buffer and a session. This allows the use of header() to redirect, and storage of session variables.
<?php
ob_start();
session_start();
?>
The form will point to itself by removing the action attribute:
<form id="formElem" name="formElem" method="post">
<input id="pd" name="pd" type="text" AUTOCOMPLETE=OFF />
<input id="pd1" name="fname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="mname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="lname" type="text" AUTOCOMPLETE=OFF />
6 more input boxes
<button name="submit" type="submit">Register</button>
<button name="preview" type="submit">Preview</button>
</form>
We process each of the buttons via their name in the POST array:
<?php
if(isset($_POST['submit'])){
foreach ($_POST as $key => $value) {
$_SESSION[$key] = $value;
}
header("Location: form10.php");
}
if(isset($_POST['preview'])){
foreach ($_POST as $key => $value) {
$_SESSION[$key] = $value;
}
header("Location: form10_preview.php");
}
?>
And at the very end of the file, we flush the output buffer:
<?php ob_end_flush(); ?>
So, essentially the form has one action, which is to submit the values to itself. Finally, both form10.php and form10_preview.php will need session_start(); at the top of the file to access the Session variables we've created, like so:
<?php
session_start();
$inputs = array("pd", "fname", "mname", "lname", etc...);
foreach ($inputs as $input) {
echo $_SESSION[$input];
}
?>
I have a form with ,
In the form after user clicks on Submit , he will be taken to another page which would show all the data entered, Which would allow the user to verify the content.(User will have a look at the content , to see what he entered is correct).
Once user verifies he would submit the data and Insert to DB should be done.
I want to know a method in which i could carry on the approach, to do this.
How can i implement this
EDIT MORE EXPLAIN
addemp.php
The Main Div With Form
<div class="panel-body">
<form>
Employee : <input Type="text" id="name">
<input type="submit" value="check">
</div>
The Second Div in the same form should show once submit is clicked
<div class="submit panel-body">
<form>
Employee : <Employee Name asin main div>
<input type="submit" > <--! this submit would post data
</form>
</div>
how to pass the value from 1st div to the second , and from the second INSERT to db.how can i do without page refresh ?
Use following script on location file
$action='';
if(isset($_POST['submit'])){
//create form here
//Change the action of form
$action = 'save.php';
}
echo '<form method="POST" action="'.$action.'">
<input type="text" name="nric" value="'.isset($_POST['nric'])?$_POST['nric'].'" />
<input type="text" name="empName" value="'.isset($_POST['empName'])?$_POST['empName'].'" />
<input type="text" name="location" value="'.isset($_POST['location'])?$_POST['location'].'" />
<input type="submit" value="Submit"/>
</form>';
EDIT: You don't need to use a form in this case. You can simply use JQuery to show the data from text boxes in a DIV and a button that will POST the data for you on the server.
<input type="text" name="nric" id="nric" />
<input type="text" name="empName" id="empName" />
<input type="text" name="location" id="location" />
<input id="sndData" type="button" value="Submit" />
<div id="showData"></div>
JQuery:
$('#sndData').click(function(){
var makeData = "<p>NRIC: "+$('#nric').val()+"</p><p>Employee Name: "+$('#empName').val()+"</p><p>Location: "+$('#location').val()+"</p>";
$('#showData').html(makeData);
});
When you've done that, just create/show a HTML button that will POST the data for you.
If this answers your question, please mark it as an answer.