google chrome requests a php file when submitting forms?
Multi tool use
Clash Royale CLAN TAG#URR8PPPgoogle chrome requests a php file when submitting forms?
Hi i am dealing with a small crisis as i am unable to find the reason to why this error keeps coming. I have 2 main issues
Issue one the "homePage.html" does not get linked to the "Home" href in
the navigation bar and footer ONLY IN INTERNET EXPLORA. It works fine in
google chrome.
Issue two is that when i submit the form i get a "Php file missing error " ONLY IN GOOGlE CHROMO. The functions after the submiting works fine in Internet Explora
The only thing i did from the first file i had( it worked before ) was adding a submit button and used "onsubmit" attribute. Also added a series of java script that will be shown bellow ("form validation part of the java script")
Can someone please explain to me what i have done wrong . I'm fairly very new to this thus please excuse me for my ignorance.
Also please keep the fix out of php all i know is javascrpt html and css.(If they are fixable in the first place")
<!DOCTYPE html>
<html>
<head>
<title>Watchers.lk -Your one stop destination for all your movie tickets</title>
<link rel="stylesheet" type="text/css" href="../CSS/main.css">
<link rel="stylesheet" type="text/css" href="../CSS/imagealigning.css">
</head>
<body>
<div id="navbar" > <!-- Navigation bar links -->
<ul>
<li><img src="../Images/Images1/pageLogo.jpg" alt="logo" height="80px" width="300px" style="float:left"></li>
<li> <a class="topnavbar active" href="HomePage.html" id="home"title="Home">HOME </a> </li>
<li> <a class="topnavbar" href="Movies.html" id="movies" title="Movies">MOVIES </a> </li>
<li> <a class="topnavbar" href="BookYourTickets.html" id="buytickets" title="Book Tickets Online">BOOK TICKETS ONLINE </a> </li>
<li style="float:right"><a class="btn btn-scope1 navbar-btn" id="btn1" href="QuizRules.html">TEST YOUR KNOWLEDGE </a> </li>
</ul>
</div>
<div class="coverimage">
<img src="../Images/Images2/jurasicparktrailerimage.jpeg" name="currentimage" id="currentimage" alt="Jurassic World-Fallen Kingdom" style="width:1350px;height:780px;display:block;">
<h2><span id="main1"> JURASSIC WORLD:<br>FALLEN <br>KINGDOM(3D)</span></h2>
</div>
<div class="container">
<div class="submovies" style="float:left;width:1449px">
<img src="../Images/Images2/antmantrailerimage.jpg" name="submovie1" id="submovie1" alt="ANT-MAN and the Wasp" style="width:600px;height:400px;float:left;display:block;">
<img src="../Images/Images2/skyscraperstrailerimage.jpg" name="submovie2" id="submovie2" alt="Skyscraper" style="width:300px;height:400px;display:block;float:left;">
<h4 id="upcoming1"><span> ANT-MAN AND THE WASP</span></h4><span id="subspan1"> IN THEATERS 10TH JULY</span>
<h4 id="upcoming2"><span> SKYSCRAPER</span></h4><span id="subspan2"> IN THEATERS 13TH JULY</span>
<h4 id="upcoming3"><span> The EQUALIZER 2</span></h4><span id="subspan3"> IN THEATERS 20TH JULY</span>
<h4 id="upcoming4"><span> HOTEL TRANSYLVANIA 3</span></h4><span id="subspan4"> IN THEATERS 13TH JULY</span>
<div style="float:left">
<img src="../Images/Images2/theequalizer2trailerimage.jpg" name="submovie3" id="submovie3" alt="The Equalizer 2" style="width:449px;height:200px;vertical-align:top;max-width:449;display:block;">
<img src="../Images/Images2/hoteltransylvania3trailerimage.jpg" name="submovie4" id="submovie4" alt="Hotel Transylvania 3" style="width:449px;height:200px;display:block;">
</div>
</div>
</div>
<section class="aboutus">
<div class="container">
<div class="row">
<div class=" aboutWrap">
<h3 class="aboutHead">We're bringing the theaters to your doorstep...</h3>
<div class="aboutDesc">
<p>So you'd never have to miss a thing.</p>
</div>
</div>
</div>
</div>
</section>
<div class="feedback">
<button type="button" id="feedbacksubmit"onclick="">Give us your FeedBack !</button>
</div>
<div class="feedback-background">
<div class="feedback-content">
<div class="close">+</div>
<img src="../Images/Images2/feedbackimg1.jpg" alt="Givefeedback" style="width:100px;height:100px;">
<form name="FeedbackForm" action="action_page.php" onsubmit="return validateForm();" method="get">
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="rating1" value="Excellent" checked>Excellent</label>
<label><input type ="radio" name="rating" id="rating2" value="Very Good">Very Good</label>
<label><input type ="radio" name="rating" id="rating3" value="Average">Average</label>
<label><input type ="radio" name="rating" id="rating4" value="Poor">Poor</label>
<label><input type ="radio" name="rating"id="rating5" value="Extreamly Poor">Extremely Poor</label>
<input type="submit" id="submit" onsubmit="setTimeout(closePopup,10000)" value="Submit" >
</form>
</div>
</div>
<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>
<section class="pre-footer">
<div class="container">
</div>
</section>
<footer>
<div class="wrapper">
<ul>
<li> <a href="HomePage.html" id="footeritem1"title="Home">HOME </a> </li>
<li> <a href="Movies.html" id="footeritem2" title="Movies">MOVIES </a> </li>
<li ><a href="QuizRules.html" id="footeritem4">TEST YOUR KNOWLEDGE </a> </li>
<li><a href="AboutUs.html" id="footeritem5">ABOUT US</a></li>
<li><a href="Sitemap.html" id="footeritem7">SITE MAP</a></li>
<li><a href="AnjulaCV.html" id="footeritem7">DEVELOPERS</a></li>
</ul>
</div>
</footer>
</body>
</html>
Java Script i have used
<script>
/*----navigationbar----*/
var header = document.getElementById("navbar");
var btns = header.getElementsByClassName("topnavbar");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
/*------comments form-----*/
document.getElementById('feedbacksubmit').addEventListener('click' ,
function() {
document.querySelector('.feedback-background').style.display='flex';
}
)
document.querySelector('.close').addEventListener ('click',
function(){
document.querySelector('.feedback-background').style.display='none';
}
)
function closePopup(){
document.querySelector('.popup').style.display='none';
}
/*-------validation-----*/
function validateForm() {
var x = document.forms["FeedbackForm"]["Name"].value;
var y=document.forms["FeedbackForm"]["comment"].value;
var z=document.forms["FeedbackForm"]["E-mail"].value;
var radios = document.getElementsByName('rating');
for (var i = 0, length = radios.length; i < length; i++)
{
if (radios[i].checked)
{
var radioButton= radios[i].value;
break;
}
}
if (x == "") {
alert("Name must be filled out");
return false;
}
if (z == "") {
alert("Please enter your E-mail address to proceed");
return false;
}
if (y == "") {
alert("Comment section can not be empty");
return false;
}
var a = 0, rdbtn=document.getElementsByName("rating")
for(i=0;i<rdbtn.length;i++) {
if(rdbtn.item(i).checked == false) {
a++;
}
}
if(a == rdbtn.length) {
alert("Please select a rating according to you");
return false;
}
else {
document.getElementById("username").textContent = x;
document.getElementById("usercomment").textContent = y;
document.getElementById("userrating").textContent = radioButton;
}
document.getElementById('submit').addEventListener('click',
function(){
document.querySelector('.feedback-background').style.display='none';
document.querySelector('.popup').style.display='flex';
}
)
setTimeout(
function() {
document.querySelector('.popup').style.display='none';;
}, 10000);
}
</script>
CSS i have used.
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
#navbar ul {
margin:0;
padding-left:0;
padding-right:0;
overflow: hidden;
background-color: black;
font-size:12px;
width:100%;
}
#navbar li {
float: left;
list-style-type:none;
}
li a {
display: block;
color: #d9d9d9;
margin-top:0px;
padding: 25px 20px;
text-decoration: none;
margin-bottom:10px;
list-style-type:none;
}
li a:hover:not(.active) {
opacity:1;
color:#ffffff;
}
.active {
text-decoration: none;
color: #4da6ff;
outline: none;
}
#btn1 {
text-transform:uppercase;
padding:6px 2px;
margin-right: 40px;
margin-top: 20px;
background: #ee0c6e;
font-weight:600;
color:white;
border-radius: 3px;
border-radius: 3px;
border-radius: 3px;
font-size: 10px;
min-width: 100px;
}
#buytickets{
text-transform:uppercase;
padding:6px 2px;
margin-left:20px;
margin-top: 20px;
background: #ee0c6e;
font-weight:600;
color:white;
border-radius: 3px;
border-radius: 3px;
font-size: 10px;
min-width: 100}
#buytickets:hover:not(.active){
opacity:0.8;
color:#ffffff;
}
#btn1:hover:not(.active){
opacity:0.8;
color:#ffffff;
}
/*----------pre-footer-------------*/
.pre-footer{
width:100%;
padding:80px 0px;
background-color:#000025;
margin-bottom:0px;
float:left;
}
/*-----footer-------*/
footer {
width:100%;
background-color:#030d22;
padding:0px 0px;
margin-bottom:0px;
margin-left:0px;
text-align:left;
margin-top:0px;
}
footer li{
list-style-type:none;
}
footer ul li{
display:inline-block;
}
footer li a{
font-size:12px;
color:#87a2da;
}
/* image alining */
.coverimage{
position:relative;
padding-bottom:10px;
background-color:#06c6da;
padding-top:10px;
}
.description {
position: absolute;
bottom: 20px;
right: 20px;
background-color:black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
h2 {
position: absolute;
top: 180px;
left: 910px;
width: 100%;
font-size:40px;
color:white;
}
h2 span {
color: white;
display:inline-block;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
padding:48px;
padding-left:20px;
}
.submovies{
position:relative;
margin-bottom:20px;
}
#upcoming1 {
position: absolute;
top: 300px;
left: 20px;
width: 100%;
color:white;
font-weight:Bold;
font-size:18px;
}
#subspan1{
position: absolute;
top: 340px;
left:20px;
width: 100%;
color:white;
font:lighter;
font-size:12px;
}
#upcoming2
{
position: absolute;
top: 300px;
left: 620px;
width: 100%;
color:white;
font-weight:Bold;
font-size:18px;
}
#subspan2{
position: absolute;
top: 340px;
left:620px;
width: 100%;
color:white;
font:lighter;
font-size:12px;
}
#upcoming3 {
position: absolute;
top: 110px;
left: 920px;
width: 100%;
color:white;
font-weight:Bold;
font-size:18px;
}
#subspan3{
position: absolute;
top: 150px;
left:922px;
width: 100%;
color:white;
font:lighter;
font-size:12px;
}
#upcoming4 {
position: absolute;
top: 300px;
left: 920px;
width: 100%;
color:white;
font-weight:Bold;
font-size:18px;
}
#subspan4{
position: absolute;
top: 340px;
left:920px;
width: 100%;
color:white;
font:lighter;
font-size:12px;
}
/*-------vision tag-----------*/
.aboutus {
padding: 50px 0px;
left:120px;
}
.aboutus .aboutWrap .aboutHead {
font-size: 30px;
text-transform: uppercase;
font-weight: 900;
color: #484848;
margin-bottom: 20px;
}
.aboutus .aboutWrap .aboutDesc {
width: 80%;
margin: auto;
color: #484848;
font-size: 24px;
line-height: 24px;
font-weight: 300;
}
.aboutWrap{
text-align:center;
}
/*----------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;
display:none;
}
.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;
}
#logo{
margin-right:100px;
float:left;
}
As far as the "homepage html" not linking might be hard to find because i havent added other htmls linking to this html.(basically i cant link back to the home page after going to the movies page only in Internet Exploara)
In order for you to understand what i want to do u will have to go through the css file as well, ignore the images. Thank you all in advance. Any information is excepted with great regards.
`
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
