Is it possible to get form input into another html form

Question

I'm currently trying to inform a user about the form details they input.I'm not very clear how to go about this but what i thought of doing was to 1 html file to have the "form" and in the action ="htmlfile2.url" where the user has to be shown what his input was.

so currently i have 2 html files. The first one is a form to fill. the second html file is a modal pop up. In this pop up i want to show the user the details that they have entered. The issue is the name the user enter has to come to the second page on submitting ( after clicking the submit button the user gets directed to "htmlfile2" where the modal is shown. What i have so far is this.

HTML File 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 File 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 File for both (Please note that the css file contain other styling done for other pages this is the entire 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;
}

What i want to do is after the first html (which contains the form) is submitted , it has to get directed to the second html where it basically say thank you to the person filling the form. Here i want to access the name the user added into the form ( if he entered "john") i want to say thank you John "Inside the SECOND HTML AFTER GETTING DIRECTED UPON submitting (sorry for caps that was just to highlight it)

If there is a better way to go about this please enlighten me. Thank you so much all.Also please note that i only know JavaScript . Dont know how to work with JQuery or PHP

score 1 · Accepted Answer · answered Jul 21 '18 at 21:27

1

For the sake of knowledge, You can get data in HTML File 2 using Javascript, use the following code in 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;
}

Nothing special we are just extracting data from the URL (HTTP Request) that was sent from the HTML file 1 form using some string functions.

But the proper way is to use some backend language.

answered Jul 21 '18 at 21:27

Saleh Mahmood

1,823
1
22
30

1

Hi thank you so much to you something like this is what i was hoping for, i did not see if it is working but this is what i imagined . I will give this a go and get back to you – Anjula Serasinghe Jul 22 '18 at 08:29
just lemme know if there's any issue – Saleh Mahmood Jul 22 '18 at 11:52
Hi it worked perfectly the way you said , i managed to do it on a test run although when i tried it on my main program it did not work , i added a post regarding it could you please take a look at it and see where i have done it wrong. Thank you https://stackoverflow.com/questions/51468963/why-cant-i-transfer-data-to-another-html-page?noredirect=1#comment89906744_51468963 – Anjula Serasinghe Jul 23 '18 at 06:57

score 0 · Answer 2 · answered Jul 21 '18 at 21:26

A solution to your problem using php would be something like:

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

You could also use other programming languages, but I hope this can help you.

Good sir , i am only aware of Javascript and i am supposed to do this using JS — Anjula Serasinghe, Jul 22 '18 at 08:30
@ajstyles I see, but even though you can say thanks for writing the comment and etc, you cannot store the comment using javascript and thus you kind of waste the information... And you can ony use GET method (listing data in URL) while sometimes POST can be more convenient. — Danielius, Jul 22 '18 at 08:33
I will give it ago , thank you for ur input , i thought i had said so before might have missed it. — Anjula Serasinghe, Jul 22 '18 at 10:45

Is it possible to get form input into another html form

2 Answers2