使用GET属性在另一页上显示HTML表单数据

时间:2019-07-16 11:29:41

标签: javascript html forms

我当前正在完成一项作业,而我仍停留在最后一个评分标准上。该任务说明必须使用各种表单功能和表单验证来创建HTML表单,并且在提交表单后,将使用HTML和JavaScript将用户重定向到另一个显示表单摘要的页面。

我尝试使用GetElementById和GET函数,但是在显示表单摘要时我缺少或不了解某些内容。

<form method="get" action="response.html">
    <fieldset>
        <legend>Registration Form</legend>
        <label for="=" FullName">Full Name</label>
        <input id="FullName" name="FullName" type="text" autofocus required="Required" />
        <br />
        <br />
        <label for="=" Phone">Phone</label>
        <input id="Phone" name="Phone" type="number" autofocus required="Required" />
        <br />
        <br />
        <label for="=" Email">Email</label>
        <input id="Email" name="Email" type="Email" placeholder="myname@mail.com" required="required" pattern"[@]" title="Must contain @ symbol" />
        <br />
        <br />
        Registration type<select id="Registration type" name="Registration type">
            <option id="Delegate" value="Delegate">Delegate</option>
            <option id="Sponsor" value="Sponsor">Sponsor</option>
        </select>
        <br />
        <br />
        Postcode<input id="Postcode" name="Postcode" type="number" placeholder="2000" required="required" pattern"[0-9]{4} title="Must contain 4 digits" />
        <br />
        <br />
        <legend>Area Of Expertise</legend>
        <div>
            <input type="radio" name="Area Of Expertise" id="Software Development" value="Software Development" checked>
            <label for="Software Development">Software Development</label>
        </div>
        <div>
            <input type="radio" name="Area Of Expertise" id="Hardware Maintenance" value="Hardware Maintenance">
            <label for="Hardware Maintenance">Hardware Maintenance</label>
        </div>
        <div>
            <input type="radio" name="Area Of Expertise" id="ICT Sales" value="ICT Sales">
            <label for="ICT Sales">ICT Sales</label>
        </div>
        <div>
            <input type="radio" name="Area Of Expertise" id="Systems Administrator" value="Systems Administrator">
            <label for="Systems Administrator">Systems Administrator</label>
        </div>
        <br />
        <br />
        <legend>What is your interest in attending the conference?</legend>
        <label for="=" What is your interest in attending the conference"></label>
        <input id="What is your interest in attending the conference?" name="What is your interest in attending the conference?" style="width:75%;" type="text" autofocus required="Minimum 30 characters" minlength="30" title="30 characters minimum" placeholder="Write as much as needed here" />
        <br />
        <br />
        <legend>What are you hoping to achieve by attending the conference?</legend>
        <div>
            <input type="checkbox" name="Meet new people" id="check_1">
            <label for="check_1">Meet new people</label>
            <input type="checkbox" name="Learn something new" id="check_2">
            <label for="check_2">Learn something new</label>
            <input type="checkbox" name="Get inspired" id="check_3">
            <label for="check_3">Get inspired</label>
        </div>
        <br />
        <br />
        <input id="Submit" type="submit" value="Submit" />
    </fieldset>'

在response.js中,我使用了几种使用getElementById的方法,但均未成功。

预期输出是显示表单数据的简单摘要,页面将成功重定向,但不会显示任何数据。

0 个答案:

没有答案