I’m currently working with a flowchart libray called flowy and it has functions that detect value changes of a block everytime the user types in text and save it as json.However, when I added some input tags to get more than a pair of values named key&content and tried to save these input values, only the first pair of key&content were stored in the output. I want to know how to save multiple input values with different ids.
flowy code
document.addEventListener("DOMContentLoaded", function(){
let rightcard = false;
let tempblock;
let tempblock2;
//document.getElementById("blocklist").innerHTML = '<div class="blockelem create-flowy noselect"><input type="hidden" name="blockelemtype" class="blockelemtype" value="1"><div class="grabme"><img src="/resources/flowy/assets/grabme.svg"></div><div class="blockin"> <div class="blockico"><span></span><img src="/resources/flowy/assets/eye.svg"></div><div class="blocktext"> <p class="blocktitle">New visitor</p><p class="blockdesc">Triggers when somebody visits a specified page</p> </div></div></div><div class="blockelem create-flowy noselect"><input type="hidden" name="blockelemtype" class="blockelemtype" value="2"><div class="grabme"><img src="/resources/flowy/assets/grabme.svg"></div><div class="blockin"> <div class="blockico"><span></span><img src="/resources/flowy/assets/action.svg"></div><div class="blocktext"> <p class="blocktitle">Action is performed</p><p class="blockdesc">Triggers when somebody performs a specified action</p></div></div></div><div class="blockelem create-flowy noselect"><input type="hidden" name="blockelemtype" class="blockelemtype" value="3"><div class="grabme"><img src="/resources/flowy/assets/grabme.svg"></div><div class="blockin"> <div class="blockico"><span></span><img src="/resources/flowy/assets/time.svg"></div><div class="blocktext"> <p class="blocktitle">Time has passed</p><p class="blockdesc">Triggers after a specified amount of time</p> </div></div></div><div class="blockelem create-flowy noselect"><input type="hidden" name="blockelemtype" class="blockelemtype" value="4"><div class="grabme"><img src="/resources/flowy/assets/grabme.svg"></div><div class="blockin"> <div class="blockico"><span></span><img src="/resources/flowy/assets/error.svg"></div><div class="blocktext"> <p class="blocktitle">Error prompt</p><p class="blockdesc">Triggers when a specified error happens</p> </div></div></div>';
flowy(document.getElementById("canvas"), drag, release, snapping);
function addEventListenerMulti(type, listener, capture, selector) {
var nodes = document.querySelectorAll(selector);
for (var i = 0; i < nodes.length; i++) {
nodes[i].addEventListener(type, listener, capture);
}
}
function snapping(drag, first) {
var grab = drag.querySelector(".grabme");
grab.parentNode.removeChild(grab);
var blockin = drag.querySelector(".blockin");
blockin.parentNode.removeChild(blockin);
if (drag.querySelector(".blockelemtype").value == "1") {
drag.innerHTML += "<input type='hidden' name='sceneId' /><input type='hidden' name='inputValues' /><input type='hidden' name='outputMessage' /><input type='hidden' name='maxRepeatNumber' /><div class='blockyleft'><img src='/resources/flowy/assets/twitterorang.svg'><p class='blockyname'>Basic</p><p class='scene-input-values'></p></div><div class='blockyright'><img src='/resources/flowy/assets/more.svg'></div><div class='blockydiv'></div><div class='blockyinfo'><span class=' scene-output-message'></span></div>";
} else if (drag.querySelector(".blockelemtype").value == "c") {
drag.innerHTML += "<input type='hidden' name='sceneId' /><input type='hidden' name='inputValues' /><input type='hidden' name='outputMessage' /><input type='hidden' name='maxRepeatNumber' /><div class='blockyleft'><img src='/resources/flowy/assets/twitterorange.svg'><p class='blockyname'>Basic Input</p><p class='scene-input-values'></p></div><div class='blockyright'><img src='/resources/flowy/assets/more.svg'></div><div class='blockydiv'></div><div class='blockyinfo'><span class=' scene-output-message'></span></div>";
} else if (drag.querySelector(".blockelemtype").value == "f") {
drag.innerHTML += "<input type='hidden' name='sceneId' /><input type='hidden' name='inputValues' /><input type='hidden' name='outputMessage' /><input type='hidden' name='maxRepeatNumber' /><div class='blockyleft'><img src='/resources/flowy/assets/twitterorange.svg'><p class='blockyname'>Text Input</p><p class='scene-input-values'></p></div><div class='blockyright'><img src='/resources/flowy/assets/more.svg'></div><div class='blockydiv'></div><div class='blockyinfo'><span class=' scene-output-message'></span></div>";
} else if (drag.querySelector(".blockelemtype").value == "m") {
drag.innerHTML += "<input type='hidden' name='sceneId' /><input type='hidden' name='inputValues' /><input type='hidden' name='outputMessage' /><input type='hidden' name='maxRepeatNumber' /><div class='blockyleft'><img src='/resources/flowy/assets/twitterorange.svg'><p class='blockyname'>Message</p><p class='scene-input-values'></p></div><div class='blockyright'><img src='/resources/flowy/assets/more.svg'></div><div class='blockydiv'></div><div class='blockyinfo'><span class=' scene-output-message'></span></div>";
} else if (drag.querySelector(".blockelemtype").value == "t") {
drag.innerHTML += "<input type='hidden' name='sceneId' /><input type='hidden' name='inputValues' /><input type='hidden' name='outputMessage' /><input type='hidden' name='maxRepeatNumber' /><div class='blockyleft'><img src='/resources/flowy/assets/timeblue.svg'><p class='blockyname'>Timeout for input</p></div><div class='blockyright'><img src='/resources/flowy/assets/more.svg'></div><div class='blockydiv'></div><div class='blockyinfo'><span class=' scene-output-message'></span></div>";
} else if (drag.querySelector(".blockelemtype").value == "r") {
drag.innerHTML += "<input type='hidden' name='sceneId' /><input type='hidden' name='inputValues' /><input type='hidden' name='outputMessage' /><input type='hidden' name='maxRepeatNumber' /><div class='blockyleft'><img src='/resources/flowy/assets/actionblue.svg'><p class='blockyname'>Request a call</p></div><div class='blockyright'><img src='/resources/flowy/assets/more.svg'></div><div class='blockydiv'></div><div class='blockyinfo'><span class=' scene-output-message'></span></div>";
} else if (drag.querySelector(".blockelemtype").value == "g") {
drag.innerHTML += "<input type='hidden' name='sceneId' /><input type='hidden' name='inputValues' /><input type='hidden' name='outputMessage' /><input type='hidden' name='maxRepeatNumber' /><input type='hidden' name='toChapterId' /><div class='blockyleft'><img src='/resources/flowy/assets/actionblue.svg'><p class='blockyname'>Go to Chapter</p></div><div class='blockyright'><img src='/resources/flowy/assets/more.svg'></div><div class='blockydiv'></div><div class='blockyinfo'><span class=' scene-output-message'></span><span class=' scene-go-to-chapter'></span></div>";
} else if (drag.querySelector(".blockelemtype").value == "n") {
drag.innerHTML += "<input type='hidden' name='sceneId' /><input type='hidden' name='inputValues' /><input type='hidden' name='outputMessage' /><input type='hidden' name='maxRepeatNumber' /><input type='hidden' name='toSceneId' /><div class='blockyleft'><img src='/resources/flowy/assets/actionblue.svg'><p class='blockyname'>Go to Scene</p></div><div class='blockyright'><img src='/resources/flowy/assets/more.svg'></div><div class='blockydiv'></div><div class='blockyinfo'><span class=' scene-output-message'></span><span class=' scene-go-to-scene'></span></div>";
} else if (drag.querySelector(".blockelemtype").value == "w") {
drag.innerHTML += "<input type='hidden' name='sceneId' /><input type='hidden' name='inputValues' /><input type='hidden' name='outputMessage' /><input type='hidden' name='maxRepeatNumber' /><div class='blockyleft'><img src='/resources/flowy/assets/errorred.svg'><p class='blockyname'>Wrong input</p></div><div class='blockyright'><img src='/resources/flowy/assets/more.svg'></div><div class='blockydiv'></div><div class='blockyinfo'><span class=' scene-output-message'></span></div>";
}
$(drag).find('input[name=inputValues]').change(function() {
$(drag).find('.scene-input-values').html($(this).val());
});
$(drag).find('input[name=outputMessage]').change(function() {
$(drag).find('.chapter-message').html($(this).val());
});
$(drag).find('input[name=toChapterId]').change(function() {
$(drag).find('.chapter-message').html($(this).val());
});
return true;
}
function drag(block) {
block.classList.add("blockdisabled");
tempblock2 = block;
}
function release() {
if (tempblock2) {
tempblock2.classList.remove("blockdisabled");
}
}
let disabledClick = function(){
document.querySelector(".navactive").classList.add("navdisabled");
document.querySelector(".navactive").classList.remove("navactive");
this.classList.add("navactive");
this.classList.remove("navdisabled");
if (this.getAttribute("id") == "triggers") {
document.getElementById("blocklist").innerHTML = '<div class="blockelem create-flowy noselect"><input type="hidden" name="blockelemtype" class="blockelemtype" value="1"><div class="grabme"><img src="/resources/flowy/assets/grabme.svg"></div><div class="blockin"> <div class="blockico"><span></span><img src="/resources/flowy/assets/eye.svg"></div><div class="blocktext"> <p class="blocktitle">New visitor</p><p class="blockdesc">Triggers when somebody visits a specified page</p> </div></div></div><div class="blockelem create-flowy noselect"><input type="hidden" name="blockelemtype" class="blockelemtype" value="2"><div class="grabme"><img src="/resources/flowy/assets/grabme.svg"></div><div class="blockin"> <div class="blockico"><span></span><img src="/resources/flowy/assets/action.svg"></div><div class="blocktext"> <p class="blocktitle">Action is performed</p><p class="blockdesc">Triggers when somebody performs a specified action</p></div></div></div><div class="blockelem create-flowy noselect"><input type="hidden" name="blockelemtype" class="blockelemtype" value="3"><div class="grabme"><img src="/resources/flowy/assets/grabme.svg"></div><div class="blockin"> <div class="blockico"><span></span><img src="/resources/flowy/assets/time.svg"></div><div class="blocktext"> <p class="blocktitle">Time has passed</p><p class="blockdesc">Triggers after a specified amount of time</p> </div></div></div><div class="blockelem create-flowy noselect"><input type="hidden" name="blockelemtype" class="blockelemtype" value="4"><div class="grabme"><img src="/resources/flowy/assets/grabme.svg"></div><div class="blockin"> <div class="blockico"><span></span><img src="/resources/flowy/assets/error.svg"></div><div class="blocktext"> <p class="blocktitle">Error prompt</p><p class="blockdesc">Triggers when a specified error happens</p> </div></div></div>';
} else if (this.getAttribute("id") == "actions") {
document.getElementById("blocklist").innerHTML = '<div class="blockelem create-flowy noselect"><input type="hidden" name="blockelemtype" class="blockelemtype" value="5"><div class="grabme"><img src="/resources/flowy/assets/grabme.svg"></div><div class="blockin"> <div class="blockico"><span></span><img src="/resources/flowy/assets/database.svg"></div><div class="blocktext"> <p class="blocktitle">New database entry</p><p class="blockdesc">Adds a new entry to a specified database</p> </div></div></div><div class="blockelem create-flowy noselect"><input type="hidden" name="blockelemtype" class="blockelemtype" value="6"><div class="grabme"><img src="/resources/flowy/assets/grabme.svg"></div><div class="blockin"> <div class="blockico"><span></span><img src="/resources/flowy/assets/database.svg"></div><div class="blocktext"> <p class="blocktitle">Update database</p><p class="blockdesc">Edits and deletes database entries and properties</p> </div></div></div><div class="blockelem create-flowy noselect"><input type="hidden" name="blockelemtype" class="blockelemtype" value="7"><div class="grabme"><img src="/resources/flowy/assets/grabme.svg"></div><div class="blockin"> <div class="blockico"><span></span><img src="/resources/flowy/assets/action.svg"></div><div class="blocktext"> <p class="blocktitle">Perform an action</p><p class="blockdesc">Performs or edits a specified action</p> </div></div></div><div class="blockelem create-flowy noselect"><input type="hidden" name="blockelemtype" class="blockelemtype" value="8"><div class="grabme"><img src="/resources/flowy/assets/grabme.svg"></div><div class="blockin"> <div class="blockico"><span></span><img src="/resources/flowy/assets/twitter.svg"></div><div class="blocktext"> <p class="blocktitle">Make a tweet</p><p class="blockdesc">Makes a tweet with a specified query</p> </div></div></div>';
} else if (this.getAttribute("id") == "loggers") {
document.getElementById("blocklist").innerHTML = '<div class="blockelem create-flowy noselect"><input type="hidden" name="blockelemtype" class="blockelemtype" value="9"><div class="grabme"><img src="/resources/flowy/assets/grabme.svg"></div><div class="blockin"> <div class="blockico"><span></span><img src="/resources/flowy/assets/log.svg"></div><div class="blocktext"> <p class="blocktitle">Add new log entry</p><p class="blockdesc">Adds a new log entry to this project</p> </div></div></div><div class="blockelem create-flowy noselect"><input type="hidden" name="blockelemtype" class="blockelemtype" value="10"><div class="grabme"><img src="/resources/flowy/assets/grabme.svg"></div><div class="blockin"> <div class="blockico"><span></span><img src="/resources/flowy/assets/log.svg"></div><div class="blocktext"> <p class="blocktitle">Update logs</p><p class="blockdesc">Edits and deletes log entries in this project</p> </div></div></div><div class="blockelem create-flowy noselect"><input type="hidden" name="blockelemtype" class="blockelemtype" value="11"><div class="grabme"><img src="/resources/flowy/assets/grabme.svg"></div><div class="blockin"> <div class="blockico"><span></span><img src="/resources/flowy/assets/error.svg"></div><div class="blocktext"> <p class="blocktitle">Prompt an error</p><p class="blockdesc">Triggers a specified error</p> </div></div></div>';
}
}
addEventListenerMulti("click", disabledClick, false, ".side");
document.getElementById("close").addEventListener("click", function(){
if (rightcard) {
rightcard = false;
document.getElementById("properties").classList.remove("expanded");
document.getElementById("propwrap").classList.remove("itson");
tempblock.classList.remove("selectedblock");
}
});
document.getElementById("removeblock").addEventListener("click", function(){
flowy.deleteBlocks();
});
let aclick = false;
let noinfo = false;
let beginTouch = function (event) {
aclick = true;
noinfo = false;
if (event.target.closest(".create-flowy")) {
noinfo = true;
}
if ( event.target.closest("#propwrap")) {
} else {
if ( tempblock != undefined ) {
tempblock.classList.remove("selectedblock");
}
document.getElementById("properties").classList.remove("expanded");
document.getElementById("propwrap").classList.remove("itson");
}
}
let checkTouch = function (event) {
aclick = false;
}
let doneTouch = function (event) {
if (event.type === "mouseup" && aclick && !noinfo) {
if (event.target.closest(".block") && !event.target.closest(".block").classList.contains("dragging")) {
tempblock = event.target.closest(".block");
rightcard = true;
document.getElementById("properties").classList.add("expanded");
document.getElementById("propwrap").classList.add("itson");
tempblock.classList.add("selectedblock");
let tempInputValue = $(tempblock).find('input[name=inputValues]').val();
let tempMessage = $(tempblock).find('input[name=outputMessage]').val();
let tempToChapterId = $(tempblock).find('input[name=toChapterId]').val();
let tempMaxRepeatNumber = $(tempblock).find('input[name=maxRepeatNumber]').val();
//$('#form-scene-input-value').val($(tempblock).find('.blockyname').html());
if ( $(tempblock).find('input[name=blockelemtype]').val() == 'g' ) {
$('.form-group-go-to-chapter').show();
$('#form-go-to-chapter').val(tempToChapterId);
$('.form-group-max-repeat-number').hide();
$('.form-group-output-message').hide();
$('.form-group-input-value').hide();
$('#form-scene-input-value').tagsinput('removeAll');
} else if ( $(tempblock).find('input[name=blockelemtype]').val() == 'm' ) {
$('.form-group-go-to-chapter').hide();
$('.form-group-max-repeat-number').hide();
$('.form-group-output-message').show();
$('.form-group-input-value').hide();
$('#form-scene-input-value').tagsinput('removeAll');
} else if ( $(tempblock).find('input[name=blockelemtype]').val() == 't'
|| $(tempblock).find('input[name=blockelemtype]').val() == 'w' ) {
$('.form-group-go-to-chapter').hide();
$('.form-group-max-repeat-number').show();
$('#form-max-repeat-number').val(tempMaxRepeatNumber);
$('.form-group-output-message').show();
$('#form-output-message').val(tempMessage);
$('.form-group-input-value').hide();
$('#form-scene-input-value').tagsinput('removeAll');
}else {
$('.form-group-go-to-chapter').hide();
$('.form-group-max-repeat-number').hide();
$('.form-group-output-message').show();
$('#form-output-message').val(tempMessage);
$('.form-group-input-value').show();
$('#form-scene-input-value').tagsinput('removeAll');
$('#form-scene-input-value').tagsinput('add',tempInputValue);
}
}
}
}
addEventListener("mousedown", beginTouch, false);
addEventListener("mousemove", checkTouch, false);
addEventListener("mouseup", doneTouch, false);
addEventListenerMulti("touchstart", beginTouch, false, ".block");
saveChapter = function() {
let id = $('#form-chapter-id').val();
let title = $('#form-chapter-title').val();
let memberGroup = $('#form-chapter-member_group').val();
let schedule = $('#form-schedule').val();
let timeout = $('#form-timeout').val();
let data = {
id: id,
title: title,
chapter: JSON.stringify(flowy.output()),
memberGroup: memberGroup,
schedule: schedule,
timeout: timeout
};
$.ajax("ajax/do-save", {
data: data,
dataType: "json",
method: "POST",
async: true,
success: function (resultData) {
if (resultData.result == 'true') {
$('#form-chapter-id').val(resultData.id);
window.close();
window.opener.location.reload();
} else {
alert('aa.');
}
}
});
}
}
$('#form-scene-input-value').change(function() {
$(tempblock).find('.scene-input-values').html($(this).val());
$(tempblock).find('input[name=inputValues]').val($(this).val());
});
$('#form-output-message').keyup(function() {
$(tempblock).find('.scene-output-message').html($(this).val());
$(tempblock).find('input[name=outputMessage]').val($(this).val());
});
$('#form-go-to-chapter').change(function() {
$(tempblock).find('.scene-go-to-chapter').html($('#form-go-to-chapter option:checked').text());
$(tempblock).find('input[name=toChapterId]').val($(this).val());
});
$('#form-max-repeat-number').change(function() {
$(tempblock).find('input[name=maxRepeatNumber]').val($(this).val());
});
if ( chapterData != null ) {
flowy.import(chapterData);
}
});
html code
<div class="form-group form-group-extraData" id="box">
<input type="text" class="form-control" id="form-key1" name="key" placeholder="key" autocomplete="off" value="" >
<input type="text" class="form-control" id="form-content1" name="content" placeholder="content" autocomplete="off" value="">
<input type="button" class="btn btn-alt-primary" value="+" onclick="addTextbox()" >