Develop Reference

loop data attributes and set corresponding input value

$(document).on('click', '.atitle', function(){
//for each data attr - corresponding input value = data.value
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='atitle' data-x='lorem' data-y='ipsum' data-z='dolor'>title</div>
<br>
<input type='text' id='input_x'>
<input type='text' id='input_y'>
<input type='text' id='input_z'>
result:
input_x has value lorem
input_y has value ipsum
input_z has value dolor

$(document).on('click', '.atitle', function() {
// get data of all data attributes
// (it's an object like this { x: "lorem", y: "ipsum", ...)}
let data = $(this).data();
// Set data to input values.
Object.entries(data).forEach(([key, value]) => {
let elem = $(`#input_${key}`);
// Check if elem exists before trying to assign a value.
// Just in case if .atitle contains some data attributes,
// which have no mapping to an input element.
elem && elem.val(value);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='atitle' data-x='lorem' data-y='ipsum' data-z='dolor'>title</div>
<br>
<input type='text' id='input_x'>
<input type='text' id='input_y'>
<input type='text' id='input_z'>

you can read this
$(document).on('click', '.atitle', function(){
var title= $(".atitle");
let arr=title.data();
console.log(arr)
$('input').each(function( index ){
$( this ).val(arr[this.id.split("_")[1]])
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='atitle' data-x='lorem' data-y='ipsum' data-z='dolor'>title</div>
<br>
<input type='text' id='input_x'>
<input type='text' id='input_y'>
<input type='text' id='input_z'>

please take a look at this example
const trigger = document.querySelector(".atitle");
trigger.addEventListener("click", clickHandler);
function clickHandler(event) {
const { x, y, z } = Object.assign({}, event.target.dataset);
document.querySelector("#input_x").value = x;
document.querySelector("#input_y").value = y;
document.querySelector("#input_z").value = z;
}
<div class="atitle" data-x="lorem" data-y="ipsum" data-z="dolor">title</div>
<br />
<input type="text" id="input_x" />
<input type="text" id="input_y" />
<input type="text" id="input_z" />
See
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Please check following code. It's fully independent from keywords of attributes.
$(document).on('click', '.atitle', function(){
var title= $(".atitle");
$.each($(title)[0].attributes, function(key, value) {
var attr_name = value.name
if (attr_name.indexOf('data-') > -1) {
var attr_val = value.value
var attr_idx = attr_name.split('data-')[1]
$('#input_' + attr_idx).val(attr_val)
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='atitle' data-x='lorem' data-y='ipsum' data-z='dolor' data-xx='xlorem' data-yy='yipsum' data-zz='zdolor'>title</div>
<br>
<input type='text' id='input_x'>
<input type='text' id='input_y'>
<input type='text' id='input_z'>
<input type='text' id='input_xx'>
<input type='text' id='input_yy'>
<input type='text' id='input_zz'>

How to add input fields on button click

function add() {
var new_chq_no = parseInt($('#total_chq').val()) + 1;
var new_input = "<input type='text' id='new_" + new_chq_no + "'>";
$('#new_chq').html(new_input);
}
function remove() {
var last_chq_no = $('#total_chq').val();
if (last_chq_no > 1) {
$('#new_' + last_chq_no).append('');
$('#total_chq').val(last_chq_no - 1);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<button onclick="add()">Add</button>
<button onclick="remove()">remove</button>
<div id="new_chq"></div>
<input type="hidden" value="1" id="total_chq">
its adding input fields one time and on second click its not adding anything and remove button is not working

Working fiddle.
You have to use .append() instead of .html() when appending elements :
$('#new_chq').append(new_input);
It will be better to attach the event in your JS code like :
$('.add').on('click', add);
$('.remove').on('click', remove);
NOTE 1: Don't forget to increment the counter #total_chq :
$('#total_chq').val(new_chq_no);
NOTE 2: You've to use .remove() if you want to remove the element.
$('.add').on('click', add);
$('.remove').on('click', remove);
function add() {
var new_chq_no = parseInt($('#total_chq').val()) + 1;
var new_input = "<input type='text' id='new_" + new_chq_no + "'>";
$('#new_chq').append(new_input);
$('#total_chq').val(new_chq_no);
}
function remove() {
var last_chq_no = $('#total_chq').val();
if (last_chq_no > 1) {
$('#new_' + last_chq_no).remove();
$('#total_chq').val(last_chq_no - 1);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<button class="add">Add</button>
<button class="remove">remove</button>
<div id="new_chq"></div>
<input type="hidden" value="1" id="total_chq">

Check the snippet, hope this is what you are looking for :D
function add(){
var new_chq_no = parseInt($('#total_chq').val())+1;
var new_input="<input type='text' id='new_"+new_chq_no+"'>";
$('#new_chq').append(new_input);
$('#total_chq').val(new_chq_no)
}
function remove(){
var last_chq_no = $('#total_chq').val();
if(last_chq_no>1){
$('#new_'+last_chq_no).remove();
$('#total_chq').val(last_chq_no-1);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<button onclick="add()">Add</button>
<button onclick="remove()">remove</button>
<div id="new_chq"></div>
<input type="hidden" value="1" id="total_chq">

$('.add').on('click', add);
$('.remove').on('click', remove);
function add() {
var new_chq_no = parseInt($('#total_chq').val()) + 1;
var new_input = "<input type='text' id='new_" + new_chq_no + "'>";
$('#new_chq').append(new_input);
$('#total_chq').val(new_chq_no);
}
function remove() {
var last_chq_no = $('#total_chq').val();
if (last_chq_no > 1) {
$('#new_' + last_chq_no).remove();
$('#total_chq').val(last_chq_no - 1);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<button class="add">Add</button>
<button class="remove">remove</button>
<div id="new_chq"></div>
<input type="hidden" value="1" id="total_chq">

Delete div with JavaScript

In my View, I'm dynamically add divs like this via JS:
<div id="detail[0]">
<input name="detail.Index" type="hidden" value="0" />
<input name="detail[0].details_name" type="text" />
<input name="detail[0].details_value" type="text" />
<input class="btn" type="button" value="Delete" />
</div>
The question is how to delete the chosen one by clicking the Delete button in div?
JavaScript that adds new divs:
<script>
$(function() {
var i = 0;
$('.plus').click(function()
{
++i;
var html2add = "<div id='detail[" + i + "]'>" +
"<input name='detail.Index' type='hidden' value='" + i + "' />" +
"<input name='detail[" + i + "].details_name' type='text' />" +
"<input name='detail[" + i + "].details_value' type='text' />" +
"<input class='btn' type='button' value='Delete' />"+
"</div>";
$('#details_part').append(html2add);
})
})

To delete the div containing the delete button, just use the remove() function:
$(document).on('click', '.btn', function(){
var cur = $(this);
cur.parent().remove();
});

A node cannot commit suicide (remove itself), therefore you must remove it from its parent node like this:
<script>
function deleteItem (id) {
var item = document.getElementById(id);
item.parentNode.removeChild(item)
}
</script>
<div>
<div id="detail[0]">
<input name="detail.Index" type="hidden" value="0" />
<input name="detail[0].details_name" type="text" />
<input name="detail[0].details_value" type="text" />
<input class="btn" type="button" value="Delete" onclick="deleteItem('detail[0]')" />
</div>
</div>
Codepen example: https://codepen.io/getreworked/pen/MmVMJB

If you are using Jquery you can do
$(".btn").click(function () {
$(this).closest("div").remove();
})

There are many ways to do this.
This one will hide the div using purely JavaScript.
<div id="detail[0]">
<input name="detail.Index" type="hidden" value="0" />
<input name="detail[0].details_name" type="text" />
<input name="detail[0].details_value" type="text" />
<input class="btn" type="button" onclick="removeDiv('detail[0]')" value="Delete" />
</div>
<script>
function removeDiv(id){
document.getElementById(id).style.display = 'none';
}
</script>
Just pass the parameter of the ID of your parent div.
This is Using jQuery:
<div id="detail[0]">
<input name="detail.Index" type="hidden" value="0" />
<input name="detail[0].details_name" type="text" />
<input name="detail[0].details_value" type="text" />
<input class="btn" type="button" value="Delete" />
</div>
<script>
$(function(){
$('.btn').click(function(){
$(this).parent().remove();
});
});
</script>
Cheers,

// Include below jquery 1.7 script in your file first
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js">
// then use this code to remove
<script type="text/javascript">
$(function(){
$('.btn').live('click' , function(){
$(this).parent('div').remove();
});
});
</script>

Change input type, from radio button to checkbox, jquery

First of this is my very first jQuery script if you have any suggestions don’t be shy.
I'm trying to do the following. I have 3 columns of radio buttons. With a checkbox above. When I check one of those checkboxes the column changes from radio button to checkboxes and there can only be changed one row at the time. My script is doing all that, but I have one problem. When I change the type, all inputs get the same attribute of the first input. I think I should have some sort of loop but I have absolutely no idea how to do this.
So, my question: how can I change my script so that just the type change and not the other attributes?
https://jsfiddle.net/bjc3a9y7/1/
$('input[name="switch"]').change(function() {
var checked = $(this).is(':checked');
$('input[name="switch"]').prop('checked',false);
var brandType = $('input[name="brand"]').prop("type");
var fuelType = $('input[name="fuel"]').prop("type");
var bodyType = $('input[name="body"]').prop("type");
if (brandType == 'checkbox') {
var oldInput = $('input[name="brand"]');
$('input[name="brand"]').replaceWith(
$('<input type="radio" />').
attr("value", oldInput.attr("value")).
attr("name", oldInput.attr("name")).
attr("id", oldInput.attr("id"))
)
} else if (fuelType == 'checkbox') {
var oldInput = $('input[name="fuel"]');
$('input[name="fuel"]').replaceWith(
$('<input type="radio" />').
attr("value", oldInput.attr("value")).
attr("name", oldInput.attr("name")).
attr("id", oldInput.attr("id"))
)
} else if (bodyType == 'checkbox') {
var oldInput = $('input[name="body"]');
$('input[name="body"]').replaceWith(
$('<input type="radio" />').
attr("value", oldInput.attr("value")).
attr("name", oldInput.attr("name")).
attr("id", oldInput.attr("id"))
)
};
if(checked) {
$(this).prop('checked',true);
var id = $(this).attr("id");
var oldInput = $('input[name="' + id + '"]');
$('input[name="' + id + '"]').replaceWith(
$('<input type="checkbox" />').
attr("value", oldInput.attr("value")).
attr("name", oldInput.attr("name")).
attr("id", oldInput.attr("id"))
)
};
});
#container {
display: flex;
flex-direction: row;
}
.filter {
width: 150px;
display: flex;
flex-direction: column;
}
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div id='container'>
<div class='filter'>
<header>
Brand <input type='checkbox' id='brand' name='switch' class='switch'>
</header>
<div id='brand'>
<div class='filter-item'>
<span><input type='radio' id='mercedes' name='brand' value='mercedes'></span>
<label for='mercedes'><span></span>Mercedes-benz</label>
</div>
<div class='filter-item'>
<input type='radio' id='bmw' name='brand' class='brand' value='bmw'>
<label for='bmw'><span></span>BMW</label>
</div>
<div class='filter-item'>
<input type='radio' id='audi' name='brand' class='brand' value='audi'>
<label for='audi'><span></span>Audi</label>
</div>
<div class='filter-item'>
<input type='radio' id='ford' name='brand' class='brand' value='ford'>
<label for='ford'><span></span>Ford</label>
</div>
<div class='filter-item'>
<input type='radio' id='dodge' name='brand' class='brand' value='dodge'>
<label for='dodge'><span></span>Dodge</label>
</div>
</div>
</div>
<div class='filter'>
<header>
Fuel <input type='checkbox' id='fuel' name='switch' class='switch'>
</header>
<div class='filter-item'>
<input type='radio' id='diesel' name='fuel' class='fuel' value='diesel'>
<label for='diesel'><span></span>Diesel</label>
</div>
<div class='filter-item'>
<input type='radio' id='gasoline' name='fuel' class='fuel' value='gasoline'>
<label for='gasoline'><span></span>Gasoline</label>
</div>
<div class='filter-item'>
<input type='radio' id='electric' name='fuel' class='fuel' value='electric'>
<label for='electric'><span></span>Electric</label>
</div>
<div class='filter-item'>
<input type='radio' id='other' name='fuel' class='fuel' value='other'>
<label for='other'><span></span>Other</label>
</div>
</div>
<div class='filter'>
<header>
Body <input type='checkbox' id='body' name='switch' class='switch'>
</header>
<div class='filter-item'>
<input type='radio' id='convertible' name='body' class='body' value='convertible'>
<label for='convertible'><span></span>Convertible</label>
</div>
<div class='filter-item'>
<input type='radio' id='coupe' name='body' class='body' value='coupe'>
<label for='coupe'><span></span>Coupe</label>
</div>
<div class='filter-item'>
<input type='radio' id='sedan' name='body' class='body' value='sedan'>
<label for='sedan'><span></span>Sedan</label>
</div>
<div class='filter-item'>
<input type='radio' id='station' name='body' class='body' value='station'>
<label for='station'><span></span>Station wagon</label>
</div>
</div>
</div>

Well I didn't stop trying and finally I got it to work with .each() loops. I added a checkbox selection limitation of 2 as well. I'm new to JQuery so maybe the code isn't as clean as I would like, but it seems to work perfectly.
https://jsfiddle.net/bjc3a9y7/2/
$('input[name="switch"]').change(function() {
var checked = $(this).is(':checked');
$('input[name="switch"]').prop('checked',false);
var arr = ["brand", "fuel", "body"];
$.each( arr, function( i, val ) {
var type = $('input[name="' + val + '"]').prop("type");
if (type == 'checkbox') {
$('input[name="' + val + '"]').each(function(index, value){
var oldInput = $(value);
if(index == 0){
$(value).replaceWith(
$('<input type="radio" />').
prop("value", oldInput.prop("value")).
prop("name", oldInput.prop("name")).
prop("id", oldInput.prop("id")).
prop('checked',true)
)
} else {
$(value).replaceWith(
$('<input type="radio" />').
prop("value", oldInput.prop("value")).
prop("name", oldInput.prop("name")).
prop("id", oldInput.prop("id"))
)
}
});
};
});
if(checked) {
$(this).prop('checked',true);
var id = $(this).prop("id");
$('input[name="' + id + '"]').each(function(index, value){
var oldInput = $(value);
var checked2 = $(value).is(':checked');
if(checked2) {
$(value).replaceWith(
$('<input type="checkbox" />').
prop("value", oldInput.prop("value")).
prop("name", oldInput.prop("name")).
prop("id", oldInput.prop("id")).
prop('checked',true)
)
}else{
$(value).replaceWith(
$('<input type="checkbox" />').
prop("value", oldInput.prop("value")).
prop("name", oldInput.prop("name")).
prop("id", oldInput.prop("id"))
)
}
});
// limit selection checkboxes
$('input[name="' + id + '"]').change(function(){
var max= 2;
if( $('input[name="' + id + '"]:checked').length == max ){
$('input[name="' + id + '"]').prop('disabled', 'disabled');
$('input[name="' + id + '"]:checked').removeProp('disabled');
}else{
$('input[name="' + id + '"]').removeProp('disabled');
}
});
}
});

Dynamically add or remove input box using jQuery

The problem in my case is I can dynamically add / remove input boxes, but the problem is when I manually add a set of input box and remove button instead of press add button to create one, it can not remove it.
Is it possible to have 3 sets of input boxes but 2 remove buttons?
Thank you for any kind of help.
JSFiddle
<script>
$(document).ready(function() {
$("#add").click(function() {
var intId = $("#buildyourform div").length + 1;
var label = $("<label>Field Name</label>");
var labelType = $("<label>Field Type</label>");
var labelReq = $("<label>Require</label>");
var labelTag = $("<label>Tag</label>");
var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
var fName = $("<input type=\"text\" name=\"inputName[]\" class=\"required\" />");
var fTag = $("<input type=\"text\" name=\"inputTag[]\" class=\"required\" />");
var fReq = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"1\">Yes</option><option value=\"0\">No</option></select>");
var fType = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"textbox\">Text</option><option value=\"textarea\">Paragraph</option></select>");
var removeButton = $("<input type=\"button\" class=\"remove\" value=\"Remove\" />");
removeButton.click(function() {
$(this).parent().remove();
});
fieldWrapper.append(label);
fieldWrapper.append(fName);
fieldWrapper.append('<br>');
fieldWrapper.append(labelType);
fieldWrapper.append(fType);
fieldWrapper.append('<br>');
fieldWrapper.append(labelReq);
fieldWrapper.append(fReq);
fieldWrapper.append('<br>');
fieldWrapper.append(labelTag);
fieldWrapper.append(fTag);
fieldWrapper.append('<br>');
fieldWrapper.append(removeButton);
$("#buildyourform").append(fieldWrapper);
});
});
</script>
</head>
<body>
<form id="config" method="post" action="config.php" >
<fieldset id="buildyourform">
<legend>Build your own form!</legend>
<!-- I manually create a set of input box here -->
<div class="fieldwrapper" id="field1"><label>Field Name</label><input type="text" name="inputName[]" class="required"><br><label>
Field Type</label><select class="fieldtype">
<option value="checkbox">Checked</option><option value="textbox">Text</option><option value="textarea">Paragraph</option></select><br><label>Require</label>
<select class="fieldtype"><option value="checkbox">Checked</option>
<option value="1">Yes</option><option value="0">No</option></select><br><label>
Tag</label><input type="text" name="inputTag[]" class="required"><br><input type="button" class="remove" value="Remove"></div>
<!-- I manually create a set of input box here -->
<input type="text" name="input[]" value="test">
</fieldset>
<input type="button" value="Add a field" class="add" id="add" />
<input type="submit" value="Submit">
</form>
</html>

Try setting the remove button actions when the document is loaded.
Try it here or use the code below.
<script>
$(document).ready(function() {
$('.remove').click(function(){
$(this).parent().remove();
});
$("#add").click(function() {
var intId = $("#buildyourform div").length + 1;
var label = $("<label>Field Name</label>");
var labelType = $("<label>Field Type</label>");
var labelReq = $("<label>Require</label>");
var labelTag = $("<label>Tag</label>");
var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
var fName = $("<input type=\"text\" name=\"inputName[]\" class=\"required\" />");
var fTag = $("<input type=\"text\" name=\"inputTag[]\" class=\"required\" />");
var fReq = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"1\">Yes</option><option value=\"0\">No</option></select>");
var fType = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"textbox\">Text</option><option value=\"textarea\">Paragraph</option></select>");
var removeButton = $("<input type=\"button\" class=\"remove\" value=\"Remove\" />");
removeButton.click(function() {
$(this).parent().remove();
});
fieldWrapper.append(label);
fieldWrapper.append(fName);
fieldWrapper.append('<br>');
fieldWrapper.append(labelType);
fieldWrapper.append(fType);
fieldWrapper.append('<br>');
fieldWrapper.append(labelReq);
fieldWrapper.append(fReq);
fieldWrapper.append('<br>');
fieldWrapper.append(labelTag);
fieldWrapper.append(fTag);
fieldWrapper.append('<br>');
fieldWrapper.append(removeButton);
$("#buildyourform").append(fieldWrapper);
});
});
</script>
</head>
<body>
<form id="config" method="post" action="config.php" >
<fieldset id="buildyourform">
<legend>Build your own form!</legend>
<!-- I manually create a set of input box here -->
<div class="fieldwrapper" id="field1"><label>Field Name</label><input type="text" name="inputName[]" class="required"><br><label>
Field Type</label><select class="fieldtype">
<option value="checkbox">Checked</option><option value="textbox">Text</option><option value="textarea">Paragraph</option></select><br><label>Require</label>
<select class="fieldtype"><option value="checkbox">Checked</option>
<option value="1">Yes</option><option value="0">No</option></select><br><label>
Tag</label><input type="text" name="inputTag[]" class="required"><br><input type="button" class="remove" value="Remove"></div>
<!-- I manually create a set of input box here -->
<input type="text" name="input[]" value="test">
</fieldset>
<input type="button" value="Add a field" class="add" id="add" />
<input type="submit" value="Submit">
</form>
</html>​

This is an excellent case to use templates as it makes the hole thing much more maintainable rather than create the entire form div in JavaScript.
Live code: http://jsbin.com/uzelix/edit#javascript,html
HTML
<fieldset id="buildyourform">
<legend>Build your own form!</legend>
<div id="fields"></div>
</fieldset>
<button class="btn-add">Add field</button>
<!-- I manually create a set of input box here -->
<script id="fieldTemplate" type="text/x-jquery-tmpl">
<div class="fieldwrapper" id="field_${Id}">
<label>Field Name</label>
<input type="text" name="fieldname_${Id}" class="required">
<label>Field Type</label>
<select class="fieldtype_${Id}">
<option value="checkbox">Checked</option>
<option value="textbox">Text</option>
<option value="textarea">Paragraph</option>
</select>
<label>Require</label>
<select class="fieldtype_${Id}">
<option value="checkbox">Checked</option>
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<label>Tag</label>
<input type="text" name="fieldtag_${Id}" class="required">
<div class="control-button">
<button class="btn-remove">Remove</button>
</div>
</div>
</script>
<!-- I manually create a set of input box here -->
jQuery
$(function(){
$(".btn-add").click(function() {
addField();
});
$(".btn-remove").live("click", function() {
$(this).closest(".fieldwrapper").slideUp("slow", function() {
$(this).remove();
clearRemove();
});
});
// add first field
addField();
});
function addField() {
var i = $(".fieldwrapper").length;
$("#fieldTemplate").tmpl({ Id: i }).appendTo("#fields");
clearRemove();
}
function clearRemove() {
// hide all remove buttons except last one so we don't get
// multiple ids... or use a counter to keep ids unique.
if($(".fieldwrapper").length > 1) {
$(".btn-remove:last").show();
$(".btn-remove:not(:last)").hide();
}
else
$(".btn-remove").hide();
}