Why cant i transfer data to another HTML page

Question

i am fully aware about the fact that there are dozens of questions that go along this but i felt that my scenario was a little different(Upto you to decide), Im trying to transfer a form data from 1 HTML(test.html) to another HTML(tut1.html)

Basically what i am trying to do is extract the data and show in another modal.The issue i came across is i managed to do the same thing in a test run , but for some reason when i added it to my main one it didnt really work. I am sure i have missed something small but i can not pin it. Any help to fix this would be of great help.(One thing you can take note is that in the test run i used a button to submit but here instead i am using a href.not sure if thats what is causing this. Also one thing i noted was that the page is getting redirected to the second page due to the link of href and not because of the form action)

HTML 1 contain the form.Where the user enters his input.

<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) contains a modal i have created(not including the css for ur ease)

<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: i used the exact 2 codes in order to fill another form but it was extremely simple and it worked perfectly not sure why it doesnt work here . any help in any sort would be of great help

have you tried putting a `console.log` or breakpoint in your script on the second page, so that you can see how it is populating your `data` object? — David784, Jul 22 '18 at 20:41
[Form onSubmit vs submit button onClick](https://stackoverflow.com/q/6908187/463206) — radarbob, Jul 22 '18 at 20:49
@David784 I am not aware of how to do so , fairly new to Web , any help would be appreciated. — Anjula Serasinghe, Jul 23 '18 at 06:55
@ajstyles: I'd recommend starting [here](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools). It will tell you how to open dev tools in various browsers, and also has a section on `The JavaScript console` which should help you get started. As you get more comfortable with it you can explore more features. I'd recommend googling for "developer tools tutorial" for your browser of choice. You'll find tons of videos and web hits. — David784, Jul 23 '18 at 16:13

Ballsigno · Accepted Answer · 2018-07-23T08:57:34.603

There should be an error output from your code, but you somehow don't use debugging tool. I think this is good opportunity for you...

First, please change 'a tags href', like '#tut1.html', then click it, I think you don't transition to tut1.html. Also, when you transition to 'tut1.html', the url is the same what you want?

Let's try this.

'<a href="tut1.html"~' → '<a href="#tut1.html~'
 (Off course, e.preventDefault is also fine.)

and update the testJS function.

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 also need to update.

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;
}

For your information. The first page's action is the same what you use simply

<form action='tut1.html' method='get'>
+
<input type="submit" value="submit">

In that case, the parameters send using its name and value.(?N=xxxx&C=yyyy) You don't need to create url including parameters yourself, unless there's a special reason.

Hi , thank you so much for the extremely detailed answer. This did the trick , but i left out the href changing part at the very top , as i am not sure what that does and i think that is not java script ?(correct me if im wrong) also what exactly is the use of that part? thank you so much for the answer. — Anjula Serasinghe, Jul 23 '18 at 15:47
I'm sorry I might misunderstanding. Yes, just about the path. It's almost the same as cd command, I think. Basically, the href is started a relative location from the current directory(its file location) unless you write an absolute file path. see https://www.w3schools.com/htmL/html_filepaths.asp — Ballsigno, Jul 23 '18 at 21:58
Oh, maybe you mention "#tut1.html"?. This is what we call Hash. This time, I used for preventing translation using a tag's href. You can probably see many websites. — Ballsigno, Jul 23 '18 at 22:23
And of course, usually, we dou't put # to beginning of the url. This is kind of a trick for preventing transitions. — Ballsigno, Jul 23 '18 at 22:32

score 0 · Answer 2 · answered Jul 22 '18 at 20:43

0

Just add a preventDefault in your testJS function like this

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;
}

As you are manually setting the url so you have to prevent the default a tag behaviour.

answered Jul 22 '18 at 20:43

Gurpreet Singh

209
1
9

If above answer solved your query then mark it as correct answer. – Gurpreet Singh Jul 23 '18 at 05:26
Hi i just came online but no it didn't fix it, the data still doesn't get transfered does it work for you – Anjula Serasinghe Jul 23 '18 at 06:43

Why cant i transfer data to another HTML page

2 Answers2

Linked