We Keep Coding

How can I show and hide the form in HTML page?

I have an html form which is supposed to appear only after clicking a submit button. I have added simple JavaScript to display the same on click.
Intention is show the update form on click of the button above it. Can anyone help me out to find what I did wrong?
function showForm() {
alert('Form has been submitted');
document.getElementByClass(UpdateForm - section).style.display = 'block';
}
.UpdateForm-section.hidden {
display: none;
}
<input type="submit" name="delete" class="button-1" value="Update" onclick="showForm();" />
<br><br><br>
<!-- Update details form here -->
<div>
<form action="" method="post" class="UpdateForm-section">
<label>Car Name</label>
<input type="text" value="" name="ev_name" placeholder="Model name"><br>
<label>Manufacturer</label>
<input type="text" value="" name="ev_manufacturer" placeholder="Brand name"><br>
<label>Year</label>
<input type="number" value="" name="ev_year" placeholder="YYYY"><br>
<label>Battery size</label>
<input type="number" value="" step="any" name="ev_battery" placeholder="Capacity in Kwh"><br>
<label>Range</label>
<input type="number" value="" name="ev_range" placeholder="Range in Km"><br>
<label>Cost</label>
<input type="number" value="" name="ev_cost" placeholder="Price in €"><br>
<label>Power</label>
<input type="number" value="" name="ev_power" placeholder="Power in Kw"><br>
<br>
<input type="submit" id="update_submit" value="Update details" name="submit_button" />
</form>
</div>

Try the below changes in your code.
In CSS:
remove .hidden from .UpdateForm-section.hidden
In JS:
use querySelector instead of getElementByClass and wrap the name of the class in quotes.
Wokring code:
function showForm() {
alert('Form has been submitted');
document.querySelector('.UpdateForm-section').style.display = 'block';
}
.UpdateForm-section {
display: none;
}
<input type="submit" name="delete" class="button-1" value="Update" onclick="showForm();" />
<br><br><br>
<!-- Update details form here -->
<div>
<form action="" method="post" class="UpdateForm-section">
<label>Car Name</label>
<input type="text" value="" name="ev_name" placeholder="Model name"><br>
<label>Manufacturer</label>
<input type="text" value="" name="ev_manufacturer" placeholder="Brand name"><br>
<label>Year</label>
<input type="number" value="" name="ev_year" placeholder="YYYY"><br>
<label>Battery size</label>
<input type="number" value="" step="any" name="ev_battery" placeholder="Capacity in Kwh"><br>
<label>Range</label>
<input type="number" value="" name="ev_range" placeholder="Range in Km"><br>
<label>Cost</label>
<input type="number" value="" name="ev_cost" placeholder="Price in €"><br>
<label>Power</label>
<input type="number" value="" name="ev_power" placeholder="Power in Kw"><br>
<br>
<input type="submit" id="update_submit" value="Update details" name="submit_button" />
</form>
</div>

I suggest you to have the following approach: define a desired style when your element will be shown:
.UpdateForm-section { // here we set the default style of the div -> not displayed
display: none;
}
.UpdateForm-section.active { // here the CSS selector is stronger, so it will override the previous statement
display: block;
}
Then in your javascript, you just add the "active" class to the element when you want it to show:
function showForm() {
alert('Form has been submitted');
document.querySelector(".UpdateForm-section").classList.add('active'); // Prefer to use an id to select an unique element to avoid miss coding
}

You just need to save your form in a variable, and you can easyly change it after it. You will need to remove .hidden from your css.
You need to use form[0], because when you make getElementsByClassName, you are getting an array:
function showForm() {
alert('Form has been submitted');
var form = document.getElementsByClassName("UpdateForm-section");
form[0].style.display = 'block'
}

PHP form submitting when clicking any buttons

currently setting up a form to create a new order within a payment system and when I click any of the buttons within the form the form submits. Anyone know what the issue could be?
This is the code with the issue:
<form action="scripts/php/addorder.php" method="POST">
<script src="scripts/javascript/cookies.js"></script>
<script src="scripts/javascript/addproduct.js"></script>
<label>Choose Customer: </label>
<input type="text" value="" name="name" id="name" required readonly>
<button onclick ="window.open('customertable.php','popup','width=600,height=600');">Choose</button>
<br/>
<div id="products">
<label>Products: </label>
<br/>
ID: <input type="text" value=" " name="chosenproduct0" id="chosenproduct0" required readonly>
Name: <input type="text" value=" " name="chosenproduct0name" id="chosenproduct0name" required readonly>
Price: <input type="text" value=" " name="chosenproduct0price" id="chosenproduct0price" required readonly>
Quantity: <input type="number" value="1" name="chosenproduct0quantity" id="chosenproduct0quantity" required>
<button onclick ="findproduct('chosenproduct0');">Choose Product</button>
</div>
<br/>
<label>Discount: </label>
<input type="number" placeholder="0" name="discount" id="discount" step=".01" min="0">
<label>Total: </label>
<input type="number" value="0" name="total" id="total" readonly>
<button onclick="addproduct()">Add Product</button>
<br/>
<input type="submit" id="submit" value="Create New Order" class="button"/>
</form>

The default type for a <button> is submit. Explicity set it to button and it shouldn't submit the form by default:
<button type="button" onclick="addproduct()">Add Product</button>

By default, pages are refreshed/forms submitted when buttons are clicked. You can fix this by adding the attribute type="button" to your buttons.
<button type="button" onclick="myFunction()">My button</button>

Prevent using <button> element in the <Form> elements,
By default it's behavior is equivalent to <input type="submit"> element.
So Prefer this
<input type="button" value="Add Product">

hiding/closing a div opened by .show()

When my page loads I hide a div containing a form using
$('#popupPerson').hide();
then in the body I build a table and this popup to help insert/update/delete row data using a form that is initally hidden
<div id="popupPerson" class="popupPerson">
<form id="form_popup_person" action="person_update" method="post">
<fieldset>
<legend>Person</legend>
<label for="id">id</label> <input name="id" type="number" />
<label for="revision">revision</label> <input name="revision" type="number" /><p>
<label for="lastName">lastName</label> <input name="lastName" type="text" />
<label for="firstName">firstName</label> <input name="firstName" type="text" /><p>
<label for="street">street</label> <input name="street" type="text" />
<label for="city">city</label> <input name="city" type="text" /><p>
<label for="county">county</label> <input name="county" type="text" />
<label for="state">state</label> <input name="state" type="text" />
<label for="postalCode">postalCode</label> <input name="postalCode" type="text" /><p>
<label for="birthDate">birthDate</label> <input name="birthDate" type="text" />
<label for="email">email</label> <input name="email" type="text" />
<label for="status">status</label> <input name="status" type="text" /><p>
<input name="submit" type="submit" value="Submit" />
<input name="cancel" type="submit" class="cancel" value="Cancel" />
<button type="button" class="cancel" onClick="this.parent.close();">Cancel button</button>
<button type="button" class="cancel" onClick="$(this).parent().parent().hide();">parent parent hide button</button>
<button type="button" class="cancel" onClick="$(this).parent().hide();">parent hide button</button> <!-- makes ALL BUTTONS DISAPPEAR -->
<button type="button" class="cancel" onClick="$(this).hide();">hide button</button> <!-- makes the BUTTON ITSELF DISAPPEAR -->
</fieldset>
</form>
</div>
and some js so that if a row in the table is clicked this fires and makes the div visible
$('#popupPerson').show();
I want to add a "Cancel" button to the form that simply closes/hides the div - no submitting, no resetting.

you can simply write like
<button type="button" class="cancel" onClick="$('#popupPerson').hide();">Cancel</button>

I would use this: <button type="button" class="cancel" onClick="$(this).closest('.popupPerson').hide();">parent parent hide button</button> which closes the containing .popupPerson, incase you ever need more than one on a page.
Alternatively, you can put this in a script:
$(function(){
$(document).on('click','.popupPerson .cancel', function(){
$(this).closest('.popupPerson').hide();
// Do whatever else you want here, like eat the event (stopPropegation, etc).
});
});
And this is the element:
<a class="cancel">parent parent hide button</a>

Send value from another form

I have multiple forms that point to the same site where the datas are stored into a sql database. For each form the user has to fill out a textfield which is separated from the form. I don't understand how i could send for each form the same value from the separated textfield.
<form name="user" action="http://hello.xy/login.php" method="GET">
<input type="text" value="User" name="provider" hidden>
Name: <br/>
<input type="text" value="" name="user_name"><br/>
Email: <br/>
<input type="text" value= "" name="user_email"><br/>
<textarea hidden name="comment" value="value from the form comment"></textarea>
<input type="submit" value="submit">
</form>
<form name="google" action="http://hello.xy/login.php" method="GET">
<input type="text" value="Google" name="provider" hidden>
<textarea hidden name="comment" value="value from the form comment"></textarea>
<input type="image" src="images/logos/google.png" value="submit">
</form>
<form name="twitter" action="http://hello.xy/login.php" method="GET">
<input type="text" value="Twitter" name="provider" hidden>
<textarea hidden name="comment" value="value from the form comment"></textarea>
<input type="image" src="images/logos/twitter.png" value="submit">
</form>
<form name="facebook" action="http://hello.xy/login.php" method="GET">
<input type="text" value="Facebook" name="provider" hidden>
<textarea hidden name="comment" value="value from the form comment"></textarea>
<input type="image" src="images/logos/facebook.png" value="submit">
</form>
Separated textfield, but on the same site:
<form name="comment" >
<textarea name="input" ></textarea>
</form>
I hope somebody can help me.
Thanks,
Misch

You can't send data from two forms at the same time without JavaScript.
The solution without JavaScript is to use one form:
<form action="http://hello.xy/login.php" method="GET">
<textarea name="comment"></textarea>
<label for="user_name">Name</label>
<input type="text" name="user_name" id="user_name">
<label for="user_email">Email</label>
<input type="text" name="user_email" id="user_email">
<button type="submit" name="provider" value="User">Submit</button>
<input type="image" src="images/logos/google.png" name="provider" value="Google">
...
</form>
Update
Since you're using jQuery, use:
<textarea name="comment" class="comment-visible"></textarea>
And include this in each form:
<input type="hidden" name="comment" class="comment-hidden">
jQuery:
$(document).on('input', '.comment-visible', function(){
$('.comment-hidden').val( $(this).val() );
});

A <textarea> doesn't have a value= attribute. The value is the text node inside. ex.
<textarea>value</textarea>

Calling a Object Oriented function from jQuery

I am kind of new to JQuery and Javascript and need your help on what I am missing here. I know the code works in jsfiddle.net but when I actually run it on my computer it's not doing anything. I want to keep the Object Oriented functions in "updated-formcheck.js" file separately.
I have a form validation HTML file with a jQuery function that calls my "updated-formcheck.js" file that checks all the empty fields and returns a msg. But when a submit button is clicked, nothing happens. Can you tell me why?
HTML file:
<script src="updated-formcheck.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<form id="myform" method="post" action="#">
<fieldset>
<label for="attendee">I am a...<font color="red">*</font>:<br />
<br />
</label>
<select id="attendee" name="attendee" >
<option value="">-- Please Choose --</option>
<option value="RETURNING" >Returning Attendee</option>
<option value="FIRST_TIME" >First Time Attendee</option>
</select>
<label for="fullName"><br />
<br />
Full Name<font color="red">*</font>:</label>
<p><input type="text" id="fullName" name="fullName" value="" />
</p>
<p> </p>
<label for="address1">Street Address<font color="red">*</font>:</label>
<p>
<input type="text" id="address1" name="address1" value=""/>
</p>
<p>
<input type="text" id="address2" name="address2" value="" />
</p>
<label for="city"><br />
City<font color="red">*</font>:</label>
<p>
<input type="text" id="city" name="city" value="" />
</p>
<label for="stateProvince"><br />
State/County/Province:</label>
<p>
<input type="text" id="stateProvince" name="stateProvince" value="" />
</p>
<label for="zipPostalCode">ZIP/Postal Code:<br />
</label>
<p>
<input type="text" id="zipPostalCode" name="zipPostalCode" value="" />
</p>
<input type="hidden" name="submitted" value="true" />
<input type="submit" value="Submit" id="btnSubmit"/>
</fieldset>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#btnSubmit').click(function(e) {
validateNow(e);
});
});
</script>
In "updated-formcheck.js" file:
function validateNow(eventObj){
var isValid = true;
$('input[type="text"].required, textarea.required, select.required').each(function() {
if ($.trim($(this).val()) == '') {
isValid = false;
$(this).css({
"border": "1px solid red",
"background": "#FFCECE"
});
}
else {
$(this).css({
"border": "",
"background": ""
});
}
});
if (isValid == false) {
eventObj.preventDefault();
alert(this.e);
}else
this.s;
}

Because
$('input[type="text"].required, textarea.required, select.required')
in your code currently return an empty array, so each function is not called.
This is because you are looking for dom elements with a css class "required" that you doesn't have.

To get your code working I added a "required" class, which your js code is looking for, on the city element. I also updated the jQuery bind event to the form submit instead of a button click.
<html>
<head>
</head>
<body>
<form id="myform" method="post" action="#">
<fieldset>
<label for="attendee">I am a...<font color="red">*</font>:<br />
<br />
</label>
<select id="attendee" name="attendee" >
<option value="">-- Please Choose --</option>
<option value="RETURNING" >Returning Attendee</option>
<option value="FIRST_TIME" >First Time Attendee</option>
</select>
<label for="fullName"><br />
<br />
Full Name<font color="red">*</font>:</label>
<p><input type="text" id="fullName" name="fullName" value="" />
</p>
<p> </p>
<label for="address1">Street Address<font color="red">*</font>:</label>
<p>
<input type="text" id="address1" name="address1" value=""/>
</p>
<p>
<input type="text" id="address2" name="address2" value="" />
</p>
<label for="city"><br />
City<font color="red">*</font>:</label>
<p>
<input type="text" id="city" name="city" value="" class="required" />
</p>
<label for="stateProvince"><br />
State/County/Province:</label>
<p>
<input type="text" id="stateProvince" name="stateProvince" value="" />
</p>
<label for="zipPostalCode">ZIP/Postal Code:<br />
</label>
<p>
<input type="text" id="zipPostalCode" name="zipPostalCode" value="" />
</p>
<input type="hidden" name="submitted" value="true" />
<input type="submit" value="Submit" id="btnSubmit"/>
</fieldset>
</form>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="updated-formcheck.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myform').on('submit', function(e) {
//e.preventDefault();
validateNow(e);
return false;
});
});
</script>
</body>
</html>