I have a HTML page containing a form element. Form contains input of type radio and a button at the end. I want that when button is clicked, a javascript method be called which gets the value of selected choice and redirect to selectedChoice.html page.
Here is my HTML page.
<html>
<head>
<script type="application/javascript" src="../js/navigation.js"></script>
</head>
<body>
<div id="chooseBodyPart">
<form>
<div class="question-text">
<p>Which body part is at dis-ease??</p>
</div>
<input class="radio-option" type="radio" name="bodyPartAtDisease" value="chest"> Chest <br>
<input class="radio-option" type="radio" name="bodyPartAtDisease" value="head"> Head <br>
<input class="radio-option" type="radio" name="bodyPartAtDisease" value="shoulders"> Shoulders <br>
<input class="radio-option" type="radio" name="bodyPartAtDisease" value="eyes"> Eyes <br>
<input class="radio-option" type="radio" name="bodyPartAtDisease" value="ears"> Ears <br>
<input class="radio-option" type="radio" name="bodyPartAtDisease" value="heart"> Heart <br>
<button onclick="redirectToNextPageBasedOnResponse();">Proceed</button>
</form>
</div>
</body>
</html>
And below is my js.
function getListOfChoices(form) {
var choices = form.getElementsByTagName("input");
return choices;
}
// list of choices should be passed to this method and name of checked choice should be returned.
// In case no choice is selected the return null
function getNameOfCheckedChoice(choices) {
var selectedChoice = null;
for (var choiceNumber = 0; choiceNumber < choices.length; choiceNumber++) {
if (choices[choiceNumber].checked) {
selectedChoice = choices[choiceNumber].value;
break;
}
}
return selectedChoice;
}
function redirectToNextPageBasedOnResponse() {
var divContainingForm = document.getElementById("chooseBodyPart");
var form = divContainingForm.getElementsByTagName("form")[0];
var choices = getListOfChoices(form);
var selectedChoice = getNameOfCheckedChoice(choices);
window.location.href = "http://" + window.location.host + "/html/" + selectedChoice + ".html";
}
Working of code is exactly as i want but once control returns from redirectToNextPageBasedOnResponse(), URL does not change to what I coded , instead a query param is inserted in the existing URL with value equal to selected choice.
Can someone please explain what is happening??
You're missing only one thing. Calling preventDefault() on the submit event.
You need to take the event via onclick="redirectToNextPageBasedOnResponse(event);" and then in your handler, do event.preventDefault().
function getListOfChoices(form) {
var choices = form.getElementsByTagName("input");
return choices;
}
// list of choices should be passed to this method and name of checked choice should be returned.
// In case no choice is selected the return null
function getNameOfCheckedChoice(choices) {
var selectedChoice = null;
for (var choiceNumber = 0; choiceNumber < choices.length; choiceNumber++) {
if (choices[choiceNumber].checked) {
selectedChoice = choices[choiceNumber].value;
break;
}
}
return selectedChoice;
}
function redirectToNextPageBasedOnResponse(event) {
event.preventDefault();
var divContainingForm = document.getElementById("chooseBodyPart");
var form = divContainingForm.getElementsByTagName("form")[0];
var choices = getListOfChoices(form);
var selectedChoice = getNameOfCheckedChoice(choices);
window.location.href = "http://" + window.location.host + "/html/" + selectedChoice + ".html";
}<div id="chooseBodyPart">
<form>
<div class="question-text">
<p>Which body part is at dis-ease??</p>
</div>
<input class="radio-option" type="radio" name="bodyPartAtDisease" value="chest"> Chest <br>
<input class="radio-option" type="radio" name="bodyPartAtDisease" value="head"> Head <br>
<input class="radio-option" type="radio" name="bodyPartAtDisease" value="shoulders"> Shoulders <br>
<input class="radio-option" type="radio" name="bodyPartAtDisease" value="eyes"> Eyes <br>
<input class="radio-option" type="radio" name="bodyPartAtDisease" value="ears"> Ears <br>
<input class="radio-option" type="radio" name="bodyPartAtDisease" value="heart"> Heart <br>
<button onclick="redirectToNextPageBasedOnResponse(event);">Proceed</button>
</form>
</div>So, we prevent the default behaviour of the form submit and add our own custom behaviour to it.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments