使用一组选项更新文本字段并在服务器中更新

Question

我想在同一页面中显示和更新值。因此，每当我单击文本字段（值）时，我都希望显示一个选择选项。然后，应使用POST在用户端和服务器端更新所选值。

- ＆GT;点击＆＃34;你的名字＆＃34;它应该弹出文本输入框。

- ＆GT;点击＆＃34;我的性别＆＃34;它应弹出一个选择选项。

并且，我希望用输入和替换来替换锚点。选择标签。我想执行内联编辑。

＆＃13;

＆＃13;

<p>Name : <a href="" title="">Your Name</a>
</p>
<p>Gender : <a href="" title="">My Gender</a>
</p>




<input type="text" name="name" id="inputName" class="form-control" value="" required="required" pattern="" title="" placeholder="Enter your Name">
<br>
<select name="gender" id="inputGender" class="form-control" required="required">
  <option value="male">male</option>
  <option value="female">female</option>
</select>

＆＃13;

＆＃13;

＆＃13;

在我输入或选择文本后，通过单击按钮，它应该使用ajax将数据发送到服务器...

POST url = "/post"
name = "name"
value = "danny"
RESPONSE: status = 200

Answer 1

$('a#yourName').on('click', function() {
   $('#inputName').show()
 })

 $('a#myGender').on('click', function() {
   $('#inputGender').show()
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Name : <a href="#" title="" id="yourName">Your Name</a>
</p>
<p>Gender : <a href="#" title="" id="myGender">My Gender</a>
</p>
<input hidden type="text" name="name" id="inputName" class="form-control" value="" required="required" pattern="" title="" placeholder="Enter your Name">
<br>
<select hidden name="gender" id="inputGender" class="form-control" required="required">
  <option value="male">male</option>
  <option value="female">female</option>
</select>

您应该将id添加到锚点，然后使用jquery

应用这些函数

<p>Name : <a href="#" title="" id="yourName">Your Name</a></p>
<p>Gender : <a href="#" title="" id="myGender">My Gender</a></p>


 $('a#yourName').on('click', function() {
   $('#inputName').show()
 })

 $('a#myGender').on('click', function() {
   $('#inputGender').show()
 })

<强>更新 要进行内联编辑，您需要将锚点和输入放入设置了id的span标记中，并使用display:none设置输入范围的样式，默认情况下应隐藏它，然后使用replaceWith()函数替换带有输入html的锚点

请参阅下面的代码段以获取示例。

$('a#yourName').on('click', function() {
  $('span#a1').replaceWith($('#span1').html());
})

$('a#myGender').on('click', function() {
     $('span#a2').replaceWith($('#span2').html());
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Name : <span id="a1"><a href="#" title="" id="yourName">Your Name</a></span>
</p>
<p id="p2">Gender : <span id="a2"><a href="#" title="" id="myGender">My Gender</a></span>
</p>
<span id="span1" style="display:none"><input type="text" name="name" id="inputName" class="form-control" value="" required="required" pattern="" title="" placeholder="Enter your Name"></span>
<br>
<span id="span2" style="display:none"><select name="gender" id="inputGender" class="form-control" required="required">
  <option value="male">male</option>
  <option value="female">female</option>
</select></span>