0

複数の入力フィールドを持つ入力フォームを使用しています。

これらの入力フィールドは事前に入力できるので、ユーザーが削除する簡単なオプションを提供し、フィールドの横にある「削除」リンクまたはボタンを使用して、その入力フィールドの全内容を削除します。

削除ボタンを押すと、削除されたことを確認するテキストも表示されます。

私がやろうとしていることのjpegを添付しました

ここに画像の説明を入力してください

フォームビルダーとしてワードプレスとグラビティフォームを使用しています。これを行うためのjqueryソリューションがあるかもしれないと思っていますが、方法がわかりませんか？

入力フィールドの1つに対する私のコードは次のとおりです。フォームの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 - Lewh/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>

Jクエリ

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

デモをチェック

思い通りのスタイリングができます。ご希望の機能を含むシンプルな例を作成しました。問題がある場合はお知らせください。

于 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 に答える