I used this https://www.itsolutionstuff.com/post/laravel-signature-pad-example-tutorialexample.html to create a signature pad. I am looking for a way to add an option to upload a signature or use the pad to draw a signature.
Here's what I wrote:
Laravel Blade Code
<form method="POST" action="{{ route('signaturepad.upload') }}">
<div class="tab-content">
<div class="tab-pane fade show active" id="draw">
<div class="col-md-12">
<label class="" for="">Draw Signature:</label>
<br/>
<div id="sig"></div>
<br><br>
<button id="clear" class="btn btn-danger">Clear Signature</button>
{{--<button class="btn btn-success">Save</button>--}}
<textarea id="signature" name="signature" style="display: none"></textarea>
</div>
</div>
<div class="tab-pane fade" id="upload">
<label class="" for="">Upload Signature:</label>
{{--<div class="form-group"></div>
<input type="file" name="file" id="file" required>--}}
{{--<button type="submit">Submit</button>--}}
</div>
<button class="btn btn-success">Save</button>
</div>
</form>
Javascript
<script src="{{ asset('js/pages/jquery.signature.js')}}"></script>
<script type="text/javascript">
var sig = $('#sig').signature({syncField: '#signature', syncFormat: 'PNG'});
$('#clear').click(function(e) {
e.preventDefault();
sig.signature('clear');
$("#signature").val('');
});
</script>
Controller
if(!empty($request->input('signature')) || (!empty($request->input('file')))) {
echo $request->signature;
echo $request->file;
dd('passed');
//$folderPath = public_path('uploads/');
//$data_uri = $request->signature;
//$encoded_image = explode(",", $data_uri)[1];
//$decoded_image = base64_decode($encoded_image);
//$file = $folderPath . uniqid();
//file_put_contents($file, $decoded_image);
return view('dashboard');
} else {
//dd('Signature is empty.');
return back()->withErrors(['msg', 'Signature Empty']);
}
Drawing the Signature works when one of the file uploads is commented out. When both are active they don't post and both don't work. My question is how do I work with both where one can either draw or upload the signature. I have tried if statements in the controller to no avail.
Thanks in Advance!
Related
I have 2 image upload forms, when one is uploaded it should show a preview of the uploaded image. However, when I upload an image in one of the input forms, both forms display a preview of the last uploaded image. How do I make the preview only appear on the uploaded form?
Here's my code :
<div class="container">
<form action="save.php" method="post" enctype="multipart/form-data">
<!-- rows -->
<div class="row">
<div class="col-sm-6">
<img src="images/80x80.png" id="preview1" class="img-thumbnail1">
<div class="form-group">
<div id="msg"></div>
<input type="file" name="img1" class="file1" id="file1">
<div class="input-group my-3">
<div class="input-group-append">
<button type="button" id="select_image1" class="browse btn btn-dark">select image</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img src="images/80x80.png" id="preview2" class="img-thumbnail2">
<div class="form-group">
<div id="msg"></div>
<input type="file" name="img2" class="file2" id="file2">
<div class="input-group my-3">
<div class="input-group-append">
<button type="button" id="select_image2" class="browse btn btn-dark">select image</button>
</div>
</div>
</div>
</div>
</div>
<button type="submit" name="btn_save" class="btn btn-success">Save</button>
</form>
</div>
<script>
$(document).on("click", "#select_image1", function() {
var file = $(this).parents().find(".file1");
file.trigger("click");
});
$('input[type="file"]').change(function(e) {
var fileName1 = e.target.files[0].name;
$("#file1").val(fileName1);
var reader = new FileReader();
reader.onload = function(e) {
// get loaded data and render thumbnail.
document.getElementById("preview1").src = e.target.result;
};
// read the image file as a data URL.
reader.readAsDataURL(e.target.files[0]);
});
// 2
$(document).on("click", "#select_image2", function() {
var file2 = $(this).parents().find(".file2");
file2.trigger("click");
});
$('input[type="file"]').change(function(el) {
var fileName2 = el.target.files[0].name;
$("#file2").val(fileName2);
var reader2 = new FileReader();
reader2.onload = function(el) {
// get loaded data and render thumbnail.
document.getElementById("preview2").src = el.target.result;
};
// read the image file as a data URL.
reader2.readAsDataURL(el.target.files[0]);
});
</script>
I've tried changing the script code, but it doesn't work. Please help. Thank you.
I am working on a cms with Codeigniter. I am trying to upload file from system. I am receiving the file but the do_upload method is not working. There are similar questions on this topic, but none of the answers of them worked.
Here is my method:
public function fileupdate($productId=False){
$formData = $this->input->post();
if (isset($formData['activityNewFile'])) {
foreach ($formData['activityNewFile'] as $key => $value) {
$rndNumber = rand(1,500);
$fileLastName = sef_url($formData['activitynewfilename'.$value]);
// Set preference
$config['upload_path'] = '../assets/';
$config['allowed_types'] = 'pdf|doc|docx|xls|xlsx';
$config['max_size'] = '80960'; // max_size in kb
$config['file_name'] = $fileLastName;
$upFile = 'activitynewfile'.$value;
// Load upload library
$this->load->library('upload',$config);
// File upload
if($this->upload->do_upload($upFile)){
// Get data about the file
$uploadData = $this->upload->data();
$filename = $uploadData['file_name'];
$daData = array(
'productId' => $productId,
'productFileName' => $formData['activitynewfilename'.$value],
'productFile' => $filename
);
$productfileInsert = $this->db->insert('productfile',$daData);
}
}
}
$this->success("İşlem tamamlandı.");
}
HTML part:
<form class="m-form m-form--fit m-form--label-align-right" role="form" method="POST" id="product_file_edit" action="<?=base_url('product/product/fileupdate/'.$productInfo->productId);?>" enctype="multipart/form-data" onsubmit="return false; form_gonder('product_file_edit')" >
<div class="modal-body">
<div class="form-group m-form__group row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-md-12" style="margin-bottom: 10px;padding: 0;" id="file_row">
<button onclick="addFileRow('file_add')" class="btn btn-primary btn-sm">
<i class="zmdi zmdi-plus"></i> Add
</button>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button onclick="form_gonder('product_file_edit')" class="btn btn-green btn-sm">
Save
</button>
</div>
</form>
Javascript part:
function addFileRow(tur){
if(tur=="file_add"){
emreFile = Math.floor(Math.random() * 10);
myhtmlFile = '<div class="col-md-12 row" id="filenew'+emreFile+'" style="padding: 0;margin: 0;margin-bottom: 10px;"><div class="input-group"><input type="hidden" name="activityNewFile[]" value="'+emreFile+'"><img src="../assets/file/pdfword.png" style="width: 38px;float: left;height: 38px;"><input type="text" name="activitynewfilename'+emreFile+'" class="form-control" placeholder="Dosya Adı" style="width: 45%;float: left;height: 39px;"><input type="file" name="activitynewfile'+emreFile+'" accept=".xls,.xlsx,.doc,.docx,.pdf" class="form-control" placeholder="Dosya Adı" style="width: 46%;opacity: 1;float: right;position: relative;"><span class="input-group-btn"><button class="btn btn-red btn-fab btn-fab-sm animate-fab" onclick="deleteNewFileRow('+emreFile+')" type="button"><i class="zmdi zmdi-delete"></i></button></span></div></div>';
var icerikFile = myhtmlFile;
jQuery("#file_row").prepend(icerikFile);
}
}
I would be very grateful if you could find out what the problem is.
Your problem is actually the file is not loading properly. There is no error in your codes. Make sure file_uploads is turned on on your server. Make sure the upload_max_filesize value is not smaller than your file size.
I would like to use jquery.dynamiclist library in my procject.
In the demo page that's running smoothly there is a jquery library in version 1.8.2.
In my project I use version 1.11.1 and this makes dynamiclist plugin doesn't work.
With newer version when I process form I get data with names of inputs but without values (I get 'undefined').
Here is the code from demo.
What I have to change to make it run with newer version of jquery?
<form class="form-horizontal">
<h2>Example 1: Basic List</h2>
<div class="control-group">
<label class="control-label">Party</label>
<div class="controls">
<input name="partyName" type="text" placeholder="Party Name">
</div>
</div>
<div class="control-group">
<label class="control-label">Guest List</label>
<div id="example1" class="controls">
<div class="list-item">
<input name="guestList[0].name" type="text" placeholder="Guest Name">
<i class="icon-minus"></i> Remove Guest
</div>
<i class="icon-plus"></i> Add Guest
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" class="btn btn-primary btn-large" value="Process Example 1"/>
</div>
</div>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://github.com/ikelin/jquery.dynamiclist/blob/master/jquery.dynamiclist.min.js"></script>
<script>
(function($) {
$(document).ready(function() {
$("#example1").dynamiclist();
// display form submit data
$("form").submit(function(event) {
event.preventDefault();
var data = "";
$(this).find("input, select").each(function() {
var element = $(this);
if (element.attr("type") != "submit") {
data += element.attr("name");
data += "="
data += element.attr("value");
data += "; "
}
});
alert(data);
location.reload(true);
});
});
})(jQuery);
</script>
Simply change element.attr("value"); to element.val();.
Sorry I had to include the plugin code manually because apparently you cannot include the src directly from github. Also commented the reload for the snippet.
<form class="form-horizontal">
<h2>Example 1: Basic List</h2>
<div class="control-group">
<label class="control-label">Party</label>
<div class="controls">
<input name="partyName" type="text" placeholder="Party Name">
</div>
</div>
<div class="control-group">
<label class="control-label">Guest List</label>
<div id="example1" class="controls">
<div class="list-item">
<input name="guestList[0].name" type="text" placeholder="Guest Name">
<i class="icon-minus"></i> Remove Guest
</div>
<i class="icon-plus"></i> Add Guest
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" class="btn btn-primary btn-large" value="Process Example 1"/>
</div>
</div>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
/* jQuery Dynamic List v 2.0.1 / Copyright 2012 Ike Lin / http://www.apache.org/licenses/LICENSE-2.0.txt */
(function(a){a.fn.dynamiclist=function(d){if(this.length>1){this.each(function(){a(this).dynamiclist(d)});return this}var g=a.extend({itemClass:"list-item",addClass:"list-add",removeClass:"list-remove",minSize:1,maxSize:10,withEvents:false,addCallbackFn:null,removeCallbackFn:null},d);var f=function(o,n,j){var m=o.find("."+j.itemClass).length;if(m<j.maxSize){var l=o.find("."+j.itemClass+":first").clone(j.withEvents);l.find("."+j.removeClass).show().click(function(p){e(o,a(this),p,j)});b(l,m);i(l);var k=o.find("."+j.itemClass+":last");k.after(l);if(j.addCallbackFn!=null){j.addCallbackFn(l)}}if(n!=null){n.preventDefault()}};var e=function(o,k,n,j){var m=o.find("."+j.itemClass).length;var l=k.parents("."+j.itemClass+":first");if(m==j.minSize){i(l)}else{l.remove()}c(o,j);if(j.removeCallbackFn!=null){j.removeCallbackFn(l)}n.preventDefault()};var b=function(j,k){j.find("label, input, select, textarea").each(function(){var m=["class","name","id","for"];for(var n=0;n<m.length;n++){var l=a(this).attr(m[n]);if(l){l=l.replace(/\d+\./,k+".");l=l.replace(/\[\d+\]\./,"["+k+"].")}a(this).attr(m[n],l)}})};var c=function(k,j){k.find("."+j.itemClass).each(function(){var l=k.find("."+j.itemClass).index(this);b(a(this),l)})};var i=function(j){j.find("input[type=text], textarea").val("");j.find("input[type=radio]").attr({checked:false});j.find("input[type=checkbox]").attr({checked:false})};var h=function(k){k.find("."+g.itemClass+":first ."+g.removeClass).hide();var j=k.find("."+g.itemClass).length;while(g.minSize>j){f(k,null,g);j++}k.find("."+g.addClass).click(function(l){f(k,l,g)});k.find("."+g.removeClass).click(function(l){e(k,a(this),l,g)});return k};return h(this)}})(jQuery);
</script>
<script>
(function($) {
$(document).ready(function() {
$("#example1").dynamiclist();
// display form submit data
$("form").submit(function(event) {
event.preventDefault();
var data = "";
$(this).find("input, select").each(function() {
var element = $(this);
if (element.attr("type") != "submit") {
data += element.attr("name");
data += "="
data += element.val();
data += "; "
}
});
alert(data);
//location.reload(true);
});
});
})(jQuery);
</script>
I am new to JavaScript and wanted to know how to display to text-box from the below code. I am having a hard time to transferring the variable encrypted info to a text-box using JavaScript. If that's not possible then how can I display the information from $('#feedback').html(data); to the textbox.
<script>
function encrypt() {
var publickey = "<?=publicKeyToHex($privatekey)?>";
var rsakey = new RSAKey();
rsakey.setPublic(publickey, "10001");
var enc = rsakey.encrypt($('#plaintext').val());
$.get('index.php?encrypted='+enc, function(data) {
var encryptedinfo = $('#feedback').html(data);
encryptedinfo.value;
});
return;
}
</script>
<div class="row-fluid">
<div class="span4">
<form class="form-horizontal" method="post">
<div class="control-group">
<label class="control-label" for="inputEmail">Plaintext</label>
<div class="controls">
<input type="text" name="plaintext" id="plaintext" placeholder="enter something">
</div>
</div>
</form>
</div>
<div class="span4">
<button type="button" class="btn btn-primary" onclick="encrypt()">Encrypt</button>
</div>
<br/>
Assuming you have the encrypted value in the data, you can simply use $("#plaintext").val(data).
I have a html & php code (article) that i need to clone it on the site.
The php variables must have different id on each article.( i have $variablex[n], $variablez[n] where n = must be 1,2,3.....ñ
By default i need to have 7 articles displayed on the site.
And when i press the Load More button to show 2 more+ and so on.
Can i do all the above things ? I mean its possible?
I have created the fiddle : jsfiddle so it can be more understandable.
Forgive my lack of experience with jquery/javascript i am more a HTML/CSS.
Don't do the load two more thing. Just put them all out there.
If you must,Use document.getElementById().style.display = 'none'; (see I added an id to each article) to hide the overflow.
Put your jsfiddle code in a loop that shows all the listings
Add JS to hide the overflow (greater than 7)
If there are more than 7b listings, add a More Button to unhide (.style.display = 'block') the next two listings.
NOTE: It appears you learned you php style from WordPress. Do not do it that way. Use Heredoc syntax for your HTML echo.
Link to PHP Manual: Heredoc Syntax
<?php
$pret1=$hotelPrices[0];
$pretdiscount = $pret1 + ($pret1 * 0.20);
$availability = $checkAvailability->searchId;
echo <<<EOT
<article class="box" data-stars="$StarRating[0] name="$hotelName[0]" data-price="$pretdiscount">
<figure class="col-sm-5 col-md-4">
<a title="" href="https://www.bookingassist.ro/test/html/ajax/slideshow-popup.html" class="hover-effect popup-gallery"><img width="270" height="160" alt="" src="$img[0][1]"></a>
</figure>
<div class="details col-sm-7 col-md-8">
<div><div>
<h4 class="box-title">$hotelName[0]<small><i class="soap-icon-departure yellow-color"></i>$hotelAddress[0], $hotelDestination[0], $Countryl</small></h4>
<div class="amenities">
<i class="soap-icon-wifi circle"></i>
<i class="soap-icon-fitnessfacility circle"></i>
<i class="soap-icon-fork circle"></i>
<i class="soap-icon-television circle"></i>
</div></div><div>
<div class="stars-$StarRating[0]-container">
<span class="stars-$StarRating[0]" style="width: 80%"></span>
</div></div></div>
<div>
<p>Pretul include cazare in camera tip $roomCattegory[0] cu masa tip $boardType[0]</p>
<div>
<span class="price"><small>pret/Sejur</small>€$pretdiscount<br/></span>
<form action="hotel-detailed.php" method="post">
<input type="hidden" name="In" value="$In" />
<input type="hidden" name="Out" value="$Out" />
<input type="hidden" name="hotel" value="$hotelCodes[0]" />
<input type="hidden" name="searchId" value="$availability" /
<input type="hidden" name="Adults" value="$Adults" />
<input type="hidden" name="Childs" value="$Childs" />
<input type="hidden" name="Offer1code" value="$hotelCodes[1]" />
<input type="hidden" name="Offer2code" value="$hotelCodes[2]" />
<input type="hidden" name="Offer3code" value="$hotelCodes[3]" />
<input type="hidden" name="Offer1pret" value="$hotelPrices[1]" />
<input type="hidden" name="Offer2pret" value="$hotelPrices[2]" />
<input type="hidden" name="Offer3pret" value="$hotelPrices[3]" />
<button type="submit"class="button btn-small full-width text-center">Detalii<small></small></button>
</form>
</div></div></div>
</article>
<div id="loadMore"><a class="uppercase full-width button btn-large"> mai multe rezultate</a></div>
EOT;
unset($ratesPerNight);
unset($roomsInfo);
unset($roomResponse);
?>
Change this from:
</article>
<div id="loadMore"><a class="uppercase full-width button btn-large"> mai multe rezultate</a></div>
EOT;
To:
</article>
EOT;
if ($id > 7){
echo <<<EOT
<button onclick="more()">More</button>'
<script type="text/javascript">
//<![CDATA[
var current = 7;
var max = $id;
var articles = document.getElementsByTagName("article");
for (var a = 7,a < articles.length,a++){
articles[a].style.display = 'none';
}
function more(){
if (current < max){current++;articles[current].style.display = 'block';
if (current < max){current++;articles[current].style.display = 'block';
}
//]]></script>
EOT;
}
Each time the More Button is clicked two more articles will appear.