表单提交到另一个html页面显示,如何让多个FORM输入出现在另一个HTML页面中?

我即将创建一个预订网页,其中如果我点击提交,它会将我引导至名为REVIEW.HTML的文件,在该文件中打印我的所有输入。 我这里有我的RESERVATION.HTML代码:如何让多个FORM输入出现在另一个HTML页面中?

function tosubmit() {

localStorage.clear();

var SelectCountry = document.getElementById("SelectCountry").value;

localStorage.setItem("SelectCountry", SelectCountry.value);

var SelectTime = document.getElementById("SelectTime").value;

localStorage.setItem("SelectTime", SelectTime);

var datepicker = document.getElementById("datepicker").value;

localStorage.setItem("datepicker", datepicker);

var Persons = document.getElementById("Persons").value;

localStorage.setItem("Persons", Persons);

return true;

}

Branch*

Select Branch

Manggahan Branch

Daang-Hari Branch

Sta. Rosa

Marcos Highway Branch

E. Rodriguez

No. of Person/s*

Select No. of Person/s

1-2 PAX

4-6 PAX

8-10 PAX

12-14 PAX

14 and Above PAX

Starting Time*

Select Time

08:00AM

09:00AM

10:00AM

11:00AM

12:00PM

01:00PM

02:00PM

03:00PM

04:00PM

05:00PM

06:00PM

07:00PM

08:00PM

09:00PM

10:00PM

11:00PM

Requests
Date*
room.jpg

而且我想在这里展示在review.html的文件我所有的表单输入:但随后给出了“null值如何做到这一点吧??。感谢您的帮助

function init() {

var SelectCountry = localStorage.getItem("SelectCountry");

var showTime = localStorage.getItem("showTime");

var datepicker = localStorage.getItem("datepicker");

var Persons = localStorage.getItem("Persons");

document.write("Branch: \r\n" +SelectCountry+ " \nTime: \r\n" +showTime+ " \nDate: \r\n" +datepicker+ " \nPersons: \r\n" +Persons);

}

+0

我没有仔细看过,但这是一个问题'return validateMyForm(); tosubmit();'。当你使用'return'时,你正在退出那个代码块,所以在这种情况下'tosubmit();'不会执行。 –

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个基于 Bootstrap 和 Select2 的表单页面,可以添加多个关键词: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap & Select2 Form Demo</title> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcdn.net/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" /> </head> <body> <div class="container mt-3"> <h1>Bootstrap & Select2 Form Demo</h1> <form> <div class="form-group"> <label for="title">标题</label> <input type="text" class="form-control" id="title" name="title" placeholder="请输入标题" required> </div> <div class="form-group"> <label for="keywords">关键词</label> <select id="keywords" class="form-control" multiple="multiple" name="keywords[]"></select> </div> <button type="button" class="btn btn-primary" id="add-keyword-btn">添加关键词</button> <button type="submit" class="btn btn-success">提交</button> </form> </div> <template id="keyword-template"> <div class="form-group keyword-group"> <input type="text" class="form-control keyword-input" name="keyword" placeholder="请输入关键词" required> <button type="button" class="btn btn-danger remove-keyword-btn">移除</button> </div> </template> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/select2/4.0.13/js/select2.min.js"></script> <script> $(document).ready(function() { // 初始化 Select2 $('#keywords').select2(); // 添加关键词按钮点击事件 $('#add-keyword-btn').click(function() { // 复制关键词模板并添加到表单 var keywordTemplate = $('#keyword-template').html(); $('.form-group:last').after(keywordTemplate); // 初始化新添加的关键词输入框和移除按钮 var $newKeywordGroup = $('.keyword-group:last'); $newKeywordGroup.find('.keyword-input').select2(); $newKeywordGroup.find('.remove-keyword-btn').click(function() { $newKeywordGroup.remove(); }); }); }); </script> </body> </html> ``` 在这个示例,我们使用了 Bootstrap 的表单组件和按钮,以及 Select2 的多选下拉框。我们在表单添加了一个关键词下拉框和一个添加关键词的按钮,点击按钮会在表单添加一个新的关键词输入框和移除按钮。我们还使用了一个 `<template>` 元素来定义关键词输入框和移除按钮的 HTML 模板,方便复用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值