Question

我目前正在尝试告知用户他们输入的表单详细信息。我目前尚不清楚该怎么做，但是我想做的是将1个html文件包含“表单”，并在操作=“ htmlfile2.url”，必须向用户显示其输入内容。

所以目前我有2个html文件。第一个是要填写的表格。第二个html文件是模式弹出窗口。在此弹出窗口中，我想向用户显示他们输入的详细信息。问题是用户输入的名称必须在提交时进入第二页（单击“提交”按钮后，用户将被定向到显示模式的“ htmlfile2”。到目前为止，我是这个。

HTML文件1

<div  class="feedback-background">
                        <div class="feedback-content">
                            <div class="close">+</div>
                            <img src="E:\IIT\Lectures\WEB\coursework1\Images\feedbackimg1.jpg" alt="Givefeedback" style="width:100px;height:100px;">

                            <form name="FeedbackForm" action="htmlfile2.html" onclick="return validation()" method="post">
                                Name:
                                <input id="Name" name="Name" type="text" placeholder="Name">
                                E-Mail:
                                <input id="E-mail" name="E-mail" type="email" placeholder="E-mail">
                                What do you think about us?<br>
                                <textarea id="comment" rows="6" cols="33" name="comment"></textarea>
                                <br>
                                How would you rate us ?
                                <br>

                            <label><input type ="radio" name="rating" id="rating" value="Excellent" checked>Excellent</label>
                            <label><input type ="radio" name="rating" id="rating" value="Very Good">Very Good</label>
                            <label><input type ="radio" name="rating" id="rating" value="Average">Average</label>
                            <label><input type ="radio" name="rating" id="rating" value="Poor">Poor</label>
                             <label><input type ="radio" name="rating"id="rating" value="Extreamly Poor">Extremely Poor</label>
                            <br>

                                <a href="#" id="submit" type="submit" onclick="displayContent();setTimeout(closePopup,10000)">SUBMIT</a>


                            </form>
                        </div>
                </div>

HTML文件2

<body>      
            <div class="popup">
                <div class="popuptext" id="myPopup"><p>Thank you <span id="username"></span> ,<br>Your feedback has been recorded.<br> 
                            <br>You commented that"<span id="usercomment"></span>" <br><br>and rated our website "<span id="userrating"></span>".
                            <br><br>Thank you 
                            for taking your time to do so.<br><br>You will now be re-directed automatically</p>
                </div>
                </div>

    </body>

两者的CSS文件（请注意，css文件包含为其他页面完成的其他样式，这就是整个CSS）

/*----------comment form----------*/

.feedback-background{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
position: absolute;
top: 0px;
display: flex;
align-items: center;
justify-content: center;
display:none;
}

.feedback-content{
 width: 500px;
 height: 550px;
 background-color: white;
 border-radius: 4px;
 padding: 20px;
 position:relative;
 }

#submit{text-transform:uppercase;
padding:6px 2px;
margin-right: 40px;
margin-top: 20px;

background: #ee0c6e;
font-weight:600;
color:white;
border-radius: 3px; 
font-size: 10px;
 min-width: 100px;
 text-decoration:none
 }

input {
width: 50%;
display: block;
margin: 10px 0px;

}

label {
display: block;
}

input[type="radio"]{
width: auto;
display: inline;
}

.close{
position:absolute;
top:0px;
right:14px;
transform:rotate(45deg);
font-size:42px;
cursor:pointer;
}

#feedbacksubmit{
margin-left:600px;
margin-bottom:50px;
background-color:#484848;
border-radius:14px;
padding:10px;
cursor:pointer;
color:white;
outline:none;
}
 /*-----popup----*/
.popup{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
position: absolute;
top: 0px;
display: flex;
align-items: center;
justify-content: center;


 }
.popuptext{
width: 100px;
height: 350px;
background-color: #000025;
border-radius: 4px;
padding: 20px;
position:relative;
color:#fff;
width: 20%;
height:30%;
display: block;
margin: 10px 0px;
text-align:center;
margin-left:0px;
margin-bottom:80px;
}

我要做的是在提交第一个html（包含表单）之后，它必须定向到第二个html，在该html中，它基本上对填写表单的人说谢谢。在这里，我想访问用户添加到表单中的名称（如果他输入“ john”），我要说声谢谢。John“在提交后直接在第二HTML内（抱歉，大写只是为了突出显示）< / p>

如果有更好的方法可以解决此问题，请赐教。非常感谢您。另外请注意，我只懂JavaScript。不知道如何使用JQuery或PHP

Answer 1

为求知识，您可以使用Javascript在HTML File 2中获取数据，在HTML File 2中使用以下代码：

window.onload = function () {
    var url = document.location.href;
    var params = url.split('?')[1].split('&');
    var data = {}, tmp;

    for (var i = 0, l = params.length; i < l; i++) {
         tmp = params[i].split('=');
         data[tmp[0]] = tmp[1];
    }

    document.getElementById('username').innerHTML = data.name;
}

没什么特别的，我们只是使用一些字符串函数从HTML文件1表单发送的URL（HTTP请求）中提取数据。

但是正确的方法是使用某种后端语言。

Answer 2

使用php解决您的问题的方法如下：

<?php
if(!empty($_POST['name']) && !empty($_POST['comment']) && !empty($_POST['rating'])): // you should also include other checks... ?>
<body>      
    <div class="popup">
        <div class="popuptext" id="myPopup">
            <p>
                Thank you <span id="username"><?php echo $_POST['name'];?></span> ,<br>Your feedback has been recorded.<br> 
                <br>You commented that"<span id="usercomment"><?php echo $_POST['comment'];?></span>" <br><br>and rated our website "<span id="userrating"><?php echo $_POST['rating'];?></span>".
                <br><br>Thank you 
                for taking your time to do so.<br><br>You will now be re-directed automatically
            </p>
        </div>
    </div>

</body>
<?php endif; ?>

您还可以使用其他编程语言，但是希望对您有所帮助。

是否有可能将表单输入输入另一个HTML表单

2 个答案: