I'm trying to conditionally set the value of a form action attribute depending on whether a checkbox is ticked or not.
I have the following Javascript code:
function validate()
{
var f = document.getElementById("confirmForm");
f.setAttribute('method',"post");
if (document.getElementById('confirmOptionCompare').checked)
{
f.setAttribute('action',"comparison.php");
} else {
{
f.setAttribute('action',"bookConfirm.php");
}
}
}
return true;
}
I'm including the above in my HTML document as follows:
<script type="text/javascript" src="code/scripts.js"></script>
I'm trying to trigger it as follows, but it doesn't navigate to the page I need it to navigate to:
<form id="confirmForm" onsubmit="return validate()">
<p>Click confirm to go to the next step:</p>
<button type="submit" name="confirm">Confirm</button>
</form>
The checkbox that should trigger the if is worded as follows (in a table):
<tr>
<td><?php echo $bookingOutput['name']." ".$bookingOutput['surname'];?></td>
<td><?php echo $bookingOutput['email']; ?></td>
<td><?php echo $bookingOutput['checkIn']." -> ".$bookingOutput['checkOut'];?></td>
<td><?php echo $bookingOutput['daysStaying']; ?></td>
<td><?php echo $bookingOutput['hotel'];?></td>
<td><?php echo "R".$dailyRate ?></td>
<td><?php echo $confirmationObj->ratePerDay; ?></td>
<td><input type="checkbox" name="confirmOptionCompare" id="confirmOptionCompare"/> </td>
</tr>
The checkbox is the final option above.
I'm not sure what I'm doing incorrect here. Any assistance would be greatly appreciated.
Your code should work
In any case here is simpler version
document.getElementById("confirmForm").addEventListener("submit",function() {
this.method="post"
this.action = document.getElementById('confirmOptionCompare').checked ? "comparison.php": "bookConfirm.php";
})
<form id="confirmForm">
<p>Click confirm to go to the next step:</p>
<button type="submit" name="confirm">Confirm</button>
</form>
<input type="checkbox" name="confirmOptionCompare" id="confirmOptionCompare"/>
That said - you can submit and do a redirect simply by setting the header in the PHP
if (isset($_POST["confirmOptionCompare"])) header("location: comparison.php");
die();