0

我正在使用具有多个输入字段的输入表单。

这些输入字段可以预先填充，因此我想为用户提供一个简单的删除选项，然后在字段旁边使用“删除”链接或按钮删除该输入字段的全部内容。

按下删除按钮也会给他们一个文本确认它已被删除。

我附上了我正在尝试做的 jpeg

在此处输入图像描述

我正在使用 wordpress 和重力表单作为我的表单构建器。我在想也许有一个 jquery 解决方案可以做到这一点，但不知道怎么做？

我的一个输入字段的代码如下，我表单上的 inout 字段都是相同的代码，但当然是不同的 id，所以我不想在这里粘贴所有内容，只是 1 作为示例。

<li id="field_15_144" class="gfield">
  <label class="gfield_label" for="input_15_144">List</label>
    <div class="ginput_container">
    <input id="input_15_144" class="medium" type="text" tabindex="40" value="" name="input_144">
    </div>
  // this would be the link to delete the contents of input field "input_15_144
  <a href="" class="deleteURL">Delete</a>
</li>

谢谢你的帮助！

4

5 回答 5

2

在这里，我ids为小提琴添加了自定义等。您可以按照自己喜欢的方式使用它：

较旧：jsFiddle - Lewdh

编辑

为了满足新的要求，进行了更多的编辑。

jsFiddle - Lewdh/4/

HTML 代码

<li id="field_15_144" class="gfield">
  <label class="gfield_label" for="input_15_144">List</label>
    <div class="ginput_container" id="inpContain">
        <input id="input_15_144" class="medium" type="text" tabindex="40" value="http://jsfiddle.net/" name="input_144" />
        <button value="delete">Delete</button><br />
    </div>
</li>
<li id="field_15_145" class="gfield">
  <label class="gfield_label" for="input_15_145">List</label>
    <div class="ginput_container" id="inpContain">
        <input id="input_15_145" class="medium" type="text" tabindex="40" value="http://jsfiddle.net/" name="input_145" />
        <button value="delete">Delete</button><br />
    </div>
</li>

jQuery 代码

$(document).ready(function() {
    $("li div button").on('click', function() {
        $(this).prev("input").val('');
        $(this).parent().append('<span style="color: green;">Success! Your link has been deleted.</span>');
    });
});
于 2012-10-16T08:40:00.333 回答
1

jQuery 的 val() 可以满足您的需求。在上面的示例中，您可以使用这样的函数。

$('#input_15_144').val('');
于 2012-10-16T08:31:49.887 回答
1

HTML

<div class="ginput_container">
    <input id="input_15_144" class="medium" type="text" tabindex="40" value="www.google.com" name="input_144">
    <a href="#" id="delete">delete</a>  <br/>      
        <span id="msg" style="color:green;"><span>
</div>

jQuery

$('a#delete').click(function(){
 $('input#input_15_144').val(''); 
 $('span#msg').html('deleted successfully');                            
});​

检查演示

您可以根据需要进行样式设置。我创建了简单的 eg，其中包含您想要的功能。如果您有任何问题，请告诉我。

于 2012-10-16T08:38:42.843 回答
0

试试这个

$(function(){
 $(".ginput_container").append('<a href="#" onclick="return false;" id="delete_link">delete</a>'); // append a delete link

  $('#delete_link').click(function(){
      $('#input_15_144').val(''); // set the textfield empty
      $(".ginput_container").append('<br><span>Success - Your link has been deleted</span'); // put a success message
 });
});

您可以应用 css 进行格式化

于 2012-10-16T08:33:26.330 回答
0

抱歉，如果我误解了您的问题，但要重置输入类型文本字段，您只需将其值设置为空字符串：

$('#id').val('');
于 2012-10-16T08:34:01.040 回答