Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Majid Mokhtari
Majid Mokhtari
10,506 Points

get input and post it using javascript

I want to get first name and last name and when I click submit button I want to post the result on the page so user can see that, anybody knows how I can do that?

http://codepen.io/majidmo64/pen/BdKJm

5 Answers

Alessandra Vaughn
Alessandra Vaughn
13,915 Points

Hello Majid,

I believe the code below will do what you require. I tried to only have the very basic and least amount of code necessary. Referencing the track regarding JavaScript Basics would also be very useful.

<html>
  <body>

    First Name: <input type="text" id="firstName"/><br />
    Last Name: <input type="text" id="lastName"/><br />
    <button id="submit">Submit</button>

    <br /><br />

    First Name: <div id="targetField_fn"></div><br />
    Last Name: <div id="targetField_ln"></div>

    <script>
      var button = document.getElementById('submit');
      var fn = document.getElementById('firstName');
      var ln = document.getElementById('lastName');

      button.addEventListener('click', function () {
        var fn_text = fn.value;
        var ln_text = ln.value;
        targetField_fn.innerHTML = fn_text;
        targetField_ln.innerHTML = ln_text;
      });

    </script>

  </body>
</html>

You didn't close </form>, and you want to do it with AJAX?

I did it for you with AJAX in JQuery:

<script src="http://code.jquery.com/jquery-1.10.1.min.js" ></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<form id='form' action='test.php' method='POST'>
    <label for="firstname">Enter your first name:</label>
    <input id="firstname" name="firstname" type="text" >

    <br><br>

    <label for="lastname">Enter your last name:</label>
    <input id="lastname" name="lastname" type="text">

    <br><br>

    <input type="submit" value="Submit" id="submit">

    <br/><br/>
    <div id='display'></div>
</form>
<script>
    $(document).ready(function(){
        $('#form').submit(function(){
            var $fname = $('#firstname').val(); 
            var $lname = $('#lastname').val(); 

            $.ajax({
                url: 'test.php',
                type: 'POST',
                data: {firstname:$fname,lastname:$lname},
                success: function(response){
                    $("#display").html(response);
                }
            });
            return false;
        });
    });
</script>

In PHP

if(isset($_POST)){
    $fname = $_POST['firstname'];
    $lname = $_POST['lastname'];
    echo "$fname $lname";
}
Majid Mokhtari
Majid Mokhtari
10,506 Points

Thanks Alessandra it worked, and thanks Dustin

Majid Mokhtari
Majid Mokhtari
10,506 Points

Alessandra, it gives this error: the uncaught typerror: can not read the property of 'val' null