验证码弹出窗口

Question

我要添加验证码在弹出窗口。

我在列表中有一些类别**（按需服务）**。如果任何人点击任何服务，则根据服务ID打开一个弹出窗口。它的工作正常。

但我也有验证码在JavaScript中。但它不工作。如果任何人点击任何服务，那么应该打开一个弹出窗口，根据服务ID和验证码应该存在。我试过了，但没有发生。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">  </script> 
    <script type="text/javascript"> 

//Created/Generates the captcha function  
function DrawCaptcha(modal_id) 
{ 
var a = Math.ceil(Math.random() * 10)+ ''; 
var b = Math.ceil(Math.random() * 10)+ '';  
var c = Math.ceil(Math.random() * 10)+ ''; 
var d = Math.ceil(Math.random() * 10)+ ''; 
var e = Math.ceil(Math.random() * 10)+ ''; 
var f = Math.ceil(Math.random() * 10)+ ''; 
var g = Math.ceil(Math.random() * 10)+ ''; 
var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' '+ f + ' ' + g; 
//document.getElementById("txtCaptcha").value = code 
txt_captcha="#"+modal_id+" .txtCaptcha"; 
console.log(txt_captcha); 
$(txt_captcha).val(code); 

} 

function ValidCaptcha(){ 
var str1 = removeSpaces(document.getElementById('txtCaptcha').value); 
var str2 = removeSpaces(document.getElementById('txtInput').value); 
if (str1 == str2) 
{ 

alert("Captch is matched"); 
} 
else 
{  
alert("Captch is not matched"); 
return false; 
} 

} 

    // Remove the spaces from the entered and generated code 
    function removeSpaces(string) 
{ 
return string.split(' ').join(''); 
} 


</script> 
<div class="box-information"> 
     <p><a style="font-size: 16px; font-weight: bold;">On Demand Services:</a></p> 
      <li style="padding: 5px 0px !important;"><img src="http://www.rashanondoor.com/index.php/image/catalog/4.gif" style="width: 9px;">&nbsp;<a onclick="DrawCaptcha('my_modal');" href="#my_modal" data-toggle="modal" data-book-id="Car Washing">Car Washing</a></li> 
      <li style="padding: 5px 0px !important;"><img src="http://www.rashanondoor.com/index.php/image/catalog/4.gif" style="width: 9px;">&nbsp;<a onclick="DrawCaptcha('my_modal1');" href="#my_modal1" data-toggle="modal" data-book-id="Carpenter">Carpenter</a></li> 
      <li style="padding: 5px 0px !important;"><img src="http://www.rashanondoor.com/index.php/image/catalog/4.gif" style="width: 9px;">&nbsp;<a href="#my_modal2" data-toggle="modal" data-book-id="Painters" onclick="DrawCaptcha('my_modal2');">Painters</a></li></ul> 

      </div> 
    <!-------------Task Modal Start--------------------- --> 
<div class="modal" id="my_modal"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> 
    <h4 class="modal-title">Enquiry Form:&nbsp;<span style="color:red;">(All Fields are required.)</h4> 
     </div> 
     <form method="post" action="" id="dummy" onsubmit="return ValidCaptcha(this);"> 
     <div class="modal-body"> 
     <p style="color:#000;">Service Name:</p> 
     <input type="text" class="form-control" required readonly name="bookId" value="Car Washing" style="color:#000;"> 
     <p style="color:#000;">Full Name:</p> 
     <input type="text" class="form-control" required name="name" value="" style="color:#000;"> 
     <p style="color:#000;">Email Address:</p> 
     <input type="email" class="form-control" required name="email" value="" style="color:#000;"> 
    <p style="color:#000;">Mobile Number:</p> 
    <input type="tel" class="form-control" required name="mno" value="" style="color:#000;"> 
    <p style="color:#000;">Message:</p> 
    <textarea name="msg" class="form-control" required style="color:#000;">I am interested in your service. Please contact me back on email/phone.</textarea> 
    <p style="color:#000;">Address:</p> 
    <textarea name="address" class="form-control" required style="color:#000;"></textarea> 
    <p style="color:#000;">Captcha:</p> 
    <input type="text" class="txtCaptcha" readonly id="txtCaptcha" style="background-color:yellow; text-align:center; border:none;font-weight:bold; font-family:Modern"> 
    <input type="button" value="Refresh" onclick="DrawCaptcha('my_modal');"> 
    <input type="text" id="txtInput"> 

    </div> 
    <div class="modal-footer"> 
    <button type="submit" name="submit" class="btn btn-default col-md-3">Submit</button> 
    <button type="button" class="btn btn-default col-md-3" data-dismiss="modal">Close</button> 
    </div> 
    </form> 
    </div> 
    </div> 
    </div> 
    <!-------------Task Modal End--------------------- --> 

    <!-------------Task Modal Start--------------------- --> 
    <div class="modal" id="my_modal1"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> 
     <h4 class="modal-title">Enquiry Form:&nbsp;<span style="color:red;">(All Fields are required.)</span></h4> 
    </div> 
    <form method="post" action="" id="dummy" onsubmit="return ValidCaptcha(this);"> 
    <div class="modal-body"> 
    <p style="color:#000;">Service Name:</p> 
    <input type="text" class="form-control" required readonly name="bookId" value="Carpenter" style="color:#000;"> 
    <p style="color:#000;">Full Name:</p> 
    <input type="text" class="form-control" required name="name" value="" style="color:#000;"> 
    <p style="color:#000;">Email Address:</p> 
    <input type="email" class="form-control" required name="email" value="" style="color:#000;"> 
    <p style="color:#000;">Mobile Number:</p> 
    <input type="tel" class="form-control" required name="mno" value="" style="color:#000;"> 
    <p style="color:#000;">Message:</p> 
    <textarea name="msg" class="form-control" required style="color:#000;">I am interested in your service. Please contact me back on email/phone.</textarea> 
    <p style="color:#000;">Address:</p> 
    <textarea name="address" class="form-control" required style="color:#000;"></textarea> 
    <p style="color:#000;">Captcha:</p> 
    <input type="text" class="txtCaptcha" id="txtCaptcha1" readonly style="background-color:yellow; text-align:center; border:none;font-weight:bold; font-family:Modern"> 
    <input type="button" value="Refresh" onclick="DrawCaptcha('my_modal1');"> 
    <input type="text" id="txtInput"> 


    </div> 
    <div class="modal-footer"> 
    <button type="submit" name="submit1" class="btn btn-default col-md-3">Submit</button> 
    <button type="button" class="btn btn-default col-md-3" data-dismiss="modal">Close</button> 
    </div> 

    </form> 
    </div> 
    </div> 
    </div> 
    <!-------------Task Modal End--------------------- --> 

    <!-------------Task Modal Start-----------------------> 
    <div class="modal" id="my_modal2"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> 
     <h4 class="modal-title">Enquiry Form:&nbsp;<span style="color:red;">(All Fields are required.)</span></h4> 
    </div> 
    <form method="post" action="" onsubmit="ValidCaptcha();"> 
    <div class="modal-body"> 
    <p style="color:#000;">Service Name:</p> 
    <input class="form-control" required="true" readonly="" name="bookId" value="Painters" style="color:#000;" type="text"> 
    <p style="color:#000;">Full Name:</p> 
    <input class="form-control" required="true" name="name" value="" style="color:#000;" type="text"> 
    <p style="color:#000;">Email Address:</p> 
    <input class="form-control" required="true" name="email" value="" style="color:#000;" type="email"> 
    <p style="color:#000;">Mobile Number:</p> 
    <input class="form-control" required="true" name="mno" value="" style="color:#000;" type="tel"> 
    <p style="color:#000;">Message:</p> 
    <textarea name="msg" class="form-control" required="true" style="color:#000;">I am interested in your service. Please contact me back on email/phone.</textarea> 
    <p style="color:#000;">Address:</p> 
    <textarea name="address" class="form-control" required="true" style="color:#000;"></textarea> 
    <p style="color:#000;">Captcha:</p> 
    <input type="text" class="txtCaptcha" id="txtCaptcha2" readonly style="background-color:yellow; text-align:center; border:none;font-weight:bold; font-family:Modern"> 
    <input type="button" value="Refresh" onclick="DrawCaptcha('my_modal2');"> 
    <input type="text" id="txtInput"> 
    </div> 

    <div class="modal-footer"> 
    <button type="submit" name="submit2" class="btn btn-default col-md-3">Submit</button> 
    <button type="button" class="btn btn-default col-md-3" data-dismiss="modal">Close</button> 
    </div> 
    </form></div> 
</div> 
</div> 

    <!-------------Task Modal End-----------------------> 

Answer 1

//Created/Generates the captcha function  
 
function DrawCaptcha(modal_id) 
 
{ 
 
    var a = Math.ceil(Math.random() * 10)+ ''; 
 
    var b = Math.ceil(Math.random() * 10)+ '';  
 
    var c = Math.ceil(Math.random() * 10)+ ''; 
 
    var d = Math.ceil(Math.random() * 10)+ ''; 
 
    var e = Math.ceil(Math.random() * 10)+ ''; 
 
    var f = Math.ceil(Math.random() * 10)+ ''; 
 
    var g = Math.ceil(Math.random() * 10)+ ''; 
 
    var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' '+ f + ' ' + g; 
 
    //document.getElementById("txtCaptcha").value = code 
 
    txt_captcha="#"+modal_id+" .txtCaptcha";  
 
    $(txt_captcha).val(code); 
 

 
} 
 

 
// Validate the Entered input aganist the generated security code function 
 
function ValidCaptcha(){ 
 
    var str1 = removeSpaces(document.getElementById('txtCaptcha').value); 
 
    var str2 = removeSpaces(document.getElementById('txtInput').value); 
 
    if (str1 == str2) 
 
    alert("good"); 
 
    else  
 
    alert("bad"); 
 

 
} 
 

 
// Remove the spaces from the entered and generated code 
 
function removeSpaces(string) 
 
{ 
 
    return string.split(' ').join(''); 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
     <div class="box-information"> 
 
     <p><a style="font-size: 16px; font-weight: bold;">On Demand Services:</a></p> 
 
      <ul class="accordion" id="accordion-category"> 
 
       <li style="padding: 5px 0px !important;"><img src="http://www.rashanondoor.com/index.php/image/catalog/4.gif" style="width: 9px;">&nbsp;<a onclick="DrawCaptcha('my_modal');" href="#my_modal" data-toggle="modal" data-book-id="Car Washing">Car Washing</a></li> 
 
       <li style="padding: 5px 0px !important;"><img src="http://www.rashanondoor.com/index.php/image/catalog/4.gif" style="width: 9px;">&nbsp;<a onclick="DrawCaptcha('my_modal1');" href="#my_modal1" data-toggle="modal" data-book-id="Carpenter">Carpenter</a></li> 
 
       <li style="padding: 5px 0px !important;"><img src="http://www.rashanondoor.com/index.php/image/catalog/4.gif" style="width: 9px;">&nbsp;<a href="#my_modal2" data-toggle="modal" data-book-id="Painters" onclick="DrawCaptcha('my_modal2');">Painters</a></li> 
 
      </div> 
 
<!-------------Task Modal Start--------------------- --> 
 
<div class="modal" id="my_modal" style="display: none;"> 
 
    <div class="modal-dialog"> 
 
<div class="modal-content"> 
 
    <div class="modal-header"> 
 
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> 
 
     <h4 class="modal-title">Enquiry Form:</h4> 
 
    </div> 
 
    <form method="post" action="" id="dummy" onsubmit="return checkform(this);"> 
 
    <div class="modal-body"> 
 
    <p style="color:#000;">Service Name:</p> 
 
    <input type="text" class="form-control" required readonly name="bookId" value="" style="color:#000;"> 
 
    <p style="color:#000;">Full Name:</p> 
 
    <input type="text" class="form-control" required name="name" value="" style="color:#000;"> 
 
    <p style="color:#000;">Email Address:</p> 
 
    <input type="email" class="form-control" required name="email" value="" style="color:#000;"> 
 
    <p style="color:#000;">Mobile Number:</p> 
 
    <input type="tel" class="form-control" required name="mno" value="" style="color:#000;"> 
 
    <p style="color:#000;">Message:</p> 
 
    <textarea name="msg" class="form-control" required style="color:#000;">I am interested in your service. Please contact me back on email/phone.</textarea> 
 
    <p style="color:#000;">Address:</p> 
 
    <textarea name="address" class="form-control" required style="color:#000;"></textarea> 
 
    <p style="color:#000;">Captcha:</p> 
 
    <input type="text" class="txtCaptcha" id="txtCaptcha" style="background-image:url(1.jpg); text-align:center; border:none;font-weight:bold; font-family:Modern"> 
 
    <input type="button" value="Refresh" onclick="DrawCaptcha();"> 
 
<input type="text" id="txtInput"> 
 

 
    </div> 
 
    <div class="modal-footer"> 
 
    <button type="submit" name="submit" onclick="javascript:submitmydata();" class="btn btn-default col-md-3">Submit</button> 
 
    <button type="button" class="btn btn-default col-md-3" data-dismiss="modal">Close</button> 
 
    </div> 
 
    </form> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-------------Task Modal End--------------------- --> 
 

 
    <!-------------Task Modal Start--------------------- --> 
 
<div class="modal" id="my_modal1"> 
 
<div class="modal-dialog"> 
 
<div class="modal-content"> 
 
    <div class="modal-header"> 
 
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> 
 
     <h4 class="modal-title">Enquiry Form:</h4> 
 
    </div> 
 
    <form method="post" action="" onsubmit="return checkform(this);"> 
 
    <div class="modal-body"> 
 
    <p style="color:#000;">Service Name:</p> 
 
    <input type="text" class="form-control" required readonly name="bookId" value="" style="color:#000;"> 
 
    <p style="color:#000;">Full Name:</p> 
 
    <input type="text" class="form-control" required name="name" value="" style="color:#000;"> 
 
    <p style="color:#000;">Email Address:</p> 
 
    <input type="email" class="form-control" required name="email" value="" style="color:#000;"> 
 
    <p style="color:#000;">Mobile Number:</p> 
 
    <input type="tel" class="form-control" required name="mno" value="" style="color:#000;"> 
 
    <p style="color:#000;">Message:</p> 
 
    <textarea name="msg" class="form-control" required style="color:#000;">I am interested in your service. Please contact me back on email/phone.</textarea> 
 
    <p style="color:#000;">Address:</p> 
 
    <textarea name="address" class="form-control" required   style="color:#000;"></textarea> 
 
    <p style="color:#000;">Captcha:</p> 
 
    <input type="text" class="txtCaptcha" id="txtCaptcha1" style="background-image:url(1.jpg); text-align:center; border:none;font-weight:bold; font-family:Modern"> 
 
    <input type="button" value="Refresh" onclick="DrawCaptcha();"> 
 
    <input type="text" id="txtInput"> 
 

 

 
    </div> 
 
    <div class="modal-footer"> 
 
    <button type="submit" name="submit1" class="btn btn-default col-md-3">Submit</button> 
 
    <button type="button" class="btn btn-default col-md-3" data-dismiss="modal">Close</button> 
 
    </div> 
 
    </form> 
 
</div> 
 
</div> 
 
</div> 
 
<!-------------Task Modal End--------------------- -->

不能在表单中使用同一ID多次。 Id必须是唯一的。而不是它使用类。你可以改变y代码如下。你也没有my_modal2在你的代码，所以先定义它

<script type="text/javascript"> 

    //Created/Generates the captcha function  
function DrawCaptcha(modal_id) 
{ 
    var a = Math.ceil(Math.random() * 10)+ ''; 
    var b = Math.ceil(Math.random() * 10)+ '';  
    var c = Math.ceil(Math.random() * 10)+ ''; 
    var d = Math.ceil(Math.random() * 10)+ ''; 
    var e = Math.ceil(Math.random() * 10)+ ''; 
    var f = Math.ceil(Math.random() * 10)+ ''; 
    var g = Math.ceil(Math.random() * 10)+ ''; 
    var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' '+ f + ' ' + g; 
    //document.getElementById("txtCaptcha").value = code 
    txt_captcha="#"+modal_id+" .txtCaptcha"; 
    console.log(txt_captcha); 
    $(txt_captcha).val(code); 

} 



// Remove the spaces from the entered and generated code 
function removeSpaces(string) 
{ 
    return string.split(' ').join(''); 
} 


</script> 
<div class="box-information"> 
     <p><a style="font-size: 16px; font-weight: bold;">On Demand Services:</a></p> 
      <ul class="accordion" id="accordion-category"> 
       <li style="padding: 5px 0px !important;"><img src="http://www.rashanondoor.com/index.php/image/catalog/4.gif" style="width: 9px;">&nbsp;<a onclick="DrawCaptcha('my_modal');" href="#my_modal" data-toggle="modal" data-book-id="Car Washing">Car Washing</a></li> 
       <li style="padding: 5px 0px !important;"><img src="http://www.rashanondoor.com/index.php/image/catalog/4.gif" style="width: 9px;">&nbsp;<a onclick="DrawCaptcha('my_modal1');" href="#my_modal1" data-toggle="modal" data-book-id="Carpenter">Carpenter</a></li> 
       <li style="padding: 5px 0px !important;"><img src="http://www.rashanondoor.com/index.php/image/catalog/4.gif" style="width: 9px;">&nbsp;<a href="#my_modal2" data-toggle="modal" data-book-id="Painters" onclick="DrawCaptcha('my_modal2');">Painters</a></li> 
      </div> 
<!-------------Task Modal Start--------------------- --> 
<div class="modal" id="my_modal" style="display: none;"> 
    <div class="modal-dialog"> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> 
     <h4 class="modal-title">Enquiry Form:</h4> 
    </div> 
    <form method="post" action="" id="dummy" onsubmit="return checkform(this);"> 
    <div class="modal-body"> 
    <p style="color:#000;">Service Name:</p> 
    <input type="text" class="form-control" required readonly name="bookId" value="" style="color:#000;"> 
    <p style="color:#000;">Full Name:</p> 
    <input type="text" class="form-control" required name="name" value="" style="color:#000;"> 
    <p style="color:#000;">Email Address:</p> 
    <input type="email" class="form-control" required name="email" value="" style="color:#000;"> 
    <p style="color:#000;">Mobile Number:</p> 
    <input type="tel" class="form-control" required name="mno" value="" style="color:#000;"> 
    <p style="color:#000;">Message:</p> 
    <textarea name="msg" class="form-control" required style="color:#000;">I am interested in your service. Please contact me back on email/phone.</textarea> 
    <p style="color:#000;">Address:</p> 
    <textarea name="address" class="form-control" required style="color:#000;"></textarea> 
    <p style="color:#000;">Captcha:</p> 
    <input type="text" class="txtCaptcha" id="txtCaptcha" style="background-image:url(1.jpg); text-align:center; border:none;font-weight:bold; font-family:Modern"> 
    <input type="button" value="Refresh" onclick="DrawCaptcha();"> 
<input type="text" id="txtInput"> 

    </div> 
    <div class="modal-footer"> 
    <button type="submit" name="submit" onclick="javascript:submitmydata();" class="btn btn-default col-md-3">Submit</button> 
    <button type="button" class="btn btn-default col-md-3" data-dismiss="modal">Close</button> 
    </div> 
    </form> 
    </div> 
    </div> 
</div> 
<!-------------Task Modal End--------------------- --> 

    <!-------------Task Modal Start--------------------- --> 
<div class="modal" id="my_modal1"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> 
     <h4 class="modal-title">Enquiry Form:</h4> 
    </div> 
    <form method="post" action="" onsubmit="return checkform(this);"> 
    <div class="modal-body"> 
    <p style="color:#000;">Service Name:</p> 
    <input type="text" class="form-control" required readonly name="bookId" value="" style="color:#000;"> 
    <p style="color:#000;">Full Name:</p> 
    <input type="text" class="form-control" required name="name" value="" style="color:#000;"> 
    <p style="color:#000;">Email Address:</p> 
    <input type="email" class="form-control" required name="email" value="" style="color:#000;"> 
    <p style="color:#000;">Mobile Number:</p> 
    <input type="tel" class="form-control" required name="mno" value="" style="color:#000;"> 
    <p style="color:#000;">Message:</p> 
    <textarea name="msg" class="form-control" required style="color:#000;">I am interested in your service. Please contact me back on email/phone.</textarea> 
    <p style="color:#000;">Address:</p> 
    <textarea name="address" class="form-control" required   style="color:#000;"></textarea> 
    <p style="color:#000;">Captcha:</p> 
    <input type="text" class="txtCaptcha" id="txtCaptcha1" style="background-image:url(1.jpg); text-align:center; border:none;font-weight:bold; font-family:Modern"> 
    <input type="button" value="Refresh" onclick="DrawCaptcha();"> 
    <input type="text" id="txtInput"> 


    </div> 
    <div class="modal-footer"> 
    <button type="submit" name="submit1" class="btn btn-default col-md-3">Submit</button> 
    <button type="button" class="btn btn-default col-md-3" data-dismiss="modal">Close</button> 
    </div> 
    </form> 
</div> 
</div> 
</div> 
<!-------------Task Modal End--------------------- -->