We Keep Coding

1 button for 2 forms where one of the forms is a <select>

I got 2 forms, one of the forms is a select which can show 2 hidden divs. When one of the options is selected it should send the value to the database. Now the second form is where the button is. When this button is pressed it should submit both forms. I already tried some things, but they don't seem to work. Anyone has an idea?
The first 'main' form:
<form class="areaType" id="formSelect" action="saveData.php" method="POST">
<p>Are you a student showcasing a project or a school institution looking to collaborate?</p>
<select id="textAreaType" onchange="chooseType(this)" name="type">
<option value="0" selected></option>
<option value="1">Student project</option>
<option value="2">School institution project</option>
</select>
</form>
The second (hidden) form:
<form class="textAreas" id="formSchool" action="saveData.php" method="POST">
<div class="fieldsForSquare">
<p>Fill in these fields for your square</p>
</div>
<div class="areaTitle">
<p>Title</p>
<textarea type="text" id="textAreaTitle" name="summary" required></textarea>
</div>
<div class="areaDescription">
<p>Short description</p>
<textarea maxlength="200" type="text" id="textAreaDescription" name="shortSummary" required></textarea>
</div>
<div class="areaPersons">
<p>How many people are you looking for and how big is the team going to be?</p>
<input type="number" maxlength="2"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
id="textAreaPersons" required>
<input type="number" maxlength="2"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
id="textAreaPersons2" required>
</div>
<div class="areaHours">
<p>Is it fulltime or parttime?</p>
<select id="textAreaHours" required>
<option value="0" selected></option>
<option value="1">Fulltime</option>
<option value="2">Parttime</option>
</select>
</div>
<div class="fieldsForPage">
<p>Fill in these fields for your page</p>
</div>
<div class="areaAbout">
<p>What is it about?</p>
<textarea type="text" id="textAreaAbout" required></textarea>
</div>
<div class="areaLookingFor">
<p>What/who are you looking for?</p>
<textarea type="text" id="textAreaLookingFor" required></textarea>
</div>
<div class="areaCollab">
<p>U wish to add other accounts to this project?</p>
<textarea type="text" id="textAreaCollab"></textarea>
</div>
<div class="areaImg">
<p>Add some images of the product/project.</p>
<input id='files' type='file' multiple />
<output id='result' />
</div>
<div class="submitButton">
<input type="submit" value="submit" onclick="submitForms()">
</div>
</form>
The third (hidden) form:
<form class="textAreas" id="formStudent" action="saveData.php" method="POST">
<div class="fieldsForSquare">
<p>Fill in these fields for your square</p>
</div>
<div class="areaTitle">
<p>Title</p>
<textarea type="text" id="textAreaTitleStudent" name="summary" required></textarea>
</div>
<div class="areaDescription">
<p>Short description</p>
<textarea maxlength="200" type="text" id="textAreaDescriptionStudent" name="shortSummary"
required></textarea>
</div>
<div class="fieldsForPage">
<p>Fill in these fields for your page</p>
</div>
<div class="areaAbout">
<p>What is it about?</p>
<textarea type="text" id="textAreaAbout" required></textarea>
</div>
<div class="areaCollab">
<p>U wish to add other accounts to this project?</p>
<textarea type="text" id="textAreaCollab"></textarea>
</div>
<div class="areaImg">
<p>Add some images of the product/project.</p>
<input id='files' type='file' multiple />
<output id='result' />
</div>
<div class="submitButton">
<input type="submit" value="submit" onclick="submitForms_()">
</div>
</form>
The Javascript code for submitting the forms depending on which value is selected:
function submitForms() {
document.getElementById('formSelect').submit();
document.getElementById('formSchool').submit();
}
function submitForms_() {
document.getElementById('formSelect').submit();
document.getElementById('formStudent').submit();
}
the PHP code where it first checks if an option is selected and then (it should) insert it:
<?php
include('../general.config.php');
print_r($_POST);
$summary = $_POST['summary'];
$shortSummary = $_POST['shortSummary'];
$type = $_POST['type'];
if(isset($type)){
$query = $db->prepare("INSERT INTO `project`( `type`, `short_summary`, `summary`) VALUES (?, ?, ?)");
$query->bindPARAM(1,$type, PDO::PARAM_INT);
$query->bindPARAM(2,$shortSummary, PDO::PARAM_STR);
$query->bindPARAM(3,$summary, PDO::PARAM_STR);
if($query->execute())
echo "succes!";
else
echo "NO SUCCES!";
}
?>
chooseType() function:
function chooseType(select) {
if (select.value == 1) {
document.getElementById('mainAddProjectStudentID').style.display = 'block'
document.getElementById('mainAddProjectSchoolID').style.display = 'none'
} else if (select.value == 2) {
document.getElementById('mainAddProjectSchoolID').style.display = 'block'
document.getElementById('mainAddProjectStudentID').style.display = 'none'
} else if (select.value == 0) {
document.getElementById('mainAddProjectSchoolID').style.display = 'none'
document.getElementById('mainAddProjectStudentID').style.display = 'none'
}
}
When no option is selected:
When one of the options is selected:

First thing is you cannot submit two forms with one submit button unless you use ajax. Neither is this the best way to deal with the situation.
I will answer the question in two parts. One where you have three forms and are able to send data from both the forms and then a better way to do this.
Your select option has static values that represent either of the forms. You can simply add a hidden input field to have your form data include the correct type.
<!-- Hidden Input Tag for the formStudent form-->
<input type="hidden" name="type" id="studentType" value="1">
<!-- Hidden Input Tag for the formSchool form-->
<input type="hidden" name="type" id="schoolType" value="2">
Now when either of the forms are submitted your objective of having the type variable populated correctly is met.
One of the right and easier way of doing this would be to use just one form instead of three. You can toggle display of the forms with the select tag, like you are already doing. Use unique names for your fields and in your php script use $type variable to conditionally populate the variables $summary, $shortSummary and $type.
Demonstration (adding just the basic elements)
<form action="saveData.php" method="POST">
<select id="textAreaType" onchange="chooseType(this)" name="type">
<option value="0" selected></option>
<option value="1">Student project</option>
<option value="2">School institution project</option>
</select>
<!-- Student Form> -->
<div id="mainAddProjectStudentID" style="display:none;">
<textarea type="text" id="textAreaTitleStudent" name="studentSummary" required></textarea>
<textarea maxlength="200" type="text" id="textAreaDescriptionStudent" name="studentShortSummary" required></textarea>
</div>
<!-- School Form -->
<div id="mainAddProjectSchoolID" style="display:none;">
<textarea type="text" id="textAreaTitleStudent" name="schoolSummary" required></textarea>
<textarea maxlength="200" type="text" id="textAreaDescriptionStudent" name="schoolShortSummary" required></textarea>
</div>
<!-- Submit Button -->
<input type="submit" value="submit">
</form>
And your php to read the data will be
if(!empty($_POST['type']) && ($_POST['type'] == 1 || $_POST['type'] ==2 )){
$type = $_POST['type'];
$summary = ($type == 1)? $_POST['studentSummary'] : $_POST['schoolSummary'];
$shortSummary = ($type ==1)? $_POST['studentShortSummary'] : $_POST['schoolShortSummary'];
}
This is just one way of doing it, there could be many.

Javascript default shipping address equal to billing address on page load, works in jsfiddle, but not in browser?

I recognize that similar questions have been asked before, but none of them seem to fix my problem. I'm trying to get the default setting be where the shipping address is equal to the billing address with a check box pre-checked. Upon clicking the checkbox a section of the form appears and the previously hidden form values/input text is cleared so that the user can enter in separate billing information. I've got it all working in jsfiddle, but can't for the life of me get it working in the browser. Any help would be appreciated.
ps. sorry for the wonky formatting, I can't figure out how to elegantly paste code while following the formatting guidelines.
<form name="checkout" method="post" id="payment-form" action="/templates/dropindemo.php">
<section id="shipping">
<h2>Shipping</h2>
<label for="first">First name</label>
<input type="text" autocomplete="given-name" placeholder="Hermionie" name="fname" id="first">
<label for="last">Last name</label>
<input type="text" autocomplete="family-name" placeholder="Granger" name="lname" id="last">
<br>
<label for="address">Address</label>
<input type="text" autocomplete="street-address" placeholder="12 Grimmauld Place" name="address" id="address">
<label for="city">City</label>
<input type="text" autocomplete="address-level2" placeholder="London" name="city" id="city">
<br>
<label for="state">State</label>
<input type="text" autocomplete="address-level1" placeholder="Greater London" name="state" id="state">
<label for="zip">Postal Code</label>
<input type="number" pattern="\d*" autocomplete="postal-code" placeholder="WC1N1 9LX" name="zip" id="zip">
<label for="country">Country</label>
<select name="country" id="country">
<option selected hidden disabled value="">United Kingdom</option>
<option value="USA">United States</option>
</select>
<br>
<label for="last">E-mail</label>
<input type="email" autocomplete="email" placeholder="hermionie#spew.org" name="email" id="email">
<br>
<input type="checkbox" onclick="onPageLoad()" id="shiptobill" />
<label for="shiptobill">My shipping and billing info are the same</label>
</section>
<section id="billing">
<h2>Billing</h2>
<label for="first">First name</label>
<input type="text" autocomplete="given-name" placeholder="Harry" name="bfname" id="bfirst">
<label for="last">Last name</label>
<input type="text" autocomplete="family-name" placeholder="Potter" name="blname" id="last">
<br>
<label for="address">Address</label>
<input type="text" autocomplete="street-address" placeholder="4 Private Drive" name="baddress" id="address">
<label for="city">City</label>
<input type="text" autocomplete="address-level2" placeholder="Little Winging" name="bcity" id="city">
<br>
<label for="state">State</label>
<input type="text" autocomplete="address-level1" placeholder="Surrey" name="bstate" id="state">
<label for="zip">Postal Code</label>
<input type="number" pattern="\d*" autocomplete="postal-code" placeholder="RG12 9FG" name="bzip" id="zip">
<label for="country">Country</label>
<select name="bcountry" id="country">
<option selected hidden disabled value="">United Kingdom</option>
<option name="USA" value="USA">United States</option>
</select>
<br>
</section>
</form>
And the javascript...
window.onload = toggle(), onPageLoad();
function toggle() {
if (document.getElementById("shiptobill").checked == true) {
document.getElementById("shiptobill").checked = false;
} else {
document.getElementById("shiptobill").checked = true;
}
};
function onPageLoad() {
var inputs =
document.getElementById("shipping").getElementsByTagName("input");
var mirror =
document.getElementById("billing").getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (document.getElementById("shiptobill").checked === true) {
var att = inputs[i].getAttribute("name");
inputs[i].setAttribute('onkeyup', 'document.checkout.b' + att + '.value=this.value');
document.getElementById('billing').style.display = ""; //would normally be set to "none" in production
} else {
document.getElementById('billing').style.display = "block";
inputs[i].setAttribute('onkeyup', "");
mirror[i].value = "";
}
}
};

window.onload = toggle(), onPageLoad();
means…
Immediately execute toggle
Assign the return value of toggle to onload
toggle has no return statement so it returns undefined
onload expects to be assigned a function, not undefined
Immediately execte onPageLoad
You are almost certainly running into getElementById failing because the element doesn't exist yet. If you looked at the Console of the Developer Tools in your browser, this would probably be obvious. It is really important to look at the error messages your browser gives you.
If you want to call toggle and onPageLoad when the load event fires by assigning something to onload, then you need to assign a function.
function run_on_load() {
toggle();
onPageLoad();
}
window.onload = run_on_load; // No ()! They would *call* the function.
Modern JS uses addEventListener, so you could instead:
addEventListener("load", toggle);
addEventListener("load", onPageLoad);

how to set a default value(dollar or euros) in input text

I need to put a measuring unit (€, $) in a text field by default, which targets a number and you appear. How can I do it? Are there any default value for this?
Thank you
Example

is this what you expect.try with this.
<input type="text" value="$"/>
if your want both use this
<input type="text" value="$,€"/>
hope this will help to you

You can use something like this
<form>
<h2>Test Form</h2>
Whats your hourly rate?
<select name="" id="">
<option value="">€</option>
<option value="">$</option>
<option value="">£</option>
</select>
<input type="number" min="0" max="10000" step=".1" name="hourly_rate" id="hourly_rate" required="required">
<br>
<input type="submit">
</form>
here is a working demo - http://jsbin.com/dimobovixu/1/edit?html,css,output

Form event onChange not working on dropdown selection

I have one form that works perfectly and changes the action of the form based on radio buttons:
<form name="form1" method="post" action="[[base_urlnt]]/electricity-rate-plans">
<input type="radio" name="energy" value="electricity" checked>
<label for="electricity">Electricity</label>
<input type="radio" name="energy" value="gas" onChange="if(this.checked){document.forms[0].action='[[base_urlnt]]/natural-gas-rate-plans'}">
<label for="gas">Natural Gas</label>
<input name="service_zip_5" type="text" id="search" placeholder="Enter ZIP Code"><button type="submit" class="bigButton">Get Rates</button>
</form>
And I want to do the same thing, but change the action on another form by using onChange but not on radio buttons, but using a dropdown list seen below. What am I doing wrong?
<form name="form1" method="post" action="[[base_url]]alberta/electricity-plans">
<p>Choose Your Service</p>
<select name="service" id="service" title="Choose Your Service">
<option value="Electricity" selected="selected">Electricity</option>
<option value="Gas" onChange="if(this.selected){document.forms[0].action='[[base_url]]alberta/natural-gas-plans'}">Natural Gas</option>
<option value="Dual" onChange="if(this.selected){document.forms[0].action='[[base_url]]alberta/dual-fuel-plans'}">Dual Fuel</option>
</select>
<p>Enter Your ZIP Code</p>
<input name="service_zip_5" type="text" id="zipcode">
<button type="submit" id="submit">Get Started</button>
</form>
I tried
onChange="if(this.checked)
first and the thought that since it is a selection it should be onChange="if(this.selected) but neither work. Is this just not a function?

You need to change it slightly.
Your onchange events should be bound to the select not the individual options.
I have also added an attribute "data-url" to each option to store the url that will need to be added to the form action onchange.
This "data-url" attribute can then be used by the javascript function to update the form action. It also means you don't have to repeat the same code in all of your onchange attributes. You can just call a function that extracts the corresponding "data-url".
See - http://jsfiddle.net/williamtdavies/8kxzaquw/
<form name="form1" method="post" action="[[base_url]]alberta/electricity-plans">
<p>Choose Your Service</p>
<select name="service" id="service" title="Choose Your Service" onChange="changeFormAction(this);">
<option value="Electricity" data-url="[[base_url]]alberta/electricity-plans">Electricity</option>
<option value="Gas" data-url="[[base_url]]alberta/natural-gas-plans">Natural Gas</option>
<option value="Dual" data-url="[[base_url]]alberta/dual-fuel-plans">Dual Fuel</option>
</select>
<p>Enter Your ZIP Code</p>
<input name="service_zip_5" type="text" id="zipcode"/>
<button type="submit" id="submit">Get Started</button>
</form>
<script>
function changeFormAction(elem){
document.forms[0].action = elem.options[elem.selectedIndex].getAttribute("data-url");
}
</script>

Show different elements of a form depending on dropdown box selection

So I have a page that has a dropdown list and form. And what I want to do is depending on the option selected in the dropdown list I want to hide and show different parts of the form.
<select id="myselect>
<option id="option1">Option_1</option>
<option id="option2">Option_2</option>
<option id="option3">Option_3</option>
</select>
<form action="" method="post">
<input id="input_1" name="input_1" type="text" />
<input id="input_2" name="input_2" type="text" />
<input id="input_3" name="input_3" type="text" />
</form>
So if Option_1 is selected then show input_1 and input_3, while hiding input_2

Plain JS
window.onload=function() {
document.getElementById("myselect").onchange=function() {
document.getElementById("input_2").style.display=(this.options[this.selectedIndex].value=="option1")?"none":"block";
}
document.getElementById("myselect").onchange(); //trigger
}

i managed to get your issue resolved by adding a 'value' attribute to your option tags:
<select id="myselect">
<option id="option1" value="option1">Option_1</option>
<option id="option2" value="option2">Option_2</option>
<option id="option3" value="option3">Option_3</option>
</select>
<form action="" method="post">
<input id="input_1" name="input_1" type="text" placeholder="input_1"/>
<input id="input_2" name="input_2" type="text" placeholder="input_2"/>
<input id="input_3" name="input_3" type="text" placeholder="input_3"/>
</form>​
and using the jquery .change() event:
$select = $('#myselect');
$('#input_2').hide();
$('#input_3').hide();
$select.change(function(){
if($(this).val() == "option1"){
if($('#input_1').is(":hidden")){
$('#input_1').show();
}
$('#input_2').hide();
$('#input_3').hide();
}
if($(this).val() == "option2"){
if($('#input_2').is(":hidden")){
$('#input_2').show();
}
$('#input_1').hide();
$('#input_3').hide();
}
if($(this).val() == "option3"){
if($('#input_3').is(":hidden")){
$('#input_3').show();
}
$('#input_1').hide();
$('#input_2').hide();
}
});​
jsfiddle