Develop Reference

Form validation return issues

Im trying to learn form validation and I cannot figure out what is going on here. I am following a W3Schools tutorial and the validate form function is giving an error but it is not doing that on their example.
I tried copy and pasting the example into my project and just changing the property name and it still gives an error.
function validateForm() {
var x = document.forms["contact"]["yourName"].value;
if (x == "") {
alert("Please Enter Your Name");
return false;
}
}
<form name="contact" onsubmit="validateForm()">
<label for="cakeName">Cake name:</label>
<select required name="cakes" id="cakes">
<option value="placeholder">--- Select cake ---</option>
<option value="cakeOne">Coconut Bundt Cake</option>
<option value="cakeTwo">Cream Cheese Pound Cake</option>
<option value="cakeThree">German Chocolate Cake</option>
<option value="cakeFour">Classic Yellow Cake</option>
</select>
<br>
<label for="yourName">Your name:</label>
<input name="name" type="text">
<br>
<label for="message">Message</label>
<input name="message" type="text" placeholder="type your text you want written on the cake">
<br>
<label for="includes">Includes:</label>
<input type="checkbox" id="candle" name="candle" value="Candle">
<label for="candle">Candle</label>
<input type="checkbox" id="candle" name="candle" value="Candle">
<label for="candle">Firework</label>
<input type="checkbox" id="candle" name="candle" value="Candle">
<label for="candle">Toys</label>
<br>
<label for="deliveryDate">Deliver Date:</label>
<input type="date" id="date" name="date">
<br>
<label for='deliverTo'>Deliver to:</label>
<textarea name='deliverTo' id="deliverTo" cols="30" rows="10"></textarea>
<br>
<label for="callBefore">Call before deliver?</label>
<input type='radio' id="yes" name="callBefore" value="Yes">
<label for="yes">Yes</label>
<input type='radio' id="no" name="callBefore" value="No">
<label for="no">No</label>
<br>
<button type="submit" id="submit" class="submit" name="submit" value="bar">Order Now</button>
</form>

Issues with your code:
The field name was wrong.
You need to prevent your from default behavior which is reload or redirect to process it's data before submiting.
function validateForm(event) {
event.preventDefault(); // You didn't stop the subminssion default behavior
let x = document.forms["contact"]["yourName"].value;
if (x == "") {
alert("Please Enter Your Name");
return false;
}
}
<form name="contact" onsubmit="validateForm(event)">
<label for="yourName">Your name:</label>
<!-- You used a wrong name -->
<input name="yourName" type="text">
<button type="submit" id="submit" name="submit" value="bar">Order Now</button>
</form>
How we handle forms these days
const form = document.querySelector('#contact-form');
form.addEventListener('submit', (ev)=>{
// Stop the form submission from reloading or redirecting
ev.preventDefault();
let yourName = document.querySelector('#your-name').value;
if(yourName === ""){
alert("Please Enter Your Name");
return;
}
// Post the form with Fetch API or Axios ...
});
<form id="contact-form">
<label for="yourName">Your name:</label>
<input name="yourName" id="your-name" type="text">
<button type="submit" id="submit" name="submit" value="bar">Order Now</button>
</form>

I don't know if this will solve your problem (what was the error?) but the following line:
<input name="name" type="text">
Should be:
<input name="yourName" type="text">

Form GET method drop link instead of redirect

I want to remake my payment form. I'm using GET method, and want to return link below form instead of redirect, after clicking submit. Someone have any idea?
<script type="text/javascript">
function formatMoney(e) {
document.getElementById('z24_kwota').value = (!isNaN(e.target.value) ? e.target.value : 0) * 100
}
</script>
<form method="get" id="myform" action="https://sklep.przelewy24.pl/zakup.php">
<input type="hidden" name="z24_id_sprzedawcy" value="000000">
<input type="hidden" name="z24_crc" value="000000">
<input type="hidden" name="z24_return_url" value="https://google.com">
<input type="hidden" name="z24_language" value="pl">
Tytuł wpłaty
<input type="text" name="z24_nazwa" id="pole" maxlength="30" value="" placeholder="Wprowadź tytuł wpłaty" required>
<br>
<input type="hidden" name="z24_kwota" id="z24_kwota">
Kwota wpłaty
<input type="text" id="pole" placeholder="Wprowadź kwotę wpłaty (PLN)" pattern="^([1-9])((\.\d{1,2})?)$|^((?!0)(\d){1,5})((\.\d{1,2})?)$|^(1(\d{5})(.\d{1,2})?)$|^(200000(.[0]{1,2})?)$" onkeyup="formatMoney(event)" required>
<br>
<BR>
<input type="submit" class="przycisk" value="zapłać teraz">
</form>
I checked all Internet, and can't find any solution

Three forms actions in one php page

Assume that I have a PHP page that has three forms.
Form one, it will ask the user to enter the email address while the code is hidden.
<label for="email">Email Address:</label> <input type="text" id="email" name="email">
<input type="hidden" id="code" name="code" value="42"> <input type="submit" value="Submit1">
Form two will be showing after step 1. In this step, the user will be asked to enter the code in step 1 (which is equal to 42).
<input type="number" id="code2" name="code2"> <input type="submit" value="Submit2">
Form three, will be showing after entering corrected code in step 2.
<input type="number" id="code2" name="code2"> <input type="submit" value="Submit3">
How can I program it?

You could try this approach :
<?php
function getFormContent() {
$email = $_POST['email'] ?? null; //$email equals to null if it is undefined, to prevent errors
if (!$email) {
echo '<input type="text" name="email" placeholder="Email.." />';
echo '<input type="hidden" id="code" name="code" value="42">';
} else {
echo '<input type="hidden" name="email" value="'.$email.'" />'; //keep email set after submitting first step
}
if ($email && $_POST['code']) {
if (isset($_POST['code2']) && $_POST['code2'] == $_POST['code']) {
//final form
}
else { //second step
echo '<input type="number" id="code2" name="code2">';
echo '<input type="hidden" id="code" name="code" value="42">'; //we still need this in case user submitted a wrong code
}
}
}
?>
<form method="post">
<?= getFormContent() ?>
<input type="submit" />
</form>

You need to state the action of the form as the name of the file.
So, if the file you are working on is name example.php it should look like so:
$email = trim(get_variable_value('email'));
$code = trim(get_variable_value('code'));
$code2 = trim(get_variable_value('code2'));
//make sure to validate the input!! if it's not valid send back
<? if(!isset($email)){ //alternatively, you can add a hidden input `stage`. I just don't like it, as it can be bypassed.
?>
<form name="transferToNewForm" action="example.php" method="post">
<label for="email">Email Address:</label> <input type="text" id="email" name="email">
<input type="hidden" id="code" name="code" value="42">
<input type="submit" value="Submit1">
</form>
<? }
if(isset($email) && isset($code) && $code == 42){ ?>
<form name="transferToNewerForm" action="example.php" method="post">
<label for="email">Email Address:</label> <input type="text" id="email" name="email" value="<?= $email ?>" readonly>
<input type="number" id="code2" name="code2">
<input type="submit" value="Submit2">
</form>
<? }
if(isset($email) && isset($code2) && $code2 == 42){ ?>
<form name="finalFrom" action="theActualPageYouWant.php" method="post">
<label for="email">Email Address:</label> <input type="text" id="email" name="email" value="<?= $email ?>" readonly>
<input type="number" id="code2" name="code2">
<input type="submit" value="Submit3">
</form>
<? } ?>

Submitting Form in a popup window

I know that this might seem like a duplicate, but i can't seem to figure this out. I am wanting to submit a form in HTML to a Popup window. when i hit the submit button, it returns a blank page. I want the pop up to display all of the input that one filled out one the form. I want to do it in JavaScript. This is my code here. I want it to output all of the information entered in the form, from the Personal Information fieldset and the personal choices fieldset. I want it to display as an unordered list.
Heres the Javascript that i have so far:
<head>
<title>My Form</title>
<script type="text/javascript">
function display() {
dispWin = window.open('','NewWin',
'toolbar=no,status=no,width=300,height=200')
message = "<ul><li>First Name:" +
document.mdForm.first_name.value;
message += "<li>Last Name:" +
document.mdForm.the_lastname.value;
message += "<li>Address:" +
document.mdForm.the_address.value;
message += "</ul>";
dispWin.document.write(message);
}
</script>
Heres the HTML:
<body>
<h1>My Form</h1>
<form name="mdForm" method="post" action="">
<fieldset>
<legend>Personal Information</legend>
<p><label class="question" for="first_name">What is your First name?
</label>
<input type="text" id="first_name" name="first_name"
placeholder="Enter your First name."
size="50" required autofocus /></p>
<p><label class="question" for="the_lastname">What is your Last name?
</label>
<input type="text" id="the_lastname" name="the_lastname"
placeholder="Enter your Last name."
size="50" required /></p>
<p><label class="question" for="the_address">What is you address?
</label>
<input type="text" id="the_address" name="the_address"
placeholder="Enter your address."
size="50" required /></p>
<p><label class="question" for="the_email">What is your e-mail address?
</label>
<input type="email" id="the_email" name="the_email"
placeholder="Please use a real one!"
size="50" required /></p>
</fieldset>
<fieldset>
<legend>Personal Choices</legend>
<p><span class="question">Please check all your favorite foods:</span>
</br>
<input type="checkbox" id="food_one" name="some_statements[]"
value="Buffalo Wings" />
<label for="food_one">Buffalo Wings</label><br/>
<input type="checkbox" id="food_two" name="some_statements[]"
value="Enchiladas" />
<label for="food_two">Enchiladas</label><br/>
<input type="checkbox" id="food_three" name="some_statements[]"
value="Hamburgers" />
<label for="food_three">Hamburgers</label><br/>
<input type="checkbox" id="food_four" name="some_statements[]"
value="Spaghetti" />
<label for="food_four">Spaghetti</label></p>
<p><span class="question">Select your favorite online store:</span><br/>
<input type="radio" id="the_amazon" name="online_store"
value="amazon" />
<label for="the_amazon">Amazon</label><br/>
<input type="radio" id="bestbuy_electronics" name="online_store"
value="bestbuy" />
<label for="bestbuy_electronics">BestBuy</label><br/>
<input type="radio" id="frys_electronics" name="online_store"
value="frys" />
<label for="frys_electronics">Frys Electronics</label><br/>
</p>
<p><label for="my_band"><span class="question">Who's your favorite band/ artist?</span></label><br/>
<select id="my_band" name="my_band" size="4" multiple>
<option value="The Chi-Lites">The Chi-Lites</option>
<option value="Michael Buble">Michael Buble</option>
<option value="Frank Ocean">Frank Ocean</option>
<option value="Labrinth">Labrinth</option>
</select>
</p>
</fieldset>
<div id="buttons">
<input type="submit" value="Click Here to Submit" onclick="display();" />
or
<input type="reset" value="Erase and Start Over" />
</div>
</form>
</body>

Have you prevented the default submit functionality?
Try:
function display(e) {
//To stop the submit
e.preventDefault();
...
Do your Stuff
...
//Continue the submit
FORM.submit();
}

Javascript do not submit form TRUE

<script type="text/javascript">
function myFunction(){
document.getElementById("form1").submit();
document.getElementById("form2").submit();}
</script>
<form id="form1" action="php/create.php">
Name </br><input type="text" name="inputName" value="" id=""> </input>
Hemsida </br><input type="text" name="inputPage" value="http://" id=""> </input>
<input type="button" onclick="return myFunction()" value="Submit"/>
</form>
<form id="form2" action="php/createhemerb.php">
<input type="text" name="inputFon" value="" id="fnid" hidden/>
<input type="text" name="inputJob" value="" id="fnid" hidden/>
</form>
I reach out to the php files but the both come out "please fill out the form 1" and "please fill out the form 2"
if(!$_POST['submit']) {
echo "please fill out the form";
header ('Location: please fill out the form 1');}
I have tried things back and fourth for hours i can not get it to work.

Please do the following to fix your issue:
Add method='post' to your forms
If you intend to check the value of $_POST['submit'], you need to name your button 'submit'.
You can't use echo and then header(''), it will set a 'header already sent exception'.
header('Location: some text') has no meaning, header('Location: file.html') is the correct syntax.
Full code:
<script type="text/javascript">
function myFunction(){
document.getElementById("form1").submit();
document.getElementById("form2").submit();
}
</script>
<form id="form1" action="php/create.php" method="post">
Name </br><input type="text" name="inputName" value="" id=""> </input>
Hemsida </br><input type="text" name="inputPage" value="http://" id=""> </input>
<input type="button" onclick="return myFunction()" value="Submit" name="submit"/>
</form>
<form id="form2" action="php/createhemerb.php" method="post">
<input type="text" name="inputFon" value="" id="fnid" hidden/>
<input type="text" name="inputJob" value="" id="fnid" hidden/>
</form>
PHP:
if(empty($_POST) || !$_POST['submit']) {
echo "please fill out the form";
//you can't set the header after echoing
//header ('Location: please fill out the form 1');//use header('Location: error.html') instead.
//or output a Javascript redirect echo "<script>window.location = 'error.html';</script>";
}
Hope this helps!