JavaScriptを使用してクリックするとフィールドの追加と削除 -- javascript フィールド と forms フィールド 関連 問題

Adding and removing fields with conditions on click using JavaScript












0
vote

問題

日本語

JavaScript rokieこちら..

私は私が人々に最大4つのフィールドを追加できるようにする特定の分野がある形をしています。私はその部分を実行することができたと思います(おそらく非常に厄介なコードがありますが)しかし、私は取り外し機能を作る方法を知らない。課題は、誰かがマイナス記号をクリックすると、最後のフィールドとその最後のフィールドのみを削除したいということです。

あなたの助けをありがとう!

HTML:

<事前> <コード> <form action=""> <div class="form-element"> <input type="text" name="Name" id="" placeholder="Full Legal Name"> </div> <h3>Broker Principal(s)</h3> <div class="form-element"> <input type="text" name="Name" id="" placeholder="Broker Principal"> </div> <div class="form-element" id="addField"> </div> <i id="add" class="fa fa-plus-circle fa-2x"></i> <i id="add" class="fa fa-minus-circle fa-2x hidden minus"></i> </form>

js:

<事前> <コード> var plus = document.getElementById("add"); var minus = document.querySelector(".minus"); var array = [1,2,3,4,5]; var counter = 2; var field = document.getElementById("addField"); plus.addEventListener("click", function(){ if(counter !== 0){ field.insertAdjacentHTML("beforeend", '<div id="bp' + counter + '" class="form-element fadeOutIn">' + '<input type="text" name="Broker Principal ' + counter + '" id="" placeholder="Broker Principal ' + counter + '">' + "</div>"); minus.classList.remove("hidden"); counter = (counter + 1) % array.length; } });

CSS:

<事前> <コード> body { font-size: 17px; } input { padding: 10px 20px; font-size: 17px; } .form-element { display: block; margin: 8px 0; } i { color: #FDB813; transition: all 0.3s; cursor: pointer; } i:hover { color: #FEC849; } @keyframes fadeOutIn { 0% {opacity: 0;} 50% {opacity: 0.4;} 100% {opacity: 1;} } .fadeOutIn { animation-name: fadeOutIn; animation-duration: 400ms; } .hidden { display: none; }
英語

JavaScript rookie here..

I am trying to build a form where I have a certain field that I want people to be able to add more of up to 4 fields. I think I managed to do that part (although probably very clunky code) but I dont know how to make the remove function work. The challenge is that when somebody clicks on the minus sign, I want to delete the last field created and that last field only.

Thanks for your help!

HTML:

<form action="">     <div class="form-element">         <input type="text" name="Name" id="" placeholder="Full Legal Name">     </div>      <h3>Broker Principal(s)</h3>     <div class="form-element">         <input type="text" name="Name" id="" placeholder="Broker Principal">     </div>     <div class="form-element" id="addField">     </div>     <i id="add" class="fa fa-plus-circle fa-2x"></i>     <i id="add" class="fa fa-minus-circle fa-2x hidden minus"></i> </form> 

JS:

var plus = document.getElementById("add"); var minus = document.querySelector(".minus"); var array = [1,2,3,4,5]; var counter = 2; var field = document.getElementById("addField");  plus.addEventListener("click", function(){     if(counter !== 0){         field.insertAdjacentHTML("beforeend", '<div id="bp' + counter + '" class="form-element fadeOutIn">' + '<input type="text" name="Broker Principal ' + counter + '" id="" placeholder="Broker Principal ' + counter + '">' + "</div>");         minus.classList.remove("hidden");         counter = (counter + 1) % array.length;     } }); 

CSS:

body { font-size: 17px; }  input {     padding: 10px 20px;     font-size: 17px; }  .form-element {     display: block;     margin: 8px 0; }  i {     color: #FDB813;     transition: all 0.3s;     cursor: pointer; }  i:hover {    color: #FEC849;  }  @keyframes fadeOutIn {   0% {opacity: 0;}   50% {opacity: 0.4;}   100% {opacity: 1;} }  .fadeOutIn {   animation-name: fadeOutIn;   animation-duration: 400ms;  }   .hidden {      display: none;  } 
</div
     

回答リスト

0
 
vote

このようなことができる

<事前> <コード> minus.addEventListener("click", function(){ var form = document.getElementById('addField'); form.removeChild(form.childNodes[form.childNodes.length-1]); }
 

You could do something like this

minus.addEventListener("click", function(){     var form = document.getElementById('addField');     form.removeChild(form.childNodes[form.childNodes.length-1]);  } 
</div
 
 

関連する質問

2910  Webフォームフィールド/入力タグのブラウザのオートコンプリートを無効にするにはどうすればよいですか。  ( How do you disable browser autocomplete on web form field input tag ) 
特定の入力(またはフォームフィールド)の主要ブラウザでオートコンプリートを無効にするにはどうすればよいですか? ...

2  Microsoft SharePointでフォームを作成する方法[閉まっている]  ( How to create forms in microsoft sharepoint ) 
ここで尋ねられていることを知るのは難しいです。この問題はあいまい、曖昧で、不完全で、過度に広く、または修辞的であり、現在の形で合理的に回答することはできません。再開できるようにこの質問を...

102  KeyPressイベントの後にjQuery .val()を手に入れるにはどうすればよいですか?  ( How can i get jquery val after keypress event ) 
私は得ました: <事前> <コード> $(someTextInputField).keypress(function() { alert($(this).val()); }); 常にキープレスの前に値を返します(フィールドが空の場合は「A」と入力し、ア...

0  データベースからHTMLフォームにアクセスされるデータをロードする方法  ( How to load data that are accessed from database to html form ) 
getString()メソッドを使用してテーブルからデータにアクセスしようとしていて、データがいくつかの変数に格納されている場合は、送信ボタンをクリックしているときにHTMLフォームにロードする必要があります。どうやって?私を助けてください...... ...

0  StrutsのオブジェクトをJSPからフォーム値で更新する  ( Update object in struts action with form values from jsp ) 
私はフォームを構築し、自分のオブジェクトのインスタンスからのデータを指定してフィールドを事前に入力するStruts2アクションを持っています。このフォームで送信をクリックすると、2番目のアクション、My Formsubmitアクションにアクセスできます。ここで...

6  = button_toはすでに他の形式でフォームを生成しません  ( Button to does not generates form if already in an other form ) 
新しい場合は同じフォーム部分を使用して、My Case NewとPreviewの両方で編集します。 部分的にこのようなように見えるように見えます(私はHAMLを使っています) <事前> <コード> =form_tag ({:action => params[:...

1  FlexとColdFusionでフィールドの種類やそのIDを知らずに、フォームをデータベースに保存する方法を教えてください。  ( How do i save a form to the database without knowing the field type or its id in ) 
私は、DBへの呼び出しに基づいてFlexで実行時にフォームを生成する機能を取り組んでいます。 DBへの呼び出しは、フィールドタイプ、ID、ツールチップなどをArrayCollectionとして返します.ArrayCollectionは、配列内のTypeフィール...

273  HTML形式の複数の送信ボタン  ( Multiple submit buttons in an html form ) 
HTMLフォームにウィザードを作成しましょう。 1つのボタンが戻ってき、1つが進みます。 ENTER を押すと、背面ボタンが最初に表示されているので、そのボタンを使用してフォームを送信します。 例: <コード> <form> <!-- Pu...

7  私のフォームパスワードはクリアテキストで渡されますか?  ( Is my form password being passed in clear text ) 
これは私のブラウザがいくつかのサイトにログインするときに送信されたものです: <前> http://www.some.site/login.php http / 1.0 ユーザーエージェント:OPERA / 8.26(X2000; Linux I686; Z;...

1  jQueryの質問...自動的にフォームを送信して次のステップに移動する方法  ( Jquery question a way to automatically submit a form and move to the next ste ) 
基本的に、私は4つの形式(したがって4つのURL)に分割されているプロセスを持っていますが、3番目のものを完全に迂回したいです。私はそれが第三者のプロバイダーから、オープンソースではなくコード自体に到達することはできません。私が望んでいるのは、ユーザーがその3...




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