Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by aidasvilnius
aidasvilnius
2,281 Points

Geting value from input and seting it to variable

Hi,

I have few divs with text inputs and few divs with radio type inputs. I tried using jquery to assign the values from these inputs to certain variables when the button is clicked, but it just don`t seem to work.

The input part:

      <div id="first_div">
        <form name="first_form" action="">
        <fieldset>
            <label for="first_form" id="first_form_label">Some text for the user</label>
            <input type="number" name="number_info" id="number_info" size="7" value="" class="text-input" />
            <br />
            <label class="error" for="first_form" id="first_form_error">Error alert</label>
            <br />
            <input type="button" name="value" class="button" id="first_form_button" value="Next" />
        </fieldset>
        </form>
      </div>




    <div id="second_div">
        <form name="second_form" action="">
        <fieldset>
            <label for="second_form" id="second_form_label">Some text for the user</label><br />
            <input type="radio" name="second_form_info" id="second_form_A"  value="A" class="text-input" />           
            <label for="A">Choose A</label><br />

            <input type="radio" name="second_form_info" id="second_form_B"  value="B" class="text-input" />
            <label for="B">Choose B</label>
            <br />
            <label class="error" for="second_form" id="second_form_error">Error alert</label>
            <br />
            <input type="button" name="value" class="button" id="second_form_button" value="Next" />
        </fieldset>
        </form>
    </div>

...And the jquery part:

   <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <script type="text/javascript">     

$(document).ready(function(){

    $('#first_form_button').click(function(){
    $("#number_info").on("keyup change", function() {
    var number_value =  $('#number_info').val();
    });
    $('#first_div').hide();
    $('#second_div').show();

   });


    $('#second_form_button').click(function(){
    $("#second_form_info").on("keyup change", function() {
    var second_form_value =  $('#input[name$='second_form_info']').val();
    });
    $('#first_div').hide();
   });
</script>

I`m guessing the main problems is

selecting value from the radio button name (instead of id - dont know if thats the correct way);

and assigning form value to variable.

Please help :(

1 Answer

Ruben Leija
Ruben Leija
4,051 Points
Ruben Leija
Ruben Leija
4,051 Points

$('#button_id').on('click', function(event) {

event.preventDefault();

var value = $('input_class_or_id').val();

console.log(value); // Dumping value of input field on console panel

});

aidasvilnius
aidasvilnius
2,281 Points

Tried it, but echo $value shows nothing