CODEWITHSUNDEEP
jqueryajax
hellomello
hellomello

Reputation: 8597

Jquery, show number of div based on button

I haven't programmed in a long time and just getting back into it...

I want to be able to show some inputs based on the buttons pressed.

I have a few buttons from 1 through 6

And if I press any given number, the number of divs should appear.

For instance, if I pressed a button with number 5, then 5 inputs should appear...

I have created a fiddle, hopefully to understand what I'm trying to do.

https://jsfiddle.net/breeyj4d/1/

Also, if the person presses different numbers, does the information in the input gets erased? (ie, if someone presses 2, and then puts information in there, then decides to press 3, and then back to 2, will it get erased?)

Thanks!

  <button type="button" class="btn btn-default">
    <span class="" aria-hidden="true">1</span>
  </button>
  <button type="button" class="btn btn-default">
    <span class="" aria-hidden="true">2</span>
  </button>
  <button type="button" class="btn btn-default">
    <span class="" aria-hidden="true">3</span>
  </button>
  <button type="button" class="btn btn-default">
    <span class="" aria-hidden="true">4</span>
  </button>
  <button type="button" class="btn btn-default">
    <span class="" aria-hidden="true">5</span>
  </button>
  <button type="button" class="btn btn-default">
    <span class="" aria-hidden="true">6</span>
  </button>     

  <input type="text"/>

Upvotes: 0

Views: 76

Answers (3)

AmmarCSE
AmmarCSE

Reputation: 30587

  1. Attach a click handler to .btn elements
  2. Hide all input elements by default when you enter the click handler
  3. Get the number from the span in the .btn element
  4. Use :lt() selector to show() the inputs
$('.btn').click(function(){
    $('input').hide();
    var num = parseInt($(this).find('span').text());
    $('input:lt('+num+')').show();
});

DEMO

Update

With this, I have to code HTML all 6 inputs? Anyway to do it without input all the inputs in HTML?

You can append() and remove() with each click.

If you want to preserve the input values through button clicks, you can preserve them in a seperate object. 

var preservedVals = {};
$('.btn').click(function () {
    $('input').remove();
    var num = parseInt($(this).find('span').text());
    for (var i = 0; i < num; i++) {
        var input = $('<input/>');
        if (typeof preservedVals[i] != 'undefined') {
            input.val(preservedVals[i]);
        }
        $('#InputContainer').prepend(input);
    }
});

$(document).on('input', 'input', function () {
    var index = $(this).index('input');
    preservedVals[index] = $(this).val();
});

DEMO

Upvotes: 1

elzi
elzi

Reputation: 5672

Here's a JsFiddle with things cleaned up a bit

Code implies you have

  1. Added a class to your buttons
  2. Added a DIV container for your inputs

HTML

<button class="btn btn-default btn-create-input"><span>1</span></button>
<button class="btn btn-default btn-create-input"><span>2</span></button>
<button class="btn btn-default btn-create-input"><span>3</span></button>

<div id="inputs-wrap"></div>

JS / jQuery

var $inputsWrap = $('#inputs-wrap');

$('.btn-create-input').on('click', function(event) {
  event.preventDefault();

  // Get inner HTMl val to determine input amounts
  // NOTE: Another/possibly better way to do this would be to use data attr
  var inputCount = $(this).text();

  // Remove any existing children in input container
  $inputsWrap.children().remove()

  // Loop and create desired amount of inputs, append them to wrap 
  for ( var i=0; i<inputCount; i++ ) {
    $inputsWrap.append('<input type="text" class="form-control"/>');
  }

})

Upvotes: 0

Darren S
Darren S

Reputation: 940

If you can place the Value as an Attribute of the Button. Something like this:

This is a fork or your demo working; https://jsfiddle.net/718rkfw5/

<button name="subject" class="btn btn-default" value="1">
   <span class="" aria-hidden="true">1</span>
</button>

<input id="output" type="text"/>

Then retrieve it like this:

<script type="text/javascript">
$(document).ready(function() {
   $('.btn').click(function() {
      //alert($(this).val());
      $("#output").val($(this).val());
   });
});
</script>

Upvotes: 0

Related Questions