jquery remove() with multiple form

jquery remove() with multiple form - javascript

I want to remove a single section in a form. I have multiple forms with the same sections. When I am in MyForm1 in Split3 and trigger the remove, only Split3 in MyForm1 should be removed not all.
Any suggestions using for example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> test</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<style type='text/css'>
form {
font-family: helvetica, arial, sans-serif;
font-size: 11px;
}
form div{
margin-bottom:10px;
}
form a {
font-size: 12px;
padding: 4px 10px;
border: 1px solid #444444;
background: #555555;
color:#f7f7f7;
text-decoration:none;
vertical-align: middle;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
$('form[name="inpForm"]').submit( function () {
var $form = $(this).closest("form");
alert($(this).find('input[name="FirstName"]').val());
alert("name of form: " + $form.attr('name'))
alert("div index: " + $(this).closest("div").attr('id'));
return false;
});
$('.removeSplit_2_').click(function(){
var numItems = $('div').length;
alert("Aantal div secties: "+ numItems);
$('div').each(function(){
var indexDiv = $(this).attr('id');
alert("div index: " + indexDiv); // or simple this.id
if (numItems == indexDiv) {
alert('Do your thing and remove the div section');
//$(this).remove();
}
});
});
$('.removeSplit_3_').click(function(){
var MijnID = this.id;
alert(MijnID);
var numItems = $('div').length;
alert("Aantal div secties: "+ numItems);
$('div').each(function(){
var indexDiv = $(this).attr('id');
alert("div index: " + indexDiv); // or simple this.id
if (numItems == indexDiv) {
alert('Do your thing and remove the div section');
//$(this).remove();
}
});
});
});//]]>
</script>
</head>
<body>
<form name = "MyForm1">
<div id="Split1">MyForm1 Split1
<input name="FirstName" type="text"/>
</div>
<div id="Split2">MyForm1 Split2
<div name="cButton_2_" id="cButton_2_" class="cButton_2_" ><input name="FirstName" type="text"/></div>
<div name="xButton_2_" id="xButton_2_" class="xButton_2_" ><IMG SRC="./1x.gif" BORDER="0"></div>
</div>
<div id="Split3">MyForm1 Split3
<div name="cButton_3_" id="cButton_3_" class="cButton_3_"><input name="FirstName" type="text"/></div>
<div name="xButton_3_" id="xButton_3_" class="xButton_3_"><IMG SRC="./1x.gif" BORDER="0"></div>
</div>
</form>
<form name = "MyForm2">
<div id="Split1">MyForm2 Split1
<input name="FirstName" type="text"/>
</div>
<div id="Split2">MyForm2 Split2
<div name="cButton_2_" id="cButton_2_" class="cButton_2_"><input name="FirstName" type="text"/></div>
<div name="xButton_2_" id="xButton_2_" class="xButton_2_"><IMG SRC="./1x.gif" BORDER="0"></div>
</div>
<div id="Split3">MyForm2 Split3
<div name="cButton_3_" id="cButton_3_" class="cButton_3_"><input name="FirstName" type="text"/></div>
<div name="xButton_3_" id="xButton_3_" class="xButton_3_"><IMG SRC="./1x.gif" BORDER="0"></div>
</div>
</form>
<form name = "MyForm3">
<div id="Split1">MyForm3 Split1
<input name="FirstName" type="text"/>
</div>
<div id="Split2">MyForm3 Split2
<div name="cButton_2_" id="cButton_2_" class="cButton_2_"><input name="FirstName" type="text"/></div>
<div name="xButton_2_" id="xButton_2_" class="xButton_2_"><IMG SRC="./1x.gif" BORDER="0"></div>
</div>
<div id="Split3">MyForm3 Split3
<div name="cButton_3_" id="cButton_3_" class="cButton_3_"><input name="FirstName" type="text"/></div>
<div name="xButton_3_" id="xButton_3_" class="xButton_3_"><IMG SRC="./1x.gif" BORDER="0"></div>
</div>
</form>
</body>
</html>

So all you need to do is this:
$( "#Split3" ).remove();
It will grab the first id with the name "Split3" and remove it!
I hope thats what you are looking for.
JSBin: http://jsbin.com/kibipoxowa
Luca

Based on your comments, Try this:
$('.removeSplit_2_').click(function () {
var mySplit = $(this).closest('.Split_2_');
mySplit.remove();
});

$(document).on( "click", "a", function() {
$( this ).remove();
});
test this

Related

how can i show an edit box on output text on click with save button

how can i edit on output text on click with save button. please if any could help....
$(document).ready(function(){
$("#btn").click(function(){
let getVal = $("#inputValue").val();
let button = `<button name="button-${getVal}">Button for ${getVal}</button>`
$("#output").html($("#output").html() + " " + getVal + button);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<fieldset>
<legend>jQuery input value</legend>
<input id="inputValue" type="text" name="text">
</fieldset>
<button id="btn">display value</button>
<div id="output"></div>
</div>

$(document).ready(function(){
$("#btn").click(function(){
let getVal = $("#inputValue").val();
let button = `<button onclick="Update(this);" name="button">Edit/Update </button>`
//let button = `<button onclick="Update(this);" name="button-${getVal}">Edit/Update for ${getVal}</button>`
$("#output").append('<tr><td><input name="test[]" type="text" value="'+getVal+'" disabled></td><td>' + button +'</td></tr>');
});
});
function Update(CurrentElement)
{
if($(CurrentElement).closest('tr').find('input').attr('disabled')) {
$(CurrentElement).closest('tr').find('input').attr('disabled',false);
} else {
$(CurrentElement).closest('tr').find('input').attr('disabled',true);
}
}
table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%;}
td, th { border: 1px solid #dddddd; text-align: left; padding: 8px;}
tr:nth-child(even) { background-color: #dddddd;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<fieldset>
<legend>jQuery input value</legend>
<input id="inputValue" type="text" name="text">
</fieldset>
<button id="btn">display value</button>
<table id="output"><tr><th>Value</th><th>Action</th></tr></table>
</div>

May be this can help you.
$(document).ready(function(){
$("#btn").click(function(){
let getVal = $("#inputValue").val();
$('#output').val(getVal);
});
$("#save").click(function(){
let getValNew = $("#output").val();
$('#inputValue').val(getValNew);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
<fieldset>
<legend>jQuery input value</legend>
<input id="inputValue" type="text" name="text">
</fieldset>
<button id="btn">display value</button>
<input type="text" name="text-out" id="output">
<button id="save">Update value</button>
</div>

Replicating entries and XML with JavaScript

I'm building a user-submission system where a user can input data and an XML will be exported (which can be read by a different software down the line) but I'm coming across a problem where when I replicate the form for the user to input info, the XML is only taking information from the first.
Any suggestions on how do this?
Personal test code:
HTML:
$(function () {
$('#SubmitButton').click(update);
});
var added = [
'\t\t
<bam_file desc=\"<?channeldescription?>\" record_number=\"<?channelrecordnumber?>\" hex_color=\"<?channelhexcolor?>\" bam_link=\"<?channelbamlink?>\">',
'\t\t</bam_file>
'
].join('\r\n');
var adding = [
'\t\t
<bam_file desc=\"<?channeldescription?>\" record_number=\"<?channelrecordnumber?>\" hex_color=\"<?channelhexcolor?>\" bam_link=\"<?channelbamlink?>\">',
'\t\t</bam_file>
'
].join('\r\n');
function update() {
var variables = {
'channeldescription': $('#channeldescription').val(),
'channelrecordnumber': $('#channelrecordnumber').val(),
'channelhexcolor': $('#channelhexcolor').val(),
'channelbamlink': $('#channelbamlink').val()
};
var newXml = added.replace(/<\?(\w+)\?>/g,
function(match, name) {
return variables[name];
});
var finalXML = newXml;
$('#ResultXml').val(finalXML);
$('#DownloadLink')
.attr('href', 'data:text/xml;base64,' + btoa(finalXML))
.attr('download', 'bamdata.xml');
$('#generated').show();
}
$(function () {
$("#CloneForm").click(CloneSection);
});
function CloneSection() {
added = added + '\n' + adding;
$("body").append($("#Entries:first").clone(true));
}
<!DOCTYPE html>
<html>
<head>
<script src="cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<body>
<div id="Entries" name="Entries">
<legend class="leftmargin"> Entry </legend>
<form class="form">
<fieldset>
<div class="forminput">
<label for="channel-description" class="formtextarea">Description</label>
<textarea id="channeldescription" name="channeldescription" type="text"></textarea>
</div>
<div class="forminput">
<label for="channel-record_number">Record number</label>
<input id="channelrecordnumber" name="channelrecordnumber"/>
</div>
<div class="forminput">
<label for="channel-hex_color">Hex color</label>
<input id="channelhexcolor" name="channelhexcolor"/>
</div>
<div class="forminput">
<label for="channel-bam_link">RNA-Seq Data/BAM file Repsitory Link</label>
<input id="channelbamlink" name="channelbamlink" type="text" data-help-text="bam_link"/>
</div>
</fieldset>
</form>
</div>
</body>
<div id="Cloning" class="button_fixed">
<p>
<button id="CloneForm">Add another entry</button>
<button id="SubmitButton">Generate XM</button>
</p>
</div>
<div id="generated" style="display:none">
<h2>bamdata.xml</h2>
Download XML
<textarea id="ResultXml" style="width: 100%; height: 30em" readonly></textarea>
</div>
</div>
</html>
http://www.w3schools.com/code/tryit.asp?filename=F0TWR6VRQZ3J

Change your ids to classes use a loop to get all the entries
<!DOCTYPE html>
<html>
<head>
<script src="cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
.leftmargin {
margin-left: 2%;
}
.form {
background-color: #CBE8BA;
border-radius: 25px;
margin-left: 2%;
margin-right: 2%;
padding-top: 1%;
padding-bottom: 1%;
}
.forminput {
padding-left: 1.5%;
padding-top: 0.5%;
display: flex;
}
.button_fixed {
position: fixed;
margin-left: 2%;
bottom: 1%;
}
</script>
<script>
$(function () {
$('#SubmitButton').click(function(){
var finalXML = '';
$(".Entries").each(function(i,v) {finalXML +=update(finalXML,v)
$('#ResultXml').val(finalXML);
$('#DownloadLink')
.attr('href', 'data:text/xml;base64,' + btoa(finalXML))
.attr('download', 'bamdata.xml');
$('#generated').show();
});
});
});
var added = [
'\t\t<bam_file desc=\"<?channeldescription?>\" record_number=\"<?channelrecordnumber?>\" hex_color=\"<?channelhexcolor?>\" bam_link=\"<?channelbamlink?>\">',
'\t\t</bam_file>'
].join('\r\n');
var adding = [
'\t\t<bam_file desc=\"<?channeldescription?>\" record_number=\"<?channelrecordnumber?>\" hex_color=\"<?channelhexcolor?>\" bam_link=\"<?channelbamlink?>\">',
'\t\t</bam_file>'
].join('\r\n');
function update(finalXML,v) {
var variables = {
'channeldescription': $(v).find('.channeldescription').val(),
'channelrecordnumber': $(v).find('.channelrecordnumber').val(),
'channelhexcolor': $(v).find('.channelhexcolor').val(),
'channelbamlink': $(v).find('.channelbamlink').val()
};
var newXml = added.replace(/<\?(\w+)\?>/g,
function(match, name) {
return variables[name];
});
return newXml;
}
$(function () {
$("#CloneForm").click(CloneSection);
});
function CloneSection() {
$("body").append($(".Entries:first").clone(true));
}
</script>
<body>
<div class="Entries" name="Entries">
<legend class="leftmargin"> Entry </legend>
<form class="form">
<fieldset>
<div class="forminput">
<label for="channel-description" class="formtextarea">Description</label>
<textarea class="channeldescription" name="channeldescription" type="text"></textarea>
</div>
<div class="forminput">
<label for="channel-record_number">Record number</label>
<input class="channelrecordnumber" name="channelrecordnumber"/>
</div>
<div class="forminput">
<label for="channel-hex_color">Hex color</label>
<input class="channelhexcolor" name="channelhexcolor"/>
</div>
<div class="forminput">
<label for="channel-bam_link">BAM file Repsitory Link</label>
<input class="channelbamlink" name="channelbamlink" type="text" data-help-text="bam_link"/>
</div>
</fieldset>
</form>
</div>
</body>
<div id="Cloning" class="button_fixed">
<p>
<button id="CloneForm">Add another entry</button>
<button id="SubmitButton">Generate XM</button>
</p>
</div>
<div id="generated" style="display:none">
<h2>bamdata.xml</h2>
Download XML
<textarea id="ResultXml" style="width: 100%; height: 30em" readonly="readonly"></textarea>
</div>
</div>
</html>
demo:http://www.w3schools.com/code/tryit.asp?filename=F0TXIUR1CYE4

Updating a client side table

I am reading data from a csv file and showing it in the form of table on screen. I have checkbox before every row with 'ID' saved as value in respective checkboxes. Now I want to remove fields with 'checked' checkboxes from the displayed table on the click of button - Cancel/Save
HTML Code-
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html>
<head>
<title>ABCD</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src ="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"> </script>
<!--<script type="text/javascript" src="JavaScript.js"></script>-->
<script type="text/javascript" src="JavaScript2.js"></script>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
th {
text-align: left;
}
table {
border-spacing: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<h2>EFGH</h2>
<p>KLMNO </p>
</div>
<div class="panel panel-primary">
<div class="panel-heading">KKKK</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-12 col-sm-offset-1">
<div class="page-header">
<h2>----</h2>
</div>
<form id="form1" runat="server" class="form-horizontal">
<div class="form-group">
<div class="col-sm-5">
<div class="col-sm-6"><input type="file" accept=".csv" id="fileUpload"/></div>
<div class="col-sm-6"><input type="button" id="upload" class="btn btn-primary" value="Upload" /></div>
</div>
<div class="col-sm-7">
<div class="col-sm-2"><input type="button" id="cancel" class="btn btn-primary btn pull-right" value="Cancel/Save" style="visibility:hidden" /></div>
<div class="col-sm-2"><input type="button" id="process" class="btn btn-primary btn pull-right" value="Process" style="visibility:hidden" /></div>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default" style="align-self:center">
<div class="panel-body" style="max-height: 400px;min-height:400px;overflow-y: scroll;">
<div class="row">
<div class="col-sm-12"><center>
<div class="input-append" id="filterDev" style="visibility:hidden">
<input name="search" id="search" placeholder="Enter PO to filter" />
<input type="button" value="Filter" id="filter" class="btn btn-primary" />
</div></center></div><br /><br />
</div>
<div class="row">
<div class="col-sm-12" id="dvCSV"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JavaScript2.js
$(function () {
$("#upload").bind("click", function () {
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
if (regex.test($("#fileUpload").val().toLowerCase())) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
var table = $("<table />");
var rows = e.target.result.split("\n");
for (var i = 0; i < rows.length; i++) {
var row = $("<tr />");
var cells = rows[i].split(",");
$("<td/>").html('<input type="checkbox" id='+cells[0]+'>').appendTo(row);
//alert(cells[0]);
for (var j = 0; j < cells.length; j++) {
$("<td/>").html('<input type="text" disabled value=' +cells[j]+ '>').appendTo(row);
$("<td/>")
}
table.append(row);
}
$("#dvCSV").html('');
$("#dvCSV").append(table);
document.getElementById("cancel").style.visibility = "visible";
document.getElementById("process").style.visibility = "visible";
document.getElementById("filterDev").style.visibility = "visible";
//document.getElementById("filter").style.visibility = "visible";
}
reader.readAsText($("#fileUpload")[0].files[0]);
} else {
alert("This browser does not support HTML5.");
}
} else {
alert("Please upload a valid CSV file.");
}
});
});
How can this be implemented?

I assumed that you want to remove the row completely. Maybe you should clarify that a bit.
Add this script tag under your html file, or include it as a seperate js file. Tested, working.
<script type="text/javascript">
$("#cancel").on("click", function() {
$('input:checked').each( function() {
$( this ).closest("tr").remove();
});
});
</script>

To remove checked checkboxes you can use jQuery.
To remove just the checkboxes:
$('input').is(':checked').remove()
To do this "on a submit" of something, like a button click:
//Specific for button with ID someButton
$('button #someButton').on('click', function() {
$('input').is(':checked').remove();
});
Have a look at the jQuery checked selector, especially when combining it with the .is() function.
Like #Kartal answer, but without the .each() method you can delete all selected rows from the table like so:
//Remove all selected rows
$('button #someButton').on('click', function() {
$('tr > input:checked').remove();
});
The > selector is described here

JQuery todo list not running

I am working on a todo list where you type a task in a box and click the add button to enter the item into the list. However, nothing is getting added to my list, and I can't figure out what is wrong with my code.
$(document).ready( function() {
$('#add_todo').click( function() {
var todoDescription = $('#todo_description').val();
$('.todo_list').prepend('<div class="todo">'
'<div>'
'<input type="checkbox" class="check_todo" name="check_todo"/>'
'</div>'
'<div class="todo_description">'
todoDescription
'</div>'
'</div>');
$('#todo_form')[0].reset();
$('.check_todo').unbind('click');
$('.check_todo').click( function() {
var todo = $(this).parent().parent();
todo.toggleClass('checked');
});
return false;
});
});
body {
font-family: kristen itc;
background-image="css/fzm-notebook.texture-25.jpg";
background-repeat: no-repeat;
background-size: cover;
}
.title {
text-align: center;
margin-top: 80px;
font-size: 40px;
}
.item {
font-size: 24px;
font-weight: bold;
cursor: pointer;
text-align: center;
}
.dashed{
font-size: 25px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body background="css/fzm-notebook.texture-25.jpg" no-repeat;>
<div class="title">
<h1>Shopping List</h1>
<div class="enter_todo">
<form id="todo_form" action="index.html" method="POST">
<input type="text" size="55" id="todo_description" name="todo_description"/>
<input type="submit" id="add_todo" value="Add"/>
</form>
</div>
</div>
<div class="todo_list">
</div>
</body>
</html>

You can't have multiline strings in JS. You seem to know that, but you forgot to concatenate them with the plus sign. This is the problematic part:
$('.todo_list').prepend('<div class="todo">'
'<div>'
'<input type="checkbox" class="check_todo" name="check_todo"/>'
'</div>'
'<div class="todo_description">'
todoDescription
'</div>'
'</div>');
Just add a + to the end of each line except the last one.
Other than that, your code looks fine, let's try it:
$(document).ready( function() {
$('#add_todo').click( function() {
var todoDescription = $('#todo_description').val();
$('.todo_list').prepend('<div class="todo">' +
'<div>' +
'<input type="checkbox" class="check_todo" name="check_todo"/>' +
'</div>' +
'<div class="todo_description">' +
todoDescription +
'</div>' +
'</div>');
$('#todo_form')[0].reset();
$('.check_todo').unbind('click');
$('.check_todo').click( function() {
var todo = $(this).parent().parent();
todo.toggleClass('checked');
});
return false;
});
});
body {
font-family: kristen itc;
background-image="css/fzm-notebook.texture-25.jpg";
background-repeat: no-repeat;
background-size: cover;
}
.title {
text-align: center;
margin-top: 80px;
font-size: 40px;
}
.item {
font-size: 24px;
font-weight: bold;
cursor: pointer;
text-align: center;
}
.dashed{
font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title">
<h1>Shopping List</h1>
<div class="enter_todo">
<form id="todo_form" action="index.html" method="POST">
<input type="text" size="55" id="todo_description" name="todo_description"/>
<input type="submit" id="add_todo" value="Add"/>
</form>
</div>
</div>
<div class="todo_list">
</div>

I got it to work...
Here is your code modified :
<script>
$(document).ready( function() {
$('#add_todo').click( function() {
var todoDescription = $('#todo_description').val();
$('.todo_list').prepend('<div class="todo"><div><input type="checkbox" class="check_todo" name="check_todo"/></div><div class="todo_description">'+todoDescription+'</div></div>');
$('#todo_form')[0].reset();
$('.check_todo').unbind('click');
$('.check_todo').click( function() {
var todo = $(this).parent().parent();
todo.toggleClass('checked');
});
return false;
});
});
</script>
I just deleted all quote on your html inside $('.todo_list').prepend('<div class="todo"><div><input type="checkbox" class="check_todo" name="check_todo"/></div><div class="todo_description">'+todoDescription+'</div></div>');
And add "+" around "todoDescription"
Hope this will help :)
EDIT
Forget to mention that i've deleted your action in your form...
<form id="todo_form" method="POST">

Check your console, you have forgotten all of the + needed to concactenate your html string:
$(document).ready(function() {
$('#add_todo').click(function() {
var todoDescription = $('#todo_description').val();
$('.todo_list').prepend('<div class="todo">'+
'<div>'+
'<input type="checkbox" class="check_todo" name="check_todo"/>'+
'</div>'+
'<div class="todo_description">'+
todoDescription +'</div>'+
'</div>');
$('#todo_form')[0].reset();
$('.check_todo').unbind('click');
$('.check_todo').click(function() {
var todo = $(this).parent().parent();
todo.toggleClass('checked');
});
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title">
<h1>Shopping List</h1>
<div class="enter_todo">
<form id="todo_form" action="index.html" method="POST">
<input type="text" size="55" id="todo_description" name="todo_description" />
</form>
<input type="button" id="add_todo" value="Add" />
</div>
</div>
<div class="todo_list">
</div>

As others have mentioned, you didn't concatenate the strings correctly.
Multiline strings and string interpolation can be used with template strings, introduced in ES6.
You could format the string in the following way using a template string :
`<div class="todo">
<div>
<input type="checkbox" class="check_todo" name="check_todo"/>
</div>
<div class="todo_description">
${todoDescription}
</div>
</div>`

How do I add/remove text boxes with JQuery changing the variable name to keep the name attributes different?

I want to make a book catalog with JQuery to add books to a author. In the code That I have I am trying to add a author and have his books be in a array with his number only. Separated by other authors and their own arrays of books.
For example, when I press the button to add a author a input box appears so that I can add the authors name also a button to add a book that when I press that button I get an input box to add a books name.
When I press the add author again I want to be able to add another author with the same input boxes as before (adding more books to that author).
Also to add multiple books assigned to that author.
I have already done this in the pics but I get an array of everything. I want it to be separated by author.
author1 has an array of {book1, book2, book3...}
author2 has an array of {book13, book14, book15}
(i'm a beginner at JQuery)
This is the code that I have so far:
<!DOCTYPE html>
<html>
<head>
<title>Add or Remove text boxes with jQuery</title>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="main">
<h1>Add or Remove text boxes with jQuery</h1>
<div class="my-form">
<form role="form" method="post">
<p class="all_fields">
<button class="add_author">Add Author</button>
<div id="commonPart" class="commonPart">
<label for="author1">Author <span class="author-number">1</span></label>
<br/>
<input type="text" name="author" value="" id="author1" />
<br/>
<button class="add_book">Add book</button>
<div>
<input type="text" class="bookName" name="authBook[]"/>
</div>
</div>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function($){
var wrapper = $(".all_fields"); //Fields wrapper
var commonPart = $("#commonPart");
var add_author = $(".add_author"); //Add button ID
var add_subButton = $(".add_book"); //Add sub button ID
$('.my-form .add-box').click(function(){
var n = $('.all_fields').length + 1;
if( 15 < n ) {
alert('Stop it!');
return false;
}
$(add_author).click(function(e){
e.preventDefault();
var htmlToAdd = $('<label for="author' + n + '">Author <span class="author-number">' + n + '</span></label><br/><input type="text" name="author' + n + '" value="" id="author' + n + '" /><br/><button class="add_book">Add book</button><a class="add-book" href="#">Add Book</a><div><input type="text" class="bookName" name="authBook' + n + '[]"/></div>');
htmlToAdd.hide();
$('.my-form p.all_fields:last').after(htmlToAdd);
box_html.fadeIn('slow');
return false;
});
$(add_book).click(function(e){
e.preventDefault();
var htmlToAdd = $('<div><input type="text" class="bookName" name="authBook' + n + '[]"/></div>');
htmlToAdd.hide();
$('.my-form p.all_fields:last').after(htmlToAdd);
box_html.fadeIn('slow');
return false;
});
$('.my-form').on('click', '.remove-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.box-number').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
});
</script>
</body>
</html>

updated code(fixed some bugs..), try this....
<!DOCTYPE html>
<html>
<head>
<title>Add or Remove text boxes with jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="main">
<h1>Add or Remove text boxes with jQuery</h1>
<div class="my-form">
<button onclick="addAuthor()" >Add Author</button><br><br>
<div id="addAuth"></div>
<br><br>
<button onclick="submit()" >Submit</button>
</div>
<div id="result" ></div>
</div>
<script type="text/javascript">
var authors = 0;
function addAuthor(){
authors++;
var str = '<div id="auth'+authors+'"><input type="text" name="author" id="author'+authors+'" />'
+'<button onclick="addMore(\'auth'+authors+'\')" >Add Book</button>'
+'</div>';
$("#addAuth").append(str);
}
var count=0;
function addMore(id){
count++;
var str = '<div id="bookDiv'+count+'">'
+'<input class="'+id+'" type="text" name="book'+id+'" />'
+'<span onclick="addMore(\''+id+'\')" style="font-size: 20px; background-color: green; cursor:pointer;">+</span>'
+'<span onclick="removeDiv(\'bookDiv'+count+'\')" style="font-size: 20px; background-color: red; cursor:pointer; margin-left:1%;">-</span>'
+'</div>';
$("#"+id).append(str);
}
function removeDiv(id){
var val = confirm("Are you sure ..?");
if(val){
$("#"+id).slideUp(function(){$("#"+id).remove();});
}
}
function submit(){
var arr = [];
for(i=1; i<=authors; i++){
var obj = {};
obj.name = $("#author"+i).val();
obj.books = [];
$(".auth"+i).each(function(){
var data = $(this).val();
obj.books.push(data);
});
arr.push(obj);
}
$("#result").html(JSON.stringify(arr));
}
</script>
</body>
</html>

Please try this code and include jquery min js :
<div class="my-form">
<form role="form" method="post">
<p class="all_fields">
<div id="commonPart" class="commonPart">
<label for="author1">Author <span class="author-number"></span></label>
<input type="text" name="author" value="" id="author1" />
<br/>
<div>
<label for="author1">book <span class="author-number"></span></label>
<input type="text" class="bookName" name="authBook[]"/>
</div>
</div>
<button type="button" class="add_author" onclick="AddCustomMOre();">Add More</button>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
</div>
<script> function AddCustomMOre(){
$(".all_fields ").append('<div id="commonPart" class="commonPart"><label for="author1">Author <span class="author-number"></span></label> <input type="text" name="author" value="" id="author1" /> <br/> <div><label for="author1">book <span class="author-number"></span></label> <input type="text" class="bookName" name="authBook[]"/></div> Remove</div>');
} </script>

You can try this....
<p class="all_fields">
<button class="add_author">Add Author</button>
<div class="commonPart">
<label for="author1">Author <span class="author-number">1</span></label>
<br/>
<input type="text" name="author1" value="" id="author1" />
<br/>
<button div-id="1" class="add_book">Add book</button>
<div id="books1">
<input type="text" class="bookName" name="authBook[]"/>
</div>
</div>
</p>
<script>
var c=1;
$(".add_author").on("click",function(){
c++;
$(".all_fields").append('<div class="commonPart"><label for="author'+c+'">Author <span class="author-number">'+c+'</span></label><br/><input type="text" name="author'+c+'" value="" id="author'+c+'" /><br/><button class="add_book" div-id="'+c+'">Add book</button><div id="books'+c+'"><input type="text" class="bookName" name="authBook[]"/></div></div>');
});
$(".add_book").on("click",function(){
var id=$(this).attr("div-id");
$("#books"+id).append('<input type="text" class="bookName" name="authBook[]"/>');
});
</script>

Develop Reference

JavaScript is the programming language of the Web.

jquery remove() with multiple form - javascript

So all you need to do is this: $( "#Split3" ).remove(); It will grab the first id with the name "Split3" and remove it! I hope thats what you are looking for. JSBin: http://jsbin.com/kibipoxowa Luca

Based on your comments, Try this: $('.removeSplit_2_').click(function () { var mySplit = $(this).closest('.Split_2_'); mySplit.remove(); });

$(document).on( "click", "a", function() { $( this ).remove(); }); test this

Related

how can i show an edit box on output text on click with save button

Replicating entries and XML with JavaScript

Updating a client side table

JQuery todo list not running

How do I add/remove text boxes with JQuery changing the variable name to keep the name attributes different?

Categories

Resources