-1

Im would like to know how can I get the values from the div span and create a array() with which I could later on create a query to the database. Im trying to figure it somehow out but I just can't.

HTML

<form>
    <span class="input-component"><input type="text"/><a href=#></a></span>
 </form>
<br><br>
<div id="numcontainer">
    <span class="containernum"></span><br>
</div>

Java script

jQuery(function($) {

var values = [];

    $('#numcontainer').on('click', 'a.js-delete', function(e) {
      $(this).prev().remove(); // the <span>
      $(this).next().remove(); // the <br>
      $(this).remove(); // the <a> itself
    });

      $('form input[type=text]').change(fileChangeHandler);
      function fileChangeHandler() {
        var form = $(this).closest('form');        
      }
     var form = $(this).closest('form');

    $('form .input-component input').on("propertychange keyup input paste",addInput);
    onlyNums($('form .input-component input'));
   function addInput() {
    var remainingChars = $(this).val().length;
    if (remainingChars == 24) {
        if ($('.containernum').text() == '') {
            $('.containernum').text($(this).val());
        } else {
            $('#numcontainer').append('<span class="containernum">'+$(this).val()+'</span><a class="js-delete href=#>[X]</a><br>');
        }
        $(this).val(''); // does empty the text input
$('.containernum').each(function(index){
  // Your code
  console.log( $(this).html() );
});


        values.push($(this).val());
        console.log(values);
    }
}


    function onlyNums($elem){
        $elem.keydown(function(event) {
        // Allow only backspace and delete
        if ( event.keyCode == 46 || event.keyCode == 8 ) {
            // let it happen, don't do anything
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.keyCode < 48 || event.keyCode > 57 ) {
                event.preventDefault(); 
            }   
        }
    });
    }

    });

Example jsFiddle

Thanks for your time

user2945583
  • 42
  • 8
  • Furthermore, the example should provide a isolated & concise version of the Fiddle, not for us to work it out for ourselves. – MackieeE Nov 12 '13 at 19:46
  • Check the example you type in numbers they get stored in the
    area later I would like to see them in a array()
     – user2945583 Nov 12 '13 at 19:47

2 Answers2

1

You want to store values; why not use hidden inputs? Instead of creating spans with the same class, create input elements with the same name. 

<div id="numcontainer">
    <input type="hidden" name="myNums" value="305" />
    <input type="hidden" name="myNums" value="49" />
</div>

Then, when you want to get the values you would just need to do something like this:

var values = [];
$("#numcontainer input:hidden[name='myNums']").each(function() {
    values.push( $(this).val() );
});

If your values aren't related, you just name them something different.

RustyTheBoyRobot
  • 5,891
  • 4
  • 36
  • 55
  • Good idea check http://jsfiddle.net/5KZtB/21/ it doesn't draws me value="" it leaves it blank – user2945583 Nov 12 '13 at 20:11
  • Your question just asks how to grab a bunch of values and put them in an array. It says nothing about showing values. Plus, your jsfiddle has typos (`.lenght`). Simplify your code down to the part that you're having trouble with, then expand it to be more complex. – RustyTheBoyRobot Nov 12 '13 at 20:23
  • Well 1. they array I wan't have the values displayed as they are now. Later I wan't add a button send to database ( so how im supposed to get the values of the spans? ) 2. How is there a typo – user2945583 Nov 12 '13 at 20:37
0
$('span.containernum').html()

OR 

$('span.containernum').text()

would do the trick. You will got the html string that you can implode or do whatever you want. See https://stackoverflow.com/a/1910830/2806497 for the difference between the two functions.

Community
  • 1
  • 1
OlivierH
  • 3,875
  • 1
  • 19
  • 32