如何使用无线电按钮输入值填充形式输入到重定向的网页中



我的网页使用带有无线电/复选框按钮的表单从用户那里获取输入。用户使用所有输入和单击提交按钮完成表单后,它需要根据选定的"无线电"按钮重定向到网页,并填充上一页的所有输入。

我尝试了method =" post"和形式的操作,两者似乎都没有帮助。

尝试了jQuery方法,但是初学者,因此不确定如何将值从一个页面提取到另一页

首页要进行输入值

   <!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">&nbsp;</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>

第二页

我没有任何地方持有人可以从第一页上拉/存储值,因为不确定如何做

示例:第一页 - 用户输入值:

你的角色一个词:富有同情心您的优势:艺术 有创造力的将进行更多评估测试:不 - 我将探索其他方法

您可能需要通过使用AJAX将整个表格传递给PHP。然后,在PHP中,动态创建了PHP中的另一个网页,其中包含以摘要或您试图使此新页面看起来像的原始页面中的所有数据。PHP可以将页面保存到服务器,然后您只需重定向到PHP代码中的页面。

这篇文章可能会帮助您开始,实际上,您可以将所得的新页面放置在当前页面中。您将必须对其进行修改以将页面保存为文件,以便您可以重定向到它。这将为您提供一个基本的IS开始。表格提交AJAX将表格数据传递给PHP,而无需页面刷新

最新更新