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!

mtfurlan · Answer 1 · 2015-07-02T14:17:53.743

You would use javascript, I wrote a simple sample for you. I haven't ever worked with wordpress, but this just works on it's own, and I would think you should be able to just put it in.

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>

Also, instead of using onblur, you could use onkeyup or something. onblur is for when it loses focus.

Thanks for the help! However, I was looking for more what Chris put below. — toolbox3, Jun 10 '13 at 19:54

score 0 · Accepted Answer · answered Jun 10 '13 at 18:54

0

Here's an option using 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');
        }
    })
});

answered Jun 10 '13 at 18:54

chrismborland

570
1
3
12

Hi Chris, thanks for the feedback. You're solution is what I'm looking for. I plugged your script in, but it still won't populate the fields when you choose a number. I saw that it worked in Jsfiddle. I think it has to do with the shortcodes that are used in Contact Form 7. Any suggestions? – toolbox3 Jun 10 '13 at 19:56
@toolbox3 have you tried debugging this issue in the browser? It appears that you're getting an exception: `Uncaught ReferenceError: buildInputs is not defined (toolboxwebdesign.com/:318)` on line 318 of the source. Where did you define the `buildInputs` method from my example? – chrismborland Jun 10 '13 at 20:07
Oh, I have two headers that I use. Okay, now the script is in the still nothing? Is there another thing that I am missing? – toolbox3 Jun 10 '13 at 20:15
Your closing ``. Also, you should probably combine all of your `$(document).ready(....);` calls at some point (although it's not necessary for it to work). – chrismborland Jun 10 '13 at 20:19
I accepted it. However, I tried into a different site and it didn't work. I wonder if there is some sort of conflict. could you please look at my code? http://lawofficeelizabethvhan.com/contact/ – toolbox3 Jun 10 '13 at 20:40
You need to move the javascript further down on the page. It hasn't loaded the jQuery script yet when you first reference `$`. – chrismborland Jun 10 '13 at 20:48
Still not working on that site. I'm thinking it might be the particular Wordpress theme that I'm using... – toolbox3 Jun 10 '13 at 20:54
Try changing `$(document).ready(function() {` to `jQuery(document).ready(function ($) {` – chrismborland Jun 10 '13 at 20:58
that made the function worked, but there were like 10 input fields, when I selected just 1. Hmmm.... – toolbox3 Jun 10 '13 at 21:14
Nope, nevermind...figured it out. Thanks alot for your patience Chris! – toolbox3 Jun 10 '13 at 21:49

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

2 Answers2

HTML

Javascript (jQuery)