Editor controls for iText on double-click

Editor controls for iText on double-click - javascript

How would I achieve displaying text editing controls on-click, like here for example (see: Add Text)? I've managed to incorporate some menu text editing controls before but would like to give this a go. I tried posting the code here but the JS/HTML/CSS snippet tool was breaking for me.
Thanks in advance!
Edited with answer:
// Add image from local
var canvas = new fabric.Canvas('c');
// display/hide controls on double click
fabric.util.addListener(canvas.upperCanvasEl, 'dblclick', function(e) {
if (canvas.findTarget(e)) {
let objType = canvas.findTarget(e).type;
if (objType === 'i-text') {
document.getElementById('textControls').hidden = false;
}
}
});
canvas.on('before:selection:cleared', function(e) {
document.getElementById('trash').hidden = true;
document.getElementById('forward').hidden = true;
document.getElementById('back').hidden = true;
if (e.target.type === 'i-text') {
document.getElementById('textControls').hidden = true;
}
});
document.getElementById('file').addEventListener("change", function(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(f) {
var data = f.target.result;
fabric.Image.fromURL(data, function(img) {
var oImg = img.set({
left: 0,
top: 0,
angle: 00,
stroke: '#F0F0F0', //<-- set this
strokeWidth: 40 //<-- set this
}).scale(0.2);
canvas.add(oImg).renderAll();
//var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({
format: 'png',
quality: 1
});
});
};
reader.readAsDataURL(file);
});
// Delete selected object
window.deleteObject = function() {
canvas.getActiveObject().remove();
}
// Refresh page
function refresh() {
setTimeout(function() {
location.reload()
}, 100);
}
// Add text
function Addtext() {
canvas.add(new fabric.IText('Tap and Type', {
left: 50,
top: 100,
fontFamily: 'helvetica neue',
fill: '#333',
stroke: '#F0F0F0',
strokeWidth: 1,
fontSize: 45
}));
}
document.getElementById('text-color').onchange = function() {
canvas.getActiveObject().setFill(this.value);
canvas.renderAll();
};
document.getElementById('text-color').onchange = function() {
canvas.getActiveObject().setFill(this.value);
canvas.renderAll();
};
document.getElementById('text-bg-color').onchange = function() {
canvas.getActiveObject().setBackgroundColor(this.value);
canvas.renderAll();
};
document.getElementById('text-lines-bg-color').onchange = function() {
canvas.getActiveObject().setTextBackgroundColor(this.value);
canvas.renderAll();
};
document.getElementById('text-stroke-color').onchange = function() {
canvas.getActiveObject().setStroke(this.value);
canvas.renderAll();
};
document.getElementById('text-stroke-width').onchange = function() {
canvas.getActiveObject().setStrokeWidth(this.value);
canvas.renderAll();
};
document.getElementById('font-family').onchange = function() {
canvas.getActiveObject().setFontFamily(this.value);
canvas.renderAll();
};
document.getElementById('text-font-size').onchange = function() {
canvas.getActiveObject().setFontSize(this.value);
canvas.renderAll();
};
document.getElementById('text-line-height').onchange = function() {
canvas.getActiveObject().setLineHeight(this.value);
canvas.renderAll();
};
document.getElementById('text-align').onchange = function() {
canvas.getActiveObject().setTextAlign(this.value);
canvas.renderAll();
};
radios5 = document.getElementsByName("fonttype"); // wijzig naar button
for (var i = 0, max = radios5.length; i < max; i++) {
radios5[i].onclick = function() {
if (document.getElementById(this.id).checked == true) {
if (this.id == "text-cmd-bold") {
canvas.getActiveObject().set("fontWeight", "bold");
}
if (this.id == "text-cmd-italic") {
canvas.getActiveObject().set("fontStyle", "italic");
}
if (this.id == "text-cmd-underline") {
canvas.getActiveObject().set("textDecoration", "underline");
}
if (this.id == "text-cmd-linethrough") {
canvas.getActiveObject().set("textDecoration", "line-through");
}
if (this.id == "text-cmd-overline") {
canvas.getActiveObject().set("textDecoration", "overline");
}
} else {
if (this.id == "text-cmd-bold") {
canvas.getActiveObject().set("fontWeight", "");
}
if (this.id == "text-cmd-italic") {
canvas.getActiveObject().set("fontStyle", "");
}
if (this.id == "text-cmd-underline") {
canvas.getActiveObject().set("textDecoration", "");
}
if (this.id == "text-cmd-linethrough") {
canvas.getActiveObject().set("textDecoration", "");
}
if (this.id == "text-cmd-overline") {
canvas.getActiveObject().set("textDecoration", "");
}
}
canvas.renderAll();
}
}
// Send selected object to front or back
var selectedObject;
canvas.on('object:selected', function(event) {
selectedObject = event.target;
});
var sendSelectedObjectBack = function() {
canvas.sendToBack(selectedObject);
}
var sendSelectedObjectToFront = function() {
canvas.bringToFront(selectedObject);
}
body {
padding: 10px 10px 10px 10px;
font-family: "HelveticaNeue";
}
canvas {
border: 1px solid grey;
margin: 10px 0px 0px 0px;
}
.myFile {
position: relative;
overflow: hidden;
float: left;
clear: left;
}
.myFile input[type="file"] {
display: block;
position: absolute;
top: 0;
right: 0;
opacity: 0;
font-size: 30px;
filter: alpha(opacity=0);
}
.footerheader {
margin-top: 10px;
font-weight: bold;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
Testing
<br>
<br>
<label class="myFile">
<button>+ Photo</button>
<input type="file" id="file" />
</label>
<button onclick="Addtext()">+ Text</button> / Selected Object:
<button id="trash" onClick="deleteObject()">Trash</button>
<button id="forward" onclick="sendSelectedObjectToFront()">Forward</button>
<button id="back" onclick="sendSelectedObjectBack()">Back</button> /
<button onclick="refresh()">Clear All</button>
<canvas id="c" width="800" height="600"></canvas>
<div id="textControls" hidden>
<h2>Test Text Controls</h2>
<div id="text-wrapper" style="margin-top: 10px" ng-show="getText()">
<div id="text-controls">
<input type="color" id="text-color" size="10">
<label for="font-family" style="display:inline-block">Font family:</label>
<select id="font-family">
<option value="arial">Arial</option>
<option value="helvetica" selected>Helvetica</option>
<option value="myriad pro">Myriad Pro</option>
<option value="delicious">Delicious</option>
<option value="verdana">Verdana</option>
<option value="georgia">Georgia</option>
<option value="courier">Courier</option>
<option value="comic sans ms">Comic Sans MS</option>
<option value="impact">Impact</option>
<option value="monaco">Monaco</option>
<option value="optima">Optima</option>
<option value="hoefler text">Hoefler Text</option>
<option value="plaster">Plaster</option>
<option value="engagement">Engagement</option>
</select>
<br>
<label for="text-align" style="display:inline-block">Text align:</label>
<select id="text-align">
<option value="left">Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
<option value="justify">Justify</option>
</select>
<div>
<label for="text-bg-color">Background color:</label>
<input type="color" id="text-bg-color" size="10">
</div>
<div>
<label for="text-lines-bg-color">Background text color:</label>
<input type="color" id="text-lines-bg-color" size="10">
</div>
<div>
<label for="text-stroke-color">Stroke color:</label>
<input type="color" id="text-stroke-color">
</div>
<div>
<label for="text-stroke-width">Stroke width:</label>
<input type="range" value="1" min="1" max="5" id="text-stroke-width">
</div>
<div>
<label for="text-font-size">Font size:</label>
<input type="range" min="1" max="120" step="1" id="text-font-size">
</div>
<div>
<label for="text-line-height">Line height:</label>
<input type="range" min="0" max="10" step="0.1" id="text-line-height">
</div>
</div>
<div id="text-controls-additional">
<input type='checkbox' name='fonttype' id="text-cmd-bold"> Bold
<input type='checkbox' name='fonttype' id="text-cmd-italic"> Italic
<input type='checkbox' name='fonttype' id="text-cmd-underline"> Underline
<input type='checkbox' name='fonttype' id="text-cmd-linethrough"> Linethrough
<input type='checkbox' name='fonttype' id="text-cmd-overline"> Overline
</div>
<div class="footer">
<div class="footerheader">asdasd</div>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</div>
</div>

You could use fabric.util.addListener method to detect double click event on fabricjs canvas and upon double click you'd have to check whether you clicked on a text object (iText) or not, henceforth display the text editing controls accordingly.
fabric.util.addListener(canvas.upperCanvasEl, 'dblclick', function(e) {
if (canvas.findTarget(e)) {
let objType = canvas.findTarget(e).type;
if (objType === 'i-text') {
document.getElementById('textControls').hidden = false; //show controls
}
}
});
ᴅᴇᴍᴏ ⧩
// Add image from local
var canvas = new fabric.Canvas('c');
// display/hide controls on double click
fabric.util.addListener(canvas.upperCanvasEl, 'dblclick', function(e) {
if (canvas.findTarget(e)) {
let objType = canvas.findTarget(e).type;
if (objType === 'i-text') {
document.getElementById('textControls').hidden = false;
}
}
});
canvas.on('before:selection:cleared', function(e) {
document.getElementById('trash').hidden = true;
document.getElementById('forward').hidden = true;
document.getElementById('back').hidden = true;
if (e.target.type === 'i-text') {
document.getElementById('textControls').hidden = true;
}
});
document.getElementById('file').addEventListener("change", function(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(f) {
var data = f.target.result;
fabric.Image.fromURL(data, function(img) {
var oImg = img.set({
left: 0,
top: 0,
angle: 00,
stroke: '#F0F0F0', //<-- set this
strokeWidth: 40 //<-- set this
}).scale(0.2);
canvas.add(oImg).renderAll();
//var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({
format: 'png',
quality: 1
});
});
};
reader.readAsDataURL(file);
});
// Delete selected object
window.deleteObject = function() {
canvas.getActiveObject().remove();
}
// Refresh page
function refresh() {
setTimeout(function() {
location.reload()
}, 100);
}
// Add text
function Addtext() {
canvas.add(new fabric.IText('Tap and Type', {
left: 50,
top: 100,
fontFamily: 'helvetica neue',
fill: '#333',
stroke: '#F0F0F0',
strokeWidth: 1,
fontSize: 45
}));
}
document.getElementById('text-color').onchange = function() {
canvas.getActiveObject().setFill(this.value);
canvas.renderAll();
};
document.getElementById('text-color').onchange = function() {
canvas.getActiveObject().setFill(this.value);
canvas.renderAll();
};
document.getElementById('text-bg-color').onchange = function() {
canvas.getActiveObject().setBackgroundColor(this.value);
canvas.renderAll();
};
document.getElementById('text-lines-bg-color').onchange = function() {
canvas.getActiveObject().setTextBackgroundColor(this.value);
canvas.renderAll();
};
document.getElementById('text-stroke-color').onchange = function() {
canvas.getActiveObject().setStroke(this.value);
canvas.renderAll();
};
document.getElementById('text-stroke-width').onchange = function() {
canvas.getActiveObject().setStrokeWidth(this.value);
canvas.renderAll();
};
document.getElementById('font-family').onchange = function() {
canvas.getActiveObject().setFontFamily(this.value);
canvas.renderAll();
};
document.getElementById('text-font-size').onchange = function() {
canvas.getActiveObject().setFontSize(this.value);
canvas.renderAll();
};
document.getElementById('text-line-height').onchange = function() {
canvas.getActiveObject().setLineHeight(this.value);
canvas.renderAll();
};
document.getElementById('text-align').onchange = function() {
canvas.getActiveObject().setTextAlign(this.value);
canvas.renderAll();
};
radios5 = document.getElementsByName("fonttype"); // wijzig naar button
for (var i = 0, max = radios5.length; i < max; i++) {
radios5[i].onclick = function() {
if (document.getElementById(this.id).checked == true) {
if (this.id == "text-cmd-bold") {
canvas.getActiveObject().set("fontWeight", "bold");
}
if (this.id == "text-cmd-italic") {
canvas.getActiveObject().set("fontStyle", "italic");
}
if (this.id == "text-cmd-underline") {
canvas.getActiveObject().set("textDecoration", "underline");
}
if (this.id == "text-cmd-linethrough") {
canvas.getActiveObject().set("textDecoration", "line-through");
}
if (this.id == "text-cmd-overline") {
canvas.getActiveObject().set("textDecoration", "overline");
}
} else {
if (this.id == "text-cmd-bold") {
canvas.getActiveObject().set("fontWeight", "");
}
if (this.id == "text-cmd-italic") {
canvas.getActiveObject().set("fontStyle", "");
}
if (this.id == "text-cmd-underline") {
canvas.getActiveObject().set("textDecoration", "");
}
if (this.id == "text-cmd-linethrough") {
canvas.getActiveObject().set("textDecoration", "");
}
if (this.id == "text-cmd-overline") {
canvas.getActiveObject().set("textDecoration", "");
}
}
canvas.renderAll();
}
}
// Send selected object to front or back
var selectedObject;
canvas.on('object:selected', function(event) {
selectedObject = event.target;
});
var sendSelectedObjectBack = function() {
canvas.sendToBack(selectedObject);
}
var sendSelectedObjectToFront = function() {
canvas.bringToFront(selectedObject);
}
body {
padding: 10px 10px 10px 10px;
font-family: "HelveticaNeue";
}
canvas {
border: 1px solid grey;
margin: 10px 0px 0px 0px;
}
.myFile {
position: relative;
overflow: hidden;
float: left;
clear: left;
}
.myFile input[type="file"] {
display: block;
position: absolute;
top: 0;
right: 0;
opacity: 0;
font-size: 30px;
filter: alpha(opacity=0);
}
.footerheader {
margin-top: 10px;
font-weight: bold;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
Testing
<br>
<br>
<label class="myFile">
<button>+ Photo</button>
<input type="file" id="file" />
</label>
<button onclick="Addtext()">+ Text</button> / Selected Object:
<button id="trash" onClick="deleteObject()">Trash</button>
<button id="forward" onclick="sendSelectedObjectToFront()">Forward</button>
<button id="back" onclick="sendSelectedObjectBack()">Back</button> /
<button onclick="refresh()">Clear All</button>
<canvas id="c" width="800" height="600"></canvas>
<div id="textControls" hidden>
<h2>Test Text Controls</h2>
<div id="text-wrapper" style="margin-top: 10px" ng-show="getText()">
<div id="text-controls">
<input type="color" id="text-color" size="10">
<label for="font-family" style="display:inline-block">Font family:</label>
<select id="font-family">
<option value="arial">Arial</option>
<option value="helvetica" selected>Helvetica</option>
<option value="myriad pro">Myriad Pro</option>
<option value="delicious">Delicious</option>
<option value="verdana">Verdana</option>
<option value="georgia">Georgia</option>
<option value="courier">Courier</option>
<option value="comic sans ms">Comic Sans MS</option>
<option value="impact">Impact</option>
<option value="monaco">Monaco</option>
<option value="optima">Optima</option>
<option value="hoefler text">Hoefler Text</option>
<option value="plaster">Plaster</option>
<option value="engagement">Engagement</option>
</select>
<br>
<label for="text-align" style="display:inline-block">Text align:</label>
<select id="text-align">
<option value="left">Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
<option value="justify">Justify</option>
</select>
<div>
<label for="text-bg-color">Background color:</label>
<input type="color" id="text-bg-color" size="10">
</div>
<div>
<label for="text-lines-bg-color">Background text color:</label>
<input type="color" id="text-lines-bg-color" size="10">
</div>
<div>
<label for="text-stroke-color">Stroke color:</label>
<input type="color" id="text-stroke-color">
</div>
<div>
<label for="text-stroke-width">Stroke width:</label>
<input type="range" value="1" min="1" max="5" id="text-stroke-width">
</div>
<div>
<label for="text-font-size">Font size:</label>
<input type="range" min="1" max="120" step="1" id="text-font-size">
</div>
<div>
<label for="text-line-height">Line height:</label>
<input type="range" min="0" max="10" step="0.1" id="text-line-height">
</div>
</div>
<div id="text-controls-additional">
<input type='checkbox' name='fonttype' id="text-cmd-bold"> Bold
<input type='checkbox' name='fonttype' id="text-cmd-italic"> Italic
<input type='checkbox' name='fonttype' id="text-cmd-underline"> Underline
<input type='checkbox' name='fonttype' id="text-cmd-linethrough"> Linethrough
<input type='checkbox' name='fonttype' id="text-cmd-overline"> Overline
</div>
<div class="footer">
<div class="footerheader">asdasd</div>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</div>
</div>

Related

How to convert one HTML Page into one PDF with Multiple Pages using Javascript

I am trying to create form with Inputs (majorly expandable textarea). I have created a button with id "create_pdf" when clicked it will generated the whole HTML into one PDF however When I click on the generate PDF button designed to run this code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Incident Report</title>
<!-- CSS -->
<style>
.myForm {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 0.8em;
width: 45em;
padding: 1em;
border: 1px solid #ccc;
}
.myForm * {
box-sizing: border-box;
}
.myForm fieldset {
background-color: #eeeeee;
}
.myForm legend
{
background-color: gray;
color: white;
padding: 5px 10px;
}
.myForm label {
padding: 0;
font-weight: bold;
}
.myForm label.choice {
font-size: 0.9em;
font-weight: normal;
}
.myForm input[type="text"],
.myForm input[type="tel"],
.myForm input[type="email"],
.myForm input[type="datetime-local"],
.myForm select,
.myForm textarea {
float: right;
width: 60%;
border: 1px solid #ccc;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 0.9em;
padding: 0.3em;
}
.myForm textarea {
height: 50px;
width: 550px
}
.myForm button {
padding: 1em;
border-radius: 0.5em;
background: #eee;
border: none;
font-weight: bold;
margin-left: 40%;
margin-top: 1.8em;
}
.myForm button:hover {
background: #ccc;
cursor: pointer;
}
#autoresizing {
display: block;
overflow: hidden;
resize: none;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
<script src="jspdf.min.js"></script>
</head>
<body>
<input type="button" id="create_pdf" value="Generate PDF">
<form class="myForm" method="get" enctype="application/x-www-form-urlencoded" action="/html/codes/html_form_handler.cfm">
<h2>Incident Report</h2>
<fieldset>
<legend>Incident Metrics</legend>
<p><label>Customer Name <input type="text" name="customer_name" required> </label></p>
<p><label>Case <input type="text" name="case" required> </label></p>
<p>
<label>Severity
<select id="Severity" name="Severity">
<option value="" selected="selected">Select One</option>
<option value="Critical" >Critical</option>
<option value="High" >High</option>
</select>
</label>
</p>
<p><label>Incident Reported Time<input type="datetime-local" name="Incident_reported_Time" required></label></p>
<p><label>Incident Resolved Time<input type="datetime-local" name="Incident_resolved_Time" required></label></p>
<p><label>MTTR<input type="text" name="MTTR" required> </label></p>
<p>
<label>SLA Achieved
<select id="SLA" name="SLA">
<option value="" selected="selected">Select One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</label>
</p>
<p>
<label>Product
<select id="Product" name="Product">
<option value="" selected="selected">Select One</option>
<option value="Command Center">Command Center</option>
<option value="ALM">ALM</option>
<option value="AGA">AGA</option>
</select>
</label>
</p>
<p><label>Teams Involved</label></p>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox4" value = "option1"> L2
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox5" value = "option2"> L3
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox6" value = "option3"> Network
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox6" value = "option3"> SysAdmin
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox6" value = "option3"> DBA
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox6" value = "option3"> Others(Please Mention)
</label>
<textarea id="textarea6">List Other Teams Involved</textarea>
</fieldset>
<br>
<fieldset>
<legend>Problem Statement</legend>
<p><label>Description</label></p>
<textarea id="autoresizing">Add Description</textarea>
<br>
<p><label>Business Impact</label></p>
<textarea id="autoResizing">Add Business Impact</textarea>
</fieldset>
<br>
<fieldset>
<legend>Workaround/Corrective Measures</legend>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Manual WO
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Patch
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox3" value = "option3"> N/A
</label>
</fieldset>
<br>
<fieldset>
<legend>Investigation Done</legend>
<textarea id="textarea3">Add Investigation Done</textarea>
</fieldset>
<br>
<fieldset>
<legend>Preventive Analysis</legend>
<textarea id="textarea4">Add Preventive Analysis</textarea>
</fieldset>
<br>
<fieldset>
<legend>Root Cause Analysis</legend>
<textarea id="textarea5">Add Root Cause Analysis</textarea>
</fieldset>
<p><input type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)" style="display: none;"></p>
<p><label for="file" style="cursor: pointer;">Upload Image</label></p>
<p><img id="output" width="500" /></p>
</form>
<script>
(function () {
var
form = $('.myForm'),
cache_width = form.width(),
a4 = [595.28, 841.89]; // for a4 size paper width and height
$('#create_pdf').on('click', function () {
$('body').scrollTop(0);
createPDF();
});
//create pdf
function createPDF() {
getCanvas().then(function (canvas) {
var
img = canvas.toDataURL("image/png"),
doc = new jsPDF({
unit: 'px',
format: 'a4'
});
doc.addImage(img, 'JPEG', 20, 20);
doc.save('Incident_Report.pdf');
form.width(cache_width);
});
}
// create canvas object
function getCanvas() {
form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');
return html2canvas(form, {
imageTimeout: 2000,
removeContainer: true
});
}
}());
</script>
<script>
/*
* jQuery helper plugin for examples and tests
*/
(function ($) {
$.fn.html2canvas = function (options) {
var date = new Date(),
$message = null,
timeoutTimer = false,
timer = date.getTime();
html2canvas.logging = options && options.logging;
html2canvas.Preload(this[0], $.extend({
complete: function (images) {
var queue = html2canvas.Parse(this[0], images, options),
$canvas = $(html2canvas.Renderer(queue, options)),
finishTime = new Date();
$canvas.css({ position: 'absolute', left: 0, top: 0 }).appendTo(document.body);
$canvas.siblings().toggle();
$(window).click(function () {
if (!$canvas.is(':visible')) {
$canvas.toggle().siblings().toggle();
throwMessage("Canvas Render visible");
} else {
$canvas.siblings().toggle();
$canvas.toggle();
throwMessage("Canvas Render hidden");
}
});
throwMessage('Screenshot created in ' + ((finishTime.getTime() - timer) / 1000) + " seconds<br />", 4000);
}
}, options));
function throwMessage(msg, duration) {
window.clearTimeout(timeoutTimer);
timeoutTimer = window.setTimeout(function () {
$message.fadeOut(function () {
$message.remove();
});
}, duration || 2000);
if ($message)
$message.remove();
$message = $('<div ></div>').html(msg).css({
margin: 0,
padding: 10,
background: "#000",
opacity: 0.7,
position: "fixed",
top: 10,
right: 10,
fontFamily: 'Tahoma',
color: '#fff',
fontSize: 12,
borderRadius: 12,
width: 'auto',
height: 'auto',
textAlign: 'center',
textDecoration: 'none'
}).hide().fadeIn().appendTo('body');
}
};
})(jQuery);
</script>
<script type="text/javascript">
var textarea = document.querySelectorAll("#autoResizing,#autoresizing,#textarea3,#textarea4,#textarea5,#textarea6");
for (var i = 0; i < textarea.length; i++){
textarea[i].addEventListener('input', autoResize, false);
}
function autoResize() {
this.style.height = 'auto';
this.style.height = this.scrollHeight + 'px';
}
</script>
<script>
var loadFile = function(event) {
var image = document.getElementById('output');
image.src = URL.createObjectURL(event.target.files[0]);
};
</script>
</body>
</html>
It only generates one Page of the whole form as PDF, Basically it is discarding everything beyond that. Can someone help me in correcting this ?

how to set variable in jquery attribute values

i have something like creating order that contain: order-details and order-products
when i click on Create Row the specified data : name, lprice, count, price will add to the table row, include row number
My goal is to define row number on 0 startnig, like these:
<input name="product[0][product_id]" id="product_id" style="display:none" value="25">
<input name="product[0][lprice]" id="lprice" style="display:none" value="25">
the final goal is to get these values with php and then save them in sql
Your suggestions for editing the question will be appreciated
var sp = document.getElementById('product_id');
var lp = document.getElementById('lprice');
var count = document.getElementById('count');
var fp = document.getElementById('price');
var pt = document.getElementById('paytype');
var wrapper=document.getElementById('wrapper');
wrapper.onchange = function(){
var selected = sp.options[sp.selectedIndex];
var selected_type = pt.options[pt.selectedIndex].value;
if (selected_type === "1"){
lp.value = selected.getAttribute('data-fprice');
}
if (selected_type === "2"){
lp.value = selected.getAttribute('data-fpricec');
}
if (selected_type === "3"){
lp.value = selected.getAttribute('data-price');
}
if (selected_type === "4"){
lp.value = selected.getAttribute('data-pricec');
}
fp.value = "";
fp.value = lp.value * count.value;
};
wrapper.onchange();
$(function() {
function numberRows($t) {
var c = 0;
$t.find("tr").each(function(ind, el) {
var number = ++c;
$(el).find("td:eq(0)").html(number + ".");
});
}
$("#add-service-button").click(function(e) {
var product = document.getElementById('product_id');
var selected = product.options[sp.selectedIndex];
product = selected.getAttribute('data-name');
var product_id = $("#product_id").val();
var lprice = $("#lprice").val();
var count = $("#count").val();
var price = $("#price").val();
$product_id = $("<input>").attr({name: 'product['+ 'number' + '][product_id]', id: 'product_id', style:'display:none', value: product_id});
$lprice = $("<input>").attr({name: 'product['+ 'number' + '][lprice]', id: 'lprice', style:'display:none', value: lprice});
$count = $("<input>").attr({name: 'product['+ 'number' + '][count]', id: 'count', style:'display:none', value: count});
$price = $("<input>").attr({name: 'product['+ 'number' + '][price]', id: 'price', style:'display:none', value: price});
e.preventDefault();
var $row = $("<tr>");
$row.append($("<td>"));
$row.append($("<td>").html(product).append($product_id));
$row.append($("<td>").html(lprice).append($lprice));
$row.append($("<td>").html(count).append($count));
$row.append($("<td>").html(price).append($price));
$row.append($("<td>").html("<a class='del-service text-danger' href='#' title='Click to remove this entry'>X</a>"));
$row.appendTo($("#service-table tbody"));
numberRows($("#service-table"));
});
$("#form-entry form").submit(function(e) {
e.preventDefault();
$("#add-service-button").trigger("click");
});
$("#service-table").on("click", ".del-service", function(e) {
e.preventDefault();
var $row = $(this).parent().parent();
var retResult = confirm("Are you sure?");
if (retResult) {
$row.remove();
numberRows($("#service-table"));
}
});
});
.form-entry input, .form-entry select {
border: 1px solid #ccc;
padding: 10px;
padding-left: 1em;
}
.form-entry button {
border: 0;
background-color: #5AD0A1;
color: #fff;
cursor: pointer;
padding: .6em 1.25em;
}
.table-wrapper {
font-family: Arial, sans-serif;
}
.table-wrapper table td {
border-bottom: 1px dashed #ccc;
padding: 1em .2em;
}
.table-wrapper table tr:last-child td {
border-bottom: 0;
}
.table-wrapper table td:first-child {
color: #ccc;
width: 2em;
}
.table-wrapper table td:last-child a {
color: #F00;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<form>
<div class="form-entry">
<select name="paytype" id="paytype">
<option style="display:none">Pay Type:</option>
<option value="1" data-price="">First sell, Cash</option>
<option value="2" data-price="">First sell, Check</option>
<option value="3" data-price="">Cash</option>
<option value="4" data-price="">Check</option>
</select>
<select name="product_id" id="product_id">
<option style="display:none">Select Product</option>
<option value="1" data-fprice="10" data-fpricec="12" data-price="15" data-pricec="17" data-name="Bag">Bag</option>
<option value="2" data-fprice="20" data-fpricec="22" data-price="25" data-pricec="27" data-name="Hat">Hat</option>
<option value="3" data-fprice="30" data-fpricec="33" data-price="35" data-pricec="37" data-name="Watch">Watch</option>
</select>
<input name="lprice" id="lprice" tabindex="1" value="" placeholder="Price" readonly="" type="currency">
<input name="count" id="count" tabindex="1" value="" placeholder="Count" type="number">
<input name="price" id="price" tabindex="1" value="" readonly="" placeholder="Full Price" type="currency">
<button type="submit" id="add-service-button">Create Row</button>
</div>
<div class="table-wrapper">
<table id="service-table" width="100%">
<tbody>
</tbody>
</table>
</div>
</form>
</div>

You can post multiple inputs with the same name as an array, I suggest using something as
<select name="product_id[]" id="product_id_1">
<input name="lprice[]" id="lprice_1" tabindex="1" value="" placeholder="Price" readonly="" type="currency">
<input name="count[]" id="count_1" tabindex="1" value="" placeholder="Count" type="number">
<input name="price[]" id="price_1" tabindex="1" value="" readonly="" placeholder="Full Price" type="currency">
And whenever adding new rows, just increment the id, but do not change names.
In PHP, you will be able to loop through posted array and insert each row into you database. Here is an example
for($i=0; $i < count($_POST['product_id']); $i++) {
$productid = $_POST['product_id'][i];
$lprice = $_POST['lprice'][i];
$count = $_POST['count'][i];
$lprice = $_POST['price'][i];
//Insert a row with $productid, $lprice, $count, $lprice
}

Want to get previous value of selected button

<pre>
<div class="quantity">
<input type="number" name="qty" id="qty" value="1" class="form-qty form-control" min="1">
<div class="quantity-nav">
<div class="quantity-button quantity-up qty-up">+</div>
<div class="quantity-button quantity-down qty-down">-</div>
</div>
</div>
<pre>
This is loop.
I want to get input value when i click quantity up & down button each time. There are multiple elements.
How to find input value in javascript by clicking button up & down.

You can add onClick event with parents feature to detect the inputs near to the button.
$(document).on('click','.quantity-up',function(){
$qtyElemnt = $(this).parents('.quantity').find('.form-qty');
$qty = $qtyElemnt.val();
$qtyElemnt.val(Number($qty)+1);
});
$(document).on('click','.quantity-down',function(){
$qtyElemnt = $(this).parents('.quantity').find('.form-qty');
$qty = $qtyElemnt.val();
$qtyElemnt.val(Number($qty)-1);
});
.quantity {
padding: 10px;
}
.quantity-nav{
display: inline-block;
}
.quantity-button {
display: inline-block;
padding: 5px;
background-color: #c7c5c5;
border: 1px solid #585353;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="quantity">
<input type="number" name="qty" value="1" class="form-qty form-control" min="1">
<div class="quantity-nav">
<div class="quantity-button quantity-up qty-up">+</div>
<div class="quantity-button quantity-down qty-down">-</div>
</div>
</div>
<div class="quantity">
<input type="number" name="qty" value="1" class="form-qty form-control" min="1">
<div class="quantity-nav">
<div class="quantity-button quantity-up qty-up">+</div>
<div class="quantity-button quantity-down qty-down">-</div>
</div>
</div>
<div class="quantity">
<input type="number" name="qty" value="1" class="form-qty form-control" min="1">
<div class="quantity-nav">
<div class="quantity-button quantity-up qty-up">+</div>
<div class="quantity-button quantity-down qty-down">-</div>
</div>
</div>
</div>
Thanks :-)

Actually your problem is quite easy to solve.
Try to add this script at the end of your <body>.
I suggest you to make some modifications in your html too: use <button> or <input type="button"or even <a> tags for your controls.
I added some logic about the min/max/step attributes you can set on a <input type="number"> but this is optional. It's up to you to change this.
document.addEventListener("DOMContentLoaded", function() {
const qtyWraps = document.getElementsByClassName('quantity');
for (let i = 0; i < qtyWraps.length; i++) {
const qtyWrap = qtyWraps.item(i);
const input = qtyWrap.querySelector('.form-qty');
const up = qtyWrap.querySelector('.qty-up');
const down = qtyWrap.querySelector('.qty-down');
const output = qtyWrap.querySelector('.output');
up.addEventListener('click', function(e) {
e.preventDefault();
addValue(1);
});
down.addEventListener('click', function(e) {
e.preventDefault();
addValue(-1);
});
input.addEventListener('input', function() {
output.textContent = input.value
});
const addValue = function(value) {
const current = parseInt(input.value);
const min = input.getAttribute('min') || -Infinity;
const max = input.getAttribute('max') || Infinity;
const step = input.getAttribute('step') || 1;
const newValue = Math.min(max, Math.max(min, current + value * step));
input.value = newValue;
if (newValue <= min) down.setAttribute('disabled', 'disabled');
else down.removeAttribute('disabled');
if (newValue >= max) up.setAttribute('disabled', 'disabled');
else up.removeAttribute('disabled');
input.dispatchEvent(new Event('input'));
}
addValue(0)
}
});
.quantity {
display: block;
width: 500px;
margin: auto;
text-align: center;
}
.quantity .form-qty {
display: inline-block;
}
.quantity .quantity-nav {
display: inline-block;
}
.quantity .output {
background: yellow;
width: 500px;
margin: 1em auto 0;
}
<div class="quantity">
<input type="number" name="qty" id="qty" value="1" class="form-qty form-control" min="1">
<div class="quantity-nav">
<button class="quantity-button quantity-up qty-up">+</button>
<button class="quantity-button quantity-down qty-down">-</button>
</div>
<!-- I put it here to show the output result -->
<div class="output">1</div>
</div>

You can use localStorage to store the value of your quantity, this would make the data persistent.
Please check the below code snippet:
const down = document.querySelector('.down');
const up = document.querySelector('.up');
const input = document.querySelector('.quantity');
// store utility function
const store = {
existsIn: function(key) {
return this.getFromKey(key) !== null;
},
getFromKey: function(key) {
return window.localStorage.getItem(key);
},
add: function(key, value) {
const storeSource = window.localStorage.setItem(key, value);
}
}
const quantity = Object.create(store);
quantity.exists = function() {
return this.existsIn('quantity');
}
quantity.increase = function() {
let storedQuantity = this.exists() ? parseFloat(this.getFromKey('quantity')) : 0;
storedQuantity = storedQuantity + 1;
this.add('quantity', storedQuantity);
}
quantity.decrease = function() {
let storedQuantity = this.exists() ? parseFloat(this.getFromKey('quantity')) : 0;
if(storedQuantity > 0) {
storedQuantity = storedQuantity - 1;
}
this.add('quantity', storedQuantity);
}
quantity.show = function() {
return this.exists() ? this.getFromKey('quantity') : 0;
}
// event listeners for up and down buttons
up.addEventListener('click', function() {
quantity.increase();
// update input on button click
input.value = quantity.show();
})
down.addEventListener('click', function() {
quantity.decrease();
// update input on button click
input.value = quantity.show();
})
// update input on page load
input.value = quantity.show();
There you can find a working fiddle:
https://jsbin.com/tavalocoti/5/edit?html,js,console,output

how to enable the options when nothing is selected in dropdown

I have a drop down with three options. Initially three options are enabled. On selection of 'Revenue-top-line' or 'Margin' --> 'others' option should be disabled. Similarly on selection of 'others' remaining should be disabled.
If I deselect an already selected option still 'other' option is in disable state only..how to enable the nothing is selected... Can you help me
$("#outcomes").click(function() {
var name = outcomes.options[outcomes.selectedIndex].value;
if (name == 'others') {
//$('option[value=Margin]').prop('disabled', this.value === 'others');
$('option[value=Revenue-top-line]').prop('disabled', true);
$('option[value=Margin]').prop('disabled', true);
document.getElementById('div1').innerHTML = '<input type="text" id="others" name="others" autocomplete="off" />';
} else {
document.getElementById('div1').innerHTML = '';
$('option[value=Revenue-top-line]').prop('disabled', false);
$('option[value=Margin]').prop('disabled', false);
$('option[value=others]').prop('disabled', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
<select class="outcomes" id="outcomes" name="keyOutcomes" multiple="multiple" style="width: 310px;" onchange="">
<option value="Revenue-top-line">Revenue top-line</option>
<option value="Margin">Margin(CTS/Client)</option>
<option value="others">others</option>
</select> <span id="outcomeaddress" style="margin-top: 29px; margin-left: 275px; color: red;"></span>
<div id="div1"></div>
</td>

give it a try,
Html :
<select class="outcomes" id="outcomes" name="keyOutcomes" multiple style="width: 310px;" onchange="">
<option value="Revenue-top-line">Revenue top-line</option>
<option value="Margin">Margin(CTS/Client)</option>
<option value="others">others</option>
<button id="btnReset">Reset</button>
JavaScript :
$('#outcomes').change(function(e){
var selectedValue = $(this).val();
if(selectedValue.indexOf('Revenue-top-line') == 0 ||
selectedValue.indexOf('Margin') == 0 ) {
$('#outcomes option[value="others"]').attr('disabled', true);
}
else {
$('#outcomes option[value="Revenue-top-line"], #outcomes option[value="Margin"]').attr('disabled', true);
}
});
$('#btnReset').click(function(){
$('#outcomes').val('');
$('#outcomes option').attr('disabled', false);
});
See it live :
JSFiddle

The onclick event can not get triggered by a click on a disabled item.
Please try again another way.
<style>
#hidden {
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function outcomes_fun(){
var name = outcomes.options[outcomes.selectedIndex].value;
if (name == 'others') {
jQuery('option[value=Revenue-top-line]').prop('disabled', true);
jQuery('option[value=Margin]').prop('disabled', true);
document.getElementById('div1').innerHTML = '<input type="text" id="others" name="others" autocomplete="off" />';
hidden.style.display="block";
document.getElementById('hidden').innerHTML = '<strong>Other</strong> : remove';
}else{
document.getElementById('div1').innerHTML = '';
jQuery('option[value=Revenue-top-line]').prop('disabled', false);
jQuery('option[value=Margin]').prop('disabled', false);
jQuery('option[value=others]').prop('disabled', true);
hidden.style.display="block";
document.getElementById('hidden').innerHTML = '<strong> Revenue top-line or Margin(CTS/Client)</strong> : remove';
}
}
function remove(data){
if(data == 0){
hidden.style.display="none";
jQuery('option[value=others]').prop('disabled', false);
}else if(data == 1){
hidden.style.display="none";
document.getElementById('div1').innerHTML = '';
jQuery('option[value=Revenue-top-line]').prop('disabled', false);
jQuery('option[value=Margin]').prop('disabled', false);
}
}
</script>
<td>
<select class="outcomes" id="outcomes" name="keyOutcomes" multiple="multiple" style="width: 310px;" onchange="outcomes_fun()">
<option value="Revenue-top-line">Revenue top-line</option>
<option value="Margin">Margin(CTS/Client)</option>
<option value="others">others</option>
</select> <span id="outcomeaddress" style="margin-top: 29px; margin-left: 275px; color: red;"></span>
<div id="div1"></div>
<div id="hidden"></div>
</td>

Mostly just for fun, I made a custom dropdown. Then (of course) you can handle onClick events, or whatever.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Custom dropdown</title>
<style>
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div id="my_dropdown">
<input class="display" />
<span class="button">X</span>
<ul class="options">
<li>Hello</li>
<li>World</li>
</ul>
</div>
Quisque sed commodo quam. Maecenas accumsan placerat sagittis.
<div id="my_dropdown2">
<input class="display" />
<span class="button">X</span>
<ul class="options">
<li>Foo</li>
<li>Bar</li>
</ul>
</div>
Vivamus molestie ullamcorper venenatis.
<script>
var dropdown;
var dropdown2;
$(document).ready(function() {
// does not auto close after click on option
dropdown = new Custom_dropdown('my_dropdown');
dropdown.autoClose = false;
// onclick event:
dropdown.onSelect = function(index) {
console.log('option selected: ' + index);
}
dropdown.init();
// auto closes after click on option
dropdown2 = new Custom_dropdown('my_dropdown2');
dropdown2.init();
});
</script>
<style>
#my_dropdown, #my_dropdown2 {
/*position: relative;*/
display: inline-block;
background: #f0f0f0;
border: 1px solid #666666;
}
.hover {
background: #339999;
}
.options {
display: none;
background: #e0e0e0;
position: absolute;
z-index: 5;
margin: 5px;
padding: 20px;
padding-top: 10px;
}
.options, .button {
cursor: pointer;
}
</style>
<script>
// constructor
function Custom_dropdown(id) {
this.id = id;
// jQuery selectors
this.display = '.display';
this.button = '.button';
this.options = '.options'; // container/parent of the options
// custom event handlers
// this.onOpen; // not yet implemented
// this.onClose; // not yet implemented
this.onSelect;
// properties
this.autoClose = true; // if set to true, the dropdown closes when an option is clicked on
this.showOptions = false;
}
// init function. Before calling init, you can still change settings
Custom_dropdown.prototype.init = function() {
var self = this; // since 'this' changes its meaning indifferent functions, we define 'self'...
// on click button
$('#' + self.id).find(this.button).on('click', function(e) {
if(self.showOptions) {
hideOptions();
}
else {
showOptions();
}
});
// on mouse over (over an option)
$('#' + self.id).find(this.options).children().on('mouseover', function(e) {
$('#' + self.id).find(self.options).children().removeClass('hover');
$(this).addClass('hover');
});
// on click (on an option)
$('#' + self.id).find(this.options).children().on('click', function(e) {
selectOption(this);
});
function selectOption(elm) {
var value = $(elm).html();
var index = $('#' + self.id).find(self.options).children().index(elm);
$('#' + self.id).find(self.display).val(value);
// close/hide the options
if(self.autoClose) {
hideOptions();
}
if(typeof self.onSelect == 'function') {
self.onSelect(index);
}
}
function hideOptions() {
self.showOptions = false;
$('#' + self.id).find(self.options).hide();
}
function showOptions() {
self.showOptions = true;
$('#' + self.id).find(self.options).show();
}
}
</script>
</body>
</html>

I have improved your code a bit:
selected_opt=new Array();
$("#outcomes").click(function() {
name = $(this).val();
if(selected_opt.indexOf(name)==-1 || selected_opt.length==0){
selected_opt.push(name);
if (name == 'others') {
//$('option[value=Margin]').prop('disabled', this.value === 'others');
$('option[value=Revenue-top-line]').prop('disabled', true);
$('option[value=Margin]').prop('disabled', true);
document.getElementById('div1').innerHTML = '<input type="text" id="others" name="others" autocomplete="off" />';
} else {
document.getElementById('div1').innerHTML = '';
$('option[value=Revenue-top-line]').prop('disabled', false);
$('option[value=Margin]').prop('disabled', false);
$('option[value=others]').prop('disabled', true);
}
}
else{
var index = selected_opt.indexOf(5);
delete selected_opt[index];
$("option[value="+name+"]").prop("selected", false);
$('option[value=others]').prop('disabled', false);
}
});
Here a working example: https://jsfiddle.net/znxhgknw/
Alternative solution:
<td>
<input type="checkbox" id="Revenue-top-line" class="outcomes"/> <label for="Revenue-top-line">Revenue-top-line</label><br/>
<input type="checkbox" id="Margin" class="outcomes"/> <label for="Margin">Margin</label><br/>
<input type="checkbox" id="others" class="outcomes"/> <label for="others">others</label><br/>
<span id="outcomeaddress" style="margin-top: 29px; margin-left: 275px; color: red;"></span>
<div id="div1"></div>
</td>
$(".outcomes").click(function() {
if($("#Revenue-top-line").is(':checked') || $("#Margin").is(':checked')){
$("#others").attr("disabled",true);
}
else if($("#others").is(':checked')){
$("#Revenue-top-line,#Margin").attr("disabled",true);
$("#div1").html('<input type="text" id="ipt_others" name="others" autocomplete="off" />');
}
else{
$(".outcomes").attr("disabled",false);
}
});
Working example: https://jsfiddle.net/wqsgLf79/

form enable by input radio id (checked)

I have two forms. I want one of them to be enabled by the user choose through one of the radio buttons above.
What I want to do is to get the value of radio button and through this value make one of the forms enable.
So I try with JavaScript and input radio ID but I had no success:
<script>
window.addEventListener('load', init);
function init(){
var radio = document.getElementsByName ("questions");
for (var i=0; i<radios.length; i++) {
if(radio[i].getElementById.checked == "questions_1") {
radio[i].addEventListener(seleccionar);
}
}
function trigger() {
elementsForm = document.forms['question'].elements;
for (var y=0; y<elementsForm.length; y++) {
elementsForm[y].disabled=false;
}
}
</script>
Here's my code (HTML and CSS):
.category_1 {
height: 50px;
padding-top: 2%;
}
.question {
display: inline-flex;
margin-left: 5%;
}
.q-text {
font-weight: 600;
}
.q1 {
width: 44%;
}
.q2 {
width: 44%;
}
.form {
display: inline-flex;
margin-left: 5%;
}
.form.q1 {
width: 44%;
}
.form.q2 {
width: 44%;
}
.data {
margin-top: 5%;
}
.data label {
opacity: 0.5;
}
input[type=text] {
width: 100%;
}
select {
width: 100%;
}
textarea {
width: 98%;
}
input[type=submit] {
display: block;
margin: auto;
}
<body>
<div class="category_1">
<div class="question q1"><input type="radio" name="question" value="question_1" id="question_1">
<div class="q-text">QUESTION 1</div></div>
<div class="question q2"><input type="radio" name="question" value="question_2" id="question_2">
<div class="q-text">QUESTION 2</div></div>
</div>
<div class="form q1">
<form name="q1" method="post" action="">
<div class ="data">
<label for="others">Name:</label>
<input type="text" name="name" disabled>
</div>
<div class="data">
<label for="others">Select an item:</label>
<select name="items-q1" disabled>
<option value="it1">item 1</option>
<option value="it2">item 2</option>
<option value="it3">item 3</option>
<option value="it4">item 4</option>
</select>
</div>
<div class="data">
<label for="others">Anything else?</label>
<textarea name="more" disabled></textarea>
</div>
<div class="data">
<input type="submit" value="submit" disabled>
</div>
</form>
</div>
<div class="form q2">
<form name="q2" method="post" action="">
<div class ="data">
<label for="others">Name:</label>
<input type="text" name="name" disabled>
</div>
<div class ="data">
<label for="others">Choose an option:</label><br>
<input type="radio" name="option" value="o1" disabled><label for="others">1</label>
<input type="radio" name="option" value="o2" disabled><label for="others">2</label>
</div>
<div class="data">
<label for="others">Anything else?</label>
<textarea name="more" disabled></textarea>
</div>
<div class="data">
<input type="submit" value="submit" disabled>
</div>
</form>
</div>
</body>
I'd really appreciate any suggestions.

First of all i noticed your are getting the radios by the wrong name
its "question" not "questions"
<script>
var rad = document.getElementsByName('question');
for(var i = 0; i < rad.length; i++) {
rad[i].onclick = function() {
if(this.value == "questions_1") {
//input logic to display form
//This is where you run isTrue() Function
isTrue(data);
}
else{
//This is where you run isFalse() function
isFalse(data);
}
};
}
//Function to run if its true
function isTrue(data){
//something equals something
}
//Function to run if its false
function isFalse(data){
//something equals something
}
</script>
Reference Link

<script>
var rad = document.getElementsByName('question');
for(var i = 0; i < rad.length; i++) {
rad[i].onclick = function () {
if(this.value == "question_1") {
e1();
}else {
e2();
}
};
}
function e1() {
var eform1 = document.querySelectorAll('.q1 input[type=text], .q1 select, .q1 textarea, .q1 input[type=submit]');
for(var i = 0; i < eform1.length; i++) {
eform1[i].disabled = false;
}
}
function e2() {
var eform2 = document.querySelectorAll('.q2 input[type=text], .q2 input[type=radio], .q2 textarea, .q2 input[type=submit]');
for(var i = 0; i < eform2.length; i++) {
eform2[i].disabled = false;
}
}
</script>

We Keep Coding

JavaScript is the programming language of the Web.

Editor controls for iText on double-click - javascript

Related

How to convert one HTML Page into one PDF with Multiple Pages using Javascript

how to set variable in jquery attribute values

Want to get previous value of selected button

how to enable the options when nothing is selected in dropdown

form enable by input radio id (checked)

Categories

Resources