Tried to get the text box value and display into the h3 element in above the textbox field
Here is my HTML Code :
<div class="clonedInput" id="add_attribute" style="display: block;">
<div id="add_attributes">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name">**Here Text box value should be displayed**</strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="clonedInput" id="add_attribute_2" style="display: block;">
<div id="add_attributes" class="woocommerce_attribute wc-metabox ">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name"></strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="clonedInput" id="add_attribute_3" style="display: block;">
<div id="add_attributes" class="woocommerce_attribute wc-metabox ">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name"></strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I'm trying to get the input field value <input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]"> and display the value into the "
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name">"**Here the text box value"</strong> </h3>
" on blur function and this was dynamic text box
My Jquery :
$( "input" ).blur(function() {
var string = $(this).val();
$(this).parent().append(string);
});
I added an id attribute to the h3 where you want to display it and use that as reference on the blur event callback: DEMO HERE
HTML
<strong class="attribute_name" id="output">**Here Text box value should be displayed**</strong> </h3>
jQuery
$("input").blur(function () {
var string = $(this).val();
$('#output').html(string);
});
See a working demo here: http://jsfiddle.net/wPCZ5/
You need to do this in your handler:
$(this).closest('div').find('h3 > strong').html(string);
for all text boxes to work. The closest() call looks up the DOM hierarchy and returns the first matching element. In your case, it is the accordion div. The find() call then looks down the DOM hierarchy for the matching element. Finally html() replaces the current HTML within the element with the supplied string. Your original call to append() would add the string to whatever is already present.
There's a working fiddle here: http://jsfiddle.net/u63CU/ but I think you should not reuse class and ID names like you have. It can lead to many undesired results, as jquery selects by id or class name.
<div class="clonedInput" id="add_attribute" style="display: block;">
<div id="add_attributes">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong id="text-value" class="attribute_name">**Here Text box value should be displayed**</strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
$( "#attribute_name" ).blur(function() {
var string = $(this).val();
$('#text-value').text(string);
});
try something like this
$( "input" ).blur(function() {
$(this).closest('strong.attribute_name').text(this.value);
});
If you want to place text box value in place of **Here Text box value should be displayed**, please try this:
$( "input" ).blur(function() {
var string = $(this).val();
$(".attribute_name").text(string);
});
Related
I am trying to highlight the input field which is in html table td. I am looping the html table but unable to highlight the input field if quantity is 0 in input field. what i have tried is below.
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li>details</li>
<li>captain</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="details">
<div class="row">
<div class="col-sm-12">
<h4 class="info-text">
Let's start with the basic details.
</h4>
</div>
<div class="form-horizontal">
<div class="form-group">
<div class="col-md-12">
<div class="persons">
<table class="table table-condensed table-hover" id="tblPurchaseOrders">
<tr>
<th>
Product Code
</th>
<th>
SKU
</th>
<th>
Product Name
</th>
<th>
Quantity
</th>
</tr>
<tr>
<td>
<input type="text" name="ProductCode" value="A" class="form-control" />
</td>
<td>
<input type="text" name="SKU" value="A1" class="form-control" />
</td>
<td>
<input type="text" name="Name1" value="A1" class="form-control" />
</td>
<td>
<input type="text" id="Quantity" value="0" class="form-control" />
</td>
</tr>
<tr>
<td>
<input type="text" name="ProductCode" value="B" class="form-control" />
</td>
<td>
<input type="text" name="SKU" value="B1" class="form-control" />
</td>
<td>
<input type="text" name="Name1" value="B1" class="form-control" />
</td>
<td>
<input type="text" id="Quantity" value="1" class="form-control" />
</td>
</tr>
</table>
</div>
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="tab-pane" id="captain">
<div class="row">
<div class="form-group">
<div class="col-md-12">
<table class="table table-condensed table-hover" id="tbOrderDetail">
<tr>
<th>
Product Code
</th>
<th>
SKU
</th>
<th>
Product Name
</th>
<th>
Quantity
</th>
</tr>
</table>
</div>
</div>
</div>
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;">First</li>
<li class="previous">Previous</li>
<li class="next last" style="display:none;">Last</li>
<li class="next">Next</li>
</ul>
</div>
</div>
<div class="tab-content">
</div>
Below is my jquery code where i am looping the html table and want to highlight the input field which is in html table td.
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
onTabShow: function(tab, navigation, index) {
if (index == 1) {
$('#tblPurchaseOrders').find('tr:has(td)').each(function() {
if (parseInt(($(this).find('#Quantity')).val()) == 0)
{
//show error
}
});
}
}
});
});
You are filtering per ID (#Quantity). Two (or more) elements cannot share the same ID. Try to select elements by name, for example:
$('#tblPurchaseOrders').find('td > input[name=Quantity]').each(function() {
var val = $(this).val();
if (parseInt(val) == 0)
{
// show error
// note: if needed, you can obtain a reference
// to container <tr> using: $(this).parent('tr');
}
});
Remember to change id property of Quantity elements to name.
Note: untested code that might not work as-is, I'm just showing you the right direction.
If your intention is to use the Twitter Bootstrap Wizard (TBW from now on) for your validation flow, you probably don't want this validation to trigger when you open the tab, which is what happens, when you place your code inside of the onTabShow function.
I assume you want the validation of the fields to be done when the user wants to go to the next step, by pressing the "Next" link you have, or rather, when you want to load the "next tab". For this, you should use onNext rather than onTabShow for your validation.
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
tabClass: 'nav nav-pills',
onNext: function(tab, navigation, index) {
var res = $("input[name='Quantity']").each(function() {
var val = $(this).val();
if(parseInt(val) == 0) {
$(this).focus();
// This will stop the .each-iteration
// We only want to focus the _first_ element, otherwise it
// would keep iterating, and change focus to the next 0-valued input
return false;
}
});
// We use the result returned from running the each function
// If false was returned at any point during the .each function,
// var res will be false. Pass this onto the onNext call, to
// prevent the the user to move to next tab.
if(!res) return false;
}
});
});
For this to work, you'll have to replace id="Quantity" with name="Quantity", in both your instances.
If you want to use .focus() on the first element, regardless of which input is invalid, you should remove $(this).focus() from the previous example, and instead replace if(!res) return false with the following:
if(!res) {
$("input[name='Quantity']").first().focus();
return false;
}
Can you try this
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li>details</li>
<li>captain</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="details">
<div class="row">
<div class="col-sm-12">
<h4 class="info-text">
Let's start with the basic details.
</h4>
</div>
<div class="form-horizontal">
<div class="form-group">
<div class="col-md-12">
<div class="persons">
<table class="table table-condensed table-hover" id="tblPurchaseOrders">
<tr>
<th>
Product Code
</th>
<th>
SKU
</th>
<th>
Product Name
</th>
<th>
Quantity
</th>
</tr>
<tbody id="dtTable">
<tr>
<td>
<input type="text" name="ProductCode" value="A" class="form-control" />
</td>
<td>
<input type="text" name="SKU" value="A1" class="form-control" />
</td>
<td>
<input type="text" name="Name1" value="A1" class="form-control" />
</td>
<td>
<input type="text" id="Quantity" value="0" class="form-control" />
</td>
</tr>
<tr>
<td>
<input type="text" name="ProductCode" value="B" class="form-control" />
</td>
<td>
<input type="text" name="SKU" value="B1" class="form-control" />
</td>
<td>
<input type="text" name="Name1" value="B1" class="form-control" />
</td>
<td>
<input type="text" id="Quantity" name="Quantity" value="1" class="form-control" />
</td>
</tr>
</table>
</div>
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="tab-pane" id="captain">
<div class="row">
<div class="form-group">
<div class="col-md-12">
<table class="table table-condensed table-hover" id="tbOrderDetail">
<tr>
<th>
Product Code
</th>
<th>
SKU
</th>
<th>
Product Name
</th>
<th>
Quantity
</th>
</tr>
</table>
</div>
</div>
</div>
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;">First</li>
<li class="previous">Previous</li>
<li class="next last" style="display:none;">Last</li>
<li class="next">Next</li>
</ul>
</div>
</div>
<div class="tab-content">
And Javascript code
$(document).ready(function () {
$('#rootwizard').bootstrapWizard({
onTabShow: function (tab, navigation, index) {
if (index == 0) {
$('#dtTable tr').each(function (i, row) {
$(this).find('[name=Quantity]').each(function () {
alert($(this).val())
})
if ($(this).val() == 1) {
///Do something
}
});
}
}
});
});
I have table that is populated with items from a database. There is a column to "tick" each item, which calls to the database to change the status of that item to "Valid" - that part works. To save me having to refresh the page though, I would like to then update the text on the page after the ajax call so that it reads "Valid" instead of submitted. What is the correct code to achieve this? Where am I going wrong? Without success, I have also attempted to get the tick to go green once clicked.
<div class="form-group">
<div class="row">
<div class="table-responsive col-md-6">
<h4><i class="glyphicon glyphicon-check"></i> Summary</h4>
<hr />
<table id="stationCount" class="table table-bordered table-hover">
<tr>
<th>ID</th>
<th>Place</th>
<th>Submission Date</th>
<th>Status</th>
<th>Confirm</th>
</tr>
<tr>
<td>
<p id="lblId" class="form-control-static" contenteditable="false">
159
</p>
</td>
<td>
<p id="lblPlaceName" class="form-control-static" contenteditable="false">
Somewhere
</p>
</td>
<td>
<input type="hidden" data-val="true" data-val-required="The SurveyId field is required." id="Items_0__SurveyId" name="Items[0].SurveyId" value="159" />
<p id="lblSubmittedOn" class="form-control-static" contenteditable="false" title="27/03/2018 11:04:47">
27/03/2018
</p>
</td>
<td class="status" id="159">
<p asp-for="Submitted">
Submitted
</p>
</td>
<td>
<a href='#' class='btn btn-default ConfirmLink' style="color: #808080 " data-url='/Controller/ValidateSurvey' data-id="159">
<i class="fa fa-check"></i>
</a>
</td>
</tr>
<tr>
<td>
<p id="lblId" class="form-control-static" contenteditable="false">
3
</p>
</td>
<td>
<p id="lblPlaceName" class="form-control-static" contenteditable="false">
Somewhere else
</p>
</td>
<td>
<input type="hidden" data-val="true" data-val-required="The SurveyId field is required." id="Items_5__SurveyId" name="Items[5].SurveyId" value="3" />
<p id="lblSubmittedOn" class="form-control-static" contenteditable="false" title="21/01/2018 00:00:00">
21/01/2018
</p>
</td>
<td class="status" id="3">
<p asp-for="Submitted">
Expired
</p>
</td>
<td>
<a href='#' class='btn btn-default ConfirmLink' style="color: #808080" data-url='/Controller/ValidateSurvey' data-id="3">
<i class="fa fa-check"></i>
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
$(function() {
//Document.ready//
//link up event handler
$(".ConfirmLink").click(function() {
// Get the id from the link
var recordToConfirm = $(this).attr("data-id");
var postToUrl = $(this).attr("data-url");
$.ajax(postToUrl, {
type: "post",
data: {
"id": recordToConfirm
},
dataType: "json"
}).done(function(data) {
// Successful requests get here
});
if ($(this).css('color') === '#808080') {
$(this).css('color', '#008000');
} else {
$(this).css('color', '#808080');
}
$("#" + recordToConfirm + " td.status").html('Valid');
});
});
I have set up a jsfiddle:
https://jsfiddle.net/a4zhpt7L/4/
To do everything you want, change some things:
Change if ($(this).css('color') === '#808080') to if ($(this).css('color') == 'rgb(128, 128, 128)'), because jQuery returns a rgb code instead of a hex code.
Change $("#" + recordToConfirm + " td.status").html('Valid'); to $("td.status#" + recordToConfirm).html('Valid');, because the td.status was placed incorrectly.
I hope this also fixes your ajax problem.
I have the following code, basically it is performing two operations. First one being submitting my form data to the google spreadsheet and the other operation is submitting my second form textbox value data to another page textbox value. How to do this?
<script type="text/javascript">
<!--
function copy_data(val){
var a = document.getElementById(val.id).value
document.getElementById("copy_to").value=a
}
//-->
</SCRIPT>
<style type="text/css">
<!-- -->
</style>
</head>
<body>
<script type="text/javascript">var submitted=false;</script>
<iframe name="response_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){window.location='Thanks.asp';}"/>
<form action="https://docs.google.com/spreadsheet/formResponse?formkey=dGtzZnBaYTh4Q1JfanlOUVZhZkVVUVE6MQ&ifq" method="post" target="response_iframe" id="commentForm" onSubmit="submitted=true;">
<!-- #include virtual="/sts/include/header.asp" -->
<!-- ABove this Header YJC -->
<table style="background-color: #FFC ;" width="950" align="center" border="0" summary="VanaBhojnaluBooking_Table">
<tr>
<td colspan="7">
<p class="MsoNormal" align="center" style="text-align:center;">
<strong>
<span style="line-height:115%; font-family:'Arial Rounded MT Bold','sans-serif'; font-size:16.0pt; color:#76923C; ">Karthika Masa Vanabhojanalu – Participation Booking</span>
</strong>
</p>
<p class="MsoNormal" align="center" style="text-align:center;">
<strong>
<em>
<span style="line-height:115%; font-size:20.0pt; color:#7030A0; ">13<sup>th</sup> Nov 2011 - # West Coast Park - Singapore</span>
</em>
</strong>
</p>
<p class="MsoNormal" align="center" style="text-align:center;">
<strong>
<span style="color:#7030A0; ">Reserve your participation and avail </span>
<span style="color:red; ">
<a target="_blank" href="/STS/programs/VB_2011_info.asp"> DISCOUNT </a>
</span>
<span style="color:#7030A0; "> on the ticket</span>
</strong>
</p>
</td>
</tr>
<tr>
<th width="37" scope="col"> </th>
<th width="109" rowspan="5" valign="top" class="YJCRED" scope="col">
<div align="left">
<font size="2"> * Required</font>
</div>
</th>
<td width="68" scope="col">
<div align="right">
<font size="2.5px">Name</font>
<span class="yj">
<span class="yjcred">*</span>
</span>
</div>
</td>
<th colspan="3" scope="col">
<label for="Name"/>
<div align="left">
<input name="entry.0.single" class="required" style="width:487px; height:25px; vertical-align:middle;" type="text" id="entry_0" title="Enter your name">
</div>
</th>
<th width="223" scope="col"> </th>
</tr>
<tr>
<td> </td>
<td>
<div align="right">
<font size="2.5px">Phone</font>
<span class="yj">
<span class="yjcred">*</span>
</span>
</div>
</td>
<td width="107">
<input name="entry.1.single" class="required" title="Handphone Number with out +65" maxlength="8" style="width:100px;height:25px;" type="text" onkeyup="copy_data(this)" onKeyPress="return numbersonly(this, event)" id="entry_1"/>
<td width="170">
<div align="right">
<font size="2.5px">Email</font>
<span class="yj">
<span class="yjcred1">*</span>
</span>
</div>
</td>
<td width="206">
<input name="entry.2.single" type="text" style="width:190px;height:25px;" id="required" title="Enter your email address" class="required email"/>
</tr>
<tr>
<td> </td>
<td>
<div align="right">
<font size="2.5px">Home Phone</font>
</div>
</td>
<td width="107">
<input name="entry.1.single" title="Handphone Number with out +65" maxlength="8" style="width:100px;height:25px;" type="text" onKeyPress="return numbersonly(this, event)" id="entry_100"/>
</tr>
<tr>
<td align="center" colspan="7">
<p> </p>
<p>
<input type="submit" name="submit" onMouseOver="Window.status='You can not see anything';return true" onMouseOut="window.status='Press SUBMIT only after proper inforatmion entering then you are Done'" onClick="jQuery.Watermark.HideAll();" value="Submit">
</p>
<p> </p>
</td>
</tr>
<p> </p>
<tr>
<td colspan="25"/>
</tr>
</table>
</form>
<form method="Link" Action="Sankranthi_Reserv2.asp">
<input disabled name="copy of hp" maxlength="8" style="width:100px;height:25px;" type="text" id="copy_to">
</form>
<p>
<!-- #include virtual="/sts/include/footer.asp" -->
<input type="hidden" name="pageNumber" value="0">
<input type="hidden" name="backupCache" value="">
<script type="text/javascript">
(function() {
var divs = document.getElementById('ss-form').getElementsByTagName('div');
var numDivs = divs.length;
for (var j = 0; j < numDivs; j++) {
if (divs[j].className=='errorbox-bad') {
divs[j].lastChild.firstChild.lastChild.focus();
return;
}
}
for (var i=0; i < numDivs; i++) {
var div = divs[i];
if (div.className=='ss-form-entry' && div.firstChild && div.firstChild.className=='ss-q-title') {
div.lastChild.focus();
return;
}
}
As you can see from above, this is the first page and in the second page where I was referring to Sankranthi_Reserv2.asp in the second form. I want to pass the textbox value over there, so the problem is the first form is submitting to the google docs and storing the data, but the second form need to pass the handphone number textbox value to the nextpage textbox value, but there is only one SUBMIT button.
Something like this would work:
$('#form1_submit_button').click(function(){
$('form').each(function(){
$(this).submit();
});
});
Alternative:
$('#form1_submit_button').click(function(){
$('#form1 #form2 #form3').submit();
});
For submitting two forms you will have to use Ajax. As after using form.submit() page will load action URL for that form. so you will have to do that asynchronously.
So you can send both request asynchronously or send one request asynchronously and after its success submit second form.
function submitTwoForms() {
var dataObject = {"form1 Data with name as key and value "};
$.ajax({
url: "test.html",
data : dataObject,
type : "GET",
success: function(){
$("#form2").submit(); //assuming id of second form is form2
}
});
return false; //to prevent submit
}
You can bind this submitTwoForms() function on your that one submit button. Using
$('#form1').submit(function() {
submitTwoForms();
return false;
});
But, if you do not want to do all this, you can use Jquery form plugin to submit form using Ajax.
the simplest way I have found is something like this
<form method='post' action='whatever?whatever1=blah&whatever2=blah'>
<?php
header ("Location: http://example.com/whatever.html");
?>
This will do the action of the form (without showing it in your browser), then redirect to the page of the header.
<div id="posts">
<table>
<tr>
<td>
<div id="name" class="enabled">User1</div>
</td>
<td>
<div id="post-content">
Hello
<div id="load">
</div>
</div>
</td>
</tr>
</table>
<br><br>
<table>
<tr>
<td>
<div id="name" class="enabled">User2</div>
</td>
<td>
<div id="post-content">
Hello too
<div id="load"></div>
</div>
</td>
</tr>
</table>
</div>
How can i use jQuery/Javacript to find link with "abc" inside #name div of #posts table.
and after locating it (the link with abc). jQuery will add html content to #post-content #load div of that table that has link with "abc" inside ,using the html(); function in jQuery.
that means after adding my code will look like this :
<div id="posts">
<table>
<tr>
<td>
<div id="name" class="enabled">User1</div>
</td>
<td>
<div id="post-content">
Hello
<div id="load">
Some stuff is added here using html()
</div>
</div>
</td>
</tr>
</table>
<br><br>
<table>
<tr>
<td>
<div id="name" class="enabled">User2</div>
</td>
<td>
<div id="post-content">
Hello too
<div id="load"></div>
</div>
</td>
</tr>
</table>
</div>
while the #name with no link with "abc" which is the link with "user2" will not be affected or modifeid.
How can i do this?
I hope you understand.
Assuming you fix the html and use classes:
$('.name a[href*="abc"]').closest('tr').find('.load').html('Some stuff is added here using html()');
Find a tag with href containing 'abc'
Get parent tr
Find #postcontent >#load within this element
var x = $('a[href*="abc"]');
var b = x.parents('tr');
var c = b.find('#post-content > #load');
alert(c.html());
I have this div, where divBrdr should contain a form summaryConfig
<div id="popup">
<div id="popupClose">
<input type="image" alt="close window" src="images/close_btn.gif" width="20" height="20" onclick="" align="right">
</div>
<div id="divBrdr" >
</div>
</div>
<div id="backgroundPopup">
</div>
Right now i have this form inside divBrdr but then this popup appears differently for create and update so I wanted to make this form made dynamically. Can somebody help me do that?
<form style="padding-bottom:11px;" name="summaryConfig" method="post" action="">
<img alt="title" src="images/update_conform_title.gif" width="189" hspace="4" height="17" vspace="4"><br>
<br>
<table align="center" width="90%" border="0" cellspacing="0" cellpadding="0">
<tr> <td width="800"></td> </tr>
</table>
<div id="postUploadInfo">
</div>
<table align="center" border="0" cellpadding="10" cellspacing="0" width="84%">
<tr>
<td colspan="3" align="center">
<label>
<input type="button" tabindex="4" id="btnOk" value="Done" class="btn" onClick="">
</label>
</td>
</tr>
</table>
</form>
if you want to add this form dynamically then you can hold your form in a variable and append that variable to divBrdr div on button click.
VariableHoldingForm = "<form style='padding-bottom:11px;' name='summaryConfig' method='post' action=''> ";
VariableHoldingForm +="<img alt='title' src='images/update_conform_title.gif' width='189' hspace='4' height='17' vspace='4'><br> <br> ... and till...</form>'
$('#buttonId').click(function(){
$('#divBrdr').append(VariableHoldingForm);
});
even you can use document.createElement() to create any html tag
**EDIT**
to unAppend remove html of your div like this..
$('#divBrdr').html('');
and then again add new form element variable on update button
$('#updateButton).click(function(){
$('#divBrdr').append(newForm);
});