My concept is to create maximum 20 blocks( it contains some input field) on button click "Add", If you tap on "Add" button then new block could be added, that was successfully done. Now i want to remove the block which is created on "Add" button click.
Eg: If user is create 5 block by using in "ADD" button. If user taps on "Minus" button, in Block 2, then Block 2 should be removed from the list and count of the block should be updated correspondingly.
http://www.w3schools.com/code/tryit.asp?filename=FADO51NINJMD
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var i = 1;
$(document).ready(function () {
$("#commentForm").validate();
});
function add()
{
var objTo = document.getElementById('room_fileds')
var divtest = document.createElement("div");
var label = document.createElement('label');
label.innerHTML = '<h5 class="label">Block '+i+'<input type="button" value="Minus" onclick="minus()"></h5>';
divtest.appendChild(label);
var length = $('#Length').clone().attr('id', 'Length' + i).attr('name', 'Length' + i);
var attribute = $('#Attribute').clone().attr('id', 'Attribute' + i).attr('name', 'Attribute' + i);
var column = $('#Column').clone().attr('id', 'Column' + i).attr('name', 'Column' + i);
length.appendTo(divtest);
attribute.appendTo(divtest);
column.appendTo(divtest);
objTo.appendChild(divtest);
i++
}
function minus()
{
}
</script>
</head>
<body>
<form id="commentForm" method="post" action="">
<div id="room_fileds">
Static Field
<input type="text" name="Length" maxlength="2" id="Length" onkeypress="return isNumberKey(event);" placeholder="Field 1 Length" class="form-control required">
<input type="text" name="Attribute" id="Attribute" placeholder="Field 1 Attribute" class="form-control" required>
<select name="Column" id="Column" class="required" >
<option selected value="">Field Column </option>
<option value="1">YES</option>
<option value="2">NO</option>
</select>
</div>
<br><br>
<input class="submit" type="submit" value="Submit1">
<input type="button" value="Add" onclick="add()">
</form>
</body>
</html>
Set id while creating div node
divtest.setAttribute("id", "div" + i);
For minus function pass created id number in onclick
label.innerHTML = '<h5 class="label">Block '+i+'<input type="button" onclick="minus('+i+')" value="Minus"></h5>';
And set minus function as
function minus(_id)
{
var _div_id = "div" + _id;
var _div_elem = document.getElementById(_div_id);
_div_elem.parentNode.removeChild(_div_elem);
}
var i = 1;
$(document).ready(function () {
//$("#commentForm").validate();
});
function add()
{
var objTo = document.getElementById('room_fileds')
var divtest = document.createElement("div");
divtest.setAttribute("id","div" + i);
var label = document.createElement('label');
label.innerHTML = '<h5 class="label">Block '+i+'<input type="button" onclick="minus('+i+')" value="Minus"></h5>';
divtest.appendChild(label);
var length = $('#Length').clone().attr('id', 'Length' + i).attr('name', 'Length' + i);
var attribute = $('#Attribute').clone().attr('id', 'Attribute' + i).attr('name', 'Attribute' + i);
var column = $('#Column').clone().attr('id', 'Column' + i).attr('name', 'Column' + i);
length.appendTo(divtest);
attribute.appendTo(divtest);
column.appendTo(divtest);
objTo.appendChild(divtest);
i++
}
function minus(_id)
{
var _div_id = "div" + _id;
var _div_elem = document.getElementById(_div_id);
_div_elem.parentNode.removeChild(_div_elem);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<form id="commentForm" method="post" action="">
<div id="room_fileds">Static Field
<input type="text" name="Length" maxlength="2" id="Length" onkeypress="return isNumberKey(event);" placeholder="Field 1 Length" class="form-control required">
<input type="text" name="Attribute" id="Attribute" placeholder="Field 1 Attribute" class="form-control" required>
<select name="Column" id="Column" class="required" >
<option selected value="">Field Column </option>
<option value="1">YES</option>
<option value="2">NO</option>
</select>
</div><br><br>
<input class="submit" type="submit" value="Submit1">
<input type="button" value="Add" onclick="add()">
</form>
You can just remove the label parent on click. See the minus function content.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var i = 1;
$(document).ready(function () {
$("#commentForm").validate();
});
function add()
{
var objTo = document.getElementById('room_fileds')
var divtest = document.createElement("div");
var label = document.createElement('label');
label.innerHTML = '<h5 class="label">Block '+i+'<input type="button" value="Minus" onclick="minus()"></h5>';
divtest.appendChild(label);
var length = $('#Length').clone().attr('id', 'Length' + i).attr('name', 'Length' + i);
var attribute = $('#Attribute').clone().attr('id', 'Attribute' + i).attr('name', 'Attribute' + i);
var column = $('#Column').clone().attr('id', 'Column' + i).attr('name', 'Column' + i);
length.appendTo(divtest);
attribute.appendTo(divtest);
column.appendTo(divtest);
objTo.appendChild(divtest);
i++
}
function minus()
{
//This is the clicked label, so we remove the parent (the div)
$(this).parent().remove();
}
</script>
</head>
<body>
<form id="commentForm" method="post" action="">
<div id="room_fileds">
Static Field
<input type="text" name="Length" maxlength="2" id="Length" onkeypress="return isNumberKey(event);" placeholder="Field 1 Length" class="form-control required">
<input type="text" name="Attribute" id="Attribute" placeholder="Field 1 Attribute" class="form-control" required>
<select name="Column" id="Column" class="required" >
<option selected value="">Field Column </option>
<option value="1">YES</option>
<option value="2">NO</option>
</select>
</div>
<br><br>
<input class="submit" type="submit" value="Submit1">
<input type="button" value="Add" onclick="add()">
</form>
</body>
</html>
<div class="removePhoneDiv">
<input type="button" value="Add Text Field" id="add_button" >
<ul style="list-style:none;" id="phoneNumberList">
<li class='Textbox1' style="float:left;width:100%;">
<div style=" margin-top: 2%; " class='form-group' id='answerdiv'>
<input type='text' class='input_phone form-control1'>
<img style="float:left;" src="images/close.png" class="remove_phone_number">
</div>
</li>
</ul>
</div>
<script>
var wrapper = $(".form-group");
$("#add_button").click(function (e) {
e.preventDefault();
$("#phoneNumberList").append("<li class='Textbox1'><div class='form-group' id='answerdiv'><input type='text' class='form-control1' ><img src=\"images/close.png\" class=\"remove_phone_number\"></div></li>");
});
$(".removePhoneDiv").on("click", ".remove_phone_number", function (e) {
e.preventDefault();
$(this).parent('div').parent('li').remove();
})
</script>
Related
I am trying to detect if an HTML FORM in a web page contains ComboBox or List. . I could detect all the rest and here are my efforts so far. As you can see, the ComboBox is not detected. I understand its not an input control. Is there any other way to do this?
MY SAMPLE CODE:
<html>
<head>
<script language="javascript" type="text/javascript">
function detectTypes() {
var str = document.getElementById("Select1").value;
var inputs = document.querySelectorAll('input');
var inputtype = document.getElementsByTagName ("input");
for(i =0; i < inputs.length; i++)
{
//Output result to console
console.log("The " + i + ". input type = " + inputs[i].type);
//Output result to multiline textbox
var s = inputs[i].type;
document.getElementById('output').value += s.substring(s.length - 10) + '\n';
}
}
</script>
</head>
<body>
<form name="form1" id="form1" method="">
<p>
<label>TextBox </label>
<input type="text" id="Name">
</p>
<p>
<label>Password</label>
<input type="password" id=phone>
</p>
<p>
<label>Dropdown Comobox</label>
<select name="Options" id="Select1">
<option value="Jack,12345">Jack</option>
<option value="John,45678">John</option>
<option value="Tom,98765">Tom</option>
</select>
</p>
<P>
<label>CheckBox</label>
<input type="checkbox" id="check1">
<p>
<label>Radio Button</label>
<input type="radio" id="Option1" name="Option1" value="">
<p>
<label>Color Box</label>
<input type="color" name="ColorCode" id="color-picker">
</form>
Click to List types of controls
<p>
<label>RESULT:</label>
<textarea name="output" id="output" rows="7" cols="30"></textarea>
</p>
</body>
</html>
I would praise your work becse it is very creative
I have solved your problem
<html>
<body>
<form name="form1" id="form1" method="">
<p>
<label>TextBox </label>
<input type="text" id="Name">
</p>
<p>
<label >Password</label>
<input type="password" id="phone">
</p>
<p>
<label>Dropdown Comobox</label>
<select name="Options" id="Select1">
<option value="Jack,12345">Jack</option>
<option value="John,45678">John</option>
<option value="Tom,98765">Tom</option>
</select>
<input type="hidden">
</p>
<P>
<label>CheckBox</label>
<input type="checkbox" id="check1">
<p>
<label>Radio Button</label>
<input type="radio" id="Option1" name="Option1" value="">
<p>
<label>Color Box</label>
<input type="color" name="ColorCode" id="color-picker">
</form>
Click to List types of controls
<p>
<label>RESULT:</label>
<textarea name="output" id="output" rows="7" cols="30"></textarea>
</p>
</body>
</html>
/*
//* user script
function detectTypes() {
//var str = document.getElementById("Select1").value;
var inputs = document.querySelectorAll('input');
var inputtype = document.getElementsByTagName("input");
for(i =0; i < inputs.length; i++)
{
//Output result to console
//console.log("The " + i + ". input type = " + inputs[i].type);
//Output result to multiline textbox
var s = inputs[i].type;
document.getElementById('output').value += s.substring(s.length - 10) + '\n' ;
}
} */
function detectTypes(){
// const inputtype = { "'SELECT'" : 'Dropdown' , 'OPTION' : 'Combo Box'} // I wish, it would work as alert(inputtype.SELECT) will show deopdown
var inputs = document.querySelectorAll("input, select");
var s = "hi";
for(i=0;i<=inputs.length;i++){
var tagnames = inputs[i].tagName;
if(tagnames == "INPUT"){
document.getElementById('output').value += inputs[i].type + '\n';
}else{
document.getElementById('output').value += tagnames.toLowerCase() + '\n';
}
}
}
setTimeout(detectTypes, 1);
I would be glad if you contact. I have to discuss further about this problem. Contact me libertmahin#gmail.com
<input type="text" name="members[0].name">
<input type="text" name="members[0].address">
Javascript code :
var input_text;
var inputs=document.querySelectorAll("input[type=text],textarea, select");
_.each(inputs, function(e, i) {
var keyName = $(e).attr("name");
if (typeof keyName != "undefined") {
var text = $(e).parent().find('label').text();
if ($(e).is('select')) {
input_text = input_text + "<tr><td>" + text + "</td><td> " + $(e).find(':selected').text() + "</td></tr>";
}
else {
input_text = input_text + "<tr><td>" + text + "</td><td> " + $(e).val() + "</td></tr>";
}
}
});
console.log(input_text);
As You can see, I m getting the values of all the inputs in $(e).val() except those above mentioned inputs.
Those inputs aren't an "array" in the browser. They just use a naming convention in their name which is used by some server-side handling (for instance, in PHP) to organize the form data for you when it's submitted.
I don't know what you mean by "previewing," but you can see the values of those elements by simply looping through the elements of your form (yourForm.elements), or by using yourForm.querySelectorAll("input[type=text]") (or $(yourForm).find("input[type=text]") using jQuery — I missed the jquery tag on your question at first).
Example of theForm.elements:
document.querySelector("form input[type=button]").addEventListener("click", function() {
var form = document.getElementById("the-form");
Array.prototype.forEach.call(form.elements, function(element) {
if (element.type === "text") {
console.log(element.name + " = " + element.value);
}
});
});
<form id="the-form">
<input type="text" name="members[0].name" value="name 0">
<input type="text" name="members[0].address" value="address 0">
<input type="text" name="members[1].name" value="name 1">
<input type="text" name="members[1].address" value="address 1">
<input type="text" name="members[2].name" value="name 2">
<input type="text" name="members[2].address" value="address 2">
<div>
<input type="button" value="Show">
</div>
</form>
Example of theForm.querySelectorAll:
document.querySelector("form input[type=button]").addEventListener("click", function() {
var form = document.getElementById("the-form");
Array.prototype.forEach.call(form.querySelectorAll("input[type=text]"), function(element) {
console.log(element.name + " = " + element.value);
});
});
<form id="the-form">
<input type="text" name="members[0].name" value="name 0">
<input type="text" name="members[0].address" value="address 0">
<input type="text" name="members[1].name" value="name 1">
<input type="text" name="members[1].address" value="address 1">
<input type="text" name="members[2].name" value="name 2">
<input type="text" name="members[2].address" value="address 2">
<div>
<input type="button" value="Show">
</div>
</form>
Example of $(theForm).find:
$("form input[type=button]").on("click", function() {
var form = document.getElementById("the-form");
$(form).find("input[type=text]").each(function() {
console.log(this.name + " = " + this.value);
});
// Of course, we could have just used `$("#the-form input[type=text]").each`...
// but I was assuming you'd already have `form`
});
<form id="the-form">
<input type="text" name="members[0].name" value="name 0">
<input type="text" name="members[0].address" value="address 0">
<input type="text" name="members[1].name" value="name 1">
<input type="text" name="members[1].address" value="address 1">
<input type="text" name="members[2].name" value="name 2">
<input type="text" name="members[2].address" value="address 2">
<div>
<input type="button" value="Show">
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
So many ways to get the input type values using formID
$('#formId input, #formId select').each(
function(index){
var input = $(this);
}
);
OR
var formElements = new Array();
$("form :input").each(function(){
formElements.push($(this));
});
OR
var $form_elements = $("#form_id").find(":input");
hope it helps you.
You can use serializeArray or serialize for it .
$("form").serializeArray();
The .serializeArray() method creates a JavaScript array of objects, ready to be encoded as a JSON string. Doc
I want to add dynamic dropdown & textbox. But for textbox is ok. I am not ok in dropdown. The Data are not include in Dropdown.I am loop to retrieve data in blade.I am describe my code.
form.blade.php
<div class="form-group">
<label for="type">Gas Container Type</label>
<select class="form-control input-sm" name="gas" id="gas">
#foreach($gass as $gas)
<option value="{{$gas->name}}">{{$gas->name}}</option>
#endforeach
</select><!-- end of Item_Drop_Down -->
</div>
<input name="name[]" type="text" id="name" class="name" placeholder="Input 1">
Add More Input Field
master.blade.php
<script>
$(document).ready(function () {
var e = document.getElementById("gas");
$('#add').click(function () {
var inp = $('#box');
var i = $('input').size() + 1;
$('<div id="box' + i + '">' + '' +
'<input type="text" id="name" class="name" name="name[]" placeholder="Input ' + i + '"/>' + '' +
'<select id="gas" name="gas[]" ' + i + '"/><img src="remove.png" width="32" height="32" border="0" align="top" class="add" id="remove" /> </div>')
.appendTo($('#box form'));
i++;
});
{{--<select data-bind="options: availableCountries, optionsText: 'name', optionsValue: 'value'"></select>--}}
$('body').on('click', '#remove', function () {
$(this).parent('div').remove();
});
});
controller.php
public function store(Request $request)
{
foreach ($request->get('name') as $name) {
$kg = new WarehouseGasIn();
$kg->kg = $name;
//dd($request->get('name'));
$kg->save();
}
<script>
$(document).ready(function () {
$('#add').click(function () {
var inp = $('#box');
var i = $('input').size() + 1 - 2;
$('<div id=box' + i + '"><input type="text" id="name" class="name" name="name[0][]" placeholder="Input ' + i + '"/><select class="form-control input-sm" name="shop" id="shop"><option value="">{{"Shop"}}</option>#foreach($branches as $branch)<option value="{{$branch->id}}">{{$branch->name}}</option>#endforeach</select><select name="name[1][]" id="gas" ' + i + '>#foreach($gass as $gas) <option value="{{$gas->id}}">{{$gas->name}}</option>#endforeach</select><img src="remove.png" width="32" height="32" border="0" align="top" class="add" id="remove" /> </div>').appendTo($('#box form'));
i++;
});
$('body').on('click', '#remove', function () {
$(this).parent('div').remove();
});
});
</script>
is this the sort of thing you are trying to achieve?
$(document).ready(function () {
var boxesWrap = $('#boxes-wrap');
var boxRow = boxesWrap.children(":first");
var boxRowTemplate = boxRow.clone();
boxRow.find('button.remove-gas-row').remove();
// nb can't use .length for inputCount as we are dynamically removing from middle of collection
var inputCount = 1;
$('#add').click(function () {
var newRow = boxRowTemplate.clone();
inputCount++;
newRow.find('input.name').attr('placeholder', 'Input '+inputCount);
boxesWrap.append(newRow);
});
$('#boxes-wrap').on('click', 'button.remove-gas-row', function () {
$(this).parent().remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxes-wrap">
<div>
<div class="form-group">
<label>Gas Container Type</label>
<select class="form-control input-sm" name="gas[]">
<option value="gas-1">Container 1</option>
<option value="gas-2">Container 2</option>
</select><!-- end of Item_Drop_Down -->
</div>
<input name="name[]" type="text" class="name" placeholder="Input 1">
<button class="remove-gas-row" type="button">Remove</button>
</div>
</div>
Add More Input Field
Have problem to display select on change attribute id.
PHP:
<form action="" class="form-inline">
<div class="form-group">
<select name="kategorijos" id="kategorijos" class="category form-control" onchange="fetch_select_category(this.value);">
<option value=""></option>
FOREACH
</select>
</div>
<div class="form-group">
<fieldset disabled>
<select id="disabledSelect" name="subcategories" class="subcategory form-control" onchange="fetch_select_product(this.value);" required>
<option value="" disabled selected>Select Subcategory</option>
</select>
</fieldset>
</div>
<div class="form-group">
<td><input type="text" name="gramai" class="form-control" value=""></td>
</div>
<div class="form-group" id="kalb">
<input type='text' name='1[]' value="-" disabled>
<input type='text' name='12[]' value="-" disabled>
<input type='text' name='123[]' value="-" disabled>
<input type='text' name='1234[]' value="-" disabled>
</div>
</form>
My jquery code:
$("select").on('change', function() {
var status = $('select').attr('id');
alert(status);
});
var categoryId = 0;
var category = 0;
var product = 0;
var disableId = 0;
$("#add").click(function () {
categoryId = categoryId + 1;
category = category + 1;
product = product + 1;
disableId = disableId + 1;
$("#item").append('<div class="col-xs-12"><form action=""
class="form-inline"><div class="form-group"><select name="kategorijos"
**....... same code as above (php)**
});
When I select the first row it alerts value. But then I add new row with add button, and then change second select the alert don't work, and I don't get the select id. Where can be the problem? Maybe it doesn't work with append html ?
You need to use event delegation for dynamically generated element and also use this instead of 'select' to get the id of dropdown.
$(document).on('change', 'select', function() {
var status = $(this).attr('id');
alert(status);
});
I am developing ASP.NET MVC application.
I am adding the Div Run time by click event on View using Jquery.
After adding div , I am trying to remove it... but It cant get removed.
I have put alert box on the click function of remove link but that also not working.
here is my Complete Code....
<script type="text/javascript">
$(document).ready(function () {
$('.remove').click(function () {
alert("asd");
$(this).parent().parent().remove();
});
function getProductList(rIndex) {
//alert("In Product list");
var productList;
var mainList;
var productListArray = [];
$.ajax({
url: '#Url.Content("~/Product/GetProductList")',
success: function(data) {
mainList = data;
var options = '';
temp = 0;
for (var index = 0; index < data.length; index++) {
productListArray[index] = data[index].Id;
options += '<option value="' + data[index].Id + '">' + data[index].Name + '</option>';
}
productList = options;
$("select#ddProductList_" + rIndex).html(productList);
}
});
}
$('#lnkAddProduct').click(function () {
var rIndex = $("select.clsProductId").length;
// $('#ProductList').append("<div><span style='font-size:12px;'><select class='clsProductId' id='ddProductList_" + rIndex + "' name='ProductId' style = 'font-size:12px;width:120px;margin-right:10px;margin-left:0px;' /></span><input type='text' id='SectionCode' style='width:10%; margin-right:30px;'></div>");
$('#ProductList').append("<div><span style='font-size:12px;'><select class='clsProductId' name='ProductId' id='ddProductList_" + rIndex + "'name='ProductId' style = 'font-size:12px;width:150px;margin-right:10px;margin-left:0px;' /></span><input type='text' id='SectionCode' name='SectionCode' style='width:10%; margin-left:7px;'><input type='text' id='Size' name='Size' style='width:5%; margin-left:20px;'><input type='text' id='Length' name='Length' style='width:8%; margin-left:25px;'><input type='text' name='Thickness' id='Thickness' style='width:8%; margin-left:25px;'><input type='text' id='Weight' name='Weight' style='width:8%; margin-left:25px;'/><input type='text' id='Quantity' name='Quantity' style='width:8%; margin-left:30px;'/><span style='margin-left:10px;padding-top:6px;'> <a href='#' style='font-size:14px;text-decoration:none;font-weight:bold;' id='lnkRemove' class='clsRemove remove'>X</a></span></div>");
getProductList(rIndex);
});
getProductList(0);
});
</script>
<html>
<body>
<div class="span11 " style="margin-bottom : 20px; ">
<div class="row-fluid">
<div class="span1" style="margin-left:10px; width:100px;">
Section Name
</div>
<div class="span1" style="margin-left:60px;width:120px;">
Section Code
</div>
<div class="span1" style="margin-left:10px;width:60px;">
Size
</div>
<div class="span1" style="margin-left:20px;width:80px;">
Length
</div>
<div class="span1" style="margin-left:20px;width:80px;">
Thickness
</div>
<div class="span1" style="margin-left:20px;width:90px;">
Avg. Weight
</div>
<div class="span1" style="margin-left:35px;width:80px;">
Quantity
</div>
</div>
<div class="row-fluid" id="ProductList">
#*<input type="text" id="SectionName" style="width:10%; margin-right:40px;" />*#
<span style='font-size: 12px;margin-left:0px;'><select class='clsProductId span11' id='ddProductList_0' name='ProductId' style='font-size:12px;width:150px;margin-right:3px;margin-left:0px;'>
<option selected="selected" value=""></option>
</select></span>
<input type="text" id="SectionCode" name="SectionCode" style="width:10%; margin-left:10px;" />
<input type="text" id="Size" name="Size" style="width:5%; margin-left:20px;" />
<input type="text" id="Length" name="Length" style="width:8%; margin-left:20px;" />
<input type="text" id="Thickness" name="Thickness" style="width:8%; margin-left:20px;" />
<input type="text" id="Weight" name="Weight" style="width:8%; margin-left:20px;" />
<input type="text" id="Quantity" name="Quantity" style="width:8%; margin-left:30px;" />
#* <span style="margin-left:10px;padding-top:6px;"> <a href='#' style='font-size:14px;text-decoration:none;font-weight:bold;' id='lnkRemove' class='clsRemove remove'>X</a></span>
<a href='#' class='123'>X</a>
<div class="span10" style="margin-left:0px;">
Add Product
<span id="LinkErrorMsg" class="field-validation-error"></span>
</div>
</div>
</body>
</html>
Try event delegation using .on() as your remove link is created runtime.
$("#ProductList").on('click','.remove',function () {
alert("asd");
$(this).closest("div.row-fluid").remove(); // Avoid parent().parent() you can use .closest()
});
ref:
.closest() API docs