Блог

Я пытаюсь изучить JavaScript, PHP и некоторые базовые проверки форм на стороне клиента, пытаясь создать это базовое учебное пособие по JavaScript, которое взаимодействует с PHP и HTML. То, что я пытаюсь сделать, это прервать событие отправки формы, т. Е. Пользователь забывает ввести допустимый формат электронной почты во вводе отправки электронной почты и нажимает на кнопку отправки, которая затем должна отображать сообщение об ошибке и не разрешать отправку формы. Но я не могу заставить это работать для меня. Что происходит, так это то, что вместо этого я попадаю в support_process.php страница, когда этого не должно произойти. Любая помощь вообще была бы очень признательна.

Вот мой index.html код для формы:

 <div>
  <form id="frmSupport" name="frmSupport"  method="post" action="support_process.php">
    <fieldset id="fastSupport">
      <legend><strong>Fast Support</strong></legend>
        <p>If you've already booked the Singing Rails Girls  coach,</br> and have not gotten a confirmation number,</br> drop us a line and we'll respond within 24 hours.</p> </p>
      <p>
        <label for="email">Email:</label>
            <input type="text" value="your email" name="name" id="email" tabindex="10" />
          <p>
            <span id="errorMsg"></span>
          </p>
            <input type="submit" value="Submit">
      </p>
      <p><b>Ed's "Blah Blah Blah" Tour Status</b></p>
        <label for="tourStatus" class="inline">
            <input type="radio" name="tour status" value="booked" id="tourStatus_0" tabindex="40" />Ed already toured here
        </label>
        <label for="tourConf" class="inline" >
            <input type="radio" name="tour conf" value="paid" id= "tourStatus_1" tabindex="50" />Ed confirmed his tour date
        </label>
        </br>

    </fieldset> 
  </form>
</div>
 

Раздел комментариев

Комментарии:

 <script src="myscript.js">
</script>
 

И вот мой соответствующий файл JavaScript:

 //alert("Hello, world!"); // this is a JavaScript alert button //
var year = 2014;
var userEmail = "";
var todaysDate = "";
/*var donation = 20;

if (donation < 20) {
alert("For a $20 you get a cookie. Change your donation?");
}
else {
alert("Thank you!");
} */

var mainfile = document.getElementById("mainTitle");
console.log("This is an element of type: ", mainTitle.nodeType);
console.log("The inner HTML is ", mainTitle.innerHTML);
console.log("Child nodes: ", mainTitle.childNodes.length);

var myLinks = document.getElementsByTagName("a");
console.log("Links: ", myLinks.length);

var myListElements = document.getElementsByTagName("li");
console.log("List elements: ", myListElements.length);

var myFirstList = document.getElementById("2 paragraphs");
/* you can also use: var limitedList = myFirstList.getElementsByTagName("li");
to dig deeper into the DOM */
var myElement = document.createElement("li");
var myNewElement = document.createElement("li");
//myNewElement.appendChild(myNewElement); 

var myText = document.createTextNode("New list item");
myNewElement.appendChild(myText); 

// creating elements
var newListItem = document.createElement("li");
var newPara = document.createElement("p");

// To add content, either use inner HTML
// or create child nodes manually like so:
// newPara.innerHTML = "blah blah blah...";
var paraText = document.createTextNode("And now for a beginner level intro...");
newPara.appendChild(paraText);

//And we still need to attach them to the document
document.getElementById("basic").appendChild(newPara);

var myNewElement = document.createElement("li");
var secondItem = myElement.getElementsByTagName("li")[1];
myElement.insertBefore(myNewElement, secondItem);

// An example of using an anonymous function: onclick.
//When you click anywhere on the page, an alert appears.
//document.onclick = function() {
//  alert("You clicked somewhere in the document");
//}

// And example of restricting the click alert to 
// an element on the page.
var myImage = document.getElementById("mainImage");
myImage.onclick = function() {
alert("You clicked on the picture!");
}

function prepareEventHandlers() {
var myImage = document.getElementById("mainImage");
myImage.onclick = function() {
  alert("You clicked on the picture!");
}
//onfocus and onblur event handler illustration
var emailField = document.getElementById("email");
emailField.onfocus = function() {
if (emailField.value == "your email") {
    emailField.value = "";
}
};

emailField.onblur = function() {
if (emailField.value == "") {
    emailField.value = "your email";
}
};
// Handling the form submit event
document.getElementById("frmSupport").onsubmit = function(){
    //prevent a form from sumbitting if no email.
    if (document.getElementById("email").value == "") {
        document.getElementById(errorMsg).innerHTML = "OOPS!";
        //to stop the form from submitting:
        return false;
    }else {
        //reset and allow form submission:
        document.getElementById("errorMsg").innerHTML = "";
        return true;
    }
};
}


window.onload = function() {
// preps everything and ensures 
// other js functions don't get
// called before document has
// completely loaded.
prepareEventHandlers(); 
// This is a named function call nested inside an anonymous function.
}



//Sometimes we want js to run later or call a
// function in 60 seconds or every 5 sec, etc.
// Two main methods for timers: setTimeout and setInterval
// these timer functions are in milliseconds

var myImage = document.getElementById("mainImage");
var imageArray = ["images/Blue-roses.jpg", "images/Purple-Rose.jpg", "images/White- Rose.jpg", "images/orange-rose.jpg", "images/pink-roses.jpg", "images/red-roses.jpg", "images/yellow-roses.jpg", "images/murdock.jpg", "images/dorothy-red-ruby-slippers.jpg"];
var imageIndex = 0;

function changeImage(){
myImage.setAttribute("src",imageArray[imageIndex]);
imageIndex  ;
if (imageIndex >= imageArray.length) {
    imageIndex = 0;
}
}
var intervalHandle = setInterval(changeImage, 5000);
myImage.onclick = function() {
clearInterval(intervalHandle);
}

//Sometimes we may want some random alert
// to pop up x-number of seconds later.
//So we use the setTimeout, like so:
/*function simpleMessage() {
alert("Get ready to learn!");
}
setTimeout(simpleMessage, 5000); */

/*var_dump($_POST);
if var_dump($_POST) = "";
return var($_GET); 
error_log($_POST); */
 

И вот мой соответствующий php-файл для прерывателя событий (для отказа разрешить отправку формы, если пользователь оставляет поле электронной почты пустым или что-то в этом роде):

 <?php
//some php script can go here
echo "This is the support confirmation page...sorry, nothing fancy here!"
?>

<h1>Thank you, we will contact you shortly!</h1>
<a href="index.html" target="_blank" >Back</a>



<?php
// More php code can go here, and so forth and so on..
/*var_dump($_POST);
  if var_dump($_POST) = "";
  return var($_GET); 

error_log($_GET); */
error_log(message);


?>
 

Вот проблема:

 if (document.getElementById("email").value == "") {
    document.getElementById(errorMsg).innerHTML = "OOPS!";
    //to stop the form from submitting:
    return false;
}else {
    //reset and allow form submission:
    document.getElementById("errorMsg").innerHTML = "";
    return true;
}
 

В первой части if вы пытаетесь получить ссылку на элемент ErrorMsg, используя несуществующую переменную:

     document.getElementById(errorMsg).innerHTML = "OOPS!";
 

Во втором случае вы получаете доступ к элементу по его идентификатору правильно:

     document.getElementById("errorMsg").innerHTML = "";
 

Вам нужно заключить ‘ErrorMsg’ в одинарные или двойные кавычки.

Вам обязательно следует изучить возможность использования отладчика, который поможет вам найти подобные проблемы. Инструменты разработчика Chrome — хорошее место для начала.