クローンフォーム入力とクリア値 -- javascript フィールド と jquery フィールド 関連 問題

Clone form input and clear value












3
vote

問題

日本語

アップロードフォームを作成しようとしています。それはこれまでうまく機能しています、そして私は私が嫌いなバグを整理しようとしています。

私が問題があるように見える線

<事前> <コード> RecyclerViewAdapter4

フォームをクローニングするときには、DIVをクローン化し、空白のフォームを残しており、この回線を削除しようとしている場合は、以前のフォームの値を取得するため、空白になるとよくなります。表示するための形式。

私が持っている問題は、フォームをすべて削除したときに削除したとき、私が欲しいものはフォームを削除したときに、他の形式の値を単独で残します。

これはfiddle http://jsfiddle.net/d77pd/1/ または下のコードを参照してください。

html

<事前> <コード> RecyclerViewAdapter5

JavaScript

<事前> <コード> RecyclerView16

フォームを数回クローンします。コンテンツを使用して1番目のフォームをフォームにすると、最初のフォームのコンテンツが削除されていることがわかります。

英語

I'm trying to create an upload form. It's working well so far and i'm trying to sort out a couple of bugs that I dislike.

The line that I seem to be having trouble with is

$(element).find(">:first-child").attr("value", ""); 

When cloning the form, it clones the div and replaces the value with nothing leaving a blank form, this works well, if I were to delete that line I would get the previous form's value, so it would be nice for a blank form to show.

The issue i'm having is when you delete a form all the forms values delete, What I want is when you delete a form, leave the value alone for the other forms.

Here's a fiddle http://jsfiddle.net/d77pd/1/ or see code below

HTML

<button class="clone">Add an Image</button> <div id="upload_image_sets">     <div id="clonedInput1" class="clonedInput">         <input type="text" id="upload_image_link_1" class="image" size="36" name="hero_options[upload_image_link_1]" value="' . $hero_options['upload_image_link_1'] . '" />         <input id="show_upload_image_link_button_1" class="button upload_images" type="button" value="Upload Image" />         <button class="remove">Remove</button>     </div> </div> 

JavaScript

function updateClonedInput(index, element) {     $(element).appendTo("#upload_image_sets").attr("id", "clonedInput" + index);     $(element).find(">:first-child").attr("id", "cs_product_menu_img_src_" + index);     $(element).find(">:first-child").attr("name", "hero_options[upload_image_link_" + index + "]");     $(element).find(">:first-child").attr("value", "");     $(element).find(">:first-child").next().attr("id", "cs_product_menu_img_src_" + index + "_button");     displayRemove(); }  function displayRemove() {     if ($('.clonedInput').length === 1) {         $('.remove').hide();     } else {         $('.remove').show();     } } displayRemove();  $(document).on("click", ".clone", function (e) {     e.preventDefault();     var cloneIndex = $(".clonedInput").length + 1;     var new_Input = $(this).closest('.clonedInput').length ? $(this).closest('.clonedInput').clone() : $(".clonedInput:last").clone();     updateClonedInput(cloneIndex, new_Input); }); $(document).on("click", ".remove", function (e) {     e.preventDefault();     $(this).parents(".clonedInput").remove();     $(".clonedInput").each(function (cloneIndex, clonedElement) {         updateClonedInput(cloneIndex + 1, clonedElement);     }) }); 

Clone the form a few times, if you delete any form apart form the 1st one with the content, you'll notice the first form's content deletes, I want this left alone.

</div
     
 
 

回答リスト

0
 
vote
vote
ベストアンサー
 

最初のアプローチ: $(element).find(">:first-child").attr("value", ""); を呼び出した後、 9988777662 を追加から呼び出します。

働いたデモファーストアプローチ:

2番目のアプローチ:

コードを変更しました。 99887663 では、DOMが削除されたときにfalseを設定するとTRUEに設定されます。これにより、[削除関数]に置き換えられるのを防ぐことができます。 <事前> <コード> function updateClonedInput(index, element,param) { $(element).appendTo("#upload_image_sets").attr("id", "clonedInput" + index); $(element).find(">:first-child").attr("id", "cs_product_menu_img_src_" + index); $(element).find(">:first-child").attr("name", "hero_options[upload_image_link_" + index + "]"); if(param) $(element).find(">:first-child").attr("value", ""); $(element).find(">:first-child").next().attr("id", "cs_product_menu_img_src_" + index + "_button"); displayRemove(); } function displayRemove() { if($('.clonedInput').length === 1) { $('.remove').hide(); } else { $('.remove').show(); } } displayRemove(); $(document).on("click", ".clone", function(e){ e.preventDefault(); var cloneIndex = $(".clonedInput").length + 1; var new_Input = $(this).closest('.clonedInput').length ? $(this).closest('.clonedInput').clone() : $(".clonedInput:last").clone(); updateClonedInput(cloneIndex, new_Input,true); }); $(document).on("click", ".remove", function(e){ e.preventDefault(); $(this).parents(".clonedInput").remove(); $(".clonedInput").each( function (cloneIndex, clonedElement) { updateClonedInput(cloneIndex + 1, clonedElement,false); }) });

働くデモ2番目のアプローチ

 

First approach: call $(element).find(">:first-child").attr("value", ""); after calling updateClonedInput(cloneIndex, new_Input); from add function.

Working Demo First approach:

Second Approach:

I have modified some code. pass one more bool argument in function updateClonedInput.which will be set true when added and set false when dom is removed.This will prevent the value getting replaced on remove function:

  function updateClonedInput(index, element,param) {     $(element).appendTo("#upload_image_sets").attr("id", "clonedInput" +  index);     $(element).find(">:first-child").attr("id", "cs_product_menu_img_src_" + index);     $(element).find(">:first-child").attr("name", "hero_options[upload_image_link_" + index + "]"); if(param)     $(element).find(">:first-child").attr("value", "");     $(element).find(">:first-child").next().attr("id", "cs_product_menu_img_src_" + index + "_button");     displayRemove(); }  function displayRemove() { if($('.clonedInput').length === 1) {     $('.remove').hide(); } else {     $('.remove').show(); }  }  displayRemove();  $(document).on("click", ".clone", function(e){     e.preventDefault();     var cloneIndex = $(".clonedInput").length + 1;     var new_Input = $(this).closest('.clonedInput').length ? $(this).closest('.clonedInput').clone() : $(".clonedInput:last").clone();     updateClonedInput(cloneIndex, new_Input,true);     }); $(document).on("click", ".remove", function(e){     e.preventDefault();     $(this).parents(".clonedInput").remove();     $(".clonedInput").each( function (cloneIndex, clonedElement) {         updateClonedInput(cloneIndex + 1, clonedElement,false);     }) }); 

Working Demo Second Approach

</div
 
 
   
   
0
 
vote

最初の要素から一度ブランククローンを作成する代替ソリューションは、新しい行が必要になるたびにこれを使用します。また、 ボタンを使用して remove>ボタンを非表示/表示して、すべての行の ボタンを非表示にします。

免責事項:本当に必要な場合は、わからないように、<コード> id の操作を削除しました。必要に応じてアップデートできます。

href="http://jsfiddle.net/2nsel/3/" rel="nofollow noreferrer"> デモ

html

<事前> <コード> <button class="clone">Add an Image</button> <div id="upload_image_sets"> <div class="clonedInput"> <input type="text" class="image" size="36" name="hero_options[upload_image_link_1]" value="an initial value" /> <input class="button upload_images" type="button" value="Upload Image" /> <button class="remove">Remove</button> </div> </div>

css

<事前> <コード> .clonedInput .remove { display:inline-block; } .clonedInput:only-child .remove { display:none; }

JavaScript

<事前> <コード> function resetForm($form) { $form.find('input:text, input:password, input:file, select, textarea').val(''); $form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected'); } var $blankClone = $('.clonedInput').clone(); resetForm($blankClone); $(document).on('click', '.clone', function(e) { e.preventDefault(); $blankClone.clone().appendTo('#upload_image_sets'); }); $('#upload_image_sets').on('click', '.remove', function(e) { e.preventDefault(); $(this).closest('.clonedInput').remove(); });

<コード> resetForm() マルチステージのリセットjQuery

の形式
 

An alternate solution that creates a blank clone from the first element once, then uses this every time a new row is required. It also uses CSS to hide/show the Remove button based on the fact that you only need Remove buttons on all rows unless it's the only child.

Disclaimer: I have removed the id manipulation as I am unsure if you really need it. I can update if necessary.

Demo

HTML

<button class="clone">Add an Image</button> <div id="upload_image_sets">     <div class="clonedInput">         <input type="text" class="image" size="36" name="hero_options[upload_image_link_1]" value="an initial value" />         <input class="button upload_images" type="button" value="Upload Image" />         <button class="remove">Remove</button>     </div> </div> 

CSS

.clonedInput .remove {     display:inline-block; }  .clonedInput:only-child .remove {     display:none; } 

JavaScript

function resetForm($form) {     $form.find('input:text, input:password, input:file, select, textarea').val('');     $form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected'); }  var $blankClone = $('.clonedInput').clone(); resetForm($blankClone);  $(document).on('click', '.clone', function(e) {     e.preventDefault();     $blankClone.clone().appendTo('#upload_image_sets'); });  $('#upload_image_sets').on('click', '.remove', function(e) {     e.preventDefault();     $(this).closest('.clonedInput').remove(); }); 

resetForm() borrowed from Resetting a multi-stage form with jQuery

</div
 
 
 
 

関連する質問

210  jQueryセレクタから$(これを)除外する方法は?  ( How can i exclude this from a jquery selector ) 
私はこのようなものを持っています: <事前> <コード> <div class="content"> <a href="#">A</a> </div> <div class="content"> <a href="#">B</a> </div>...

1279  jQueryでクッキーを設定/設定解除するにはどうすればよいですか。  ( How do i set unset a cookie with jquery ) 
jQueryを使用してCookieを設定して設定します。たとえば、 test という名前のクッキーを作成し、 1 ?に設定します。 ...

0  リスト項目でディスクを取り除く  ( Getting rid of disc in list item ) 
jQueryを使用してサイトを開発し、jQuery UIタブを作成しています。何らかの理由で、私のタブ(順序付けられていないリスト)は、OS XのFirefox 3を除くすべてのブラウザ(これまでにテスト済み)に弾丸を表示しています.Safari OS X、...

1  JsonResultの問題  ( Jsonresult problem ) 
これを返しているActionResultがあります。 <事前> <コード> @output4 JavaScriptでは、そのaticationResultによって返される値は "{" isDeleted ":true}"です。 私は何をしていますか? 編...

11  スライド後のjQueryスライダコール機能  ( Jquery slider call function after slide ) 
私はWebアプリケーション上でスコアを設定するために使用しているjQuery Silderを持っています。ユーザーが送信ボタンをクリックしたが、クライアントはAjaxスタイルを更新するようになったままにするようにOrignallyにいました。 これは見つけられ...

0  jQuery、属性フィルタセレクタ、および正確に_which_要素をクリックした  ( Jquery attribute filter selectors and finding out exactly which element was c ) 
私はこのjqueryがうまく機能する <事前> <コード> $("li[id^='shop_id']").click( function () { alert("I clicked on id ??"); }); 'shop_id'でIDを持つ...

0  jQueryの$ .click()内のインデックス番号を取得する方法  ( How to get index number inside click of jquery ) 
<事前> <コード> $("span.ws_label").click(function() { }) セレクタ「span.ws_label」選択した5つの要素、 そのうちの1つをクリックしたとき、 実際にどれを知るか? 編集 I索引やそのIDを...

2  OnClick HandlerをMake Linksのクリックを無視します  ( Make onclick handler ignore clicks on links ) 
ブロック要素のカスタムオンクロックハンドラ(jQueryの.click()メソッドを介して設定)。このブロック要素にはリンクを含めることができます。 これはかなり確信があるので、クリックしたリンクである場合(リンクが私のコードを実行せずに訪問されるように)ハン...

1  $$ jQueryでは、これは何ですか?  ( In jquery whats this used for ) 
誰かが書くだけの場合: <事前> <コード> $("#downloadTabs>div").each(function(el) { el.setStyle("display", "none"); el.removeCla...

2  jQueryのAjaxForm  ( Ajaxform in jquery ) 
Ajaxformを使用しています。今私は問題に遭遇しました。私のアイデアは、ユーザーがユーザー名を入力したときに、誤ったユーザー名がユーザーにメッセージを報告する必要があります。 私のコードはうまくいっていますが、ユーザーに表示されたレポートメッセージの後、...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有