We Keep Coding

Edit PDF form html and JS

enter image description here
hallo please help me...
I'm working on an electronic signature application using the API, now here I have a pdf that will be sent to the API for signature, how do I get this logo image to enter the pdf iframe when dragging?, here I use pure javascript for such draggable images and coordinate x,y..
This form acts to the controller and the contents of the controller are directly posted to the API.
if you can't?, is there an open source for editing pdf?, I'm looking for these plugins mostly paid.
and is there any suggestion to edit the pdf?
an example of the form I use with javascript
#section('content')
<form action="{{ route('surat.sign', $surat->surat_tte_id) }}" method="POST" enctype="multipart/form-data">
#csrf
<!-- ROW-1 OPEN -->
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="mb-0 card-title"> Sign Surat Tanda Tangan Elektronik </h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="form-label"> Nik </label>
<input type="text" class="form-control" name="nik" placeholder="" value="{{ Auth::user()->nik }}" required readonly>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label"> Name </label>
<input type="text" class="form-control" placeholder="" value="{{ Auth::user()->name }}" readonly>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label"> Pasphrase </label>
<input type="password" class="form-control" name="pasphrase" placeholder="Masukan Pasphrase Wajib diisi" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label"> Pilih Jenis Tanda Tangan </label>
<select class="form-control select2-show-search" data-placeholder="Pilih Jenis Tanda Tangan" name="tampilan" required>
<option label="Pilih Jenis Tanda Tangan"></option>
<option value="visible"> Visible </option>
<option value="invisible"> Invisible </option>
</select>
#error('tampilan')
<div class="invalid-feedback">{{ $message }}</div>
#enderror
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label"> QRCode </label>
<input type="text" class="form-control" name="linkQR" placeholder="QRCode">
</div>
<span class="text-danger">*) jika menggunakan gambar visible, QRCode Boleh Tidak Diisi | Jika dipakai silakan diisi </span>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label"> Pilih Jenis Image </label>
<select class="form-control select2-show-search" data-placeholder="Pilih Jenis Image" name="image">
<option label="Pilih Jenis Image"></option>
<option value="true"> True </option>
<option value="false"> False </option>
</select>
#error('image')
<div class="invalid-feedback">{{ $message }}</div>
#enderror
<span class="text-danger">*) jika false, linkQR harus di isi </span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label"> Page/Halaman </label>
<input type="text" class="form-control" placeholder="Halaman" value="" name="page" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label"> Kordinat X </label>
<input type="text" class="form-control" placeholder="Jika menggunakan Visible, Kordinat Posisi Gambar automatis" value="" name="xAxis" id="resultsX" readonly>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label"> Kordinat Y </label>
<input type="text" class="form-control" placeholder="Jika menggunakan Visible, Kordinat Posisi Gambar automatis" value="" name="yAxis" id="resultsY" readonly>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label"> Height Gambar </label>
<input type="text" class="form-control" placeholder="Jika menggunakan Visible, height gambar contoh 500" value="" name="yAxis" maxlength="3">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label"> Width Gambar </label>
<input type="text" class="form-control" placeholder="Jika menggunakan Visible, height gambar contoh 500" value="" name="yAxis" maxlength="3">
</div>
</div>
<div class="col-lg-6">
<div class="card shadow">
<div class="card-header">
<h3 class="mb-0 card-title">Image</h3>
</div>
<div id="uploader" onclick="$('#filePhoto').click()">
<img src="" id="box"/>
</div>
<input type="file" name="imageTTD" id="filePhoto" />
<span class="text-danger">*) jika menggunakan gambar visible, QRCode Boleh Tidak Diisi | Gambar jpg,jpeg,png </span>
</div>
</div>
<div class="col-md-12">
#if($surat->file == null)
<p> surat anda belum di cetak, silakan cetak di menu verifikasi</p>
#else
<input type="file" class="form-control" name="file" value="{{ $surat->file }}" style="display:none;"/>
<iframe src="{{ asset('storage/surat/'.$surat->file) }}" type="application/pdf" style="width: 100%; height: 900px; padding: 0;"></iframe>
#endif
</div>
</div>
</div>
<div class="card-footer">
<i class="fa fa-arrow-left"></i> Kembali
<button type="submit" class="btn btn-outline-success">Simpan <i class="fa fa-send"></i></button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
#endsection
#section('js')
<!-- SELECT2 JS -->
<script src="{{ URL::asset('assets/plugins/select2/select2.full.min.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/fileuploads/js/fileupload.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/fileuploads/js/file-upload.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
// Select2
$('.select2').select2({
minimumResultsForSearch: Infinity
});
// Select2 by showing the search
$('.select2-show-search').select2({
minimumResultsForSearch: ''
});
</script>
<!-- X dan Y TTD -->
<script type="text/javascript">
var coordinates = function(element) {
element = $(element);
var top = element.position().top;
var left = element.position().left;
$('#resultsX').val('X: ' + left);
$('#resultsY').val('Y: ' + top);
}
$('#box').draggable({
start: function() {
coordinates('#box');
},
stop: function() {
coordinates('#box');
}
});
</script>
<!-- drag and drop gambar -->
<script type="text/javascript">
var imageLoader = document.getElementById('filePhoto');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e) {
var reader = new FileReader();
reader.onload = function (event) {
$('#uploader img').attr('src',event.target.result);
}
reader.readAsDataURL(e.target.files[0]);
}
var dropbox;
dropbox = document.getElementById("uploader");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
//you can check e's properties
//console.log(e);
var dt = e.dataTransfer;
var files = dt.files;
//this code line fires your 'handleImage' function (imageLoader change event)
imageLoader.files = files;
}
</script>
#endsection

How to valid checkbox in a form

I have a basic question but i can't find the solution .
how can i force my user to check the box : accept the condition ? (j'acceptes les conditions d'utilisations = i agree terms & conditions )
here is a pictures of my form :
here is my HTML:
<section id="formDom">
<form class="column g-3 needs-validation" novalidate>
<div class="col-md-4">
<label for="validationCustom01" class="form-label">Nom</label>
<input type="text" class="form-control" placeholder="Dupont" id="firstName" required>
<div class="valid-feedback">
Ok
</div>
</div>
<div class="col-md-4">
<label for="validationCustom01" class="form-label">prénom</label>
<input type="text" class="form-control" placeholder="Jean" id="lastName" required>
<div class="valid-feedback">
Ok
</div>
</div>
<div class="col-md-4">
<label for="validationCustomUsername" class="form-label">Adresse mail</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">#</span>
<input type="email" class="form-control" id="email" aria-describedby="inputGroupPrepend"
placeholder="jeandupont#gmail.com" required>
<div class="invalid-feedback">
Adresse mail requise
</div>
</div>
</div>
<div class="col-md-4">
<label for="validationCustom01" class="form-label">Ville</label>
<input type="text" class="form-control" placeholder="Paris" id="city" required>
<div class="valid-feedback">
Ok
</div>
</div>
<div class="col-md-4">
<label for="validationCustom03" class="form-label">Adresse</label>
<input type="text" class="form-control" placeholder="1 rue de Paris" id="adress" required>
<div class="invalid-feedback">
adresse réquise
</div>
</div>
<div class="col-md-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
J'accepte les conditions d'utilisations
</label>
<div class="invalid-feedback">
Vous devez accepteer les conditions d'utilisations
</div>
</div>
</div>
<div class="col-md-4">
<button id="buyBtn" class="btn btn-primary basket-btn" type="submit">Acheter</button>
</div>
</form>
</section>
Actually the user is forced to fill the form but he can submit without check the box ( accept condition )
Here is the JS :
function validForm() {
const form = document.querySelector('.needs-validation');
form.addEventListener('submit', function (event) {
event.preventDefault();
event.stopPropagation();
cameraIds = getBasket().map(item => { return item.id });
const contact = {
email: document.getElementById("email").value,
firstName: document.getElementById("firstName").value,
lastName: document.getElementById("lastName").value,
city: document.getElementById("city").value,
address: document.getElementById("adress").value,
}
createOrder(contact, cameraIds, (order, error) => {
if (error) {
alert('Merci de remplir le formulaire');
} else {
localStorage.clear();
location.assign(`confirmation.html?id=${order.orderId}`)
}
form.classList.add('was-validated');
})
})
}
validForm();
PS : i'm using BOOTSTRAP but i think you got it ^^

if(document.getElementById('invalidCheck').checked==true)
//you'r accepted the terms
else
//you should accept the terms

You can check if a checkbox is checked or not by testing the checked property of the input element:
var isChecked = document.querySelector('input[type="checkbox"]').checked;
if(!isChecked) {
alert("You must accept the terms before proceeding");
}
In your case, it will be:
var isChecked = document.querySelector('.needs-validation .form-check-input').checked;

You can check for document.getElementById("").checked

how to give bold styles to jquery variables

<div class="col-md-5 formdiv">
<h4 class="form-title1">Private Comment Generator</h4>
<form id="form" class="private-comments-form">
<div class="row">
<div class="col-xs-6 form-group">
<label for="sel1">Vendor :</label>
<input class="form-control" type="text" style="font-weight:bold;" id="textbox3" />
</div>
<script>
$(document).ready(function() {
$("#commentscopyBtn").click(function() {
var ven =$("#textbox3").val();
var prod =$("#textbox4").val();
var text = "Thank you for " + $("#textbox3").val() + " " ;
text += $("#textbox4").val() + "\ you can call into our support line." ;
$("#output").val(text);
});
$('#btn').click(function() {
/*Clear textarea using id */
$('#output').val('');
/*Clear all input type="text" box*/
$('#form input[type="text"]').val('');
});
});
</script>
<div class="col-xs-6 form-group">
<label for="sel1">Product :</label>
<input class="form-control" type="text" style="font-weight:bold;" id="textbox4"/>
</div>
<div class="col-xs-6 form-group">
<label for="sel1"> </label>
<input class="form-control js-textareacopybtn" id="commentscopyBtn" type="button" value="Get Content" />
</div>
<div class="col-xs-12 form-group">
<label for="sel1">Copy Content :</label>
<textarea class="col-xs-12 js-copytextarea" id="output" name="textarea" ></textarea>
</div>
<div class="col-xs-12 form-group">
<input type="button" class="reset " id="btn" value="Reset" />
</div>
</div>
</form>
</div>
Here I'm appending the values from text fields to TextArea, I want to add the bold style for that variable to highlight those values, please suggest a solution.
I want to know how to add a style for the appended text.

Give <b> for the text in variable before you append

validation form with regex while using Javascript

i'm trying to validate my bootstrap form with regex in javascript. I've started the javascript but don't know the right way to continue the validation with my regular expression. I'm trying to validate every input in my form before submitting it.
If anyone could help me with my issue it would be appreciated.
Thank you very much in advance.
In javascript no Jquery please
John Simmons
HTML (This is my html bootstrap form)
<div class="col-md-6">
<div class="well well-sm">
<form class="form-horizontal" id="form" method="post" onsubmit="return validerForm(this)">
<fieldset>
<legend class="text-center header">Contact</legend>
<div class="form-group">
<div class="col-md-10 col-md-offset-1">
<input id="lastName" name="LN" type="text" placeholder="Nom" autofocus class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-1">
<input id="firstName" name="FN" type="text" placeholder="Prenom" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-1">
<input id="email" name="email" type="text" placeholder="Courriel" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-1">
<input id="phone" name="phone" type="text" placeholder="Téléphone" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-1">
<textarea class="form-control" id="message" name="Message" placeholder="Entrez votre message. Nous allons vous répondre le plus tôt que possible." rows="7"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
<input class="btn btn-primary btn-lg" type="reset" onclick="clearForm()" value="Clear">
</div>
</div>
</fieldset>
</form>
</div>
</div>
Javascript (this is my javascript with my regexs, I was thinking about doing a function that would verify every value entered with the regex)
var nameregex = /(^[A-Z][a-z]{1,24})+$/;
var emailregex= /^([A-Za-z])([A-Za-z0-9])+\#([a-z0-9\-]{2,})\.([a-z]{2,4})$/;
function validerForm(form) {
window.onload = function(){
document.getElementById('lastName').focus();
}
var valName = Formulaire.name.value;
var valFirst = Formulaire.firstname.value;
var valEmail = Formulaire.email.value;
var nameValide = validationName(valName);
var firstValide = validationFirstName(valFirst);
var emailValide - validationEmail(valEmail);
}
function validationName(valName){
if(nameregex.test(valName) == true){
}else{
}
}
function clearForm() {
document.getElementById("form").reset();
}

You may use string.match()
i.e.: if (valEmail.match(emailregex)) { do stuff!; }

Jquery load() makes page refresh

I've got a very simple script, by pressing on a button an other PHP script needs to be loaded(not redirected but loaded in a div in that page). Now everything is working just fine, but one little problem remains.
The page is refreshing out of itself, I don't know if it's because of the function load or because the button is in a form?
My HTML code:
<div class="widget">
<!-- Widget title -->
<div class="widget-head">
<div class="pull-left">Poll</div>
<div class="widget-icons pull-right">
<i class="fa fa-chevron-up"></i>
<i class="fa fa-wrench"></i>
<i class="fa fa-times"></i>
</div>
<div class="clearfix"></div>
</div>
<div class="widget-content">
<!-- Widget content -->
<div class="padd">
<p>U kunt hier de <strong>polls beheren</strong> die onder andere worden weergeven op de homepagina van
<?php echo $site[ 'name']; ?>
</p>
<hr />
<form method="post" class="form-horizontal" role="form" action="poll">
<div class="form-group">
<label class="control-label col-sm-1" for="name">Poll naam:</label>
<div class="col-sm-11">
<input type="text" name="poll-name" id="poll-name" class="form-control" value="" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1" for="question">Poll vraag:</label>
<div class="col-sm-11">
<input type="text" name="poll-question" id="poll-question" class="form-control" value="" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1" for="option1">Optie 1:</label>
<div class="col-sm-11">
<input type="text" name="poll-option1" id="poll-option1" class="form-control" value="" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1" for="option2">Optie 2:</label>
<div class="col-sm-11">
<input type="text" name="poll-option2" id="poll-option2" class="form-control" value="" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1" for="option1">Optie 3:</label>
<div class="col-sm-11">
<input type="text" name="poll-option3" id="poll-option3" class="form-control" value="" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1" for="option1">Optie 4:</label>
<div class="col-sm-11">
<input type="text" name="poll-option4" id="poll-option4" class="form-control" value="" />
</div>
</div>
<div class="form-group">
<div class="col-sm-2">
<button type="submit" name="poll-submit" id="poll-submit" class="btn btn-danger"><i class=""></i> Poll toevoegen</button>
</div>
<div class="col-sm-12">
<div class="pull-right">
<button type="submit" name="poll-list" id="poll-list" class="btn btn-primary"><i class=""></i> Poll lijst</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="widget" style="display: none;" id="widget2">
<!-- Widget title -->
<div class="widget-head">
<div class="pull-left">Poll-lijst</div>
<div class="widget-icons pull-right">
<i class="fa fa-chevron-up"></i>
<i class="fa fa-wrench"></i>
<i class="fa fa-times"></i>
</div>
<div class="clearfix"></div>
</div>
<div class="widget-content">
<!-- Widget content -->
<div class="padd" id="padd2">
</div>
</div>
</div>
My JS code:
/* Dit is een aparte JS bestand, dit heeft geen PHP handler. Dit include wel een PHP bestand om te poll lijst op te halen. */
$('#poll-list').click(function() {
$('#widget2').show('fast');
// Pagina inladen.
$('#padd2').load('poll-list.php', function() {
noty({
text: 'De poll lijst is succesvol ingeladen'
});
});
});
So I know everything is working fine because the div is showing itself on the page(http://prntscr.com/72yu6q)
But after 2 seconds the page is refreshing, and the button hasn't been clicked so the div is not showing.
Thank you in advance, also my apologies for any bad grammar or spelling mistakes!

Using <button type="submit"> creates a button that submits the form when clicked, causing the browser to load the form's action page (here, 'poll'). You can prevent this with jQuery as in erkaner's answer, or you can not make it a submit button in the first place. <button type="button"> won't do anything unexpected.

Can you add event.preventDefault():
$('#poll-list').click(function(event){
event.preventDefault();
})

Wrap everything in $(document).ready() function
$( document ).ready(function() {
console.log( "ready!" );
});