Submitting Form Without All inputs
-
Hi guys.
This form has a teeth section that my client doesnt want anymore.
I have tried to remove the HTML of the teeth and also the error handling underneath it but there seems to be another area where the form still says not enough data to be submitted.
Any ideas where to look?Here is the code im working with Starting with the form and teeth section:
<form novalidate action="<?php echo admin_url('admin-ajax.php'); ?>" class="dropzone" name="createProject"id="createProject" method="post" enctype="multipart/form-data" multiple> <input type="hidden" name="action" value="patient_ref_form" id="action" /> <div class="teeth_block "> <span class="teeth">8 <input type="checkbox" id="" value="8" name="teeth1[]" ></span> <span class="teeth">7 <input type="checkbox" id="" value="7" name="teeth1[]"></span> <span class="teeth">6 <input type="checkbox" id="" value="6" name="teeth1[]"></span> <span class="teeth">5 <input type="checkbox" id="" value="5" name="teeth1[]"></span> <span class="teeth">4 <input type="checkbox" id="" value="4" name="teeth1[]"></span> <span class="teeth">3 <input type="checkbox" id="" value="3" name="teeth1[]"></span> <span class="teeth">2 <input type="checkbox" id="" value="2" name="teeth1[]"></span> <span class="teeth">1 <input type="checkbox" id="" value="1" name="teeth1[]"></span> </div>———————————–
Thats the Html of the teethError Handling part is here I have tried deleting the teeth[1] section but there was still something else stopping the form submitting – presumably because not enough data:
Dropzone.options.createProject = { addRemoveLinks: true, autoProcessQueue: false, parallelUploads: 10, maxFiles: 10, previewsContainer: ".dropzone-previews", dictDefaultMessage: '', clickable: '.upload-box', uploadMultiple:true, paramName:"picture", init: function() { var myDropzone=this; jQuery("#patient_submit").on('click',function(e) { console.log(validFrom()); if(validFrom()){ e.preventDefault(); e.stopPropagation(); var count= myDropzone.files.length; var empty_vals = 1; if(count > 0) { jQuery("#patient_submit").attr('disabled',true); myDropzone.processQueue(); } else { jQuery("#patient_submit").attr('disabled',true); myDropzone.uploadFiles([{name:'nofiles'}]); //send empty } } else{ return false } }); this.on('addedfile', function(file){ //jQuery('.upload-box').hide(); }); this.on('success', function(file){ var data = file.xhr.response; var response = JSON.parse(data); //console.log(response); if(response['status'] == 1){ jQuery('.error').html(''); jQuery('.error').hide(); jQuery(".callback-msg").removeClass('callback-error'); jQuery(".callback-msg").addClass('callback-success'); jQuery(".callback-msg").html(response['msg']); jQuery(".callback-msg").show(); jQuery("#createProject")[0].reset(); jQuery("#patient_submit").attr('disabled',false); setTimeout(function(){ location.reload(); },3000); } else if(response['status'] == 2){ jQuery('.error').html(''); jQuery('.error').hide(); for(var x in response['error']){ jQuery('.'+x).html(response['error'][x]); jQuery('.'+x).show(); } jQuery("#patient_submit").attr('disabled',false); } else if(response['status'] == 3){ jQuery('.error').html(''); jQuery('.error').hide(); jQuery(".callback-msg").addClass('callback-error'); jQuery(".callback-msg").removeClass('callback-success'); jQuery(".callback-msg").html(response['msg']); jQuery(".callback-msg").show(); jQuery("#patient_submit").attr('disabled',false); } }); } } jQuery(".teeth").on('click',function(){ jQuery(this).find('input[type=checkbox]').prop("checked", !$(this).find('input[type=checkbox]').prop("checked")); if(jQuery(this).hasClass("teeth_activ")) jQuery(this).removeClass("teeth_activ"); else jQuery(this).addClass("teeth_activ"); }); jQuery('.error').hide(); function validFrom(){ var error = true; jQuery('.error').html(''); jQuery('.error').hide(); jQuery('#createProject input[type="text"],#createProject select,#createProject textarea').each(function(index, element) { console.log(jQuery(this).val(),element); var attr = jQuery(this).attr("name"); if(jQuery(this).val().trim() == ""){ jQuery('.'+attr+'_error').html("This field is required"); jQuery('.'+attr+'_error').show(); error = false; } if(attr == "patient_email" || attr == "dentist_email"){ error = validateEmail(jQuery(this).val().trim(),attr) == true?error:false; } }); var fields = $("input[name='teeth1[]']").serializeArray(); if (fields.length === 0) { jQuery('.teeth1_error').html("Teeth1 section is required"); jQuery('.teeth1_error').show(); error = false; }As a bonus here is the plugin file that uses the info..
<?php global $wpdb; $query = "SELECT * FROM wp_posts WHERE post_type='patient_referral' AND ID=".$_GET['id']." ORDER BY id DESC"; if(count($wpdb->get_results($query))>0){ $result_form = $wpdb->get_results($query,ARRAY_A); } ?> <div class="wrap gallery-wrap"> <h1>Referral Form Details</h1> <div class="container admin_container"> <div class="row"> <div class="col-md-12"> <?php if($result_form){ foreach($result_form as $data){ $image = explode(",",get_post_meta($data['ID'],'xray_attachment',true)); foreach($image as $value){ $file_details .= "<p><img src=".$value." height=250 width=300 /></p>"; } echo ' <table id="ST_TABLE" class="table table-striped" > <tr><th colspan="2">Patient Details</th></tr> <tr> <td style="">Patient Title</td> <td>'.ucfirst($data['post_title']).'</td> </tr> <tr> <td>Patient Name</td> <td>'.ucfirst(get_post_meta($data['ID'],'patient_name',true)).'</td> </tr> <tr> <td>Address</td> <td>'.ucfirst(get_post_meta($data['ID'],'patient_address',true)).'</td> </tr> <tr> <td>Contact Number</td> <td>'.ucfirst(get_post_meta($data['ID'],'patient_phone',true)).'</td> </tr> <tr> <td>Email Address</td> <td>'.ucfirst(get_post_meta($data['ID'],'patient_email',true)).'</td> </tr> <tr> <td >Date of Birth</td> <td >'.ucfirst(get_post_meta($data['ID'],'patient_dob',true)).'</td> </tr> <tr> <td > Additional Information </td> <td >'.ucfirst(get_post_meta($data['ID'],'additional_info',true)).'</td> </tr> <tr> <td>Reason for referral</td> <td > <p>Tooth Number 1 = '.ucfirst(get_post_meta($data['ID'],'teeth1',true)).'</p> <p>Tooth Number 2 = '.ucfirst(get_post_meta($data['ID'],'teeth2',true)).'</p> <p>Tooth Number 3 = '.ucfirst(get_post_meta($data['ID'],'teeth3',true)).'</p> <p>Tooth Number 4 = '.ucfirst(get_post_meta($data['ID'],'teeth4',true)).'</p> </td> </tr> <tr> <td >Enter the details for each tooth or type your own referral reason</td> <td >'.ucfirst(get_post_meta($data['ID'],'comments',true)).'</td> </tr> <tr> <td > Post Space</td> <td >'.ucfirst(get_post_meta($data['ID'],'post_space',true)).'</td> </tr> <tr> <td >Would you like us to contact you to further discuss this referral?</td> <td >'.ucfirst(get_post_meta($data['ID'],'contact_like',true)).'</td> </tr> <tr> <td > X-ray Attachment</td> <td >'.$file_details.'</td> </tr> </table> <table class="table table-striped" > <tr><th colspan="2">Dentist / Practitioner Details</th></tr> <tr> <td >Name</td> <td >'.ucfirst(get_post_meta($data['ID'],'dentist_name',true)).'</td> </tr> <tr> <td >Email Address</td> <td >'.ucfirst(get_post_meta($data['ID'],'dentist_email',true)).'</td> </tr> <tr> <td >Practice Name</td> <td >'.ucfirst(get_post_meta($data['ID'],'dentist_practice',true)).'</td> </tr> <tr> <td >Would you like a copy of this referral emailed to you?</td> <td >'.ucfirst(get_post_meta($data['ID'],'copy_email',true)).'</td> </tr> <tr> <td >Would you like a copy of this referral emailed to your patient?</td> <td >'.ucfirst(get_post_meta($data['ID'],'patient_referal',true)).'</td> </tr> <tr> <td >Have you referred to our practice before?</td> <td >'.ucfirst(get_post_meta($data['ID'],'practice',true)).'</td> </tr> <tr> <td >Has the appointment been arranged?</td> <td >'.ucfirst(get_post_meta($data['ID'],'appoinment_arrange',true)).'</td> </tr> <tr> <td >Preferred Location</td> <td >'.ucfirst(get_post_meta($data['ID'],'prefer_location',true)).'</td> </tr> <tr> <td >How would you like your report sent back to you?</td> <td >'.ucfirst(get_post_meta($data['ID'],'report_sent',true)).'</td> </tr> </table> '; } } else{ echo '<h3 class="acupt_error">No Records Found</h3>';} ?> </div> <div class="loader "></div> </div> </div> </div> <style> .loadinggif { background:url('images/loadinggifconfig.gif') no-repeat right center; display: inline-block; height: 100vh; vertical-align: middle; width: 100%; position: absolute; top: 0px; /* left: 0%; */ background-color: rgba(0,0,0,0.4); } </style> <script> function delete_details(id){ var result = confirm("Are you sure,Want to delete the record?"); var check = 'acupuncturist'; if(result){ jQuery.ajax({ url:ajaxurl, type:'POST', data:{ action : 'delete_action',postid: id,check : check} , success:function(results) { if(results==10){ alert('Row Deleted'); window.location.href = "admin.php?page=acupuncturist"; } else if(results==0 || results== 2){ alert('Error,Please Try Again'); } } }); } } </script>That may be asking for variables that arent given on deletion of teeth section.
I’m at a loss here as this is quite advanced stuff to me so any info is greatly appreaciated!!!
Thanks
ClaytonThe page I need help with: [log in to see the link]
Viewing 3 replies - 1 through 3 (of 3 total)
-
Hi Guys thankyou for fast responses…
I believe Its just the single page that is responsible for the form.jQuery(document).ready(function() { jQuery('.input-group.date').datepicker({ format: "yyyy/mm/dd", endDate: "2017/02/23" }); Dropzone.options.createProject = { addRemoveLinks: true, autoProcessQueue: false, parallelUploads: 10, maxFiles: 10, previewsContainer: ".dropzone-previews", dictDefaultMessage: '', clickable: '.upload-box', uploadMultiple:true, paramName:"picture", init: function() { var myDropzone=this; //these functions run when submit is clicked jQuery("#patient_submit").on('click',function(e) { console.log(validFrom()); if(validFrom()){ e.preventDefault(); e.stopPropagation(); var count= myDropzone.files.length; var empty_vals = 1; if(count > 0) { jQuery("#patient_submit").attr('disabled',true); myDropzone.processQueue(); } else { jQuery("#patient_submit").attr('disabled',true); myDropzone.uploadFiles([{name:'nofiles'}]); //send empty } } else{ console.log(error); return false } }); this.on('addedfile', function(file){ //jQuery('.upload-box').hide(); }); this.on('success', function(file){ var data = file.xhr.response; var response = JSON.parse(data); //console.log(response); if(response['status'] == 1){ jQuery('.error').html(''); jQuery('.error').hide(); jQuery(".callback-msg").removeClass('callback-error'); jQuery(".callback-msg").addClass('callback-success'); jQuery(".callback-msg").html(response['msg']); jQuery(".callback-msg").show(); jQuery("#createProject")[0].reset(); jQuery("#patient_submit").attr('disabled',false); setTimeout(function(){ location.reload(); },3000); } else if(response['status'] == 2){ jQuery('.error').html(''); jQuery('.error').hide(); for(var x in response['error']){ jQuery('.'+x).html(response['error'][x]); jQuery('.'+x).show(); } jQuery("#patient_submit").attr('disabled',false); } else if(response['status'] == 3){ jQuery('.error').html(''); jQuery('.error').hide(); jQuery(".callback-msg").addClass('callback-error'); jQuery(".callback-msg").removeClass('callback-success'); jQuery(".callback-msg").html(response['msg']); jQuery(".callback-msg").show(); jQuery("#patient_submit").attr('disabled',false); } }); } } jQuery(".teeth").on('click',function(){ jQuery(this).find('input[type=checkbox]').prop("checked", !$(this).find('input[type=checkbox]').prop("checked")); if(jQuery(this).hasClass("teeth_activ")) jQuery(this).removeClass("teeth_activ"); else jQuery(this).addClass("teeth_activ"); }); jQuery('.error').hide(); function validFrom(){ var error = true; jQuery('.error').html(''); jQuery('.error').hide(); jQuery('#createProject input[type="text"],#createProject select,#createProject textarea').each(function(index, element) { console.log(jQuery(this).val(),element); var attr = jQuery(this).attr("name"); if(jQuery(this).val().trim() == ""){ jQuery('.'+attr+'_error').html("This field is required"); jQuery('.'+attr+'_error').show(); error = false; } if(attr == "patient_email" || attr == "dentist_email"){ error = validateEmail(jQuery(this).val().trim(),attr) == true?error:false; } }); var fields = $("input[name='additional_info[]']").serializeArray(); if (fields.length === 0) { jQuery('.additional_info_error').html("This field is required"); jQuery('.additional_info_error').show(); error = false; } var fields = $("input[name='teeth1[]']").serializeArray(); if (fields.length === 0) { jQuery('.teeth1_error').html("Teeth1 section is required"); jQuery('.teeth1_error').show(); error = false; } var fields = $("input[name='teeth2[]']").serializeArray(); if (fields.length === 0) { jQuery('.teeth2_error').html("Teeth2 section is required"); jQuery('.teeth2_error').show(); error = false; } var fields = $("input[name='teeth3[]']").serializeArray(); if (fields.length === 0) { jQuery('.teeth3_error').html("Teeth3 section is required"); jQuery('.teeth3_error').show(); error = false; } var fields = $("input[name='teeth4[]']").serializeArray(); if (fields.length === 0) { jQuery('.teeth4_error').html("Teeth4 section is required"); jQuery('.teeth4_error').show(); error = false; } error = (radioValid('post_space') == true)?error:false; error = (radioValid('contact_like') == true)?error:false; error = (radioValid('report_sent')== true)?error:false; console.log(error); return error; } function radioValid(rname){ console.log(rname); var error = true; if (jQuery("#"+rname+":checked").length == 0){ jQuery('.'+rname+'_error').html("This field is required"); jQuery('.'+rname+'_error').show(); error = false; } return error; } }); </script>
Viewing 3 replies - 1 through 3 (of 3 total)
The topic ‘Submitting Form Without All inputs’ is closed to new replies.