Develop Reference

How do I retrieve and display a different values depending on which form I submit?

<form action="apply.html" method="post">
<div class="cloudinformation">
<h2>
Job reference number:
</h2>
<h4>
1FN43
</h4>
<input type="submit" value="Apply">
</div>
</form>
<form action="apply.html" method="post">
<div class="consultantinformation">
<h2>
Job reference number:
</h2>
<h4>
6LZ9W
</h4>
<input type="submit" value="Apply">
</div>
</form>
<form action="https://mercury.swin.edu.au/it000000/formtest.php" method="post" id="regform">
<label>Job Reference Number:</label>
<input type="text" id="onlyletters" name="onlyletters" pattern="[a-zA-Z0-9]+" minlength="5" maxlength="5" placeholder="Reference number for specified job.." required="required">
</form>
How do I set it up so that, depending on which job press apply for, it will retrieve the job reference number of the specified job and display it in read-only format on the apply.html, which is the form you are redirected to when you press "apply"?

Does this is what you want to achieve
var applyBtn = document.querySelectorAll("button")
var hideFormAll = document.querySelectorAll(".cloudinformation")
for (let i = 0; i < applyBtn.length; i++) {
applyBtn[i].addEventListener('click', function() {
var referNumb = applyBtn[i].parentElement.querySelector(".refree")
document.querySelector("#onlyletters").value = referNumb.textContent
document.querySelector(".formAll").style.display = "none"
document.querySelector("#regform").style.display = "block"
})
}
#regform {
display: none;
}
<div class="formAll">
<div class="cloudinformation">
<h2>
Job reference number:
</h2>
<h4 class="refree">1FN43</h4>
<button>Apply</button>
</div>
<div class="consultantinformation">
<h2>
Job reference number:
</h2>
<h4 class="refree">6LZ9W</h4>
<button>Apply</button>
</div>
</div>
<form action="https://mercury.swin.edu.au/it000000/formtest.php" method="post" id="regform">
<label>Job Reference Number:</label>
<input type="text" id="onlyletters" name="onlyletters" pattern="[a-zA-Z0-9]+" minlength="5" maxlength="5" placeholder="Reference number for specified job.." required="required" readonly>
<input type="submit" value="Submit">
</form>

Download the responses of a html form to a text file

I have an HTML form with a few questions. After answering each when the user clicks submit, I want the responses to get downloaded either in a text file or a pdf file. I'm not either getting "null" written in that file.
<form class="contact100-form validate-form">
<div id="source">
<div class="wrap-input100 validate-input" required="required">
<span class="label-input100"><h4>Name</h4></span>
<input
id="source"
class="input100"
type="text"
name="name"
placeholder="enter your full name..."
/>
</div>
<div class="wrap-input100 validate-input" required="required">
<span class="label-input100"><h4>Your Birthday</h4></span>
<input
id="source"
class="input100"
type="text"
name="name"
placeholder="write your complete DOB dd-mm-yyyy..."
/>
</div>
<div class="wrap-input100 validate-input" required="required">
<span class="label-input100"><h4>Contact Number (Primary)</h4></span>
<input
id="source"
class="input100"
type="text"
name="name"
placeholder="this is most important..."
/>
</div>
<div class="container-contact100-form-btn">
<div class="wrap-contact100-form-btn">
<div class="contact100-form-bgbtn"></div>
<button type="button" id="save" title="Save as text file">
Send
</button>
</div>
</div>
</div>
</form>
<script type="text/javascript">
// when document is ready
document.getElementById("save").onclick = function () {
// when clicked the button
var content = document.getElementById("source").getAttribute("value");
// a [save as] dialog will be shown
window.open(
"data:application/txt," + encodeURIComponent(content),
"_self"
);
};
</script>

.getAttribute("value")
The value attribute holds the default value for the element.
The current value, which will be what the user has typed in, is held in the value property.
Use .value.

You need different id (and name) for each input.
You also need to replace .getAttribute("value") with .value
The following code works:
<form class="contact100-form validate-form">
<div id="source">
<div class="wrap-input100 validate-input" required="required">
<span class="label-input100"><h4>Name</h4></span>
<input id="name" class="input100" type="text" name="name" placeholder="enter your full name..." />
</div>
<div class="wrap-input100 validate-input" required="required">
<span class="label-input100"><h4>Your Birthday</h4></span>
<input id="birthday" class="input100" type="text" name="birthday" placeholder="write your complete DOB dd-mm-yyyy..." />
</div>
<div class="wrap-input100 validate-input" required="required">
<span class="label-input100"><h4>Contact Number (Primary)</h4></span>
<input id="contactNb" class="input100" type="text" name="contactNb" placeholder="this is most important..." />
</div>
<div class="container-contact100-form-btn">
<div class="wrap-contact100-form-btn">
<div class="contact100-form-bgbtn"></div>
<button type="button" id="save" title="Save as text file">Send</button>
</div>
</div>
</div>
</form>
<script type="text/javascript">
document.getElementById("save").onclick = function () {
var name = document.getElementById('name').value;
var birthday = document.getElementById('birthday').value;
var contactNb = document.getElementById('contactNb').value;
var content = " name: " + name + "\n birthday: " + birthday + "\n contact number: " + contactNb
window.open( "data:application/txt," + encodeURIComponent(content), "f.txt" );
};
</script>
edit: in order to choose the filename, follow this link:
https://stackoverflow.com/a/7034818/3520059

javascript function to insert values from content-editable span to a hidden form

I am trying to fetch values from editable spans for hidden form to a hidden form via this javascript:
<script type="text/javascript">
function fillup() {
document.getElementById('fname').value = document.getElementById('nfname').innerHTML;
document.getElementById('mname').value = document.getElementById('nmname').innerHTML;
document.getElementById('lname').value = document.getElementById('nlname').innerHTML;
document.getElementById('email').value = document.getElementById('nemail').innerHTML;
document.getElementById('gen').value = document.getElementById('ngen').innerHTML;
document.getElementById('dob').value = document.getElementById('ndob').innerHTML;
var str = document.getElementById('nloc').innerHTML;
var parts = str.split(',');
document.getElementById('city').value = parts[0];
document.getElementById('state').value = parts[1];
if(document.getElementById('fname').value == '' || document.getElementById('mname').value == '' || document.getElementById('lname').value == '' || document.getElementById('email').value == '' || document.getElementById('gen').value == '' || document.getElementById('dob').value == '' || document.getElementById('city').value == '' || document.getElementById('state') == '' ){
alert('something is empty!');
}
else {
alert(str);
}
}
</script>
and following is the form:
<form method="post" action="{{ path('admin_update') }}">
<div class="hidden">
<input type="text" id="fname" name="fname" />
<input type="text" id="mname" name="mname" />
<input type="text" id="lname" name="lname" />
<input type="email" id="mail" name="email" />
<input type="text" id="gen" name="gen" />
<input type="text" id="dob" name="dob" />
<input type="text" id="city" name="city" />
<input type="text" id="state" name="state" />
</div>
<input type="submit" id="btn" value="save changes" onclick="fillup()" />
</form>
as said earlier, except the submit button other textareas are disabled in the form, the spans are:
<div class="row">
<div class="fname">
<span class="fname" id="nfname" contenteditable="true" onchange="appear()">{{ fname }}</span>
<hr />
<span class="st">First name</span>
</div>
<div class="mname">
<span class="mname" id="nmname" contenteditable="true" onchange="appear()">{{ mname }}</span>
<hr />
<span class="st">Middle name</span>
</div>
<div class="lname">
<span class="lname" id="nlname" contenteditable="true" onchange="appear()">{{ lname }}</span>
<hr />
<span class="st">Last name</span>
</div>
</div>
<div class="row">
<div class="email">
<span class="email" id="nemail" contenteditable="true">{{ email }}</span>
<hr />
<span class="st">Email</span>
</div>
</div>
<div class="row">
<div class="gender">
<span class="gender" id="ngen" contenteditable="true">{{ gen }}</span>
<hr />
<span class="st">Gender</span>
</div>
<div class="DOB">
<span class="DOB" id="ndob" contenteditable="true" id="datepicker">{{ dob|date("m/d/Y") }}</span>
<hr />
<span class="st">Date of birth</span>
</div>
<div class="loc">
<span class="loc" id="nloc" contenteditable="false">{{ loc }}</span>
<hr />
<span class="st">Location</span>
</div>

I've put your code into a plunkr
https://plnkr.co/edit/n8m58L7dFiFOPJBKJfvI?p=preview
To me it looks ok - and it definitly works, as far as I understand your requirement.
I would suggest to bind the function call "fillup()" to the onSubmit event of the form.
<form method="post" action="." onSubmit="fillup()">
Also please check for this line in the function:
document.getElementById('email').value = document.getElementById('nemail').innerHTML;
The element's id is NOT "email" - it is "mail"

dynamically add form in HTML

I'm trying to code this form in sharing.html so that when one is done putting in information and want to add more contacts, they can click on "add another contact" but when I tried to write out the code, the dreamweaver I was using said that there's a error in Javascript. I don't know how I can fix this error: (the script is almost at the bottom)
<div class="recordsbox">
<h1>Sharing Center</h1>
<p>Please enter the contact information that you want to share.</p>
<div id="shareform">
<form id="share" method="POST">
<div class="notifyfield">
<label>Who is this person?</label>
<input type="text">
</div>
<div class="notifyfield">
<label>Email Address:</label>
<input type="email" >
</div>
<div class="notifyfield">
<label>Phone Number:</label>
<input type="tel" >
</div>
</form>
</div>
<div class="addcontact">
<input type="button" value="Add another contact?" onClick="addForm('shareform');">
</div>
<script>
var shareform = 0;
function addForm(divName) {
shareform++;
var newform = document.createElement('div');
newform.innerHTML = '<div id="shareform'+shareform+'">
<form id="share" method="POST">
<div class="notifyfield">
<label>Who is this person?</label>
<input type="text">
</div>
<div class="notifyfield">
<label>Email Address:</label>
<input type="email" >
</div>
<div class="notifyfield">
<label>Phone Number:</label>
<input type="tel" >
</div>
</form>
</div>
';
document.getElementById(divName).appendChild(newform);
shareform++;
}
</script>
<div class="nextbutton">
Next
</div>
</div>
I based this code on that tutorial: http://www.randomsnippets.com/2008/02/21/how-to-dynamically-add-form-elements-via-javascript/.
Also you can check out full code at http://hamzakhan.name/dev/eric/options_innerpage/sharing.html
For a quicker look, here is the script in question:
<script>
var shareform = 0;
function addForm(divName) {
shareform++;
var newform = document.createElement('div');
newform.innerHTML = '<div id="shareform'+shareform+'">
<form id="share" method="POST">
<div class="notifyfield">
<label>Who is this person?</label>
<input type="text">
</div>
<div class="notifyfield">
<label>Email Address:</label>
<input type="email" >
</div>
<div class="notifyfield">
<label>Phone Number:</label>
<input type="tel" >
</div>
</form>
</div>
';
document.getElementById(divName).appendChild(newform);
shareform++;
}
</script>

Here is the new code:
var shareform = 0;
function addForm(divName) {
shareform++;
var newform = document.createElement('div');
newform.innerHTML = '<div id="shareform'+shareform+'"><form id="share" method="POST"><div class="notifyfield2"><div class="sharefield"><label>Who is this person?</label><input type="text"></div></div><div class="notifyfield"><label>Email Address:</label><input type="email" ></div><div class="notifyfield"><label>Phone Number:</label><input type="tel" ></div></form><hr class="greenline"></div>';
document.getElementById(divName).appendChild(newform);
shareform++;
}
You need to delete all invisible characters. You can't "newline" string.

Must Check box to submit form

Trying to create a form that will force people to select the checkbox with the phrase "I accept the terms and conditions" in order to send the form.
This is what I have but it is not submitting the form — I get an error.
Javascript that I have placed in the header:
<script type="text/javascript">
<!--
function validate_form ( )
{
valid = true;
if ( document.form1.cb.checked == false )
{
alert ( "Please check the Terms & Conditions box ." );
valid = false;
}
return valid;
}
//-->
</script>
Form:
<form action="/cgi-bin/FormMail.pl" method="POST" name="frmOne" id="frmOne">
<input type=hidden name="recipient" value="XXX#XXX.com"/>
<table width="100%" cellspacing="5" cellpadding="5" style="margin-top:-20px">
<tr>
<td width="50%" valign="top">
<br/>
<p><span id="sprytextfield1">
<label for="Full Name">Full Name (First and Last): </label>
<input name="Full Name" type="text" id="name" tabindex="10" size="60" />
<span class="textfieldRequiredMsg"><br />Please provide information.</span></span> </p>
<p><span id="sprytextfield2">
<label for="Your Email">Your e-mail address: </label>
<input name="email" type="text" id="email" size="60" />
<span class="textfieldInvalidFormatMsg"></span></span> </p>
<p><span id="sprytextfield3">
<label for="Phone Number"> Phone Number: </label>
<input name="Phone Number" type="text" id="phone" size="60" />
<span class="textfieldInvalidFormatMsg"><br />Invalid format.</span><span class="textfieldRequiredMsg"><br/>A phone number is required.</span></span></p>
<p class="text">
<span id="sprytextfield4">
<label for="Nature Of The Accident">Nature of Accident, i.e. slip and fall, motor vehicle accident, etc.: </label>
<input name="Nature Of The Accident" type="text" id="natureOfAccident" size="60" />
</span></p>
<p><span id="sprytextfield5">
<label for="Date Of The Accident">Date of the Accident: </label>
<input name="Date Of The Accident" type="text" id="dateOfAccident" size="60" />
<span class="textfieldRequiredMsg"><br />Please provide information.</span><span class="textfieldInvalidFormatMsg"><br />Invalid format.</span></span></p>
<p class="text">
</td>
<td width="50%" valign="top">
<p class="text">
<span id="sprytextarea1">
<label for="Description Of The Injury"><br />Brief Description of your Injuries: </label>
<textarea name="Description Of The Injury" cols="45" rows="4" id="descriptionOfInjury">
</textarea>
<span class="textareaRequiredMsg"><br />Please provide information.</span></span></p>
<p class="text">
<span id="sprytextarea2">
<label for="Description Of The Accident">Brief Description of the Accident:</label>
<textarea name="Description Of The Accident" id="descriptionOfAccident" cols="45" rows="4"></textarea>
<span class="textareaRequiredMsg"><br />
Please provide information.</span></span></p>
<p class="text">
<span id="sprytextfield6">
<label for="How Did You Hear About Us">How did you hear about us?: </label>
<input name="How Did You Hear About Us" type="text" id="howDidYouHear" size="56" />
<span class="textfieldRequiredMsg"><br />Please provide information.</span></span> </p>
<input type="checkbox" name="agree" value="agree_terms" id="disclaimer" />
<label for="disclaimer">I have read the Disclaimer</label>
<br/><br />
<input type="reset" name="reset" id="reset" value="Reset Form" />
<input type="submit" name="Form Action" id="send" tabindex="100" value="Submit" />
</td>
</tr>
</table>
</form>
<script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {validateOn:["blur", "change"]});
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "email", {validateOn:["blur", "change"], isRequired:false});
var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3", "phone_number", {validateOn:["blur"], useCharacterMasking:true});
var sprytextfield4 = new Spry.Widget.ValidationTextField("sprytextfield4", "none", {isRequired:false, validateOn:["blur", "change"]});
var sprytextfield5 = new Spry.Widget.ValidationTextField("sprytextfield5", "date", {hint:"dd/mm/yyyy", validateOn:["blur", "change"], format:"dd/mm/yyyy"});
var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1", {validateOn:["blur", "change"]});
var sprytextarea2 = new Spry.Widget.ValidationTextarea("sprytextarea2", {validateOn:["blur", "change"]});
var sprytextfield6 = new Spry.Widget.ValidationTextField("sprytextfield6", "none", {validateOn:["blur", "change"], hint:"Google, etc"});
//-->
</script></div>

You are referencing the form and elements wrong, try something like this:
<form name="frmOne" method="POST" onSubmit="return checkForm(frmOne);" action="/cgi-bin/FormMail.pl">
<script>
function checkForm(form)
{
if(!form.agree.checked)
{
alert("You must agree to this disclaimer before applying.");
return false;
}
}
</script>
I hope that helped

Change <form action="/cgi-bin/FormMail.pl" method="POST" name="frmOne" id="frmOne"> to <form action="/cgi-bin/FormMail.pl" method="POST" name="frmOne" id="frmOne" onSubmit="validate_form();">
What other errors are you getting?
and change document.form1.cb.checked to document.frmOne.agree.checked

Give a try with document.getElementById("disclaimer").checked == false.