Develop Reference

Unintentional popup FORM closing when clicking on a BUTTON or on a INPUT ( with JS code)

I'm finding a strange behaviour in a popup FORM when I click on a BUTTON (that operates on some object using a JS code), and on a INPUT (used for submit): in both cases, the form closes, and it is an unexpected action.
Probably is due to something very easy and common that I'm not fixing, but i can't find it.
This is the HTML interested part:
<form name="contactform" id="contactform" class="contact-form">
<div class="contactform-container">
<div class="common">
<label for="name">Nome</label>
<input type="text" id="name" name="name" />
</div>
<div class="common">
<label for="name">Cognome</label>
<input type="text" id="familyName" name="familyName" />
</div>
<div class="common">
<label for="email">e-mail</label>
<input type="text" id="email" name="email" />
</div>
<div class="message">
<label for="message">Annotazioni</label>
<textarea name="message" id="message" class="message"></textarea>
</div>
<div class="passRow">
<fieldset class="validatePass">
<div class="formGroup">
<label class="formLabel"for="password">Password
<span class="passErr"></span>
</label>
<div class="passWrapper">
<input type="password"
id="password"
class="form-control input-md"
name="password"
placeholder="Enter your password">
<span class="showPass">
<i class="fas fa-eye-slash"></i>
</span>
</div>
<p class="progress">Livello di sicurezza</p>
<div id="progressBar">
<div></div>
</div>
<ul id="progressList">
<li>Un carattere minuscolo e uno maiuscolo</li>
<li>Un numero</li>
<li>Un carattere speciale tra "!,%,&,#,#,$,^,*,?,_,-"</li>
<li>Lunghezza minima: 8 caratteri</li>
</ul>
</div>
</fieldset>
</div>
<div class="securityCaptcha">
<p>Inserire il codice nei riquadri sottostanti</p>
<div class="first row">
<div class="refCheck">
<canvas class="valiCaptcha"></canvas>
</div>
<div class="refCheck">
<canvas class="valiCaptcha"></canvas>
</div>
<div class="refCheck">
<canvas class="valiCaptcha"></canvas>
</div>
<div class="refCheck last">
<canvas class="valiCaptcha"></canvas>
<button class="reloadButton">
<i class="fas fa-redo"></i>
</button>
</div>
</div>
<div class="second row">
<div class="refCheck">
<input type="text" name="" maxlength="1">
</div>
<div class="refCheck">
<input type="text" name="" maxlength="1">
</div>
<div class="refCheck">
<input type="text" name="" maxlength="1">
</div>
<div class="refCheck">
<input type="text" name="" maxlength="1">
</div>
</div>
</div>
<div class="contactArea">
<p>Compilare tutti i dati per la prenotazione.</p>
<input type="submit" name="submit" id="submit" value="send">
</div>
</div>
</form>
</div>
The BUTTON that create problem is the one with class reloadButton.
The INPUT is the one with id submit.
I think css aren't necessary.
Regarding the JS part:
let formEls = formPopup.querySelectorAll('.common, .message, .note');
let charCode = [];
const refreshButton = document.querySelectorAll('.reloadButton')[0];
const passInput = document.getElementById('password');
window.onload = function () {
document.querySelector('#reserveBtn').addEventListener('click', function () {
formPopup.classList.add('active');
});
getCode();
formPopup.querySelector('.closeButton').addEventListener('click', function () {
cleanForm();
formPopup.classList.remove('active');
});
formPopup.addEventListener('click', function (ev) {
if (ev.target.id == 'contactform-bg') {
cleanForm();
formPopup.classList.remove('active');
}
});
refreshButton.addEventListener('click', function (ev) {
charCode = [];
getCode();
});
passInput.addEventListener('keyup', function () {
passVal = passInput.value;
checkPass(passVal);
});
};
let cleanForm = function () {
formEls.forEach((item, i) => {
item.classList.remove('typing');
});
// console.log(window['contactform-bg'].innerHTML);
// console.log(document.getElementById('contactform').innerHTML);
// console.log(document.contactform.innerHTML);
document.contactform.name.value = '';
document.contactform.familyName.value = '';
document.contactform.email.value = '';
document.contactform.message.value = '';
passInput.value = '';
};
function getCode() {
let sChars = 'A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,0,1,2,3,4,5,6,7,8,9,!,#,#,$,%,^,&,*,(,)';
let arrayChars = sChars.split(',');
for (var i = 0; i <= 3; i++) {
// trova un indice casuale tra 0 e la lunghezza dell'array
RefIndex = Math.floor(Math.random() * arrayChars.length);
// assegna il carattere estratto dall'array (strana indicazione del font come giapponese(??)
let char = arrayChars[RefIndex];
charCode[i] = char.toLowerCase;
createImgCaptcha(char, i);
}
}
I avoid to add the createImgCaptcha function because it just create CANVAS and doesn't have any impact on the matter.
Is there anyone able to explain to me why the FORM closes? I tried following the steps in JS but found no errors.
Thanks in advance.

Ok, I found the problems and fixed them.
There were little mistakes one different from another. So, I list them:
The "FORM close object": there was a missing '#' characer in the ref attribute, so I changed the HTML from to , adding also the type attribute for greater completeness.
The "class reloadButton": I finally read that a <button>Click to do something</button> is a default submit button. I didn't know... so, I just added the right type attribute to solve, in this way: <button class="reloadButton" type="button">.
The "submit button": in this case, I changed the prevent JS command: function stopEvent(event) { event.preventDefault();}.
Now, everything works correctly. Sorry if I bored you with these silly things; either way, it's always best to learn from mistakes.

Knockoutjs checked binding function call issue

I am trying to call a function when the check box is checked and set the field values accordingly. The checkbox and the address fields are like below
<div class="form-check">
<input class="form-check-input position-static" type="checkbox" id="SameAsShippingAddress" value="SameAsShippingAddress" data-bind="checked: sameAsShippingAddress" />
<label>Check this box if Shipping Address and Billing Address are the same.</label>
</div>
<div class="row">
<div class="col-md-6">
<h4>Shipping Address:</h4>
<div class="form-group required">
<label for="EmailCompetitor" class="control-label">Email:</label>
<input type="email" maxlength="150" id="EmailCompetitor" name="EmailCompetitor" class="form-control" data-bind="value: emailCompetitor" required />
</div>
<div class="form-group required">
<label for="FirstNameCompetitor" class="control-label">First Name:</label>
<input type="text" maxlength="150" id="FirstNameCompetitor" name="FirstNameCompetitor" class="form-control" data-bind="value: firstNameCompetitor" required />
</div>
</div>
<div class="col-md-6">
<h4>Billing Address:</h4>
<div class="form-group required">
<label for="EmailCompetitor_Billing" class="control-label">Email:</label>
<input type="email" maxlength="150" id="EmailCompetitor_Billing" name="EmailCompetitor_Billing" class="form-control" data-bind="value: emailCompetitor_Billing" required />
</div>
<div class="form-group required">
<label for="FirstNameCompetitor_Billing" class="control-label">First Name:</label>
<input type="text" maxlength="150" id="FirstNameCompetitor_Billing" name="FirstNameCompetitor_Billing" class="form-control" data-bind="value: firstNameCompetitor_Billing" required />
</div>
</div>
I want the check box boolean value captured seperately as well as when check box is checked it needs to call the function. So in js I have like
var orderRequestFormViewModel = function () {
var self = this;
self.currentPage = ko.observable(1);
self.referringPage = ko.observable();
...............
self.sameAsShippingAddress = ko.observable().extend({ required: false });
..........
self.sameAsShippingAddress = function () {
if (this.checked) {
$("#EmailCompetitor_Billing").val($("#EmailCompetitor").val());
$("#FirstNameCompetitor_Billing").val($("#FirstNameCompetitor").val());
} else {
$("#EmailCompetitor_Billing").val("");
$("#FirstNameCompetitor_Billing").val("");
}
}
But when the checkbox is checked/unchecked this function is not being called at all
I tried put the breakpoint but the function is not being it. New to this JS world, any help is greatly appreciated

Hey I made you a little snippet to show you that it works perfectly fine when using an observable and checked binding, when checkbox is checked, it is "true" if not it´s "false"
To make custom stuff like setting .val() of other input just use a computed function, it will be called whenever isChecked changes
var model = function () {
var self = this;
self.isChecked = ko.observable(false);
self.doStuffWhenChecked = ko.computed(function(){
if(self.isChecked()){
$('#textinput').val("whatever");
}else{
$('#textinput').val("");
}
},this);
}
var vm = new model();
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<label>Check this: </label>
<input type="checkbox" data-bind="checked: isChecked">
<span data-bind="visible: isChecked()"> Only show when checked </span>
<input type="text" id="textinput" >

How to make jquery.dynamiclist run with newer version of jquery?

I would like to use jquery.dynamiclist library in my procject.
In the demo page that's running smoothly there is a jquery library in version 1.8.2.
In my project I use version 1.11.1 and this makes dynamiclist plugin doesn't work.
With newer version when I process form I get data with names of inputs but without values (I get 'undefined').
Here is the code from demo.
What I have to change to make it run with newer version of jquery?
<form class="form-horizontal">
<h2>Example 1: Basic List</h2>
<div class="control-group">
<label class="control-label">Party</label>
<div class="controls">
<input name="partyName" type="text" placeholder="Party Name">
</div>
</div>
<div class="control-group">
<label class="control-label">Guest List</label>
<div id="example1" class="controls">
<div class="list-item">
<input name="guestList[0].name" type="text" placeholder="Guest Name">
<i class="icon-minus"></i> Remove Guest
</div>
<i class="icon-plus"></i> Add Guest
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" class="btn btn-primary btn-large" value="Process Example 1"/>
</div>
</div>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://github.com/ikelin/jquery.dynamiclist/blob/master/jquery.dynamiclist.min.js"></script>
<script>
(function($) {
$(document).ready(function() {
$("#example1").dynamiclist();
// display form submit data
$("form").submit(function(event) {
event.preventDefault();
var data = "";
$(this).find("input, select").each(function() {
var element = $(this);
if (element.attr("type") != "submit") {
data += element.attr("name");
data += "="
data += element.attr("value");
data += "; "
}
});
alert(data);
location.reload(true);
});
});
})(jQuery);
</script>

Simply change element.attr("value"); to element.val();.
Sorry I had to include the plugin code manually because apparently you cannot include the src directly from github. Also commented the reload for the snippet.
<form class="form-horizontal">
<h2>Example 1: Basic List</h2>
<div class="control-group">
<label class="control-label">Party</label>
<div class="controls">
<input name="partyName" type="text" placeholder="Party Name">
</div>
</div>
<div class="control-group">
<label class="control-label">Guest List</label>
<div id="example1" class="controls">
<div class="list-item">
<input name="guestList[0].name" type="text" placeholder="Guest Name">
<i class="icon-minus"></i> Remove Guest
</div>
<i class="icon-plus"></i> Add Guest
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" class="btn btn-primary btn-large" value="Process Example 1"/>
</div>
</div>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
/* jQuery Dynamic List v 2.0.1 / Copyright 2012 Ike Lin / http://www.apache.org/licenses/LICENSE-2.0.txt */
(function(a){a.fn.dynamiclist=function(d){if(this.length>1){this.each(function(){a(this).dynamiclist(d)});return this}var g=a.extend({itemClass:"list-item",addClass:"list-add",removeClass:"list-remove",minSize:1,maxSize:10,withEvents:false,addCallbackFn:null,removeCallbackFn:null},d);var f=function(o,n,j){var m=o.find("."+j.itemClass).length;if(m<j.maxSize){var l=o.find("."+j.itemClass+":first").clone(j.withEvents);l.find("."+j.removeClass).show().click(function(p){e(o,a(this),p,j)});b(l,m);i(l);var k=o.find("."+j.itemClass+":last");k.after(l);if(j.addCallbackFn!=null){j.addCallbackFn(l)}}if(n!=null){n.preventDefault()}};var e=function(o,k,n,j){var m=o.find("."+j.itemClass).length;var l=k.parents("."+j.itemClass+":first");if(m==j.minSize){i(l)}else{l.remove()}c(o,j);if(j.removeCallbackFn!=null){j.removeCallbackFn(l)}n.preventDefault()};var b=function(j,k){j.find("label, input, select, textarea").each(function(){var m=["class","name","id","for"];for(var n=0;n<m.length;n++){var l=a(this).attr(m[n]);if(l){l=l.replace(/\d+\./,k+".");l=l.replace(/\[\d+\]\./,"["+k+"].")}a(this).attr(m[n],l)}})};var c=function(k,j){k.find("."+j.itemClass).each(function(){var l=k.find("."+j.itemClass).index(this);b(a(this),l)})};var i=function(j){j.find("input[type=text], textarea").val("");j.find("input[type=radio]").attr({checked:false});j.find("input[type=checkbox]").attr({checked:false})};var h=function(k){k.find("."+g.itemClass+":first ."+g.removeClass).hide();var j=k.find("."+g.itemClass).length;while(g.minSize>j){f(k,null,g);j++}k.find("."+g.addClass).click(function(l){f(k,l,g)});k.find("."+g.removeClass).click(function(l){e(k,a(this),l,g)});return k};return h(this)}})(jQuery);
</script>
<script>
(function($) {
$(document).ready(function() {
$("#example1").dynamiclist();
// display form submit data
$("form").submit(function(event) {
event.preventDefault();
var data = "";
$(this).find("input, select").each(function() {
var element = $(this);
if (element.attr("type") != "submit") {
data += element.attr("name");
data += "="
data += element.val();
data += "; "
}
});
alert(data);
//location.reload(true);
});
});
})(jQuery);
</script>

Replicating and differentiating portions of a form

UPDATE:
Using the code that colecmc provide(Thank you!!) I updated the codepen. I like how the date.now is added, but I would like to just do a an incremental increase. Im not sure how to apply that to this function I tried zer00ne's index incremental but am doing something wrong.
let cloneList = [],
index = 0; // index must be declared apart from function or else you will set it to the initial value every time the function is called.
document.getElementById('launch').onclick = function(event) {
event.preventDefault();
var addOnDiv = document.getElementById('addon');
var container = document.getElementById('add-components')
var clonedNode = addOnDiv.cloneNode(true);
var component = clonedNode.querySelector('input');
index++;
clonedNode.id = index+1;
cloneList.push(clonedNode.id);
component.id = `componentID_${clonedNode.id}`;
component.name = `componentName_${clonedNode.id}`;
container.appendChild(clonedNode);
}
Im having an issue with my form. Initially I had two forms on the page. However on submit only the info from the first form was written. I tried combining the forms. Now if i fill out the campaign and component inputs and submit it writes to the correct tables(good!). However the component section is supposed to be replicated. A campaign can have as many components as the user wants. I am using cloneNode and before I combined the table it added more component sections. Now that they are combined the function no longer works. Im confused if this is even the right approach for what Im doing. I included a copdpen that shows a stripped down version of what Im trying to do.
Basically I want to be able to press add component, add as many new components as I'd like fill them out and have then all written as records to the db. I need a way to differentiate all the clones (new ids or names?)
codepen: https://codepen.io/anon_guy/pen/VMZWWW?editors=1010
HTML:
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div class="panel-body">
<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-event" class="form-horizontal">
<div class="col-sm-4">
<label>name</label>
<input type="text" name="name" value="name" placeholder="name" id="name" class="form-control" />
</div>
<div class="col-sm-4">
<label>address</label>
<input type="text" name="address" value="address" placeholder="address" id="address" class="form-control" />
</div>
<div class="col-sm-4">
<label>phone</label>
<input type="text" name="phone" value="phone" placeholder="phone" id="phone" class="form-control" />
<div class="text-danger"></div>
</div>
</div>
<div class="row">
<div class="add_component">
<button id='launch'>Add Component</button>
</div>
</div>
</div>
<div class="wrapper" id="add-components">
<div class="panel panel-default " id="addon">
<div class="panel-heading">
</div>
<div class="panel-body">
<div class="col-sm-6">
<label>component</label>
<input type="text" name="component" value="component" placeholder="component" id="component" class="form-control" />
</div>
</form>
</div>
</div>
</div>
JS:
document.getElementById('launch').onclick = function() {
var addOnDiv = document.getElementById('addon');
var container = document.getElementById('add-components')
var clonedNode = addOnDiv.cloneNode(true);
container.appendChild(clonedNode );
}

You will want to try something like this before appending to the container clonedNode.id = Date.now();
That will provide a way to differentiate all the clones by giving a unique id. You can take it a step further like this:
let cloneList = [];
document.getElementById('launch').onclick = function(event) {
event.preventDefault();
var addOnDiv = document.getElementById('addon');
var container = document.getElementById('add-components')
var clonedNode = addOnDiv.cloneNode(true);
var component = clonedNode.querySelector('input');
clonedNode.id = Date.now();
cloneList.push(clonedNode.id);
component.id = `componentID_${clonedNode.id}`;
component.name = `componentName_${clonedNode.id}`;
container.appendChild(clonedNode);
}
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div class="panel-body">
<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-event" class="form-horizontal">
<div class="col-sm-4">
<label>name</label>
<input type="text" name="name" value="name" placeholder="name" id="name" class="form-control" />
</div>
<div class="col-sm-4">
<label>address</label>
<input type="text" name="address" value="address" placeholder="address" id="address" class="form-control" />
</div>
<div class="col-sm-4">
<label>phone</label>
<input type="text" name="phone" value="phone" placeholder="phone" id="phone" class="form-control" />
<div class="text-danger"></div>
</div>
</div>
<div class="row">
<div class="add_component">
<button id='launch'>Add Component</button>
</div>
</div>
</div>
<div class="wrapper" id="add-components">
<div class="panel panel-default " id="addon">
<div class="panel-heading">
</div>
<div class="panel-body">
<div class="col-sm-6">
<label>component</label>
<input type="text" name="component" value="component" placeholder="component" id="component" class="form-control" />
</div>
</form>
</div>
</div>
</div>

This is the closest I came to what I believe is your way of thinking by looking at your code. (I also removed some unnecessary steps in your code to make it a little bit cleaner). This is for if you must have different names and ID:s on your inputs. However, if you can manage to have the same for both (i.e. component_0, other_0 etc.), you can remove the "names" array and the "names" forEach.
When you want to add an input to your addon-div, just add the ID (and name if you decide to keep it), without the "_0", to the array/s as in the example.
Change the name to "otherName_0" and ID to "otherID_0" in your html and this should work.
var i = 1;
document.getElementById('launch').onclick = function(event) {
event.preventDefault();
var addOnDiv = document.getElementById('addon');
var container = document.getElementById('add-components')
var clonedNode = addOnDiv.cloneNode(true);
var ids = ['componentID', 'otherID'];
var names = ['componentName', 'otherName'];
ids.forEach(function(id) {
var currentInput = clonedNode.querySelector(`#${id}_0`);
currentInput.id = `${id}_${i}`;
});
names.forEach(function(name) {
var currentInput = clonedNode.querySelector(`input[name=${name}_0]`);
currentInput.name = `${name}_${i}`;
});
container.appendChild(clonedNode);
i++;
}

Dynamic Form Input Array Not Copying to csv file in PHP

I have a multipage form with the ability in certain areas to dynamically add inputs for the user to put in more jobs, education, etceteras.
I'm having two problems:
Problem 1
The first is I don't think I'm getting the array values in the proper manner, even though I think I have that part working because I can print them on the screen
Problem 2
Whenever I try to push the values that I am echoing to the screen, all that gets printed to the .csv file is Array
PHP:
$unitLevelPosition = $_POST["unitLevelPosition"];
$oectaUnit = $_POST["oectaUnit"];
$unitPresident = $_POST["unitPresident"];
$csvData = var_dump($unitLevelPosition) . "," . var_dump($oectaUnit) . "," . var_dump($unitPresident);
$fp = fopen("formData.csv", "a");
if($fp)
{
fwrite($fp, $csvData . "\n");
fclose($fp);
}
JS:
var i = 0;
function addUnitInvolvement()
{
i++;
var unitInvolvementDiv = document.createElement("div");
unitInvolvementDiv.innerHTML = '<input type="text" class="four-lines" name="unitLevelPosition[]" placeholder="Position/Committee"> <input type="text" class="four-lines" name="oectaUnit[]" placeholder="Unit"> <input type="text" class="four-lines" name="unitPresident[]" placeholder="Unit President"> <input type="date" class="four-lines" name="unitYear[]"> <input type="button" value="-" onclick="removeUnitInvolvement(this)">';
document.getElementById("unitLevelInvolvement").appendChild(unitInvolvementDiv);
}
function removeUnitInvolvement(unitInvolvementDiv)
{
document.getElementById("unitLevelInvolvement").removeChild(unitInvolvementDiv.parentNode);
};
HTML:
<form method="post" class="scholarshipForm">
<!-- start of page 3 content begins -->
<div id="page3-content">
<p class="subtitleDirection">List offices held or committees you have been involved with a the Unit level. Please include the name of the Unit President at the time of your involvement.</p>
<div class="clearFix"></div>
<div class="input-group" id="unit-level-involvement">
<label id="unitInvolvement">Unit Involvement *</label>
<div id="unitLevelInvolvement">
<input type="text" class="two-lines-textbox" name="unitLevelPosition[]" id="unitLevelPosition_1" placeholder="Position/Committee" onBlur="this.placeholder='Position/Committee'" onFocus="this.placeholder=''" onKeyUp="checkPage3()" />
<input type="text" class="two-lines-textbox" name="oectaUnit[]" id="oectaUnit_1" placeholder="Unit" onBlur="this.placeholder='Unit'" onFocus="this.placeholder=''" onKeyUp="checkPage3()" />
<div class="clearFix"></div>
<input type="text" class="two-lines-textbox" name="unitPresident[]" id="unitPresident_1" placeholder="Unit President" onBlur="this.placeholder='Unit President'" onFocus="this.placeholder=''" onKeyUp="checkPage3()" />
<input type="date" class="two-lines-textbox" name="unitYear[]" id="unitYear_1" onKeyUp="checkPage3()" />
<input type="button" value="+" onClick="addUnitInvolvement()" />
</div>
</div><!-- end of unit-level-involvement div-->
<button type="button" id="nextButton-page-3" disabled="disabled" onClick="nextPage()">Next</button>
<button type="button" id="backButton-page-3" onClick="previousPage()">Back</button>
</div><!--end of page3 content -->
<!-- page 3 content ends -->
<input type="submit" id="finalSubmit" disabled="disabled" />
</div><!--end of page 6 content -->
<div class="clearFix"></div>
</form><!--endForm-->