a href将相同的值传递给模态

Question

我正在为我的网站使用wordpress，我想在我现有的wordpress网站上添加一个新模块。我从后端上传了一些pdf文件。许多未知的观众下载它。但主要的是，需要知道谁下载它。对于这个问题，我添加了一个模块，当我们点击文件链接时，它有一个模态，有一些详细信息，如姓名，电话，电子邮件ID和带验证码的文件名。我使用cptui，自定义字段和acf转发器上传文件。但是href没有将onclick值传递给模块表单字段。

这里是文件循环代码：

<?php
    /**
     * Template Name: Downloads
     *
     * @package WordPress
     * @subpackage Twenty_Fourteen
     * @since Twenty Fourteen 1.0
     */

    get_header(); ?>
    <script  src="https://code.jquery.com/jquery-3.0.0.js" integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo=" crossorigin="anonymous"></script>
    <script src='https://www.google.com/recaptcha/api.js'></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.js"></script>
        <!-- InstanceEndEditable -->
        <script language="JavaScript" type="text/javascript">
     function isempty(elem,errmsg)
     {
      with(elem)
      {
       if((value.length==0) || (value==""))
       {
        alert(errmsg);
        return false;
       }
       else { return true;}
      }
     }

     function validmail(id,errmsg)
     {
      with(id)
      {
       at=value.indexOf("@");
       dot=value.lastIndexOf(".");

       if(at<1 || (dot-at)<2 )
       {
        alert(errmsg);
        return false;
       }
       else { return true;}   
      }
     }


     function formvalidation(thisform)
     {
      with(thisform)
      {
       if(isempty(name,"Enter the Name!")==false)
       {
        name.focus();
        return false;
       }

       else if(isempty(email,"Enter E-mail id!")==false)
       {
        email.focus();
        return false;
       }

       else if(validmail(email,"Invalid E-mail id!")==false)
       {
        email.focus();
        return false;
       }



       else if(isempty(phone,"Enter the Phone Number!")==false)
       {
        phone.focus();
        return false;
       }  

    else if(phone.value.length !== 10) {
        window.alert("Phone number must be 10 digits.");
        phone.focus();
        return false;
    }
        else if(isempty(address,"Enter Address!")==false)
       {
        address.focus();
        return false;
       }

      else if(isempty(enquiry,"Enquiry!")==false)
       {
        enquiry.focus();
        return false;
       }

      }
     }



     function valNumeric(evt) 
        {            

            var charCode = (evt.which) ? evt.which : event.keyCode
             if (charCode > 31 && (charCode < 48 || charCode > 57))
             {
              alert("Enter Only Numbers")
                return false;
             }

             return true;
        }

          <!--Function to accept only Alphabet values-->           
            function ValidateAlpha(evt)
            {
                var keyCode = (evt.which) ? evt.which : event.keyCode

                if ((keyCode < 65 || keyCode > 90) && (keyCode < 97 || keyCode > 122) && (keyCode !=32 && keyCode !=08))
                {
                alert("Enter Only Alphabets");
                 return false;
                }
                    return true;

            }

    $('myModal').on('show.bs.modal', function (event) {
      var a = $(event.relatedTarget) // Button that triggered the modal
      var recipient = a.data('whatever') // Extract info from data-* attributes
      // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
      // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
      var modal = $(this)
      //modal.find('.modal-title').text(recipient)
      modal.find(filename.value).val(recipient)
    })
    </script>
    <script type="text/javascript">
    function updateVal(file_url)
    {
      return(file_url); 
      alert(file_url); 
    }   
    document.getElementById('fileurl').value = updateVal(file_url);
    </script>

    <?php session_start();

    if(isset($_POST['Submit'])){
        // code for check server side validation
        if(empty($_SESSION['captcha_code'] ) || strcasecmp($_SESSION['captcha_code'], $_POST['captcha_code']) != 0){  
            $msg="<span style='color:red'>The Validation code does not match!</span>";// Captcha verification is incorrect.     
        }else{// Captcha verification is Correct. Final Code Execute here!      
            $msg="<span style='color:green'>The Validation code has been matched.</span>";      
        }
    }   
    ?>
    <script type='text/javascript'>
    function validateCaptcha()
    {
        if ($('input[name="valid"]')) return true;
        if ($('input[name="recaptcha_response_field"]').val() == "")
        {
            alert("Please complete the CAPTCHA field.");
            return false
        }
    }
    </script>

                <div class="container" id="post-page-cust">
    <?php

        // WP_Query arguments

        $args = array (

            'post_type'              => 'downloads',

            'category_name'          => 'annual-report',
            'order'                  => 'ASC',

        'orderby'                => 'title',


        );

         // The Query

        $query = new WP_Query( $args );



        // The Loop


        if ( $query->have_posts()) {

            while ( $query->have_posts() ) {
            $query->the_post();
                ?>
    <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1> 
    <?php
    if( have_rows('pdf_file') ):?>
    <?php // loop through the rows of data
        while ( have_rows('pdf_file') ) : the_row();
    $file_name = get_sub_field('file_name'); 
     $file_original =  get_sub_field('upload_your_pdf');
     $file_url=$file_original['url'];
            echo'<a title="'.$file_name.'" onclick="updateVal('.$file_url.')" data-toggle="modal" data-target="#myModal" ondata-whatever="'.$file_name.'" href="#myModal">'.$file_name.'</a><br>';

    echo'
      <!-- Modal -->
      <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Entry Form</h4>
            </div>
            <div class="modal-body">
                    <!-- The form is placed inside the body of modal -->
                     <form class="form-horizontal" onSubmit="return formvalidation(this);" action="http://192.146.1.256/download/?page_id=10" method="POST">
    <fieldset>

    <!-- Form Name -->
    <!-- Text input-->
    <div class="form-group">
      <label class="col-md-4 control-label" for="name">Name</label>  
      <div class="col-md-6">
      <input id="uname" type="text" name="uname" placeholder="" onkeypress="return ValidateAlpha(event)" class="form-control input-md" required="">

      </div>
    </div>

    <!-- Text input-->
    <div class="form-group">
      <label class="col-md-4 control-label" for="phone">Phone</label>  
      <div class="col-md-6">
      <input id="phone" type="text" name="phone" placeholder="" class="form-control input-md" onkeypress="return valNumeric(event)" required="">

      </div>
    </div>

    <!-- Text input-->
    <div class="form-group">
      <input type="hidden" name="fileurl" id="fileurl" />
    </div>
    <div class="form-group">
      <label class="col-md-4 control-label" for="email">Email</label>  
      <div class="col-md-6">
      <input id="email" type="email" name="email" placeholder="" class="form-control input-md" required="">

      </div>
    </div>


    <!-- Button -->
    <div class="form-group"><center>
      <div class="col-md-4">
        <button id="submit" onclick="return validate();" name="submit" value="Submit" class="btn btn-primary">Submit</button>
      </div>
    </div>
    </fieldset>
    </form></center>


                    </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>

        </div>
      </div>';
      endwhile;
    else :
        // no rows found
    endif; 
    echo '
    <br><br><br><a style="font-weight:bold" href="http://192.146.1.256/download-sacon/wp-admin/tools.php?page=databasebrowser">Download Tracker</a>
    </div>
    </div>
    </div>';
    ?>
    <?php 

                // You can all phone/ email here
            }
        } 


    ?>
                </div>
    <script>
    $('.modal').on('hidden.bs.modal', function(){
        $(this).find('.form-horizontal')[0].reset();
    });</script>
    <?php ?>
    <?php get_footer(); ?>

Answer 1

找到了这个问题的答案。感谢stackoverflow。[ehttp：//stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal] 这里我的代码供您参考：

echo'
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  </head>
  <body>';
    if ( $query->have_posts()) {

        while ( $query->have_posts() ) {
        $query->the_post();
            ?>
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1> 
<?php
if( have_rows('pdf_file') ):?>
<?php // loop through the rows of data
    while ( have_rows('pdf_file') ) : the_row();
$file_name = get_sub_field('file_name'); 
 $file_original =  get_sub_field('upload_your_pdf');
 $file_url=$file_original['url'];
        echo'
        <a data-toggle="modal" data-target="#addBookDialog" data-id="'.$file_name.'" data-value= "'.$file_url.'"title="Add this item" class="open-AddBookDialog">"'.$file_name.'"</a><br>';
echo'
  <!-- Modal -->
  <div class="modal fade" id="addBookDialog" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Entry Form</h4>
        </div>
        <div class="modal-body">
                <!-- The form is placed inside the body of modal -->
                 <form class="form-horizontal" name="form2" onSubmit="return formvalidation(this);" action="http://192.168.665.665/download-xxx/?page_id=10" method="POST">
<fieldset>
<!-- Form Name -->
<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="name">Name</label>  
  <div class="col-md-6">
  <input id="uname" type="text" name="uname" placeholder="" onkeypress="return ValidateAlpha(event)" class="form-control input-md" required="">
  </div>
</div>
<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="phone">Phone</label>  
  <div class="col-md-6">
  <input id="phone" type="text" name="phone" placeholder="" class="form-control input-md" onkeypress="return valNumeric(event)" required="">
  </div>
</div>
<div class="form-group">
  <label class="col-md-4 control-label" for="email">Email</label>  
  <div class="col-md-6">
  <input id="email" type="email" name="email" placeholder="" class="form-control input-md" required="">
  </div>
</div>
<!-- Text input-->
<div class="form-group">
  <div class="col-md-6">
   <input type="hidden" name="bookId" id="bookId" value="" class="form-control input-md"/>
   </div>
</div>
<div class="form-group">
  <div class="col-md-6">
   <input type="hidden" name="fileUrl" id="fileUrl" value="" class="form-control input-md"/>
   </div>
</div>
<!-- Button -->
<div class="form-group"><center>
  <div class="col-md-4">
    <button id="submit" onclick="return validate();" name="submit" value="Submit" class="btn btn-primary">Submit</button>
  </div>
</div>
</fieldset>
</form></center>
                </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

      <script>
  $(document).ready(function () {
    $(".open-AddBookDialog").click(function () {
        $("#bookId").val($(this).data("id"));
        $("#fileUrl").val($(this).data("value"));
        $("#addBookDialog").modal("show");
    });
}); document.getElementById("#bookId").disabled = true;
</script>

    </div>
  </div>
 '; 
  endwhile;
else :
    // no rows found
endif; 
echo '
<br><br><br><a style="font-weight:bold" href="http://ipaddress/download/wp-admin/tools.php?page=databasebrowser">Download Tracker</a>
</div>
</div>
</div>';
?>
<?php 
            // You can all phone/ email here
        }
    } 
?>
            </div>
<?php 
echo '
</body>
</html>'; ?>