Question

我完全意识到有很多问题要解决，但是我觉得我的情况有些不同（由您决定），我试图从1个HTML（测试）传输表单数据。 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个代码，但是它非常简单，并且无法确定为什么不能在这里正常工作，因此效果非常好。任何形式的帮助都是很大的帮助

Answer 1

您的代码应该输出错误，但是您不使用调试工具。我觉得这对你来说是个好机会...

首先，请更改“ 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。

Answer 2

只需在您的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时，必须防止默认的标签行为。

为什么我不能将数据传输到另一个HTML页面

2 个答案: