I am using wordpress for my site and i want to add a new module to my existing wordpress site. I upload some pdf files from the backend. Many unknown viewer download it. But main thing is , need to know who download it. For this issue i added a module which has a modal when we click the file link, have some details like name, phone, email id and filename with captcha. i upload the files using cptui, custom fields and acf repeater. But a href doesnt passes the onclick value to the module form field.
Here file loop code:
<?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">×</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(); ?>
