Question

我有一个表单，字段是名字，姓氏，电子邮件，国家/地区，带有编辑图标以及提交和取消按钮。

当用户点击编辑图标（右上角）时，所有值都将显示在文本框中，国家/地区将显示在选择下拉列表中。

我尝试了一些代码但是我得到了单个字段中的所有值，并且值显示了多次。

你能帮助我吗？

$('#edit').click(function() {
 var text = $('.text-info').text();
 var input = $('<input id="attribute" type="text" value="' + text + '" />')
 $('.text-info').text('').append(input);
 input.select();
 $('.btn').show();
 $('#edit').hide();
});

.width-400{width: 400px;margin: 0 auto;padding: 20px;}
.border{border:1px solid #000;}
input{margin-bottom: 10px; width: 100%;}
  .btn{display:flex;margin-top: 10px;display: none;}
  .font-icon{text-align: right;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="border width-400">
	<div class="font-icon"><a class="edit" href="#" id="edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a></div>
	<form method="post" action="update.php">
<div class="form-group">
    <label for="fname" class="control-label">Firstname:</label><spa class="text-info">Narendra</span>
</div>

<div class="form-group">
    <label for="lname" class="control-label">Lastname:</label><span class="text-info">verma</span>
</div>

<div class="form-group">
    <label for="email" class="control-label">Email:</label><span class="text-info">abc@gmail.com</span>
</div>
    <select>
			<option value="">Choose country</option>
			<option>India</option>
			<option>USA</option>
			<option>UK</option>
		</select>
	<div class="btn">
		<input type="submit" name="submit" value="save">
		<input type="submit" name="submit" value="cancel">
	</div>
    </form>
</div>

Answer 1

＆＃13;

    $('#edit').click(function() {
     var text = $('.text-info').each(function (index,oneSpan){
                var input = $('<input type="text" value="' + $(oneSpan).text() + '" />')
     $(oneSpan).text('').append(input);
});
 

var country = $('.select-info').text();
  $('.select-info').hide();
  $('#select-elm').val(country).show();
 $('.btn').show();
 $('#edit').hide();
    });

＆＃13;

.width-400{width: 400px;margin: 0 auto;padding: 20px;}
.border{border:1px solid #000;}
input{margin-bottom: 10px; width: 100%;}
  .btn{display:flex;margin-top: 10px;display: none;}
  .font-icon{text-align: right;}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="border width-400">
	<div class="font-icon"><a class="edit" href="#" id="edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a></div>
	<form method="post" action="update.php">
<div class="form-group">
    <label for="fname" class="control-label">Firstname:</label><span class="text-info">Narendra</span>
</div>

<div class="form-group">
    <label for="lname" class="control-label">Lastname:</label><span class="text-info">verma</span>
</div>

<div class="form-group">
    <label for="email" class="control-label">Email:</label><span class="text-info">abc@gmail.com</span>
</div>
<div class="form-group">
    <label for="country" class="control-label">Country:</label><span class="select-info">USA</span>
</div>
    <select id="select-elm" >
			<option value="">Choose country</option>
			<option>India</option>
			<option>USA</option>
			<option>UK</option>
		</select>
	<div class="btn">
		<input type="submit" name="submit" value="save">
		<input type="submit" name="submit" value="cancel">
	</div>
    </form>
</div>

＆＃13;

现在你错过了什么 第一个$('.text-info')你正在选择所有拥有它的节点，所以它必须返回一个数组之王，调用方法text()就可以连接它们，这样你就得到了一个包含所有值的字符串。在您创建输入之后，再次$('.text-info').text('').append(input);只是文本方法返回的另一个数组，因此附加的一个元素将在您以所有跨度中最后附加的输入中包含的长str结束的所有元素中执行。 / p>

我们做了什么

我们从$（＆＃39; .text-info＆＃39;）中获取一个数组，只需在其上调用each(function(){}，我们将逐一获取所有内容。因此，只需创建一个输入，即从我们的ONE SPAN中获取值。清空这个，然后将数组推到它上面

点击使用jquery编辑多个表单字段？

1 个答案: