1

ユーザーにユニット数を尋ね、次にそれらのユニットをプロビジョニングするかどうかを尋ねるフォームを作成しようとしています。回答に応じて、入力したユニット数に対応するテキストフィールドが生成されます。 、アカウント番号を尋ねるテキストフィールドとともに。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">

</script>


<script type="text/javascript">

function Getunits(value) {
var units = document.getElementById('units');
for(count=0; count<=units; count++) {
$("<input type='text'>").appendTo("inpane");
 }
document.getElementByTag('futureacc').InnerHTML='What is your account number? <input type="text" value="accountnum">';

}
</script>
</head>
<body>
<div id="container">
<form method="post" action="sendcontact.php">
<div id="unitammount" class="inpane">
Number of units ordered: <input type="text" name="units" id="units"/><br />
</div>

<div id="futureacc" class="inpane">
Are these units to be provisioned? <input type="radio" name="select" value="yes" onClick="Getunits('units.value')"/> Yes <input type="radio" name="select" value="no"/> No
</div>

明らかに、新しいテキストフィールドをfutureaccdivとinpanediv内にそれぞれ表示したいと思います。

何もしないループなのか、正しく追加していないのかわかりませんが、現在持っているので何もしません...

どんな助けでも大歓迎です。

4

4 に答える 4

2

コードにいくつかのエラーがありました。jQueryと純粋なJavascriptを混在させていたため、混乱を招きました。とにかく使用することにした場合は、一般的にjQueryを使用することをお勧めします。ループはunits.val()、より小さいか等しい間ではなく、より小さい間反復されている必要がありますunits。 innerHTMLは小文字の「i」でつづられており、appendToセレクターにはクラス名の前にピリオドが必要です。私は先に進んでコードをクリーンアップしたので、今すぐ動作するはずです！

HTML：

<div id="container">
    <form method="post" action="sendcontact.php">
        <div id="unitammount" class="inpane">
              Number of units ordered: <input type="text" name="units" id="units"/>
        </div><br>

        <div id="futureacc" class="inpane">
            Are these units to be provisioned? <input type="radio" name="select" value="yes" onClick="getUnits()"/> Yes <input type="radio" name="select" value="no"/> No <br>
        </div>
    </form>
</div>​

Javascript：

function getUnits() {
    var units = $("#units").val();
    for (var count = 0; count < units; count++) {
        $("<input type='text' /><br>").appendTo("#futureacc");
    }
    $("#futureacc").append('<br>What is your account number? <input type="text" placeholder="accountnum">');
}​

ワーキングデモ

于 2012-08-17T06:19:11.423 に答える
0 
var units = document.getElementById('units');

する必要があります

var units = document.getElementById('units').value;

onclickに値を渡していますが、文字列であるため、関数で使用していない場合でも正確な値が得られないため、副作用はありません。

また、ユーザーが番号を入力したことを確認するために、エラーチェックを行う必要があります

と

for(count=0; count<=units; count++)

ユーザーが入力した値よりも1つ多いテキストボックスを追加しています。したがって、ユーザーが4を入力した場合は、作成している5<=を<に変更する必要があります。

于 2012-08-17T06:01:34.560 に答える
0

これは間違っています

onClick="Getunits('units.value')"

代わりにこれを使用してください：

onClick="Getunits(units.value)"
于 2012-08-17T06:02:24.410 に答える
0

これを試して

$(document).ready(function(){
  $('input[name=select]').click(function(){
    if($(this).val() ==='yes'){
        var numberOfTextboxes = $('#units').val();
        for(var i =0; i<numberOfTextboxes; i++){
            $('#unitammount').append('<input type="text" />');
        }
    }
  });
});

フィドルを見る

于 2012-08-17T06:09:36.507 に答える