Passing a value on click button with jQuery

Question

How to echo the text inside the text box on button click? This is what I am trying to do:

<script type="text/javascript">
$(function() {  
    $('#button').click(function(){
        $.ajax({
            type: "POST",
            url: "index.php",
           data: {text:$('#name').val()}
        });
    });
});
</script>

<button id="button" type="button">submit</button>


<form method="post">
          <input type="text" id="name" name="name" size="31" placeholder="name ..." />
</form>

<?php echo $_POST['text']; ?>

At a fundamental level, you're misunderstanding how browsers, server-side code, and HTTP requests work. — amphetamachine, Aug 28 '14 at 21:50
I know how browsers, server-side code, and HTTP requests work. I want to use AJAX in this example. — Bobi Qnkov, Aug 28 '14 at 21:56

score 1 · Answer 1 · answered Aug 28 '14 at 22:04

If what you want to display is the response from the server, you could do it that way:

$(function() {  
    $('#button').click(function(){
        var xhr = $.ajax({
            type: "POST",
            url: "index.php",
           data: {text:$('#name').val()}
        });
    });

    xhr.done(function(response){
        $('body').append(response);
    });
});

Here, I appended it to the body, as I don't know where you want to insert it.

If you want to display what is in the text input, replace that line with

$('body').append($('#name').val());

score 0 · Accepted Answer · answered Aug 28 '14 at 22:07

This you need

$(function() {  
  $('#button').click(function(){
    var name = $('#name').val();
    $.ajax({
        type: "POST",
        url: "index.php",
        data: {text:name},
        success:function(){ $("#result").html(name); }
    });
  });
});

and u need to put these html tag bellow form <div id="result"></div>

score 0 · Answer 3 · answered Aug 28 '14 at 22:08

0

 $.ajax({
        type: "POST",
        url: "index.php",
        data: "text="+$('#name').val()
 });

answered Aug 28 '14 at 22:08

Rafik Bari

4,867
18
73
123

Passing a value on click button with jQuery

3 Answers3