出现验证警报时停止其他功能

Question

function fuelPrice(form)
{
  "use strict";

    var fuelPrice=0;
    var theForm = document.forms["price"];
    var withFuelPrice = document.getElementsByClassName("ful");
    if(withFuelPrice[form].checked==true)
    {
        fuelPrice=30;
    }
    return fuelPrice;
}

function withPol(form)
{
  "use strict";

    var polishPrice=0;
    var theForm = document.forms["price"];
    var includeInscription = document.getElementsByClassName("pol");
    if(includeInscription[form].checked==true){
        polishPrice=50;
    }
    return polishPrice;
}

function driver(form)
{
    var driverPrice=0;
    var theForm = document.forms["price"];
    var getDriv = document.getElementsByClassName("drv");
    if(getDriv[form].checked==true){
        driverPrice=50;
    }
    return driverPrice;
}

function calculateTotal(form)
{
var car1= 50
    var total = fuelPrice(form) + withPol(form) + car1 + driver(form);
     var text = "Total Price For the Renting "+total+ "BHD/Week";
    //display the result
    var divobj = document.getElementsByClassName('totalPrice');
    divobj[form].style.display='block';
    divobj[form].innerHTML = text;
  
    return text;
 return total;

}

function myFunction(sel)
{ "use strict";

 var e = document.getElementById("CarList");
var strUser = e.options[e.selectedIndex].value;
 var name = calculateTotal(0);
 var conf = confirm(name);
 if (conf === true){
  alert( strUser + " Added to cart!" );
 }
  else {
  alert("Canceled");
}

 }



function showDiv(elem){
 "use strict";
   if(elem.value === "Toyota"){
    
      document.getElementById('hidden_div').style.display = "block";
   document.getElementById('hidden_div2').style.display = "none";
   document.getElementById('hidden_div3').style.display = "none";
   document.getElementById('dispcoin').style.display = "block";
   document.getElementById('butn').style.display = "block";

    }
 else if (elem.value === "Volvo"){
 document.getElementById('hidden_div').style.display = "none";
 document.getElementById('hidden_div2').style.display = "block";
   document.getElementById('hidden_div3').style.display = "none";
     document.getElementById('butn').style.display = "block";
     document.getElementById('dispcoin').style.display = "block";



 }
 else if (elem.value === "Audi"){
 document.getElementById('hidden_div').style.display = "none";
 document.getElementById('hidden_div2').style.display = "none";
 document.getElementById('hidden_div3').style.display = "block";
     document.getElementById('butn').style.display = "block";
     document.getElementById('dispcoin').style.display = "block";


 }
  else if (elem.value === "none"){
 document.getElementById('hidden_div').style.display = "none";
 document.getElementById('hidden_div2').style.display = "none";
 document.getElementById('hidden_div3').style.display = "none";
 document.getElementById('butn').style.display = "none";
 document.getElementById('dispcoin').style.display = "none";

 }
}
function validateForm()
{
  validForm = true;
  var fields = ["firstname", "lastname"]

  var i, l = fields.length;
  var fieldname;
  for (i = 0; i < l; i++) {
    fieldname = fields[i];
    console.log(document.forms["names"]);
    if (document.forms["names"][fieldname].value === ""){
      alert(fieldname + " can not be empty");
           validForm = false;
      return false;

    }
  }
  return true;
}

<form id="names" >
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" placeholder="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" placeholder="Mouse"><br>
    Car Type:<br>

<select id="CarList" onChange="showDiv(this)">
    <option value="none">Choose a Car..</option>
    <option value="Toyota">Toyota</option>
    <option value="Volvo">Volvo</option>
    <option value="Audi">Audi</option>
</select>
Color  <input type="color" name="favcolor" value="#ff0000"><br>

Date:<input type="date" name="bday" max="1999-1-1"><br><br>

<p class="totalPrice booktxt" id="dispcoin" style="display: none;">Total Price For the Renting 50BHD/Week<br> </p>
<div id="hidden_div" style="display: none;"><img src="images/6.jpg"/></div>
<div id="hidden_div2" style="display: none;"><img src="images/1.jpg"/></div>
<div id="hidden_div3" style="display: none;"><img src="images/9.jpg"/></div>


   <form class="price">
                <input onclick="calculateTotal(0) " type="checkbox" class="ful">With Fuel<br>
                <input onclick="calculateTotal(0) " type="checkbox" class="pol">Polishing 2 weeks<br>
                <input onclick="calculateTotal(0) " type="checkbox" class="drv">Driver<br>

                </form>
    <input id="butn" type="button" style="display: none;" value="Submit" onClick="validateForm(), myFunction(this), showDiv(this)">
    

  </fieldset>
</form>

你好出现了一个问题。我想当缺少信息时，用户单击提交然后出现警报，用户单击确定停止其他功能。我尝试使用 {break;} 和 window.stop() 那么有没有一种可能的方法，或者当用户从警报中单击“确定”时，它会刷新。

Answer 1

您的问题在这里：

<input id="butn" type="button" style="display: none;" value="Submit" onClick="validateForm(), myFunction(this), showDiv(this)">

您应该有一个 submit 函数。在该函数中，您调用 validateForm 函数。如果 returns true 你按照你想要的顺序调用其他函数运行它们。

Answer 2

var validForm = true;
function fuelPrice(form)
{
  "use strict";

    var fuelPrice=0;
    var theForm = document.forms["price"];
    var withFuelPrice = document.getElementsByClassName("ful");
    if(withFuelPrice[form].checked==true)
    {
        fuelPrice=30;
    }
    return fuelPrice;
}

function withPol(form)
{
  "use strict";

    var polishPrice=0;
    var theForm = document.forms["price"];
    var includeInscription = document.getElementsByClassName("pol");
    if(includeInscription[form].checked==true){
        polishPrice=50;
    }
    return polishPrice;
}

function driver(form)
{
    var driverPrice=0;
    var theForm = document.forms["price"];
    var getDriv = document.getElementsByClassName("drv");
    if(getDriv[form].checked==true){
        driverPrice=50;
    }
    return driverPrice;
}

function calculateTotal(form)
{
  if(validForm) {
     var car1= 50
    var total = fuelPrice(form) + withPol(form) + car1 + driver(form);
     var text = "Total Price For the Renting "+total+ "BHD/Week";
    //display the result
    var divobj = document.getElementsByClassName('totalPrice');
    divobj[form].style.display='block';
    divobj[form].innerHTML = text;
  
    return text;
 return total;

 }

}

function myFunction(sel)
{ "use strict";
    if(validForm) {
         var e = document.getElementById("CarList");
var strUser = e.options[e.selectedIndex].value;
 var name = calculateTotal(0);
 var conf = confirm(name);
 if (conf === true){
  alert( strUser + " Added to cart!" );
 }
  else {
  alert("Canceled");
}

    }
 

 }



function showDiv(elem){
 "use strict";
   if(elem.value === "Toyota"){
    
      document.getElementById('hidden_div').style.display = "block";
   document.getElementById('hidden_div2').style.display = "none";
   document.getElementById('hidden_div3').style.display = "none";
   document.getElementById('dispcoin').style.display = "block";
   document.getElementById('butn').style.display = "block";

    }
 else if (elem.value === "Volvo"){
 document.getElementById('hidden_div').style.display = "none";
 document.getElementById('hidden_div2').style.display = "block";
   document.getElementById('hidden_div3').style.display = "none";
     document.getElementById('butn').style.display = "block";
     document.getElementById('dispcoin').style.display = "block";



 }
 else if (elem.value === "Audi"){
 document.getElementById('hidden_div').style.display = "none";
 document.getElementById('hidden_div2').style.display = "none";
 document.getElementById('hidden_div3').style.display = "block";
     document.getElementById('butn').style.display = "block";
     document.getElementById('dispcoin').style.display = "block";


 }
  else if (elem.value === "none"){
 document.getElementById('hidden_div').style.display = "none";
 document.getElementById('hidden_div2').style.display = "none";
 document.getElementById('hidden_div3').style.display = "none";
 document.getElementById('butn').style.display = "none";
 document.getElementById('dispcoin').style.display = "none";

 }
}
function validateForm()
{
  validForm = true;
  var fields = ["firstname", "lastname"]

  var i, l = fields.length;
  var fieldname;
  for (i = 0; i < l; i++) {
    fieldname = fields[i];
    console.log(document.forms["names"]);
    if (document.forms["names"][fieldname].value === ""){
      alert(fieldname + " can not be empty");
           validForm = false;
      return false;

    }
  }
  return true;
}

<form id="names" >
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" placeholder="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" placeholder="Mouse"><br>
    Car Type:<br>

<select id="CarList" onChange="showDiv(this)">
    <option value="none">Choose a Car..</option>
    <option value="Toyota">Toyota</option>
    <option value="Volvo">Volvo</option>
    <option value="Audi">Audi</option>
</select>
Color  <input type="color" name="favcolor" value="#ff0000"><br>

Date:<input type="date" name="bday" max="1999-1-1"><br><br>

<p class="totalPrice booktxt" id="dispcoin" style="display: none;">Total Price For the Renting 50BHD/Week<br> </p>
<div id="hidden_div" style="display: none;"><img src="images/6.jpg"/></div>
<div id="hidden_div2" style="display: none;"><img src="images/1.jpg"/></div>
<div id="hidden_div3" style="display: none;"><img src="images/9.jpg"/></div>


   <form class="price">
                <input onclick="calculateTotal(0) " type="checkbox" class="ful">With Fuel<br>
                <input onclick="calculateTotal(0) " type="checkbox" class="pol">Polishing 2 weeks<br>
                <input onclick="calculateTotal(0) " type="checkbox" class="drv">Driver<br>

                </form>
    <input id="butn" type="button" style="display: none;" value="Submit" onClick="validateForm(), myFunction(this), showDiv(this)">
    

  </fieldset>
</form>

出现验证警报时停止其他功能

stop other function when alert of validation appear

javascript

jscript