We Keep Coding

Can i use quilljs with php?

i am trying for some days to make this working but i really can't alone..
I want to use quilljs on my project, but because i dont know js, i want to insert data using php.
I found this QuillJS doesn't work with textarea i tryed everything but its just not working.
In the end i created an input hidden but i dont know how to populate it, i need js for that. Please help me.
This is my quill html code.
<form action="test.php" method="post" class="col s12" id="idform">
<div class="row">
<div class="input-field col s12">
<!-- Snow Editor start -->
<section class="snow-editor" >
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s12">
<div id="snow-wrapper">
<div id="snow-container">
<div class="quill-toolbar">
<span class="ql-formats">
<select class="ql-header browser-default">
<option value="1">Heading</option>
<option value="2">Subheading</option>
<option selected>Normal</option>
</select>
</span>
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
</span>
<span class="ql-formats">
<button class="ql-link"></button>
<!-- <button class="ql-image"></button> -->
<button class="ql-video"></button>
</span>
<span class="ql-formats">
<button class="ql-formula"></button>
<button class="ql-code-block"></button>
</span>
</div>
<div class="form-group">
<input name="inputname" type="hidden">
<div id="editor-container" class="editor">
<p><br></p>
<p><br></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Snow Editor end -->
</div>
</div>
<div class="row">
<div class="col s6 m6 l6">
<button id="idbutton" class="waves-effect waves-light btn right" type="submit" name="postbutton">Post</button>
</div>
</div>
</form>
I tryed this, but is not working. It insert on my db but without any info (the input area is not populated).
var form = document.querySelector('form');
form.onsubmit = function() {
// Populate hidden form on submit
var about = document.querySelector('input[name=inputname]');
about.value = JSON.stringify(quill.getContents());
console.log("Submitted", $(form).serialize(), $(form).serializeArray());
// No back end to actually submit to!
alert('Open the console to see the submit data!')
return false;
};

how to submit form on button click

I have a form in which i have two buttons one is save and other is save as draft , so on save i am submiting the form to other servlet and on save as Draft click i want to give action to new servlet class
I am doing <button type="submit" id="saveDraft" formaction="InsertAsDraft"">,but its not working
<div class="container" id="divHide">
<form action="InsertQuantityIndent" method="post" id="indentForm" autocomplete="on">
<div class="row position-relative">
<div class="col-lg-4 brder">
<h5 id="commonHeader">Outlet Name</h5>
<select class="test" id="outlet" name="outlet">
<option>All</option>
<option>ol1</option>
<option>ol2</option>
</select>
</div>
<div class="col-lg-4">
<h5 id="commonHeader">Category</h5>
<select class="test" id="CategoryName" name="categoryCode">
<option>All</option>
<option>Cat1</option>
<option>Cat2</option>
</select>
</div>
</div>
<hr style="border: 1px solid black">
<div>
<button type="submit" id="save" class="commonButton">
<i class="fas fa-save"></i> Save
</button>
<button type="submit" id="saveDraft" formaction="InsertAsDraft" class="commonButton">
<i class="fas fa-save"></i> Save as draft
</button>
</div>
</form>
</div>
when i click on save the form gets submitted to InsertQuantityIndent, but when i click on save as draft it gets submitted but no data gets to back end
Like request.getparameter in servlet
Here is my servlet
String outlet = request.getParameter("outlet");
String CategoryCode= request.getParameter("categoryCode");
System.out.println("outlet in new file :"+outlet);
here it print nothing, so i want to submit form on button click and get that data to back end bye its name

HTML
<div class="container" id="divHide">
<form action="InsertQuantityIndent" method="post" id="indentForm" autocomplete="on">
<div class="row position-relative">
<div class="col-lg-4 brder">
<h5 id="commonHeader">Outlet Name</h5>
<select class="test" id="outlet" name="outlet">
<option>All</option>
<option>ol1</option>
<option>ol2</option>
</select>
</div>
<div class="col-lg-4">
<h5 id="commonHeader">Category</h5>
<select class="test" id="CategoryName" name="categoryCode">
<option>All</option>
<option>Cat1</option>
<option>Cat2</option>
</select>
</div>
</div>
<hr style="border: 1px solid black">
<div>
<button id="save" class="commonButton" data-formAction="servlet">
<i class="fas fa-save"></i> Save
</button>
<button id="saveDraft" data-formAction="InsertAsDraft" class="commonButton">
<i class="fas fa-save"></i> Save as draft
</button>
</div>
</form>
</div>
JavaScript
const formElm = document.getElementById('indentForm');
const saveButton = document.getElementById("save");
saveButton.addEventListener('click', (e) => {
e.preventDefault();
let elm = e.target;
const formAction = elm.dataset.formaction;
console.log(formAction);
formElm.action = formAction;
formElm.submit();
});
const saveDraftButton = document.getElementById("saveDraft");
saveDraftButton.addEventListener('click', (e) => {
e.preventDefault();
let elm = e.target;
const formAction = elm.dataset.formaction;
console.log(formAction);
formElm.action = formAction;
formElm.submit();
});
You can find the working example stackblitz:
https://stackblitz.com/edit/js-qmsnzc

Here you can name buttons and check which value for button came and process accordingly.
<button type="submit" id="save" name="btn_save" class="commonButton">
<i class="fas fa-save"></i> Save
</button>
<button type="submit" id="saveDraft" name="btn_save_draft" class="commonButton">
<i class="fas fa-save"></i> Save as draft
</button>
or you can change type of button to button and handle click listener. From your listener change your form action and submit it using javascript.

JQuery or JavaScript to alert on button click if selection not made

I have a button that when clicked points you to another html page. I am stuck currently on a click event that I am not sure to use javascript or jquery on. Pretty much, when I click and there is no item in the select tag selected, then show the alert pop up. Else, proceed to the normal navigation to the next page. Any feedback is appreciated.
$(document).ready(function() {
$("#showDangerAlert").click(function() {
$(this).show(); $(this).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showDangerAlert" class="alert alert-danger" role="alert" style="text-align: center">
You have not selected a Delivery Option! Please choose one to proceed.
</div>
<select id="colorselector" class="custom-select d-block mb-3">
<option value="red">Select...</option>
<option id="shipToAddress" value="yellow">Ship to Address</option>
<option id="inStorePickup" value="blue">In-Store Pickup</option>
</select>
<div id="yellow" class="colors">
<a href="shoppingCart.html" class="btn btn-primary mx-auto mb-3 cartLink">
Add to Cart
<span class="fa fa-shopping-cart"></span>
</a>
</div>
<div id="blue" class="colors">
<small class="mb-3">You will select your desired store during
<strong>checkout.</strong>
<span>
<a href="#" data-target="#storeListing" data-toggle="modal">
<span class="fa fa-map-marker"></span>
See available stores near you.
</a>
</span>
<a id="inStorePickupRedirect" href="shoppingCart_inStorePickup.html" class="btn btn-primary mx-auto my-3 cartLink">
Add to Cart
<span class="fa fa-shopping-cart"></span>
</a>
</small>
</div>

If there is no option selected then this will alert no option selected
else you can do whatever you want. This same code can work with
JavaScript, just need to change selectors.
$("#btncheck").on("click",function(){
if($("#mySelect")[0].selectedIndex <= 0){
alert("No Option Selected")
} else {
alert("Option Selected")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mySelect">
<option>Select</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
<input type="button" id="btncheck" value="check"/>

$(document).ready(function() {
$('#showDangerAlert').show();
$("#colorselector").change(function() {
var sel = $("#colorselector option:selected").val();
if(sel=='red') {$('#showDangerAlert').show();} else {$('#showDangerAlert').hide();}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showDangerAlert" class="alert alert-danger" role="alert" style="text-align: center">
You have not selected a Delivery Option! Please choose one to proceed.
</div>
<select id="colorselector" class="custom-select d-block mb-3">
<option value="red">Select...</option>
<option id="shipToAddress" value="yellow">Ship to Address</option>
<option id="inStorePickup" value="blue">In-Store Pickup</option>
</select>
<div id="yellow" class="colors">
<a href="shoppingCart.html" class="btn btn-primary mx-auto mb-3 cartLink">
Add to Cart
<span class="fa fa-shopping-cart"></span>
</a>
</div>
<div id="blue" class="colors">
<small class="mb-3">You will select your desired store during
<strong>checkout.</strong>
<span>
<a href="#" data-target="#storeListing" data-toggle="modal">
<span class="fa fa-map-marker"></span>
See available stores near you.
</a>
</span>
<a id="inStorePickupRedirect" href="shoppingCart_inStorePickup.html" class="btn btn-primary mx-auto my-3 cartLink">
Add to Cart
<span class="fa fa-shopping-cart"></span>
</a>
</small>
</div>

You can attach an click event using JQuery and check if the user has done some selection to the select. If user has select something do the navigation using javascript.
$('#button').on('click', function (e) {
if ($('#selector_id').val() != no_selected_value) {
window.location = "/your_page";
} else {
$('#showDangerAlert').show();
}
});
So no_selected_value in your case should be red/yellow or blue.
EDIT
I've done some changes in your code snipped to work as I've explained above.
$(document).ready(function() {
$("#showDangerAlert").hide();
$("#showDangerAlert").click(function() {
$(this).hide();
});
});
$('#button').on('click', function (e) {
if ($('#colorselector').val() != 'red') {
window.location = "/shoppingCart.html";
} else {
$('#showDangerAlert').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showDangerAlert" class="alert alert-danger" role="alert" style="text-align: center">
You have not selected a Delivery Option! Please choose one to proceed.
</div>
<select id="colorselector" class="custom-select d-block mb-3">
<option value="red">Select...</option>
<option id="shipToAddress" value="yellow">Ship to Address</option>
<option id="inStorePickup" value="blue">In-Store Pickup</option>
</select>
<div id="yellow" class="colors">
<button id="button" class="btn btn-primary mx-auto mb-3 cartLink">
Add to Cart
<span class="fa fa-shopping-cart"></span>
</button>
</div>
<div id="blue" class="colors">
<small class="mb-3">You will select your desired store during
<strong>checkout.</strong>
<span>
<a href="#" data-target="#storeListing" data-toggle="modal">
<span class="fa fa-map-marker"></span>
See available stores near you.
</a>
</span>
<a id="inStorePickupRedirect" href="shoppingCart_inStorePickup.html" class="btn btn-primary mx-auto my-3 cartLink">
Add to Cart
<span class="fa fa-shopping-cart"></span>
</a>
</small>
</div>

How to append a div to another div

Now I have multiples PHP for loop in my project exactly the same like one below but with different PHP variables of course. I also have an add button with appends a div element. The problem is because I have many for-loop and each for-loop has an add button so when I click on one add button of a particular div it appends a new div to all.
<div class="appendOuter">
<?php
foreach($query as $data){
$id = $data['ID'];
$initialAccess = $data['Access'];
if(strlen($initialAccess) > 3){
echo '
<div class="box" >
<input type="hidden" value='.$id.' class="ID">
<textarea class="Access">'.$Access.'</textarea>
</div>';
}
}
?>
<div class="text-center">
<button class="btn btn-success btn-add" type="button" onclick="addMorediv(this)">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
My javascript to append a new div
<script>
function addMorediv(index){
var element =$("<div class='box'><textarea class='Access'></textarea><i class='far fa-flag'></i></div>");
element.appendTo('.appendOuter');
}
</script>

Assuming that all your other HTML structure is similar to what you've demoed:
element.appendTo($(this).parent().parent());

Are you looking for something like this? Where when you click the add button, it adds a new text area under the existing textarea(s) already within that row? This is a jQuery specific answer, and doesn't require the "onclick" of button that you were using. It is also adding your content within a parent "row" div for ease of access navigating the DOM during the click event. So in your PHP for loop, you would echo out 1 of the rows in my example, using your PHP variables in the appropriate places like in your example.
$('.btn-add').on('click', function() {
var $box = $(this).parent().parent().find('.box:last');
var $element = $("<div class='box'><textarea class='Access'></textarea><i class='far fa-flag'></i></div>");
$element.appendTo($box);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appendOuter">
<!-- Assume your PHP generated 3 ".row" div rows in for loop -->
<div class="row">
<div class="box">
<input type="hidden" value="1" class="ID">
<textarea class="Access">1</textarea>
</div>
<div class="text-center" style="padding:10px;">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus">Add +</span>
</button>
</div>
</div>
<div class="row">
<div class="box">
<input type="hidden" value="2" class="ID">
<textarea class="Access">2</textarea>
</div>
<div class="text-center" style="padding:10px;">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus">Add +</span>
</button>
</div>
</div>
<div class="row">
<div class="box">
<input type="hidden" value="3" class="ID">
<textarea class="Access">3</textarea>
</div>
<div class="text-center" style="padding:10px;">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus">Add +</span>
</button>
</div>
</div>
</div>

On one button click event for three pages

I have one page website, with three forms. The first form has class active and the rest are hidden. All forms have buttons with same class .all-pages.
When I click on next button I want the first page to get class hidden, and second get active. When I'm on the second form click on the SAME button NEXT I want the second page to get class hidden, and the third page get active. Please HELP ME :)
And please just JavaScript.
I have 3 forms like this:
<div class="container-fluid"> <!-- first page container -->
<div class="row">
<div class="col-lg-5 col-lg-offset-3">
<form class="well margin-form-top form-color-bg page1">
<div class="row"> <!-- webpage name -->
<div class="col-lg-4 col-lg-offset-4">
<h2>Book a Room</h2>
</div>
</div>
<div class="row"> <!-- information about webpage -->
<div class="col-lg-7 col-lg-offset-2 h4">
<p>This information will let us know more about you.</p>
</div>
</div>
<div class="row"> <!-- navigation -->
<div class="col-lg-12 button-padding-zero">
<ul class="nav nav-pills nav-justified btn-group">
<button type="button" class="btn btn-danger btn-default btn-lg button-width navigation-font-size border-r grey-bg all-pages red active" data-page="0">
<b>ACCOUT</b>
</button>
<button type="button" class="btn btn-default btn-default btn-lg button-width navigation-font-size border-l-r grey-bg all-pages red" data-page="1">
<b>ROOM TYPE</b>
</button>
<button type="button" class="btn btn-default btn-default btn-lg button-width navigation-font-size border-l grey-bg all-pages red" data-page="2">
<b>EXTRA DETAILS</b>
</button>
</ul>
</div>
</div>
<br>
<div class="row"> <!-- let's start -->
<div class="col-lg-5 col-lg-offset-4 h4">
<p>Let's start with the basic details.</p>
</div>
</div>
<br>
<div class="row"> <!-- first row email and country -->
<div class="col-lg-5 col-lg-offset-0">
<div class="input-group">
<input type="email" class="input-sm btn input-width text-left" placeholder="Your Email">
</div>
</div>
<div class="col-lg-6 col-lg-offset-1 button-padding-zero">
<select class="form-control input-sm btn input-width">
<option value="" selected>Country</option>
<option>Serbia</option>
<option>Russia</option>
<option>Brazil</option>
</select>
</div>
</div>
<br>
<div class="row"> <!-- 2nd row password and budget -->
<div class="col-lg-5 col-lg-offset-0">
<div class="input-group">
<input type="password" class="input-sm btn input-width text-left" placeholder="Your Password">
</div>
</div>
<div class="col-lg-6 col-lg-offset-1 button-padding-zero">
<select class="form-control input-sm btn input-width">
<option value="" selected>Daily Budget</option>
<option>100$</option>
<option>200$</option>
<option>300$</option>
</select>
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="col-lg-3 col-lg-offset-9">
<button type="button" id="next-button" class="btn btn-default btn-danger btn-lg button-next-width all-pages" data-page="0">NEXT</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
var page1 = document.querySelector('.page1');
var page2 = document.querySelector('.page2');
var page3 = document.querySelector('.page3');
var emptyArrey = [];
var nextButtons = document.querySelectorAll('.all-pages');
function nextFunction(event) {
// debugger;
var allButtons = document.querySelectorAll('.all-pages');
for (var i = 0; i < allButtons.length; i++) {
var oneButton = allButtons[i].dataset.page;
if (allButtons[i].dataset.page === '0') {
page1.classList.add('hidden');
page2.classList.remove('hidden');
return;
debugger;
} else {
page2.classList.add('hidden');
page3.classList.remove('hidden');
}
}
}
for (var nextButton of nextButtons){
nextButton.addEventListener('click', nextFunction);
}

You could use the button's attribute data-page to keep track of which form you're currently on, and then show the appropriate form.
// give your button the id "next-button"
var currentPage = document.getElementByID("next-button").getAttribute("data-page");
Once you know what form you're on, then you can hide the others as needed

If I understood your question, here is possible solution.
const nextButtons = document.querySelectorAll('.all-pages');
const pages = document.querySelectorAll('.page');
nextButtons.forEach(btn => {
btn.addEventListener('click', () => {
pages.forEach(page => {
page.hidden = true;
});
const pageActive = document.querySelector(`.page-${btn.dataset.page}`);
pageActive.hidden = false;
})
})
<div class="page page-1">
<button class="all-pages" data-page="2">NEXT 2</button>
</div>
<div class="page page-2" hidden=true>
<button class="all-pages" data-page="3">NEXT 3</button>
</div>
<div class="page page-3" hidden=true>
<button class="all-pages" data-page="1">NEXT 1</button>
</div>