pop up text fields on javascript events

Question

In codeigniter when I add "1" in text field then there should be only 1 text field show and if I chose 2 it shows 2 textfields otherwise it should be hidden

    <div class="col-md-6" id="rifa_winners" >
        <label for="winners" class="col-md-3 control-label winners" onchange="myFunction()">No Of Winners</label>
        <input type="number" name="winners" value="<?php echo $this->input->post('winners'); ?>"
          class="form-control winners" id="winners" data-msg="Please enter winners."/>
    </div>
    <span id="ouput">
        <input type="text" name="">
    </span>

    <script>
    function myFunction() {
      var x = document.getElementById("mySelect").value;
      document.getElementById("demo").innerHTML = "You selected: " + x;
    }
    </script>

1

Do you have a question? – thingEvery Dec 28 '19 at 17:42

score 0 · Answer 1 · answered Dec 29 '19 at 01:54

There are many doubts left with your publication, but I will try to help you with a functional code that you can modify according to your requirements.

HTML Code Changes: 1. The onchange method should be placed in the input (the element that changes) not the label text. 2. I changed the function name just to be more descriptive. 3. Passed a parameter the function in the input to get the value.

<div class="col-md-6" id="rifa_winners">
     <label for="winners" class="col-md-3 control-label winners">No Of Winners</label>
     <input type="number" name="winners" value="<?php echo $this->input->post('winners'); ?>" class="form-control winners" id="winners" data-msg="Please enter winners." onchange="setNumberWinners(this.value)"/>
</div>
<div id="output"></div>

Javacript: The function is based on this SO response.

function setNumberWinners(val){
    // Container <div> where dynamic content will be placed
    var container = document.getElementById("output");
    // Clear previous contents of the container
    while (container.hasChildNodes()) {
        container.removeChild(container.lastChild);
    }
    for (i=0;i<val;i++){
        // Append a node with text Winner X
        container.appendChild(document.createTextNode("Winner " + (i+1)));
        // Create an <input> element, set its type and name attributes
        var input = document.createElement("input");
        input.type = "text";
        input.name = "winner[]";
        container.appendChild(input);
        // Append a line break 
        container.appendChild(document.createElement("br"));
    }
}

All dynamically created inputs (winner[]) have the same name attribute, so you can pick them up from your CI controller as an array. PHP Example

foreach ($this->input->post('winner') as $winner){
    // Do whatever you need with the $winner
}

I hope it helps, if you have more questions ask us, regards!

pop up text fields on javascript events

1 Answers1