Jquery add row dele buttons? - javascript

I want to add the insertion button in the following code directory
How can I add a button to the insert section.
$(document).ready(function() {
$('#row_add_btn').click(AddRows)
var number = 1;
function AddRows() {
number++;
if (number < 21) {
var AddToRows = '<p><input name="icerik' + number + '"/> <input name="icerik' + number + '" /><input type="button" class="ibtnDel"></p>'
$('#list_add_rows').append(AddToRows)
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list_add_rows">
<p>
<input type="text" name="icerik1" />
<input type="text" name="icerik1" />
</p>
</div>
<a id="row_add_btn">Add</a>

If you want the button click to remove the row, this jQuery should do the trick:
$(document).on("click", ".ibtnDel", function () {
$(this).parent().remove();
});
jQuery on() documentation

If you planning to insert deletion of the the rows then you need to use the code what Will P. suggested above but in addition you will need to handle the maximum number of rows differently.
Increment the number in if condition and decrement on remove row.
Example Snippet:
$(document).ready(function() {
$('#row_add_btn').click(AddRows);
$(document).on('click', '.ibtnDel', removeRow);
var number = 1;
function AddRows() {
if (number <= 21) {
number++;
var AddToRows = '<p><input name="icerik' + number + '"/> <input name="icerik' + number + '" /><input type="button" class="ibtnDel"></p>'
$('#list_add_rows').append(AddToRows)
}
}
function removeRow() {
number--;
$(this).parent().remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list_add_rows">
<p>
<input type="text" name="icerik1" />
<input type="text" name="icerik1" />
</p>
</div>
<a id="row_add_btn">Add</a>

Related

generate dynamically a select type with options specified on add button click

i have seen a j query function that generates dynamically on button click an input type = text but how to generate dynamically select with options and get the value everytime.
the j query function:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("#TextBoxContainer");
div.append('<div>' + GetDynamicTextBox("") + '</div>');
});
$('form').on('submit', function (e) {
var values = "";
$("input[name=DynamicTextBox]").each(function () {
values += $(this).val() + "\n";
});
$("#<%= hdnfldVariable.ClientID %>").val(values);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
});
});
function GetDynamicTextBox(value) {
return '<select name="Sexe" id="Sexe" class="field-select"></select>';
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" /> ' +
'<input type="button" value="Remove" class="remove" />';
}
the html:
<input id="btnAdd" type="button" value="Add" />
<br />
<br />
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
</div>
<br />
<button id="btnGet" runat="server" onserverclick="Submit_Click">Submit</button>
<asp:HiddenField ID="hdnfldVariable" runat="server" />
Try the below snippet. To grab the values of select on submit you can use:
$('#mySelect').val();
$("#getSelect").click(function(e) {
e.preventDefault();
var select = '<select name = "test" id="mySelect">Select</select>';
if ($('#selectholder').empty()) {
$('#selectholder').append(select);
}
for (i = 0; i < 10; i++) {
$('#mySelect').append('<option value="' + i + '">' + 'Option ' + i + '</option>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="getSelect">Display select</div>
<div id="selectholder"></div>

Incrementing fieldset IDs sometimes results in duplicates

I am trying to allow the number of input fields to be increased or decreased for several different sections. As demonstrated by the code below, with only 2 sections, each fieldset created should have a unique ID to allow it to be deleted.
I have observed that the IDs are not always unique but it is not consistent. Sometimes I can add 10 fieldsets between the 2 groups and not get any duplicate IDs and other times I will start getting duplicates on the 2nd or 3rd fieldset addition.
As shown in the image below in this particular case the duplicate IDs started happening when the 3rd fieldset was added.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Testing Fieldset Add/Delete</title>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript">
function AddGroup1() {
newFS = newFieldset(); // build a new fieldset ID to use
infield = '<fieldset id="' + newFS + '"><label for="group1new">Group 1</label>';
infield += '<input type="text" name="group1[]" value="0" size="15" maxlength="15" />';
infield += '<a href="#" onclick="deleteID(' + newFS + ');return false;" title="Delete This Entry">';
infield += 'Delete</a></fieldset>';
var div = document.getElementById('moregroup1');
div.innerHTML += infield;
} // end of the AddGroup1 function
function AddGroup2() {
newFS = newFieldset(); // build a new fieldset ID to use
infield = '<fieldset id="' + newFS + '"><label for="group2new">Group 2</label>';
infield += '<input type="text" name="group2[]" value="0" size="15" maxlength="15" />';
infield += '<a href="#" onclick="deleteID(' + newFS + ');return false;" title="Delete This Entry">';
infield += 'Delete</a></fieldset>';
var div = document.getElementById('moregroup2');
div.innerHTML += infield;
} // end of the AddGroup2 function
function newFieldset() {
var fpoint = 1; // fieldset ID pointer so we may address each one individually
var ids = $("fieldset[id^='newFieldset_']").map(function() { // get any already there
var partsArray = this.id.toString().split('_'); // break into pieces
fpoint = partsArray[1]; // first element of the resulting array should be a number
fpoint++; // increment by one
}).get(); // end of the map
return "newFieldset_" + fpoint; // give the caller the new fieldset ID
} // end of the newFieldset function
function deleteID(id2Delete) {
var deleteID = document.getElementById(id2Delete.id);
deleteID = deleteID.id;
$("#" + deleteID).remove();
} // end of the deleteID function
</script>
</head>
<body>
<h1>Testing Fieldset Add/Delete</h1>
<form method="post" action="WeedsTest.html">
<fieldset>
<label for="group1">Group 1</label>
<input type="text" name="group1[]" value="0" size="15" maxlength="15" />
Add
</fieldset>
<div id="moregroup1"></div>
<fieldset>
<label for="group2">Group 2</label>
<input type="text" name="group2[]" value="0" size="15" maxlength="15" />
Add
</fieldset>
<div id="moregroup2"></div>
</form>
</body>
</html>
Here's a quick change to use relative positioning to locate the fieldset to remove. Your delete buttons change to:
<a href="#" onclick="deleteID(this);return false"......
And your deleteID function becomes
function deleteID(button) {
var fieldset = $(button).parent();
$(fieldset).remove();
}

Dynamic textboxes are not removing

I am adding textboxes through jquery and for one text box it is removing perfeclty but when I add two textboxes then it does now remove both.
this is jquery
<script>
$(document).ready(function($){
$('.product-form .add-product').click(function(){
var n = $('.text-product').length + 1;
var product_html = $('<p class="text-product"><label for="product' + n + '">Name <span class="product-number">' + n + '</span></label> <input required type="text" name="productnames[]" value="" id="product' + n + '" /> <label for="productprice' + n + '">Price <span class="product-number">' + n + '</span></label> <input required type="text" name="productprices[]" value="" id="productprice' + n + '" />Remove</p>');
product_html.hide();
$('.product-form p.text-product:last').after(product_html);
product_html.fadeIn('slow');
return false;
});
$('.product-form').on('click', '.remove-category', function(){
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.product-number').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
});
</script>
and this is my html
<div>
<form>
<div class="product-form">
<p class="text-product">
<label for="product1">Name <span class="product-number">1</span></label>
<input required type="text" name="productnames[]" value="" id="product1" />
<label for="product1">Price <span class="product-number">1</span></label>
<input required type="text" name="productprices[]" value="" id="product1" />
<div>
<a class="add-product" href="#">Add More</a>
</div>
</p>
</div>
<div>
<input type="submit" name="submitDetails" value="Finish"/>
</div>
</form>
</div>
If only one textbox for instance productnames is added then it removal function works but when I add botch productnames and productprices textbox removal function does not remove both
Your code should read $('.product-form').on('click', '.remove-product', function() rather than 'click', '.remove-category'. Also, don't place the Add More div element inside the paragraph element. The numbering also breaks a bit, but you can figure that out.

How to add new input to html document on input typing using jquery?

I want to add dynamic input.
I have one input already created and if someone write something into it, it will add new input below it and if again some one write something into newly created input, it will call the same jquery and generate another input below and so on. ( same like google's contact form for address and email )
How can I do this.
I have tried this but it is giving me for each keypress new input and also for newly created input it is not working
var counter = 2;
$("input[id^='textbox']").keypress(function () {
if (counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label>
<input type='textbox' id='textbox1' >
</div>
</div>
You should use .on() to attach event handler to new input. Also check if parent of typing text is last-child, then add new row.
$(document).on("keyup change", "input[id^='textbox']", function(){
if ($(this).parent().is(":last-child") && $(this).val() != ""){
var index = $(this).parent().index() + 2;
$("#TextBoxesGroup").append('<div id="TextBoxDiv'+index+'"><label>Textbox #'+index+' : </label><input type="textbox" id="textbox'+index+'" ></div>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label>
<input type='textbox' id='textbox1' >
</div>
</div>

How to create dynamic event in a dynamic controller

I'm creating a small survey in the creation of question i have the question text and the question choice .
By default i have three text box to fill if i want to add another text box i click on the add button or in the last text box to add another under him but the event is stuck in the same text box i want only the last text box to handle the event but i don't know want is wrong in my code:
JQuery:
<script>
$(document).ready(function () {
$('.dropdown_selector').change(function () {
var option = $(this).find('option:selected').val();
if (option == "Radio Button") {
$(".QuestionOption").html('<p>Q1:<input id="Text1" type="text" /></p> <p> Answer Choices:</p> <p><input id="Text2" type="text" /></p><p><input id="Text3" type="text" /></p> <p class ="last4"><input id="Text4" type="text" /></p>');
$(".ButtonField").html('<p><input id="Button1" type="button" value="Save" /> <input id="Button2" type="button" value="Cancel" /></p><p><input id="Checkbox1" type="checkbox" />Add a Common Field</p>');
}
else
if (option == "Check Box") {
$(".QuestionOption").html('<p>Q1:<input id="Text1" type="text" /></p> <p> Answer Choices:</p> <p><input id="Text2" type="text" /></p><p><input id="Text3" type="text" /></p> <p class ="last4"><input id="Text4" type="text" /></p>');
$(".ButtonField").html('<p><input id="Button1" type="button" value="Save" /> <input id="Button2" type="button" value="Cancel" /></p><p><input id="Checkbox1" type="checkbox" />Add a Common Field</p>');
}
});
});
</script>
<script>
$(document).ready(function () {
var counter = 5;
var nb = counter - 1;
$(".QuestionOption").on("click", "p.last"+nb, function () {
if (counter > 10) {
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('p')).attr("class", 'last' + counter);
newTextBoxDiv.after().html('<input type="text" id="Text' + counter + '" value="" > ');
newTextBoxDiv.appendTo(".QuestionOption");
counter++;
nb = counter - 1;
});
$("#addButton").click(function () {
if (counter > 10) {
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('p')).attr("class", 'last' + counter);
newTextBoxDiv.after().html('<input type="text" id="Text' + counter + '" value="" > ');
newTextBoxDiv.appendTo(".QuestionOption");
counter++;
});
$("#removeButton").click(function () {
if (counter == 3) {
alert("No more textbox to remove");
return false;
}
counter--;
$(".last" + counter).remove();
$("#Text"+counter).remove();
});
});
Html code:
<asp:DropDownList ID="dropdown_selector" runat="server" CssClass="dropdown_selector">
<asp:ListItem>Radio Button</asp:ListItem>
<asp:ListItem>Check Box</asp:ListItem>
</asp:DropDownList>
<input id="addButton" type="button" value="Add" />
<input id="removeButton" type="button" value="Remove" />
<div id="QuestionOption" runat="server" class="QuestionOption" ></div>
<div id="ButtonField" runat="server" class="ButtonField" ></div>
Image of the question and choice
$(".QuestionOption").on only gets run once, when the page loads. It adds a listener to the element(s) matching p.last"+nb using whatever value nb has at startup (4, by the looks of it). The event is never attached to any subsequently created elements because they don't match p.last4. You need to keep switching the events on for each textbox as it's created, and off for the one just clicked.
var counter = 5; //moved these outside document.ready
var nb = counter - 1;
$(document).ready(function () {
$(".QuestionOption").on("click", "p.last"+nb, newTextBox); //run newTextBox function when this is triggered
//...
}); //end of document.ready function
//re-usable function to create new textbox
function newTextBox()
{
if (counter > 10) {
alert("Only 10 textboxes allowed"); //N.B. corrected grammar from "allow" to "allowed"
return false;
}
var newTextBoxDiv = $("<p/>").attr("class", 'last' + counter);
newTextBoxDiv.after().html('<input type="text" id="Text' + counter + '" value="" > ');
newTextBoxDiv.appendTo(".QuestionOption");
$(".QuestionOption").off("click", "p.last"+nb, newTextBox); //remove event handler for the current textbox (which has just been clicked)
counter++; //increment the counter
nb = counter - 1;
$(".QuestionOption").on("click", "p.last"+nb, newTextBox); //run newTextBox function for the newly added textbox
}

Categories

Resources