javascript - 使用 jQuery 动态生成的文本框
问题描述
我有以下工作脚本来创建 2 个动态文本框,用户可以在其中输入最小值和最大值。有一个隐藏的文本框,输入的值以逗号分隔。但我试图在两个值之后添加逗号。
例子:
用户点击 Add Element --> 生成两个动态框。要求他输入最小值和最大值。
假设他在第一个文本框中输入 103,在第二个文本框中输入 209。我希望我的文本框 (Configsize) 中的输出为 103 - 209 Sqft。
也想加入这个 Sqft.. 默认情况下。这应该被附加。
这是我的工作网站:https ://getrightproperty.com/post_property.php
文本框代码:
<textarea name="configsize" id="configsize"/></textarea>
J-查询代码:
<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>
这是代码::
<!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>
解决方案
您需要按如下方式更改“$("#configsize").text()”行。这是小提琴https://jsfiddle.net/wrpteuak/
function GetTextValue() {
$(divValue).empty().remove();
values = '';
var values = [];
$('.input').each(function() {
values.push(this.value);
});
$("#configsize").text(values.join(' - ') + " Sqft.");
}
推荐阅读
- json - jq将带有流标志的json解析为不同的json文件
- java - NoSuchMethodError:org.springframework.util.CollectionUtils.newLinkedHashMap 即使在lib中存在spring-core
- python - 鼠标运动在不在主 Surface 上的 Rect 上发生碰撞
- arguments - Kporbe 参数解析
- python - 尝试不同变量的一系列值以产生最大和的函数
- python - Discord.py 等待不是命令作者的用户对消息做出反应(嵌入)
- android - 如何在android xml中显示谷歌日历
- javascript - 如何在注册期间将用户保存到 Firestore 数据库?到目前为止,它只保存在firestore的Authentication中
- python - PYOMO:如何使用 glpk 创建求解器
- sql - 同时将 CSV 加载到 PostgreSQL 转换类型中