• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:jQueryで空のフォーム追加など)

jQueryでフォーム追加が値をコピーしてしまう問題とセレクトボックスでテキストフォームを作成する方法

このQ&Aのポイント
  • jQueryを使用してフォームの追加処理を行いましたが、追加ボタンを押すと値までコピーされてしまう問題が発生しました。
  • フォームのみをコピーするにはどうすればよいでしょうか。
  • また、セレクトボックスで選択した数値の数だけテキストフォームを作成したい場合、どのように実装すればよいでしょうか。

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

対象とするフォームが限定的なものなのか、一般的なものなのか不明だし具体例もないので、方法だけの回答になりますが、 >値は空の状態でフォームのみをコピーするにはどうしたらよいのでしょうか。 基本的には、スクリプトで追加する際にクリアしておけばよろしいかと。 例えば、<input type="text"~~>の場合であれば、  element.value = ""; とか。 要素の種類によってクリアの方法が若干異なるので、いろいろある場合は判別してクリアすることになるでしょう。 >選択した数値の数だけテキストフォームをその下に作成。 前記の1つ追加するファンクションがあるなら、選択された数値を取得して、必要回数だけループで呼び出せばよいのではないでしょうか? 例えば、1つコピーする関数を copyFunc、回数を n とでもするなら、  for (var i=0; i<n; i++) copyFunc(); のような感じで。

hukazuo
質問者

お礼

お礼が遅くなり、申し訳ありません。 無事解決しました。 ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • セレクト部品の表示内容

    が選択されているかどうかによって変化するようにしたいのですが 以下のようにしてもうまくいきません。 何か解決策はないでしょうか? <script> function func() { document.getElementById("00").innerHTML="00.aa"; document.getElementById("01").innerHTML="01.bb"; } function func2() { document.getElementById("00").innerHTML="00"; document.getElementById("01").innerHTML="01"; } </script> <select onfocus="func()" onblur="func2()"> <option value="00"><span id="00">00</span></option> <option value="01"><span id="01">01</span></option> </select>

  • Accessのフォームについて教えて下さい

    Access 2010のフォームについてお教え下さい。 テーブルにはテーブル名T1、フィールド「ID」、「Price」というテキストボックス。2フィールドがあります。 テーブルの各データは、 ID,Price 001,100 002,200 003,300 フォームにはにフォーム名F1、「cmb」というコンボボックスと、「price」というテキストボックスが配置されています。 「cmb」のデータは値集合ソースで、「SELECT T1.ID FROM T1;」と指定しています。 「cmb」で選択したデータのプライスを「Price」テキストボックスに表示したいと思います。 例えば、「001」を選択したら、「100」と表示されるようにしたいと思います。 色々調べているのですが、どうやってやるのかわかりません。どのように実現したらよろしいでしょうか? よろしくお願いいたします。

  • GoogleMapsから緯度経度をPHPに渡したい

    GoogleMapsAPIを利用して、自サイトにマーキング可能な地図を表示させたいと思っています。 具体的には・・・ 目的の位置を表示させて「登録」ボタンを押すと、moveendで取得した緯度経度のデータをフォーム(PHP)に渡し、そのフォームからコメントを添えてDBに格納する。 といった具合です。 GoogleMapsAPIはJavaScriptでの記述なので、JavaScriptで取得した緯度経度データをどのようにPHPフォームに渡せばいいのかがわかりません。 当方、PHPは若干わかりますが、JavaScriptについては全くわかりません。 以下のソースで緯度経度を取得するところまではできたのですが・・・。 GEvent.addListener(map, 'moveend', function() { var cnt = map.getCenter(); document.getElementById("cnt_x").innerHTML = cnt.lng(); document.getElementById("cnt_y").innerHTML = cnt.lat(); }); }); これから、どのようにすればPHPのフォームに渡せるのでしょうか? よろしくお願いします。

  • DBで新規追加したデータがAjaxで反映されない

    いつもお世話になっております。 Apach・PHP・MySQLの構成でWEBアプリを作成しております。 データ表示画面でセレクトボックスを二つ設置して、 一つ目のセレクトボックスを選択した時、OnChangeイベントで Ajaxを利用し選択されたデータのキーに紐づくデータを取得して 二つ目のセレクトボックスに表示するといった処理を作りたいと考えています。 実際にプログラムを組み実装できたのですが、二つ目のセレクトボックスに表示する データを新規登録で追加して、再度一つ目のセレクトボックスを選択して データ表示をおこなっても、追加したはずのデータが表示されません。 ページロードや別画面から再度遷移してきても結果は同じなのですが、 一度ブラウザ(IE6.0)を閉じて再度接続してセレクトボックスを選択すると 追加したデータが表示されます。 以下が該当するAjax部分のソースです。 var Ajax; function CreateAjax(){ try{ Ajax = new ActiveXObject("Msxml2.XMLHTTP"); return Ajax; }catch(e){ Ajax = new ActiveXObject("Microsoft.XMLHTTP"); return Ajax; } } function fncAjax(strURL, strID){ try{ Ajax = CreateAjax(); Ajax.open("GET",strURL); Ajax.onreadystatechange = function(){ if(Ajax.readyState == 4 && Ajax.status == 200){ var obj = document.getElementById(strID); obj.innerHTML = Ajax.responseText; } } Ajax.send(null); }catch(e){ alert(e.description); } } function js_OnSelChange(){ try{ fncAjax("http://hogehoge.com/?key=" + document.form.selectdata.value, "ID"); }catch(e){ alert(e.description); } } どなたか対応策をご存知でしたら、ご教授願いいます。 以上。

  • フォームで入力した値を別のフォームにコピーする

    はじめまして! javascriptでフォームAに入力した内容を ボタンが押されたら同一ページのフォームBに ペーストされるscriptを作りたいのですが そういったスクリプトを公開しているものがあれば 教えていただきたいです。よろしくお願いいたします。 やりたい事: [フォームA]---------------------  お名前:テキスト  性別:ラジオボタン  趣味:セレクトボックス  コメント:テキストエリア  [コピーボタン]←内容をコピーするボタン -------------------------------- ↓コピーボタンが押されたら↓ [フォームB]---------------------  お名前:テキスト  性別:ラジオボタン  趣味:セレクトボックス  コメント:テキストエリア -------------------------------- Aフォームに入力した内容Bフォームに反映される よろしくお願いいたします。

  • Javascriptで質問です2

    セレクトボックスから選択してテキストや画像を出力する以下のコードがあるのですが、これをセレクトボックスを2段階で選択後にテキストや画像を出力したいのです。 詳しい方がいらっしゃれば、ご教示いただければ幸いです。よろしくお願いいたします。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5" style="display:none;"> <p>two</p> </div> <div id="Box3" class="my-5" style="display:none;"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script>

  • VBAでIEのページの状態を取得する時に出るエラー

    今まで特に問題なく、データを取得できていたのに、 ここ最近データを取得できなくなってしまった為、お知恵を貸してください。 For Each obj3 In ie.document.getElementsByTagName("td") If InStr(obj3.innerHTML, "INPUT") Or InStr(obj3.innerHTML, "input") Then hiddenValue = ie.document.getElementById("hogehoge").Value Exit For End If Next VBAで上記のようなコードを記入し、 inputにある hogehogeのIDの値を取得するようなプログラムを書いています。 hiddenValue に値が入る場合と値が入らない場合があるのですが、 値がNULLになる時のHTMLソースを見ても、hogehogeのIDがある為、何が原因なのかが不明です・・・。 どなたかこのような状況になったことはないでしょうか?? お知恵を貸してください。

  • Accessで、フォームからフォームへ値を引き継ぐやり方

    フォームからフォームへ値を引き継ぐやり方を教えて下さい。 たとえば、フォームAのテキストボックスに対して取引先コードを入れるような場合に、 取引先検索専用画面(フォームB)で検索して、選択したレコードのデータをフォームAのテキストボックスに入れたいのです。 心優しい方、宜しくお願いいたします。

  • 後から追加した行(入力フォーム)にも,入力チェックをかける

    いつもお世話になっております. セレクトで選択した項目によって,テキストボックスに入力できる文字数と型に制限をかけたいと思っています,初期状態(テーブルの行数が1行)では成功するのですが,"行追加"のボタンで増やした行に対してはどのように処理を書き加えれば良いのか分かりません.調べても該当するようなケースが見つかりませんでした. お手数おかけしますが,アドバイスよろしくお願い致します. <html:html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-31J"/> <script type="text/javascript"> function addRow(trigger){//行を追加する関数 var table = trigger.ownerDocument.getElementById('SearchConditions'); // 一行目をコピーする var row = table.rows[0].cloneNode(true); // 行に名前をつける row.id = 'ROW.' + table.rows.length; // 最初のインプット要素 input = row.getElementsByTagName('INPUT')[0]; input.value = ""; table.tBodies[0].appendChild(row); } function cText(obj){ if(obj.value == obj.defaultValue){ obj.value=""; obj.style.color="#000"; } } function sText(obj){ if(obj.value == ""){ obj.value = obj.defaultValue; obj.style.color = "#999"; } } function lengthChange() { //項目に応じて入力制限 var element = document.getElementById("column"); var index = element.selectedIndex; var wordObj = document.getElementById("word") if(index == 1) wordObj.setAttribute("maxlength", "3", false); if(index == 2) wordObj.setAttribute("maxlength", "20", false); if(index == 3) wordObj.setAttribute("maxlength", "5", false); } function inputCheck(){//バイト数チェックと型チェック var index =document.getElementById("column").selectedIndex; var wordobj = document.getElementById("word"); if(index == 1){ lngM = 3; if(wordobj.value.length>lngM){ alert("制限文字数【" + lngM + "文字】を超えています"); } var str=wordobj.value; /* 入力値 */ if (str.match(/[^0-9]/g)){ alert (str.match(/[^0-9]/g)+"\n\n数値以外が含まれています"); } //index =2,3は省略 } </script> </head> <body> <form name="form" action="/A101"> <center> <div> <table id="SearchConditions" class="borderGrey" width="500px" border="0" cellspacing="1" cellpadding="3"> <tbody> <tr id="ROW.0"> <td bgcolor="#5096C9" width="105px"> <select name="column" id="column" property="column01" onchange="lengthChange()" > <option value="columnName">--選択--</option> <option value="groupNo">番号</option> <option value="katamei">名前</option> <option value="vrs">サイズ</option> </select> </td> <td bgcolor="#5096C9" width="90px"> <select property="operator01"> <option value="opeName">--演算子--</option> <option value="=">=</option> <option value="<>">&lt;&gt;</option> </select> </td> <td class="cellWhite"> <input type="text" id=word value="単語入力" style="color:#999" property="input01" onfocus="cText(this)" onblur="sText(this)" style="color:#999" size="30" maxlength="20"> </td> <td bgcolor="#5096C9" width="90px"> <select property="join01"> <option value="joinName">--結合条件--</option> <option value="and">AND</option> <option value="or">OR</option> </select> </td> </tr> </tbody> </table> <br> </center> <center> <table width="300px" border="0"> <tr> <td><br><input type="button" value="条件追加" onclick="addRow(this)"></td> <td><br><input type="button" value="検索" onclick="inputCheck()"> </tr> </table></center></form></body></html>

  • HTMLのテーブルの値と同じ値をセレクトボックスで選択したい

    テーブルには1月~12月までの値があり、セレクトボックスにも1月~12月の項目があります。 この様な場合で、テーブルの4月をクリックした場合、セレクトボックスの4月を選択状態にしたいです。 テーブルの値を取得し、テキストボックスに表示する事は出来ましたが、セレクトボックスの場合はさっぱり分かりません。宜しければご教授下さい。 下記は別のサイト様を参考にテスト中の物ですが、テキストボックスには可能ですが、セレクトボックスでは表示されません。 <SCRIPT TYPE="text/javascript"> <!-- function getCell(obj){ document.getElementById("text1").value = document.getElementById("td"+obj + "a").textContent; } // --> </SCRIPT> </head> <body> <table border="1" cellpadding="0" cellspacing="0"> <tr id="tr0" onclick="getCell('1')"> <td id="td1a">1月</td> </tr> <tr id="tr0" onclick="getCell('2')"> <td id="td2a">2月</td> </tr>   <tr id="tr0" onclick="getCell('3')"> <td id="td3a">2月</td> </tr>   省略 </table>  <select id="text1"> <option>1月</option> <option>2月</option> <option>3月</optio>     省略 </select> 初心者丸出しで申し訳有りませんが宜しくお願いします。