How to pass textbox value to another script on link click event.

Question

I have a form like this:

one.php

<form id='myFormId' name='myFormName'>
  <input type='text' name='myTextField'>
  <a href='two.php'>Show Value</a>
</form>

Question:

I want to pass 'myTextField' textbox value to two.php and want to echo it on screen. I can't use submit button and also can't submit the form. Is there any trick ?

Thanks

Answer 1

You could start by giving the anchor an unique id:

<a id="mylink" href="two.php">Show Value</a>

and then register for the click event handler and send an AJAX request:

$(function() {
    $('#mylink').click(function() {
        $.ajax({
            url: this.href,
            data: { myTextField: $('#myFormId input[name=myTextField]').val() },
            success: function(result) {
                // TODO: use the resulting value
                alert(result);
            }
        });
        return false;
    });
});

Answer 2

one.php

<form id='myFormId' name='myFormName'>
  <input type='text' name='myTextField'>
  <a href='two.php?value=myTextField'>Show Value</a>
</form>

two.php

echo $_GET['value'];

Answer 3

<form id='myFormId' name='myFormName'>
  <input type='text' name='myTextField'>
  <a href='two.php' id='myLink'>Show Value</a>
</form>


jQuery('#myLink').live('click',function() {
    $.ajax({
        url: this.href,
        type: 'POST',
        data: $('#myFormId').serialize(),
        success: function( data ) {
            // TODO: use the resulting value
            alert(data);
        }
    });
    return false;
});