弹出窗口上的验证码

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

＆＃13;

＆＃13;

  //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('');
}

＆＃13;

<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--------------------- -->

＆＃13;

＆＃13;

＆＃13;

您不能多次在表单上使用相同的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--------------------- -->