[英]Why cant i transfer data to another HTML page
我完全知道有很多问题要解决,但我觉得我的情况有些不同(由您决定),我试图将表单数据从1个HTML(test.html)传输到另一个HTML(tut1.html)
基本上我想做的是提取数据并以另一种模式显示。我遇到的问题是我在测试运行中设法做同样的事情,但是由于某种原因,当我将其添加到主模型中时,它并没有真正工作。 我确定我错过了一些小东西,但我无法固定。 任何解决此问题的帮助都会有很大帮助。(您需要注意的是,在测试运行中,我使用了一个按钮来提交,但是在这里,我使用的是href。不确定是不是什么原因造成的。另外我注意到的事情是,由于href的链接而不是由于表单操作,导致页面被重定向到第二页)
HTML 1包含表单。用户在此输入输入。
<html>
<head>
</head>
<body>
<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" method="get">
Name:
<input id="Name" name="N" 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="C"></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="tut1.html" onClick="testJS()" id="submit" type="submit">SUBMIT</a>
</form>
</div>
</div>
<script>
function testJS() {
var b = document.getElementById('Name').value,
document.getElementById('comment').value,
url = 'http://E:\IIT\Homework\web1t/tut1.html?Name=' + encodeURIComponent(b);
document.location.href = url;
}
</script>
</body>
HTML 2(tut1.html)包含我创建的模式(为方便起见,不包括CSS)
<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>
<script>
window.onload = function () {
var url = document.location.href,
params = url.split('?')[1].split('&'),
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.N;
document.getElementById('usercomment').innerHTML = data.C;
}
</script>
</body>
PS:我使用了确切的2个代码来填写另一张表格,但是它非常简单,并且无法确定为什么它在这里无法正常工作,因此效果非常好。 任何形式的帮助都会有很大帮助
您的代码应该输出错误,但是您不知为何不使用调试工具。 我认为这对您来说是个好机会...
首先,请更改“ a标签href”,例如“#tut1.html”,然后单击它,我认为您不会过渡到tut1.html。 另外,当您转换到“ tut1.html”时,URL是否与您想要的相同?
让我们尝试一下。
'<a href="tut1.html"~' → '<a href="#tut1.html~'
(Off course, e.preventDefault is also fine.)
并更新testJS函数。
function testJS() {
// There was syntax error. and the value format is "?name=value&name=value" usually.
var b = document.getElementById('Name').value,
c = document.getElementById('comment').value,
url = 'http://E:\IIT\Homework\web1t/tut1.html?Name='+ encodeURIComponent(b) + '&Comment=' + encodeURIComponent(c);
// if you don't use debugging tool, at least put an alert.
alert(url);
document.location.href = url;
}
tut1.html也需要更新。
window.onload = function () {
var url = document.location.href,
params = url.split('?')[1].split('&'),
data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
// the name is wrong; you set name Name and Comment, when you create the url.
document.getElementById('username').innerHTML = data.Name;
document.getElementById('usercomment').innerHTML = data.Comment;
}
供你参考。 第一页的操作与您仅使用的操作相同
<form action='tut1.html' method='get'>
+
<input type="submit" value="submit">
在这种情况下,参数将使用其名称和值发送。(?N = xxxx&C = yyyy)除非有特殊原因,否则您无需自己创建包含参数的url。
像这样在您的testJS函数中添加一个preventDefault
function testJS(e) {
e.preventDefault();
var b = document.getElementById('Name').value,
document.getElementById('comment').value,
url = 'http://E:\IIT\Homework\web1t/tut1.html?Name=' + encodeURIComponent(b);
document.location.href = url;
}
当您手动设置url时,必须防止默认的标签行为。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.