{"id":29269,"date":"2023-01-06T15:33:51","date_gmt":"2023-01-06T10:03:51","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-dynamically-add-an-input-to-an-html-form-closed\/"},"modified":"2023-01-06T15:33:51","modified_gmt":"2023-01-06T10:03:51","slug":"solved-dynamically-add-an-input-to-an-html-form-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-dynamically-add-an-input-to-an-html-form-closed\/","title":{"rendered":"[Solved] Dynamically add an input to an HTML form [closed]"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

I’m struggling whether to vote to close this as a duplicate, even though it’s not exact<\/em>. But what you’re looking for appears to be answered here. The main difference is that where they are binding to the change<\/code> event for a select<\/code> element:<\/p>\n

$(\"#selectBox\").change(function() {\n<\/code><\/pre>\n
you would instead bind to the click<\/code> event of an anchor element (your “Add” link):<\/p>\n
$(\"#addLink\").click(function() {\n<\/code><\/pre>\n
The “Delete” link would work in a similar manner.  As the HTML is created for the new input, you’d also create the “Delete” link to go next to it before adding it to the DOM (the call to the .html()<\/code> function in the referenced code).  You’ll want to make sure that you give the added HTML a unique id<\/code> (wrapped in a div<\/code> with a unique id<\/code> for example), as well as to the added “Delete” link.<\/p>\n
Then, after it’s added to the DOM, you’d add an event handler to the “Delete” link:<\/p>\n
$(\"#deleteLink123\").click(function() {\n<\/code><\/pre>\n
In this handler you’d reference the unique id<\/code> of the container of what was added to the DOM and remove it<\/a>.  I’m sure there’s a more elegant way to handle this by using the .live()<\/code> function here<\/a> and some more clever selectors<\/a>.  It would be interesting to re-factor something like this while trying to not be too clever so as to hurt ongoing support.<\/p>\n
There are some additional considerations you’ll want to keep in mind as you develop this:<\/p>\n
    \n
  1. The anchor tags are by default links, but it looks like you don’t want them to link to anything.  You can link them to “#” but that’s not really elegant.  You could remove the href<\/code> attribute from them entirely, but then you’ll also need to style them to visually behave like links.  Not difficult, but not intuitive either.  Why not buttons?<\/li>\n
  2. How the actual form behaves when handled by the server is up to you.  You can dynamically add elements to the DOM to your heart’s content, but that may not help you on the server-side.  That’s another question entirely, though.<\/li>\n<\/ol>\n<\/div>\n
    <\/div>\n<\/div>\n
                3<\/span> <\/p><\/div>\n<\/div>\n
    [ad_2]<\/p>\n
    solved Dynamically add an input to an HTML form [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"
    [ad_1] I’m struggling whether to vote to close this as a duplicate, even though it’s not exact. But what you’re looking for appears to be answered here. The main difference is that where they are binding to the change event for a select element: $(“#selectBox”).change(function() { you would instead bind to the click event of … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[464,346,1148,333,388],"class_list":["post-29269","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-html","tag-input","tag-javascript","tag-jquery"],"yoast_head":"\n[Solved] Dynamically add an input to an HTML form [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-dynamically-add-an-input-to-an-html-form-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Dynamically add an input to an HTML form [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] I’m struggling whether to vote to close this as a duplicate, even though it’s not exact. But what you’re looking for appears to be answered here. The main difference is that where they are binding to the change event for a select element: $("#selectBox").change(function() { you would instead bind to the click event of ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-dynamically-add-an-input-to-an-html-form-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-06T10:03:51+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-dynamically-add-an-input-to-an-html-form-closed\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-dynamically-add-an-input-to-an-html-form-closed\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Dynamically add an input to an HTML form [closed]\",\"datePublished\":\"2023-01-06T10:03:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-dynamically-add-an-input-to-an-html-form-closed\/\"},\"wordCount\":358,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"css\",\"html\",\"input\",\"javascript\",\"jquery\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-dynamically-add-an-input-to-an-html-form-closed\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-dynamically-add-an-input-to-an-html-form-closed\/\",\"name\":\"[Solved] Dynamically add an input to an HTML form [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2023-01-06T10:03:51+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-dynamically-add-an-input-to-an-html-form-closed\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-dynamically-add-an-input-to-an-html-form-closed\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-dynamically-add-an-input-to-an-html-form-closed\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Dynamically add an input to an HTML form [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Dynamically add an input to an HTML form [closed] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-dynamically-add-an-input-to-an-html-form-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Dynamically add an input to an HTML form [closed] - JassWeb","og_description":"[ad_1] I’m struggling whether to vote to close this as a duplicate, even though it’s not exact. But what you’re looking for appears to be answered here. The main difference is that where they are binding to the change event for a select element: $(\"#selectBox\").change(function() { you would instead bind to the click event of ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-dynamically-add-an-input-to-an-html-form-closed\/","og_site_name":"JassWeb","article_published_time":"2023-01-06T10:03:51+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-dynamically-add-an-input-to-an-html-form-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-dynamically-add-an-input-to-an-html-form-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Dynamically add an input to an HTML form [closed]","datePublished":"2023-01-06T10:03:51+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-dynamically-add-an-input-to-an-html-form-closed\/"},"wordCount":358,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","html","input","javascript","jquery"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-dynamically-add-an-input-to-an-html-form-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-dynamically-add-an-input-to-an-html-form-closed\/","name":"[Solved] Dynamically add an input to an HTML form [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2023-01-06T10:03:51+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-dynamically-add-an-input-to-an-html-form-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-dynamically-add-an-input-to-an-html-form-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-dynamically-add-an-input-to-an-html-form-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Dynamically add an input to an HTML form [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/29269","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=29269"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/29269\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=29269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=29269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=29269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}