Databases
StackOverflow2013
Postsdbo
POHow would I make my function call another function after validation of my form?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow would I make my function call another function after validation of my form?
    text
    copied!<p>I am trying to get JavaScript to validate all data in a form before showing my hidden div. I cannot for the life of me work out where I am going wrong to make my first function call my second one once is has finished.</p> <p>All HTML, CSS and JavaScript is below:</p> <pre><code> &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Sign Up&lt;/title&gt; &lt;style text/css&gt; body { background: url(http://www.catalink.com/images/christmas-1211.jpg); } .outer { margin: auto; width: 910px; position: relative } .inner { padding-left: 10px; padding-top: 10px; background: white; width: 900px; margin: auto; height: 410px; } .image { float: left; } .catname { margin-right: 180px; margin-left: 245px; background: #cae1ff; text-align: center; font-family: Verdana, Geneva, sans-serif; font-size: 11px; line-height: 18px; height: 20px; border: solid; border-width: thin; border-color: #828282; } .catcopy { margin-right: 180px; padding-left: 28%; font-family: Verdana, Geneva, sans-serif; font-size: 11px; line-height: 18px; } .banner { margin-left: 250px; margin-right: 180px; padding-top: 25px; } .singlelineform { background: #DDD; width: 150px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; border: solid; border-width: thin; border-radius: 12px; padding: 5px; position: absolute; right: 0; top: 0; } .ntitle { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; padding: 2px; } .fname { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; padding: 2px; } .day { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; padding: 2px; } .month { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; padding: 2px; } .year { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; padding: 2px; } .email { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; padding: 2px; } .hnumber { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; padding: 2px; } .pcode { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; padding: 2px; } .button { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; padding: 2px; } button, input, select, textarea { font-family: Verdana, Geneva, sans-serif; font-size: 12px; } input { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -khtml-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 12px; -moz-border-radius: 12px; -khtml-border-radius: 12px; border-radius: 12px; } select { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -khtml-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 12px; -moz-border-radius: 12px; -khtml-border-radius: 12px; border-radius: 12px; } button { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -khtml-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 12px; -moz-border-radius: 12px; -khtml-border-radius: 12px; border-radius: 12px; } .newformouter { margin: auto; width: 910px; position: relative; background: white; } #newinner { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; border: solid; border-width: thin; border-radius: 12px; padding-left: 5px; padding-top: 5px; background: #DDD; width: 600px; margin: auto; height: 200px; } .lnewform { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; width: 50%; left: 0; top: 0; } .rnewform { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; width: 296px; position: absolute; right: 159px; top: 0; height: 94px; } .address1 { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; padding: 2px; float: right; } .address2 { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; padding: 2px; float: right; } .county { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; padding: 2px; float: right; } .pcodenform { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; padding: 2px; float: right; } .telephone { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; padding: 2px; float: right; } .password { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; padding: 2px; float: right; } .privacydiv { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; padding: 2px; float: right; width: 50% } &lt;/style&gt; &lt;script type="text/javascript" language="javascript"&gt; function validateForm() { var fname = document.getElementById("fname"); if (fname.value.length &lt; 2) { alert ("Please enter your First name!"); return false; } var lname = document.getElementById ("lname"); if (lname.value.length &lt; 3) { alert ("Please enter your Surname!"); return false; } var address = document.getElementById ("address"); if (address.value.length &lt; 1) { alert ("Please enter your House Number or Name!"); return false; } var postcode = document.getElementById ("postcode"); if (postcode.value.length &lt; 6) { alert ("Please enter your Post Code!"); } var x=document.forms["firstform"]["email"].value; var atpos=x.indexOf("@"); var dotpos=x.lastIndexOf("."); if (atpos&lt;1 || dotpos&lt;atpos+2 || dotpos+2&gt;=x.length) { alert("Please enter a valid e-mail address"); return false; } } function show() { document.getElementById("newinner").style.display = "block"; } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="outer"&gt; &lt;div class="inner"&gt; &lt;div class="image"&gt;&lt;img src="http://www.catalink.com/images/cat/extralarge/burton-1208d.jpg" /&gt;&lt;/div&gt; &lt;div class="catname"&gt;&lt;b&gt;Burton eNewsletter&lt;/b&gt;&lt;/div&gt; &lt;div class="catcopy"&gt;&lt;p&gt;&lt;b&gt;Outfitters of the Modern British Man...&lt;/b&gt;&lt;/p&gt;&lt;p&gt;&lt;b&gt;Burton believes in combining accessible style with great value.&lt;/b&gt; They want fashion to be easy and comfortable as well as stylish. They embrace their British tailoring roots but they also understand the importance of kicking back in a great pair of jeans and a hoodie. They love a good laugh, but they also know the importance of &lt;b&gt;"looking the business"&lt;/b&gt;&lt;/p&gt;&lt;/div&gt; &lt;div class="banner"&gt;&lt;a href="http://www.burton.co.uk/webapp/wcs/stores/servlet/TopCategoriesDisplay?storeId=12551&amp;catalogId=33052" target="blank"&gt;&lt;img src="http://www.catalink.com/images/450ban/burton-450ban-1208b.jpg" border="0" /&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="singlelineform"&gt; &lt;form name="firstform" method="post"&gt; &lt;div class="formtitle"&gt;&lt;b&gt;To request this brochure please fill out the form below.&lt;/b&gt;&lt;/div&gt; &lt;div class="ntitle"&gt;&lt;b&gt;First Name*:&lt;/b&gt;&lt;br&gt;&lt;select&gt; &lt;option value="title"&gt;Title&lt;/option&gt; &lt;option value="mr"&gt;Mr&lt;/option&gt; &lt;option value="mrs"&gt;Mrs&lt;/option&gt; &lt;option value="miss"&gt;Miss&lt;/option&gt; &lt;option value="ms"&gt;Ms&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class="fname"&gt; &lt;input type="text" name="fname" id="fname" /&gt;&lt;/div&gt; &lt;div class="lname"&gt;&lt;b&gt;Last Name:*&lt;/b&gt;&lt;input type="lastname" name="lname" id="lname" /&gt;&lt;/div&gt; &lt;div class="day"&gt;&lt;b&gt;Date of Birth*:&lt;/b&gt; &lt;select name="date" form="dateform"&gt; &lt;option value="day"&gt;Day&lt;/option&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;option value="3"&gt;3&lt;/option&gt; &lt;option value="4"&gt;4&lt;/option&gt; &lt;option value="5"&gt;5&lt;/option&gt; &lt;option value="6"&gt;6&lt;/option&gt; &lt;option value="7"&gt;7&lt;/option&gt; &lt;option value="8"&gt;8&lt;/option&gt; &lt;option value="9"&gt;9&lt;/option&gt; &lt;option value="10"&gt;10&lt;/option&gt; &lt;option value="11"&gt;11&lt;/option&gt; &lt;option value="12"&gt;12&lt;/option&gt; &lt;option value="13"&gt;13&lt;/option&gt; &lt;option value="14"&gt;14&lt;/option&gt; &lt;option value="15"&gt;15&lt;/option&gt; &lt;option value="16"&gt;16&lt;/option&gt; &lt;option value="17"&gt;17&lt;/option&gt; &lt;option value="18"&gt;18&lt;/option&gt; &lt;option value="19"&gt;19&lt;/option&gt; &lt;option value="20"&gt;20&lt;/option&gt; &lt;option value="21"&gt;21&lt;/option&gt; &lt;option value="22"&gt;22&lt;/option&gt; &lt;option value="23"&gt;23&lt;/option&gt; &lt;option value="24"&gt;24&lt;/option&gt; &lt;option value="25"&gt;25&lt;/option&gt; &lt;option value="26"&gt;26&lt;/option&gt; &lt;option value="27"&gt;27&lt;/option&gt; &lt;option value="28"&gt;28&lt;/option&gt; &lt;option value="29"&gt;29&lt;/option&gt; &lt;option value="30"&gt;30&lt;/option&gt; &lt;option value="31"&gt;31&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class="month"&gt; &lt;select form="monthhform"&gt; &lt;option value="month"&gt;Month&lt;/option&gt; &lt;option value="january"&gt;January&lt;/option&gt; &lt;option value="february"&gt;February&lt;/option&gt; &lt;option value="march"&gt;March&lt;/option&gt; &lt;option value="april"&gt;April&lt;/option&gt; &lt;option value="may"&gt;May&lt;/option&gt; &lt;option value="june"&gt;June&lt;/option&gt; &lt;option value="july"&gt;July&lt;/option&gt; &lt;option value="august"&gt;August&lt;/option&gt; &lt;option value="september"&gt;September&lt;/option&gt; &lt;option value="october"&gt;October&lt;/option&gt; &lt;option value="november"&gt;November&lt;/option&gt; &lt;option value="december"&gt;December&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class="year"&gt; &lt;select form="yearform"&gt; &lt;option value="year"&gt;Year&lt;/option&gt; &lt;option value="1994"&gt;1994&lt;/option&gt; &lt;option value="1993"&gt;1993&lt;/option&gt; &lt;option value="1992"&gt;1992&lt;/option&gt; &lt;option value="1991"&gt;1991&lt;/option&gt; &lt;option value="1990"&gt;1990&lt;/option&gt; &lt;option value="1989"&gt;1989&lt;/option&gt; &lt;option value="1988"&gt;1988&lt;/option&gt; &lt;option value="1987"&gt;1987&lt;/option&gt; &lt;option value="1986"&gt;1986&lt;/option&gt; &lt;option value="1985"&gt;1985&lt;/option&gt; &lt;option value="1984"&gt;1984&lt;/option&gt; &lt;option value="1983"&gt;1983&lt;/option&gt; &lt;option value="1982"&gt;1982&lt;/option&gt; &lt;option value="1981"&gt;1981&lt;/option&gt; &lt;option value="1980"&gt;1980&lt;/option&gt; &lt;option value="1979"&gt;1979&lt;/option&gt; &lt;option value="1978"&gt;1978&lt;/option&gt; &lt;option value="1977"&gt;1977&lt;/option&gt; &lt;option value="1976"&gt;1976&lt;/option&gt; &lt;option value="1975"&gt;1975&lt;/option&gt; &lt;option value="1974"&gt;1974&lt;/option&gt; &lt;option value="1973"&gt;1973&lt;/option&gt; &lt;option value="1972"&gt;1972&lt;/option&gt; &lt;option value="1971"&gt;1971&lt;/option&gt; &lt;option value="1970"&gt;1970&lt;/option&gt; &lt;option value="1969"&gt;1969&lt;/option&gt; &lt;option value="1968"&gt;1968&lt;/option&gt; &lt;option value="1967"&gt;1967&lt;/option&gt; &lt;option value="1966"&gt;1966&lt;/option&gt; &lt;option value="1965"&gt;1965&lt;/option&gt; &lt;option value="1964"&gt;1964&lt;/option&gt; &lt;option value="1963"&gt;1963&lt;/option&gt; &lt;option value="1962"&gt;1962&lt;/option&gt; &lt;option value="1961"&gt;1961&lt;/option&gt; &lt;option value="1960"&gt;1960&lt;/option&gt; &lt;option value="1959"&gt;1959&lt;/option&gt; &lt;option value="1958"&gt;1958&lt;/option&gt; &lt;option value="1957"&gt;1957&lt;/option&gt; &lt;option value="1956"&gt;1956&lt;/option&gt; &lt;option value="1955"&gt;1955&lt;/option&gt; &lt;option value="1954"&gt;1954&lt;/option&gt; &lt;option value="1953"&gt;1953&lt;/option&gt; &lt;option value="1952"&gt;1952&lt;/option&gt; &lt;option value="1951"&gt;1951&lt;/option&gt; &lt;option value="1950"&gt;1950&lt;/option&gt; &lt;option value="1949"&gt;1949&lt;/option&gt; &lt;option value="1948"&gt;1948&lt;/option&gt; &lt;option value="1947"&gt;1947&lt;/option&gt; &lt;option value="1946"&gt;1946&lt;/option&gt; &lt;option value="1945"&gt;1945&lt;/option&gt; &lt;option value="1944"&gt;1944&lt;/option&gt; &lt;option value="1943"&gt;1943&lt;/option&gt; &lt;option value="1942"&gt;1942&lt;/option&gt; &lt;option value="1941"&gt;1941&lt;/option&gt; &lt;option value="1940"&gt;1940&lt;/option&gt; &lt;option value="1939"&gt;1939&lt;/option&gt; &lt;option value="1938"&gt;1938&lt;/option&gt; &lt;option value="1937"&gt;1937&lt;/option&gt; &lt;option value="1936"&gt;1936&lt;/option&gt; &lt;option value="1935"&gt;1935&lt;/option&gt; &lt;option value="1934"&gt;1934&lt;/option&gt; &lt;option value="1933"&gt;1933&lt;/option&gt; &lt;option value="1932"&gt;1932&lt;/option&gt; &lt;option value="1931"&gt;1931&lt;/option&gt; &lt;option value="1930"&gt;1930&lt;/option&gt; &lt;option value="1929"&gt;1929&lt;/option&gt; &lt;option value="1928"&gt;1928&lt;/option&gt; &lt;option value="1927"&gt;1927&lt;/option&gt; &lt;option value="1926"&gt;1926&lt;/option&gt; &lt;option value="1925"&gt;1925&lt;/option&gt; &lt;option value="1924"&gt;1924&lt;/option&gt; &lt;option value="1923"&gt;1923&lt;/option&gt; &lt;option value="1922"&gt;1922&lt;/option&gt; &lt;option value="1921"&gt;1921&lt;/option&gt; &lt;option value="1920"&gt;1920&lt;/option&gt; &lt;option value="1919"&gt;1919&lt;/option&gt; &lt;option value="1918"&gt;1918&lt;/option&gt; &lt;option value="1917"&gt;1917&lt;/option&gt; &lt;option value="1916"&gt;1916&lt;/option&gt; &lt;option value="1915"&gt;1915&lt;/option&gt; &lt;option value="1914"&gt;1914&lt;/option&gt; &lt;option value="1913"&gt;1913&lt;/option&gt; &lt;option value="1912"&gt;1912&lt;/option&gt; &lt;option value="1911"&gt;1911&lt;/option&gt; &lt;option value="1910"&gt;1910&lt;/option&gt; &lt;/select&gt;&lt;/div&gt; &lt;div class="email"&gt;&lt;b&gt;Email:*&lt;/b&gt;&lt;input type="email" name="email" /&gt;&lt;/div&gt; &lt;div class="hnumber"&gt;&lt;b&gt;House Number*:&lt;/b&gt;&lt;input type="text" name="address" id="address" /&gt;&lt;/div&gt; &lt;div class="pcode"&gt;&lt;b&gt;Post Code:*&lt;/b&gt;&lt;input type="pcode" name="postcode" id="postcode" /&gt;&lt;/div&gt; &lt;div class="button"&gt;&lt;input type="button" value="Find Address" name="findaddress" onclick="return validateForm();" /&gt;&lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="newformouter"&gt; &lt;div id="newinner" style="display:none;"&gt; &lt;form&gt; &lt;div class="lnewform"&gt; &lt;div class="address1"&gt;&lt;b&gt;House No &amp;amp; Street:&lt;/b&gt;&amp;nbsp;&lt;input type="text" name="addline1" /&gt;&lt;/div&gt; &lt;div class="address2"&gt;&lt;b&gt;Address 2:&lt;/b&gt;&amp;nbsp;&lt;input type="text" name="addline2" /&gt;&lt;/div&gt; &lt;div class="county"&gt;&lt;b&gt;County:&lt;/b&gt;&amp;nbsp;&lt;input type="text" name="county" /&gt;&lt;/div&gt; &lt;div class="pcodenform"&gt;&lt;b&gt;Post Code:&lt;/b&gt;&amp;nbsp;&lt;input type="text" name="post_code" /&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="rnewform"&gt; &lt;div class="telephone"&gt;&lt;b&gt;Telephone/Mobile:&lt;/b&gt;&amp;nbsp;&lt;input type="text" name="telephone" /&gt;&lt;/div&gt; &lt;div class="password"&gt;&lt;b&gt;Password:&lt;/b&gt;&amp;nbsp;&lt;input type="password" name="password" /&gt;&lt;/div&gt; &lt;div class="password"&gt;&lt;b&gt;Confirm Password:&lt;/b&gt;&amp;nbsp;&lt;input type="password" name="cpassword" /&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="privacydiv"&gt; &lt;div class="privacy"&gt;Please ensure you have read and understood our &lt;a href="http://www.catalink.com/privacy_policy.php"&gt;Privacy Policy&lt;/a&gt; before pressing the Submit button below.&lt;/div&gt; &lt;div class="button"&gt;&lt;input type="button" value="Confirm" onClick="" /&gt;&lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload