I would like to use jquery to build a dynamic add/ remove form. IT should look like:
Name Type Required?
The example input :
- Name Type Required?
- Tony Admin checked (checkbox) Delete <==press the button will delete the row
What i have got is a example of add/ remove input box how can it convert to my idea? Do i have to use multi coloumn table? Thank you for kindly help
<html>
<head>
<title>jQuery add / remove textbox example</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
div{
padding:8px;
}
</style>
</head>
<body>
<h1>jQuery add / remove textbox example</h1>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addButton").click(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++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>
</head><body>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label><input type='textbox' id='textbox1' >
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
</body>
</html>
The answer is
You can do something like this below:
//when the Add Field button is clicked
$("#add").click(function (e) {
//Append a new row of code to the "#items" div
$("#items").append('<div><input type="text" name="input[]"><button class="delete">Delete</button></div>');
});
For detailed tutorial http://voidtricks.com/jquery-add-remove-input-fields/
You should be able to create and remove input field dynamically by using jquery using this method(https://www.adminspress.com/onex/view/uaomui), Even you can able to generate input fields in bulk and export to string.
Another solution could be:
<script>
$(document)
.ready(
function() {
var wrapper = $(".myFields");
$(add_button)
.click(
function(e) {
e.preventDefault();
$(wrapper)
.append(
'.....'); //add fields here
});
$(wrapper).on("click", ".delFld", function(e) {
e.preventDefault();
$(this).parent('div').remove();
})
});
</script>
Source: Here
In your click function, you can write:
function addMoreRows(frm) {
rowCount ++;
var recRow = '<p id="rowCount'+rowCount+'"><tr><td><input name="" type="text" size="17%" maxlength="120" /></td><td><input name="" type="text" maxlength="120" style="margin: 4px 5px 0 5px;"/></td><td><input name="" type="text" maxlength="120" style="margin: 4px 10px 0 0px;"/></td></tr> <a href="javascript:void(0);" onclick="removeRow('+rowCount+');">Delete</a></p>';
jQuery('#addedRows').append(recRow);
}
Or follow this link: http://www.discussdesk.com/add-remove-more-rows-dynamically-using-jquery.htm
Jquery Code
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
HTML CODE
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>
You need to create the element.
input = jQuery('<input name="myname">');
and then append it to the form.
jQuery('#formID').append(input);
to remove an input you use the remove functionality.
jQuery('#inputid').remove();
This is the basic idea, you may have feildsets that you append it too instead, or maybe append it after a specific element, but this is how to build anything dynamically really.
why not remove the .after() in the line
newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
to
newTextBoxDiv.html('<label>Textbox #'+ counter + ' : </label>' +
you can do it as follow:
$("#addButton").click(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++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
refer live demo http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/
Here is my JSFiddle with corrected line breaks, or see it below.
$(document).ready(function() {
var MaxInputs = 2; //maximum extra input boxes allowed
var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton = $("#AddMoreFileBox"); //Add button ID
var x = InputsWrapper.length; //initlal text box count
var FieldCount=1; //to keep track of text box added
//on add input button click
$(AddButton).click(function (e) {
//max input box allowed
if(x <= MaxInputs) {
FieldCount++; //text box added ncrement
//add input box
$(InputsWrapper).append('<div><input type="text" name="mytext[]" id="field_'+ FieldCount +'"/> <a href="#" class="removeclass">Remove</a></div>');
x++; //text box increment
$("#AddMoreFileId").show();
$('AddMoreFileBox').html("Add field");
// Delete the "add"-link if there is 3 fields.
if(x == 3) {
$("#AddMoreFileId").hide();
$("#lineBreak").html("<br>");
}
}
return false;
});
$("body").on("click",".removeclass", function(e){ //user click on remove text
if( x > 1 ) {
$(this).parent('div').remove(); //remove text box
x--; //decrement textbox
$("#AddMoreFileId").show();
$("#lineBreak").html("");
// Adds the "add" link again when a field is removed.
$('AddMoreFileBox').html("Add field");
}
return false;
})
});
You can try this:
<input type="hidden" name="image" id="input-image{{ image_row }}" />
inputt= '<input type="hidden" name="product_image' value="somevalue">
$("#input-image"+row).remove().append(inputt);
You can also use something like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Add / Remove Table Rows Dynamically</title>
<style type="text/css">
form{
margin: 20px 0;
}
form input, button{
padding: 5px;
}
table{
width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
}
table, th, td{
border: 1px solid #cdcdcd;
}
table th, table td{
padding: 10px;
text-align: left;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".add-row").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
$("table tbody").append(markup);
});
// Find and remove selected table rows
$(".delete-row").click(function(){
$("table tbody").find('input[name="record"]').each(function(){
if($(this).is(":checked")){
$(this).parents("tr").remove();
}
});
});
});
</script>
</head>
<body>
<form>
<input type="text" id="name" placeholder="Name">
<input type="text" id="email" placeholder="Email Address">
<input type="button" class="add-row" value="Add Row">
</form>
<table>
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="record"></td>
<td>Peter Parker</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
<button type="button" class="delete-row">Delete Row</button>
</body>
</html>
Source: Stackoverflow.com