HTMLフォーム作成質問への回答に基づいて入力を増やす

<form method="post" action="" > 
<input type ="text" placeholder="Test Name" name="name"> 
<input type="number" placeholder="Number Of Questions" name ="numb"> 
<input type="submit" value="Start"> 
</form>

これまでのコードはこれより上です。私が欲しいのは何を入力すると、数分でのオフに基づいてフォーム内でより多くの入力を作成する方法のような質問の数が、私はそれがそれぞれの質問に対してですHTMLフォーム作成質問への回答に基づいて入力を増やす

<input type="text" placeholder="Question + Numb"> 
    <select name="numbOptions" placeholder="Number of Options For question + numb"> 
     <option value="1">One</option> 
     <option value="2">Two</option> 
     <option value="3">Three</option> 
     <option value="4">Four</option> 
     <option value="5">Five</option> 
    </select> 
    <input type="text" placeholder="Option1">

を作成したいと私はわからないよ、あるものは何でもあります質問。また、私はこれをPHPフォームとしてどのようなものかを把握しなければならないでしょう。また、推測したように、私は解決策が何であれ、下のオプションでそれを使用しますが、私は自分自身を再現できるようにする予定です。助けや指導に感謝します。

出典

2017-05-11 Student

あなたはこれを達成するためにforループを使用することができます。

<select name="numbOptions" placeholder="Number of Options For question + numb"> 
<?php 
    for ($i = 0; $i < $_POST['numb']; $i++) { 
    echo "<option value='" . $i . "'>" . $i . "</option>"; 
    } 
?> 
</select>

更新：
自動的にそれを変更するために、あなたには、いくつかのJavaScriptを使用する必要があると思います（私はjQueryのを使用していますが、これは、同様バニラJavaScriptですべての可能である）

最初の番号入力にIDを与え、私はそれをnumb

<input type="number" placeholder="Number Of Questions" name="numb" id="numb">

のIDを与えるとにIDを与えるつもりです空の選択、私たちは右の終了<body>タグの前<script>タグ内のページの一番下にこれを持っているつもりだ今numb-options

<select name="numbOptions" placeholder="Number of Options For question + numb" id="numb-options">

を命名しています：

$("#numb").change(function(){ 
    $.ajax({url: "load-question.php", success: function(result){ 
     $("#numb-options").html(result); 
    }}); 
});

何それは何ですか？ Ajaxは別のPHPスクリプト（この場合はload-question.php）を読み込み、その出力を別の要素（この場合はselect要素）の中に追加します。

これで、元のコードを前の新しいファイルにこの更新プログラムには、と呼ばれるload-question.php

_{^{注：あなたがすべての問題を持っている場合、これはテストされていないは、フォローアップか、そしてそれは、元の作品}}

出典

2017-05-11 01:30:18

を動作させるために、あなたはjqueryのが必要になりますより多くのオプションを決定する際にどのように修正するのですか？そこで、自動的に、彼らは少しトリッキーなことだろうと入力 – Student

で結果を変更した後、あなたはそのために、AJAXを使用する必要があると思います。このプロジェクトでjQueryを使用していますか？ –

@TomBraccia私は答えを更新している、あなたがやりたいことができるはずです;） –

HTMLフォーム作成質問への回答に基づいて入力を増やす

答えて

関連する問題