While I understand that there are numerous questions related to this topic, I believe my situation is unique. I am attempting to transfer form data from one HTML file (test.html) to another HTML file (tut1.html).
Essentially, my goal is to extract the data and display it in a modal on the second page. I encountered an issue where the process worked during a test run, but when implemented in my main project, it did not function as expected. I am certain that I have overlooked a minor detail, but I am struggling to pinpoint it. Any assistance in resolving this issue would be greatly appreciated.
The first HTML file contains the form where the user inputs their information.
<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>
The second HTML file (tut1.html) contains a modal that I have created (CSS excluded for your convenience).
<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 successfully used the exact same codes to populate another form, which worked flawlessly. I am unsure why it is not functioning in this case. Any form of assistance would be greatly appreciated.