We Keep Coding

Is there a way I can clone my input fields and save the data during each duplication?

With JS, I populate the form with a group of fields which I then either duplicate or remove.
As I duplicate the fields, my intention is to have the input values stored in an object.
When I click on the plus button, the fields duplicate, but the values entered disappear and the data is not captured.
JS
var html = `<div class="form-inline">
<div class="form-group">
<label class="sr-only" for="field-name">Field Name</label>
<input type="text" class="form-control" id="field-name" placeholder="Field Name" name="field_name">
</div>
<span>-</span>
<div class="form-group">
<label class="sr-only" for="field-name">Field Name</label>
<input type="text" class="form-control" id="field-name" placeholder="Field Type" name="field_type">
</div>
<span>-</span>
<div class="form-group">
<label class="sr-only" for="field-name">Field Name</label>
<input type="text" class="form-control" id="field-name" placeholder="Default value" name="field_default">
</div>
<div class="form-group">
<span class="btn btn-danger" data-role="remove">
<span class="glyphicon glyphicon-remove">-</span>
</span>
<span class="add_button btn btn-primary" data-role="add">
<span class="add_button glyphicon glyphicon-plus">+</span>
</span>
</div>
</div>`;
var crud_name = document.querySelector('.crud_name') // this is the first input box
var field_group = document.querySelector('.form-container')
// load the first group of fields to the DOM
field_group.innerHTML += html
var fields = []; // this will store all the database/crud fields
var plus_button = document.querySelector('.add_button')
/**
* The event is used when the user clicks on the plus button
* The event is on the form itself, but the target is the plus button
*/
plus_button.addEventListener('click', function(e) {
e.preventDefault()
if(e.target.classList.contains('add_button')) {
let inputs = e.target.parentElement.querySelectorAll('input')
var obj = {};
Array.from(inputs).forEach(input => {
obj[input.name]= input.value;
})
fields.push(obj);
console.log(fields);
field_group.innerHTML += html
// field_group.insertAdjacentHTML('beforeend', html)
}
})
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<form action="" method="post" id="crud_form">
<div class="form-group">
<input type="text" name="name" placeholder="Enter CRUD name. Eg: Task" class="crud_name form-control">
</div>
<div class="form-container"></div>
<button type="submit" class="btn btn-primary save_crud">Save</button>
</form>
How can I store the data each time I click to add the new group of inputs?
I tried to mimic this here

I'm not sure if i understand your question. If you don't want the inputs to disappear replace the last field_group.innerHTML += html by field_group.insertAdjacentHTML('beforeend', html).

Your button type is submit, so it submits the form when its clicked and the browser will refresh the page. Change the button type to type="button" and the form wont submit when you click the button. Then you can save the form input values to your javascript objects and add the new extra fields in to the page with javascript as well.

How can I get value from cookie to put on an input "date"?

Being directly, I'm working on a project that have a filter button, but one of the requirements is to keep the parameters from the filter forms if the user refreshs the page.
The problem is: When I refresh the page with values into the form, just the DATE input resets
I have three forms, and the last is a Date. I managed to make it work for the first two with jQuery but with the date field it just does not work ...
Does anyone know how to solve it? thank you!
$(document).ready(function() {
if (document.getElementById("car_result"))
document.getElementById("car_result").value = localStorage.getItem("item_result");
if (document.getElementById("car_action"))
document.getElementById("car_action").value = localStorage.getItem("item_action");
if (document.getElementById("dei"))
document.getElementById("dei").value = localStorage.getItem("item_dei");
});
$(window).on('beforeunload', function() {
localStorage.setItem("item_result", document.getElementById("car_result").value);
localStorage.setItem("item_action", document.getElementById("car_action").value);
localStorage.setItem("item_dei", document.getElementById("dei").value);
});
<div class="container-fuid">
<div class="row col-sm-12">
<div class="col-sm-6">
<form class="form text-center" id="form1">
Result: <input id="car_result" type="text" class="form-control"><br>
Last name: <input id="car_action" type="text" class="form-control">
<input placeholder="Initial date" class="textbox-n form-control borderform" type="text" onfocus="(this.type='date')" name="dei" id="dei" /><br><br>
<button>Filter</button>
</form>
</div>
</div>
</div>

Use dropdown selected data Vue js

I have a drop down containing response data from a axios request
<multiselect v-model="order.orderJCname" id="orderJCname" name="orderJCname" :options="orderRCnameoptions" label="nicename"></multiselect>
On selection of the record form my response objects i want to then populate three addtional forms elements with extra data from the selected object?
<div class="row">
<label class="col-sm-12" for="orderACjobtitle">Job Title</label>
<div class="col-sm-12">
<input v-model="orderRCnameoptions.job_title" v-bind="orderRCnameoptions.job_title" name="orderACjobtitle" type="text" disabled class="form-control" id="orderACjobtitle"/>
</div>
</div>
I have tried V-Bind but not sure if im in the right ball park

First of all I'd make use of the select event of vue-multiselect:
<multiselect v-model="order.orderJCname" id="orderJCname" name="orderJCname" :options="orderRCnameoptions" label="nicename" #select="onSelect"></multiselect>
Then in your vue components you create the according method, which stores the selected value:
methods: {
onSelect(selectedOption, id) {
this.selectedOption = selectedOption;
}
}
Last part would be the binding to those 3 text boxes you mentioned. All of them should reference the same data field:
<input type="text" name="text1" v-model="selectedOption.key1" />
<input type="text" name="text2" v-model="selectedOption.key2" />
<input type="text" name="text3" v-model="selectedOption.key3" />
Cheers!

Angular validations - Enabling/Disabling input fields changes validity of form

I have a form. In which I have input fields and I am doing some validation based on input. Also, there is a submit button which enables only if form is valid.
In this form I am enabling/disabling input field in one of the flow.
Initially, when the fields are enable and empty, create button is disabled. After i disable and enable the fields, create button becomes enabled. Although input fields are still empty.
More over button which is enabling/disabling this part is outside of this form.
Here is my code
`
<form method="post" novalidate id="example-widgets-form" name="mdnsCtrl.createSubDomainForm" valdr-type="SubDomain">
<div>
<label>Domain Name</label>
<input required type="text" name="subDomainName" placeholder="Domain Name" ng-model="mdnsCtrl.newDomain.name">
</div>
<div>
<label>Description</label>
<input type="text" name="subDomainDescription" placeholder="Description (Optional)" ng-model="mdnsCtrl.newDomain.description">
</div>
<button type="button" aria-label="Create" ng-click="mdnsCtrl.createDomain();"
ng-disabled="mdnsCtrl.createSubDomainForm.$invalid">
<span class="ng-scope">Create</span>
</button>
</div>
</form>
Tried few things like using $setUntouched() and $setPristine(). But nothing is working. Any help will be appreciated.
Adding a codepen example for this: code
Much Thanks.
`

Its not good practice to mix Angular with jQuery. Please read this great post: “Thinking in AngularJS” if I have a jQuery background?
You can easily achieve requested behavior by using ng-disabled="mdnsCtrl.formDisabled"
JS
var ctrl = this;
ctrl.formDisabled = false;
this.disable = function(){
ctrl.formDisabled = true;
};
this.enable = function(){
ctrl.formDisabled = false;
};
HTML
<div>
<label>Domain Name</label>
<input class="input-field" required type="text" name="subDomainName" placeholder="Domain Name"
ng-disabled="mdnsCtrl.formDisabled"
ng-model="mdnsCtrl.name" >
</div>
<div>
<label>Description</label>
<input class="input-field" type="text" name="subDomainDescription"
ng-disabled="mdnsCtrl.formDisabled"
placeholder="Description (Optional)" ng-model="mdnsCtrl.description">
</div>
Fixed Demo Codepen

I think you missed required attribute for Description input..
<input type="text" name="subDomainDescription" required ng-model="mdnsCtrl.newDomain.description">

html form submiting more fields than expected

I'm dealing with a awful issue, I developed a form with multi fields set (using normal div)
and when I test the submit action I got in the URL the one input not filled, also hidden in
the markup as showed bellow.
http://127.0.0.1:8000/exform.html?user=test&pwd=QWERT1234&user_reg=
And here is the code for the form:
<form id="exform">
<div class="fields" id="login">
<div class="txt">
<label for="user"></label>
<input id="user" type="text" name="user"/>
</div>
<div class="txt">
<label for="pwd"</label>
<input id="pwd" type="password" name="pwd" />
</div>
<input type="submit" value="test" id="test"/>
</div>
<div class="fields" id="register">
<div class="txt">
<label for="user_reg"></label>
<input id="user_reg" name="user_reg" type="text"/>
</div>
<div class="txt">
<label for="pwd2"></label>
<input id="pwd2" type="password" />
</div>
<div class="txt">
<label for="pwdc"></label>
<input id="pwdc" type="password"/>
</div>
<div class="buttons">
<input type="submit" value="OK" id="ok"/>
</div>
</div>
</form>
The strange is that the second field set isn't available in the screen, because in the css
there is a rule to only show the first group with the class "fields"
/*Hide all except first div with class div*/
#exform .fields:not(:first-of-type) {
display: none;
}
So I really want to know why the form is submitting fields out of the scope.
For example, if the second group fieldset is used, when the button submit with value OK is clicked the result produced is similar. In the URL, only the user_reg field parameter is showed filled with the two another fields for the first group without values:
http://127.0.0.1:8000/exform.html?user=&pwd=&user_reg=test
The following code is for submit test:
$(function() {
$('#test').click(function() {
$('#exform').submit(function(event) {
console.log("form Submited:" + document.forms['exform'] + "test");
});
});
$('#ok').click(function() {
$('#exform').submit(function(event) {
console.log("form Submited:" + document.forms['exform'] + "ok");
});
});
});
Doesn't matter I'm got the same URL results
This
http://127.0.0.1:8000/exform.html?user=test&pwd=QWERT1234&user_reg=
or
http://127.0.0.1:8000/exform.html?user=&pwd=&user_reg=test
Instead I'm receiving:
// on #test click
http://127.0.0.1:8000/exform.html?user=test&pwd=QWERT1234
// on #ok click
http://127.0.0.1:8000/exform.html?user_reg=test&pwd2=QWERT1234&pwdc=QWERT123
I can't retrieve the values for pwd2 and pwdc fields in the URL as parameters obtained after submitting.
This got me crazy.

If you do not specify the method method of the form, the default is GET while submitting it. This is the reason to see all form elements in your URL.
Try this:
<form id="exform" method="post">
<!-- form contents -->
See here for details.

When you submit form you submit all it's input fields at ones.
Even if you hide something with css it still exists in html.
When you processed the form you can add a hidden field "input type="hidden"" and give that field a value that tells your script witch fields you want processed in witch case.
And i also fink that post method is better (more secure) especially if you send password.