javascript - Trying to create a drop-down of form fields, that is based on a number

Question

Good afternoon! I am building a contact form in Contact Form 7 in Wordpress. And I need a functionality where one of the form fields is a number selector (for example, 1-10) and I need the number that is selected to be calculated and drop down the number of fields to be inputted.

I'll try to explain the best I can. So if someone types in the 4...I need a drop down of four input fields.

I have looked for some jquery script for this functionality, but I'm basically at a deadend. If anyone has any suggestions, I would much appreciate it!

Answer 1

你会使用 javascript，我为你写了一个简单的示例。我从来没有使用过wordpress，但这只是它自己的工作，我认为你应该能够把它放进去。

Javascript

<script type="text/javascript">
    function thing(){
        var num = document.getElementById("number").value; //Get the number out of the number field
        document.getElementById("select").innerHTML = ''; //Get rid of the placeholder, or the old ones
        for (var i = 0; i < num; i++){
            var newOpt = document.createElement('option');
            newOpt.innerHTML = i; //It'll just have a dropdown for 0 to the number
            newOpt.value = i;
            document.getElementById("select").appendChild(newOpt);
        }
    }
</script>

HTML

<form>
    Number: <input type="number" name="number" id="number" onblur="thing();">
    <select id="select">
        <option value="no">Enter a number first</option>
    </select>
    <input type="submit" value="Submit">
</form>

此外，您可以使用 onkeyup 或其他东西，而不是使用 onblur。onblur 用于失去焦点时。

Answer 2

这是一个使用 jQuery ( jsFiddle )的选项

HTML

Number of inputs:
<select class="numInputs" onChange="buildInputs(this);">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<div class="inputs"></div>

Javascript (jQuery)

$(document).ready(function () {
    // set onchange event for the select box.
    $('.numInputs').change(function () {
        // clear any inputs added to the div.
        $('.inputs').empty();
        // get number of inputs to add from select box.
        var num = $('.numInputs option:selected').text();
        // build the inputs.
        for (var i = 1; i <= num; i++) {
            $('<input type="text"/><br/>').appendTo('.inputs');
        }
    })
});