My webpage takes inputs from users using a form with radio/checkbox buttons. Once user completes the form with all inputs and clicks submit button, it needs to redirect to web page based on the radio button selected and populate all the inputs from previous page.
I tried method="post" and action in the form, both doesn't seems helping.
Tried the Jquery approach, but am a beginner, so not sure how to pull the values from one page to another page
First Page to take input values
<!doctype html>
<html lang="en">
<head>
<title>Welcome to The W-H-Y Channel!!!</title>
<meta charset="utf-8">
<link rel="stylesheet" href="register.css" type="text/css"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function(){
$('a').each(function(){
if ($(this).prop('href') == window.location.href) {
$(this).addClass('active'); $(this).parents('li').addClass('active');
}
});
});
</script>
<script type="text/javascript">
function redirect() {
//var textValue = document.getElementById("answer").value;
var textValue = document.querySelector('input[name="ansName"]:checked').value
if(textValue == "Compassionate")
{
location.href = "../Results/results_empathy.html";
}
else if(textValue == "Meticulous")
{
location.href = "../Results/results_analytical.html";
}
else if(textValue == "Conscientious")
{
location.href = "../Results/results_diplomatic.html";
}
else
{
location.href = "../Results/results_creative.html";
}
}
</script>
</head>
<form action="javascript:redirect();" method="GET">
<fieldset class="ntset">
<legend>What Are You?</legend>
<h4><label for="name">Describe About You in Few Words</label>
<input name="Person's Name" type="text" id="name" size="215"></h4>
<h4><label for="name">Reason to Find Your Personality?</label></h4>
<input type="radio" id="habits2aa" name="habits2aa" value="I am Serious to Know My Personality Type"><label class="fmt" for="habits2"> I am Serious to Know My Personality Type</label><br>
<input type="radio" id="habits2aa" name="habits2aa" value="I am Serious to Know My Personality Type"><label class="fmt" for="habits2"> I am Cerious to Know My Personality Type</label><br>
</fieldset>
<fieldset class="ntset">
<legend>About Yourself</legend>
<h4>Your Personality</h4>
<input type="radio" id="habits2a" name="habits2a" value="Introvert"><label class="fmt" for="habits2"> Introvert</label>
<input type="radio" id="habits2a" name="habits2a" value="Extrovert"><label class="fmt" for="habits2"> Extrovert</label><br>
<h4>Your Character in One Word</h4>
<input type="radio" id="answer" name="ansName" value="Compassionate"><label class="fmt" for="habits2"> Compassionate</label>
<input type="radio" id="answer" name="ansName" value="Meticulous"><label class="fmt" for="habits2"> Meticulous</label><br>
<input type="radio" id="answer" name="ansName" value="Conscientious"><label class="fmt" for="habits2"> Conscientious </label>
<input type="radio" id="answer" name="ansName" value="Playful"><label class="fmt" for="habits2"> Playful</label><br>
<h4>Your Strengths</h4>
<p><input type="checkbox" id="habits5" name="Strengths" value="Creative"><label class="fmt" for="habits5"> Creative</label>
<input type="checkbox" id="habits5" name="Strengths" value="Artistic"><label class="fmt" for="habits5"> Artistic </label>
</p>
<input type="checkbox" id="habits6" name="Strengths" value="Trustworthy"><label class="fmt" for="habits6"> Trustworthy</label>
<input type="checkbox" id="habits6" name="Strengths" value="Tolerant"><label class="fmt" for="habits6"> Tolerant</label>
<h4>Your Weaknesses</h4>
<p><input type="checkbox" id="habits7" name="Weaknesses" value="Shyness/Agreeableness"><label class="fmt" for="habits7"> Shyness/Agreeableness</label>
<input type="checkbox" id="habits7" name="Weaknesses" value="Pessimism/Neuroticism"><label class="fmt" for="habits7"> Pessimism/Neuroticism</label>
</p>
<p><input type="checkbox" id="habits8" name="Weaknesses" value="Laziness/Selfishness"><label class="fmt" for="habits8"> Laziness/Selfishness</label>
<input type="checkbox" id="habits8" name="Weaknesses" value="Indecisive/Impulsive"><label class="fmt" for="habits8"> Indecisive/Impulsive</label>
</p>
<fieldset>
<legend>Visualize Me</legend>
<h4>Your Decision</h4><select name="Decision">
<option value="None"> </option>
<optgroup label="Yes - Want to Explore to Visualize ">
<option value="Will take more Evaluation Tests">Will take more Evaluation Tests</option>
<option value="Will seek/offer Improve Myself" >Will seek/offer Improve Myself</option>
<optgroup label="No - Thank You!!">
<option value="No - I am Good Enough">No - I am Good Enough</option>
<option value="No - I will explore other Methods" >No - I will explore other Methods </option>
</select>
<hr>
<h4>Like or Dislike?</h4>
<p><input type="checkbox" id="Like" name="Like" value="Check If You LIKE IT!"><label class="fmt" for="like">Check If You LIKE IT!</label></p>
</fieldset>
<p><input type="submit" value="Submit" class="button" ></p>
<p><input type="reset" value="Reset" class="button" ></p>
</form>
2nd Page
I dont have any place holder to pull/store the values from 1st page as am not sure how to do it
Example: 1st Page - User inputs values:
Your Character in One Word : Compassionate Your Strengths : Artistic Creative Will take more Evaluation Tests : No - I will explore other Methods
