Reputation: 5800
My below code is posting at both times when the checkbox is checked or not checked. When its not checked I am getting alert and then posting. But when checked its posting automatically.
I need JavaScript to post the form when Submit button is clicked and checkbox should be kept checked. Else it should just provide me an alert. But unfortunately the page is reloading even when keeping the checkbox unchecked and using submit button.
My code is
<script type="text/javascript">
function check()
{
if(document.getElementById("privacy").checked == true)
{
document.print.submit();
}
else{
alert('Please read and accept our privacy statments to proceed.');
};
}
</script>
</head>
<body>
<form id="print" action="printfile.php">
<div id="express">
<table width="800">
<tr>
<td colspan="2"><span style="color:#FF0000; font-size:26px;">Express Application</span></td>
</tr>
<tr>
<td width="300"> </td>
<td width="500"> </td>
</tr>
<tr>
<td>First Name (Required) </td>
<td><input name="firstname" type="text" size="30"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Last Name </td>
<td><input name="lastname" type="text" size="30"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Email (Required) </td>
<td><input name="email" type="text" id="email" size="30"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Purpose of finance (Required) </td>
<td><select name="purpose" id="purpose">
<option selected="selected">Home Loan</option>
<option>Refinance</option>
<option>Investment Loan</option>
<option>Debit Consolidation</option>
<option>Others</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Your deposit amount </td>
<td><input name="depositamount" type="text" size="30"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Amount you need to borrow? </td>
<td><input name="borrowamount" type="text" size="30"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Brief description of purpose of <br />
finance (Required) <br />
<br />
<br />
<br />
<br />
<br /></td>
<td><textarea name="purposedesc" cols="60" rows="10" id="purposedesc"></textarea></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Application Type<br />
<br /></td>
<td><label>
<input type="radio" name="apptype" value="Single" onclick="document.getElementById('singleapp').style.visibility = 'visible'; document.getElementById('jointapp').style.visibility = 'hidden';" />
Single Application</label>
<br />
<label>
<input type="radio" name="apptype" value="Joint" onclick="document.getElementById('singleapp').style.visibility = 'visible'; document.getElementById('jointapp').style.visibility = 'visible';" />
Joint Application</label></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"><input name="privacy" type="checkbox" id="privacy" value="checkbox" />
Privacy Act (Required) <br />
<br />
I have read the Privacy Act 1988 (as Amended) and understand that by selecting the submit button I/we authorise Best Aussie Broker to act on my/our behalf and manage personal information in relation to this application. </td>
</tr>
</table>
<br />
Last step then we will get all listed Australian vendors to fight it out for your best deal.<br />
<br />
<table width="800" border="0" style="">
<tr>
<td width="400">
<div id="singleapp">
<table width="400" border="0">
<tr>
<td colspan="2" bgcolor="#333300"><span class="style1">Your application </span></td>
</tr>
<tr>
<td width="150"> </td>
<td width="240"> </td>
</tr>
<tr>
<td>Date of Birth</td>
<td><select name="day1" id="day1">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select name="month1" id="month1">
<option selected="selected">Jan</option>
<option>Feb</option>
<option>Mar</option>
<option>Apl</option>
<option>May</option>
<option>Jun</option>
<option>Jul</option>
<option>Aug</option>
<option>Sep</option>
<option>Oct</option>
<option>Nov</option>
<option>Dec</option>
</select>
<input name="year1" type="text" id="year1" style="padding:1.2px;" size="8" maxlength="4" /> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Address</td>
<td><input name="address1" type="text" id="address1" size="20"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Suburb</td>
<td><input name="suburb1" type="text" id="suburb1" size="20"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>PostCode</td>
<td><input name="postcode1" type="text" id="postcode1" size="20"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>State</td>
<td><select name="state1" id="state1">
<option value="Victoria" selected="selected">VIC</option>
<option value="New South Wales">NSW</option>
<option value="QueensLand">QLD</option>
<option value="South Australia">SA</option>
<option value="Western Australia">WA</option>
<option value="Tasmania">TAS</option>
<option value="New Zeland">NZ</option>
<option value="Other">Other</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Best contact </td>
<td><select name="phone1" id="phone1">
<option>Phone</option>
<option>Email</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Phone number </td>
<td><input name="number1" type="text" id="number1" size="20"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Marital status </td>
<td><select name="maried1" id="maried1">
<option>Single</option>
<option>Married</option>
<option>Other</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Residential status </td>
<td><select name="rstatus1" id="rstatus1">
<option selected="selected">Renting</option>
<option>Home Owner</option>
<option>Home Mortgaged</option>
<option>Board</option>
<option>Other</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Children/dependents</td>
<td><select name="childs1" id="childs1">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6 or more">6 or more</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Net income </td>
<td><input name="netincome1" type="text" id="netincome1" size="10"/>
per
<select name="months1" id="months1">
<option>Month</option>
<option>Year</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Current employer </td>
<td><input name="cemployer1" type="text" id="cemployer1" size="20"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Time at this<br />
employer </td>
<td> Years
<select name="years1" id="years1">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="More">More</option>
</select>
Months
<select name="emonth1" id="emonth1">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input name="submit" type="submit" value="Submit my Application" onclick="check();" /></td>
</tr>
</table>
</div>
</td>
<td width="400">
<div id="jointapp">
<table width="400" border="0">
<tr>
<td colspan="2" bgcolor="#333300"><span class="style1">Your partner's application </span></td>
</tr>
<tr>
<td width="150"> </td>
<td width="240"> </td>
</tr>
<tr>
<td>Date of Birth</td>
<td><select name="day11" id="day11">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select name="month11" id="month11">
<option selected="selected">Jan</option>
<option>Feb</option>
<option>Mar</option>
<option>Apl</option>
<option>May</option>
<option>Jun</option>
<option>Jul</option>
<option>Aug</option>
<option>Sep</option>
<option>Oct</option>
<option>Nov</option>
<option>Dec</option>
</select>
<input name="year2" type="text" size="8" maxlength="4" style="padding:1.2px;" /> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Address</td>
<td><input name="address12" type="text" id="address12" size="20"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Suburb</td>
<td><input name="suburb12" type="text" id="suburb12" size="20"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>PostCode</td>
<td><input name="postcode12" type="text" id="postcode12" size="20"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>State</td>
<td><select name="state12" id="state12">
<option value="Victoria" selected="selected">VIC</option>
<option value="New South Wales">NSW</option>
<option value="QueensLand">QLD</option>
<option value="South Australia">SA</option>
<option value="Western Australia">WA</option>
<option value="Tasmania">TAS</option>
<option value="New Zeland">NZ</option>
<option value="Other">Other</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Best contact </td>
<td><select name="phone11" id="phone11">
<option>Phone</option>
<option>Email</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Phone number </td>
<td><input name="number11" type="text" id="number11" size="20"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Marital status </td>
<td><select name="married12" id="married12">
<option>Single</option>
<option>Married</option>
<option>Other</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Residential status </td>
<td><select name="rstatus12" id="rstatus12">
<option selected="selected">Renting</option>
<option>Home Owner</option>
<option>Home Mortgaged</option>
<option>Board</option>
<option>Other</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Children/dependents</td>
<td><select name="childs12" id="childs12">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6 or more">6 or more</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Net income </td>
<td><input name="netincome12" type="text" id="netincome12" size="10"/>
per
<select name="months12" id="months12">
<option>Month</option>
<option>Year</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Current employer </td>
<td><input name="cemployer12" type="text" id="cemployer12" size="20"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Time at this<br />
employer </td>
<td> Years
<select name="years12" id="years12">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="More">More</option>
</select>
Months
<select name="emonths12" id="emonths12">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select></td>
</tr>
</table>
<br />
<br />
<br />
<br />
<br />
</div>
</td>
</tr>
</table>
<p><br />
<br />
<center>
</center>
<br />
</p>
</div>
</form>
Upvotes: 1
Views: 906
Reputation: 17759
You need to make the submit return false, otherwise it will just do the regular thing a form does when you click submit.
if(document.getElementById("privacy").checked == true)
{
document.print.submit();
}
else
{
alert('Please read and accept our privacy statments to proceed.');
return false;
}
Technically as it will be submitting anyway. You could just get it to check and only intercept if it is not checked.
if(document.getElementById("privacy").checked == false)
{
alert('Please read and accept our privacy statments to proceed.');
return false;
}
Also add return to the submit onclick
(link @AndreKR said)
<input name="submit" type="submit" value="Submit my Application" onclick="return check();" />
Upvotes: 3
Reputation: 33678
With the inline event handler syntax you're using it is easiest to return false
so the default action (the submitting) isn't executed:
<input name="submit"
type="submit"
value="Submit my Application"
onclick="check(); return false;" />
Upvotes: 4