Get the textbox Text using ajax on button click

Question

I want a code for get textbox value when submit button is clicked. It must be Ajax.Here is the code I tried so far.But I culdent get to work....

<form action="" method="post">
<p>Route No :
<input type="text" name="route_no" required="required" />
<input type="submit" value="Search" name="search" />
</form>

Ajax Code

<script type="text/javascript">
$(document).ready(function() {
$("#sub").click(function() {
var textboxvalue = $('name or id of textfield').val();
$.ajax({
    type: "POST",
    url: 'ajaxPage.php',
    data: {txt1: textboxvalue},
    success: function(result) {
        $("div").html(result);
    }
});
});
});
</script>

PHP code

$txt = null;
if((isset($_POST)) && (isset($_POST['txt1'])))
{
echo $txt = $_POST['txt1'];
}

AmbrosiaDevelopments · Accepted Answer · 2019-12-05 22:39:07Z

7

HTML:

<label for="route_no">Route No:</label><input type="text" id="route_no" name="route_no" required="required" />
<input type="button" value="Search" id="search" />
<div id="result"></div>

JavaScript:

$(document).ready(function()
{
    $("#search").click(function()
    {
        var textboxvalue = $('input[name="route_no"]').val();

        $.ajax(
        {
            type: "POST",
            url: 'ajaxPage.php',
            data: {txt1: textboxvalue},
            success: function(result)
            {
                $("#result").html(result);
            }
        });
    });
});

ajaxPage.php:

if(isset($_POST) && isset($_POST['txt1']))
{
    echo $_POST['txt1'];
}

edited Dec 5, 2019 at 22:39

answered Apr 23, 2013 at 3:46

AmbrosiaDevelopments

2,59221 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Niranjana668 Over a year ago

nope still not working...I dnt know what is the worng with code..it seemsokay to me

AmbrosiaDevelopments Over a year ago

What part isn't working? Do you have a console to look at like Firebug or Chrome Developer's Tools? Is the page request going out or is it returning something you should be looking at with an ajax error function.

Niranjana668 Over a year ago

ah I dnt use Developer's Tools? Im just working on wamp server

AmbrosiaDevelopments Over a year ago

What browser are you testing in?

AmbrosiaDevelopments Over a year ago

Press F12 and look at the Console tab for any errors. Then look at the Network tab to see the response for your ajaxPage.php request.

|

chandresh_cool · Accepted Answer · 2013-04-23 03:34:47Z

2

You have problem here

$("#sub").click(function() {

you are using id ="sub" for submit button but you are not assigning id to that button so give id to submit button as id="sub".

answered Apr 23, 2013 at 3:34

chandresh_cool

11.9k3 gold badges32 silver badges46 bronze badges

1 Comment

chandresh_cool Over a year ago

update your code here whatever is changed. I will help you out to fix it.

mariano · Accepted Answer · 2013-04-23 03:35:42Z

2

To get the value of the textbox you can use:

$('#elementid').val()

answered Apr 23, 2013 at 3:35

mariano

1,3973 gold badges17 silver badges31 bronze badges

Collectives™ on Stack Overflow

Get the textbox Text using ajax on button click

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related