Javascript 使用jQuery动态生成文本框
我有下面的工作脚本来创建2个动态文本框，用户在其中输入最小值和最大值。有一个隐藏的文本框，其中输入的值以逗号分隔。但我试图在两个值之后添加逗号 例如： 用户单击添加元素-->将生成两个动态框。要求他输入最小值和最大值 让我们想象一下，他在第一个文本框中输入103，在第二个文本框中输入209。我希望文本框（Configsize）中的输出为103-209平方英尺 我也想加入这个Sqft。。默认情况下。这应该是附加的 这是我的工作网站： 文本框代码：Javascript 使用jQuery动态生成文本框,javascript,jquery,Javascript,Jquery,我有下面的工作脚本来创建2个动态文本框，用户在其中输入最小值和最大值。有一个隐藏的文本框，其中输入的值以逗号分隔。但我试图在两个值之后添加逗号 例如： 用户单击添加元素-->将生成两个动态框。要求他输入最小值和最大值 让我们想象一下，他在第一个文本框中输入103，在第二个文本框中输入209。我希望文本框（Configsize）中的输出为103-209平方英尺 我也想加入这个Sqft。。默认情况下。这应该是附加的 这是我的工作网站： 文本框代码： <textarea name="config
<textarea name="configsize" id="configsize"/></textarea>
<script>
$(document).ready(function() {
var iCnt = 0;
// CREATE A "DIV" ELEMENT AND DESIGN IT USING jQuery ".css()" CLASS.
var container = $(document.createElement('div')).css({
padding: '5px', margin: '20px', width: '170px', border: '1px dashed',
borderTopColor: '#999', borderBottomColor: '#999',
borderLeftColor: '#999', borderRightColor: '#999'
});
$('#btAdd').click(function() {
if (iCnt <= 19) {
iCnt = iCnt + 1;
// ADD TEXTBOX.
$(container).append('<input type=text class="input" id=tb' + iCnt + ' ' +
'value="Enter Min Size ' + iCnt + '" />');
$(container).append('<input type=text class="input" id=tb' + iCnt + ' ' +
'value="Enter Max Size ' + iCnt + '" />');
// SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED.
if (iCnt == 1) {
var divSubmit = $(document.createElement('div'));
$(divSubmit).append('<input type=button class="bt"' +
'onclick="GetTextValue()"' +
'id=btSubmit value=Submit />');
}
// ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
$('#main').after(container, divSubmit);
}
// AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON.
// (20 IS THE LIMIT WE HAVE SET)
else {
$(container).append('<label>Reached the limit</label>');
$('#btAdd').attr('class', 'bt-disable');
$('#btAdd').attr('disabled', 'disabled');
}
});
// REMOVE ONE ELEMENT PER CLICK.
$('#btRemove').click(function() {
if (iCnt != 0) { $('#tb' + iCnt).remove(); iCnt = iCnt - 1; }
if (iCnt == 0) {
$(container)
.empty()
.remove();
$('#btSubmit').remove();
$('#btAdd')
.removeAttr('disabled')
.attr('class', 'bt');
}
});
// REMOVE ALL THE ELEMENTS IN THE CONTAINER.
$('#btRemoveAll').click(function() {
$(container)
.empty()
.remove();
$('#btSubmit').remove();
iCnt = 0;
$('#btAdd')
.removeAttr('disabled')
.attr('class', 'bt');
});
});
// PICK THE VALUES FROM EACH TEXTBOX WHEN "SUBMIT" BUTTON IS CLICKED.
var divValue, values = '';
function GetTextValue() {
$(divValue)
.empty()
.remove();
values = '';
var values = [];
$('.input').each(function() {
values.push(this.value);
});
$("#configsize").text(values.join(','));
}
</script>
$（文档）.ready（函数（）{
var-iCnt=0；
//创建一个“DIV”元素，并使用jQuery.css（）类设计它。
var container=$（document.createElement（'div'））.css({
填充：“5px”，边距：“20px”，宽度：“170px”，边框：“1px虚线”，
borderTopColor:'#999'，borderBottomColor:'#999'，
borderLeftColor:'#999'，borderRightColor:'#999'
});
$（'#btAdd'）。单击（函数（）{
如果（iCnt>新建）
>公寓
>密谋
财产状况：
>发射前
您需要更改“$（“#configsize”）.text（）”行，如下所示
你可以添加HTML标记吗？已经更新了这个问题。请看一下。谢谢这里的帮助。需要一些更改如果用户单击并添加4个框。sqft在最后添加。我希望它像。102-108 sqft，303-209 sqft。等等。希望它是逗号分隔的。请这一个帮助，我可以继续。坚持这一点你可以在更新的fiddle中看到变化。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function (e) {
$("#form1").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "upload.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#targetLayer").html(data);
},
error: function()
{
}
});
}));
});
</script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var text_max = 300;
$('#textarea_count').html(text_max + ' characters remaining');
$('#comment').keyup(function() {
var text_length = $('#comment').val().length;
var text_remaining = text_max - text_length;
$('#textarea_count').html(text_remaining + ' characters remaining');
});
});
$(document).ready(function() {
var text_max = 300;
$('#textarea_count1').html(text_max + ' characters remaining');
$('#comment1').keyup(function() {
var text_length = $('#comment1').val().length;
var text_remaining = text_max - text_length;
$('#textarea_count1').html(text_remaining + ' characters remaining');
});
});
$(document).ready(function() {
var text_max = 600;
$('#textarea_count2').html(text_max + ' characters remaining');
$('#comment2').keyup(function() {
var text_length = $('#comment2').val().length;
var text_remaining = text_max - text_length;
$('#textarea_count2').html(text_remaining + ' characters remaining');
});
});
</script>
<script>
$(document).ready(function() {
var iCnt = 0;
// CREATE A "DIV" ELEMENT AND DESIGN IT USING jQuery ".css()" CLASS.
var container = $(document.createElement('div')).css({
padding: '5px', margin: '20px', width: '170px', border: '1px dashed',
borderTopColor: '#999', borderBottomColor: '#999',
borderLeftColor: '#999', borderRightColor: '#999'
});
$('#btAdd').click(function() {
if (iCnt <= 19) {
iCnt = iCnt + 1;
// ADD TEXTBOX.
$(container).append('<input type=text class="input" id=tb' + iCnt + ' ' +
'value="Enter Min Size ' + iCnt + '" />');
$(container).append('<input type=text class="input" id=tb' + iCnt + ' ' +
'value="Enter Max Size ' + iCnt + '" />');
// SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED.
if (iCnt == 1) {
var divSubmit = $(document.createElement('div'));
$(divSubmit).append('<input type=button class="bt"' +
'onclick="GetTextValue()"' +
'id=btSubmit value=Submit />');
}
// ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
$('#main').after(container, divSubmit);
}
// AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON.
// (20 IS THE LIMIT WE HAVE SET)
else {
$(container).append('<label>Reached the limit</label>');
$('#btAdd').attr('class', 'bt-disable');
$('#btAdd').attr('disabled', 'disabled');
}
});
// REMOVE ONE ELEMENT PER CLICK.
$('#btRemove').click(function() {
if (iCnt != 0) { $('#tb' + iCnt).remove(); iCnt = iCnt - 1; }
if (iCnt == 0) {
$(container)
.empty()
.remove();
$('#btSubmit').remove();
$('#btAdd')
.removeAttr('disabled')
.attr('class', 'bt');
}
});
// REMOVE ALL THE ELEMENTS IN THE CONTAINER.
$('#btRemoveAll').click(function() {
$(container)
.empty()
.remove();
$('#btSubmit').remove();
iCnt = 0;
$('#btAdd')
.removeAttr('disabled')
.attr('class', 'bt');
});
});
// PICK THE VALUES FROM EACH TEXTBOX WHEN "SUBMIT" BUTTON IS CLICKED.
var divValue, values = '';
function GetTextValue() {
$(divValue)
.empty()
.remove();
values = '';
var values = [];
$('.input').each(function() {
values.push(this.value);
});
$("#configsize").text(values.join(','));
}
</script>
<script type="text/javascript">
function updateTextArea() {
var allVals = [];
$('#mydiv :checked').each(function () {
allVals.push($(this).val());
});
$('#txtValue').val(allVals)
}
$(function () {
$('#mydiv input').click(updateTextArea);
updateTextArea();
});
</script>
</head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<a href="<?php echo $logoutAction ?>">Logout</a>
<form action="upload.php" method="post" name="form1" id="form1" enctype="multipart/form-data">
<table border="1" align="center" cellpadding="15" cellspacing="15">
<tr valign="baseline">
<td nowrap="nowrap" align="right">Builder Name:</td>
<td><input type="text" name="property_builder" value="" class="form-control" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Name:</td>
<td><input type="text" name="property_name" value="" class="form-control" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Location:</td>
<td><input type="text" name="property_location" value="" class="form-control" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property City:</td>
<td><input type="text" name="property_city" class="form-control" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property RERA Id:</td>
<td><input type="text" name="property_rera_id" class="form-control" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property For:</td>
<td><select name="property_for" class="form-control">
<option value="Sale" <?php if (!(strcmp("Sale", ""))) {echo "SELECTED";} ?>>Sale</option>
<option value="New" <?php if (!(strcmp("New", ""))) {echo "SELECTED";} ?>>New</option>
<option value="Re-Sale" <?php if (!(strcmp("Re-Sale", ""))) {echo "SELECTED";} ?>>Re-Sale</option>
</select></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Type:</td>
<td><select name="property_type" class="form-control">
<option value="Apartment" <?php if (!(strcmp("Apartment", ""))) {echo "SELECTED";} ?>>Apartment</option>
<option value="Villa" <?php if (!(strcmp("Villa", ""))) {echo "SELECTED";} ?>>Villa</option>
<option value="Plot" <?php if (!(strcmp("Plot", ""))) {echo "SELECTED";} ?>>Plot</option>
</select></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Status:</td>
<td>
<select name="property_status" class="form-control">
<option value="Under-Construction" <?php if (!(strcmp("Under-Construction", ""))) {echo "SELECTED";} ?>>Under-Construction</option>
<option value="Pre-Launch" <?php if (!(strcmp("Pre-Launch", ""))) {echo "SELECTED";} ?>>Pre-Launch</option>
<option value="Read to move in" <?php if (!(strcmp("Read to move in", ""))) {echo "SELECTED";} ?>>Read to move in</option>
</select>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Possession:</td>
<td><input class="form-control" type="text" name="property_possession" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Configuration:</td>
<td><input class="form-control" type="text" name="property_configuration" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Price Range:</td>
<td><input class="form-control" type="text" name="property_price_range" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Launch Date:</td>
<td><input class="form-control" type="text" name="property_launch_date" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Discription 1st Para:<br /><br />
<div id="textarea_count" class="badge pull-right"></div></td>
<td><textarea class="form-control" name="1stpara" id="comment" rows="5" maxlength="300"></textarea></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Discription 2nd Para:<br /><br />
<div id="textarea_count1" class="badge pull-right"></div></td>
<td><textarea class="form-control" name="2ndpara" id="comment1" rows="5" maxlength="300"></textarea></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Discription 3rd Para:<br /><br />
<div id="textarea_count2" class="badge pull-right"></div></td>
<td><textarea class="form-control" name="3rdpara" id="comment2" rows="5" maxlength="600"></textarea></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Amenities (List all the amenities by comma seperated values)</td>
<td><textarea name="amenities" class="form-control"></textarea></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Select Photo (one or multiple): <br /> Note: Upload 3 Images ( Supported image format: .jpeg, .jpg, .png, .gif )</td>
<td>
<div id="uploadFormLayer">
<input name="userImage" id="inp_file" type="file" class="inputFile" /><br/>
<input id="userImage" name="userImage" type="hidden" value="">
<input name="userImage1" type="file" class="inputFile" /><br/>
<input name="userImage2" type="file" class="inputFile" /><br/>
<input name="userImage3" type="file" class="inputFile" /><br/>
<input name="userImage4" type="file" class="inputFile" /><br/>
</div>
</div>
</td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Configurations</td>
<td>
<div id="mydiv">
<input type="checkbox" name="1 RK Apartment" id="1 RK Apartment" value="1 RK" onClick="dynInput(this);"/> 1 RK Apartment<br />
<input type="checkbox" name="1 BHK Apartment" id="1 BHK Apartment" value="1 BHK" onClick="dynInput(this);" /> 1 BHK Apartment<br />
<input type="checkbox" name="1.5 BHK Apartment" id="1.5 BHK Apartment" value="1.5 BHK" onClick="dynInput(this);" /> 1.5 BHK Apartment<br />
<input type="checkbox" name="2 BHK Apartment" id="2 BHK Apartment" value="2 BHK" onClick="dynInput(this);" /> 2 BHK Apartment<br />
<input type="checkbox" name="2.5 BHK Apartment" id="2.5 BHK Apartment" value="2.5 BHK" onClick="dynInput(this);" /> 2.5 BHK Apartment<br />
<input type="checkbox" name="3 BHK Apartment" id="3 BHK Apartment" value="3 BHK" onClick="dynInput(this);" /> 3 BHK Apartment<br />
<input type="checkbox" name="3.5 BHK Apartment" id="3.5 BHK Apartment" value="3.5 BHK" onClick="dynInput(this);" /> 3.5 BHK Apartment <br />
<input type="checkbox" name="4 BHK Apartment" id="4 BHK Apartment" value="4 BHK" onClick="dynInput(this);" /> 4 BHK Apartment <br />
<input type="checkbox" name="4+ BHK Apartment" id="4+ BHK Apartment" value="4+ BHK" onClick="dynInput(this);" /> 4+ BHK Apartment <br />
<textarea id="txtValue" name="config"></textarea>
</div>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Configuration Sizes</td>
<td> <div id="main">
<input type="button" id="btAdd" value="Add Element" class="bt" />
<input type="button" id="btRemove" value="Remove Element" class="bt" />
<input type="button" id="btRemoveAll" value="Remove All" class="bt" /><br />
</div>
<textarea name="configsize" id="configsize"/></textarea>
</td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Youtube Link</td>
<td><textarea name="youtubelink" class="form-control"></textarea></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Facebook Page Link:</td>
<td><input class="form-control" type="text" name="fblink" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Twitter Page Link:</td>
<td><input class="form-control" type="text" name="TwitterPagelink" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Pincode</td>
<td><textarea name="property_pincode" class="form-control"></textarea></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Address</td>
<td><textarea name="property_address" class="form-control"></textarea></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Google Maps URL:</td>
<td><input class="form-control" type="text" name="property_maps_url" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Latitude:</td>
<td><input class="form-control" type="text" name="property_lat" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Longitude:</td>
<td><input class="form-control" type="text" name="property_log" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Floor Plans:</td>
<td><div id="uploadFormLayer">
1 RK Apartment <input name="userImage6" type="file" class="inputFile" /><br/>
1 BHK Apartment <input name="userImage7" type="file" class="inputFile" /><br/>
1.5 BHK Apartment <input name="userImage8" type="file" class="inputFile" /><br/>
2 BHK Apartment <input name="userImage9" type="file" class="inputFile" /><br/>
2.5 BHK Apartment<input name="userImage10" type="file" class="inputFile" /><br/>
3 BHK Apartment <input name="userImage11" type="file" class="inputFile" /><br/>
3.5 BHK Apartment <input name="userImage12" type="file" class="inputFile" /><br/>
4 BHK Apartment <input name="userImage13" type="file" class="inputFile" /><br/>
4+ BHK Apartment <input name="userImage14" type="file" class="inputFile" /><br/>
</div></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Logo:</td>
<td><input type="file" name="image" /><br/>
</td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right"> </td>
<td> </td>
</tr>
<tr valign="baseline">
<td colspan="2" align="right" nowrap="nowrap"><input type="submit" class="form-control btn-primary" value="Insert record" /></td>
</tr>
</table>
<input type="hidden" name="MM_insert" value="form1" />
</form>
<p> </p>
</body>
</html>
function GetTextValue() {
$(divValue).empty().remove();
values = '';
var values = [];
$('.input').each(function() {
values.push(this.value);
});
$("#configsize").text(values.join(' - ') + " Sqft.");
}