Call AJAX to send value with button

Question

I read a lot of similar questions, and I tried all solutions but nothing seems to work. I want to send an AJAX request by clicking a button and send what the user typed in a textarea and display it in a div(chatbox). When I click the button, nothing happens. It never calls the function that has the AJAX code. Do you have any ideas what is going on?

P.S. I included the JavaScript files but nothing's changed.

<form action="ajax()">
    <textarea id="txtArea" name="txtArea" ></textarea>
    <input type="submit" value="Submit" />
</form>

<script type="text/javascript">

 //AJAX function
function ajax() {
    alert("insert");
    var txtArea = $("#txtArea").val();

    $.ajax({
        type: "POST",
        url: "InsertMessage.php",
        data: {
            txtArea: txtArea
        }
        success: function(data) {
            alert(data);
            $("#chatbox").load("DisplayMessages.php")
            $("#txtArea").val(""); //Insert chat log into the #chatbox div				
        }
        error: function() {
            alert('there was an error, write your error handling code here.');
        }
    });
}

$(document).ready(startAjax);
//setInterval(function(){
//	$("#chatbox").load("DisplayMessages.php");		
//}//,1400);
	
</script>

I could be wrong, but I think action is if you want the browser to make a request for you, have you tried changing <form action="ajax()"> to <form onsubmit="ajax()">? W3Schools Forms, Form Submit Execute Javascript Best Practice? — Patrick Barr
– Patrick Barr, Commented Jun 1, 2017 at 21:05

itay · Accepted Answer · 2017-06-01 21:17:53Z

1

Your question is not so clear, But for sending data in post method when submiting a form and then show result in a div, try something like this:

html:

    <form>
        <textarea id="txtArea" name="txtArea" ></textarea>
        <input type="submit">
    </form>

    <div id="resultDiv">
    </div>

js:

$( "form" ).submit(function( event ) {
    var txtArea = $("#txtArea").val();
    $.ajax({
                type:"POST",
                url:"InsertMessage.php",
                data:{txtArea:txtArea}
                success: function(data){
                    alert(data);                        
                    $("#resultDiv").html(data);           
                }
                error: function(){
                     alert('there was an error, write your error handling code here.');
                }
        });
});

edited Jun 1, 2017 at 21:17

answered Jun 1, 2017 at 21:11

itay

3574 silver badges17 bronze badges

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

1 Comment

martha t Over a year ago

thank you for your reply, but nothing is change...i call php to insert the values tha write the user and after that with this "$("#chatbox").load("DisplayMessages.php") $("#txtArea").val(""); //Insert chat log into the #chatbox div " will dislay it in the div "chatbox" But still don't call the function.. :/

Barmar · Accepted Answer · 2017-06-02 19:56:50Z

1

The action attribute has to contain a URL, not Javascript. You can use:

<form action="javascript:ajax()">

or:

<form onsubmit="ajax(); return false;">

or you can bind the event in jQUery:

$(document).ready(function() {
    $("form").submit(function() {
        ajax();
        return false;
    });
});

edited Jun 2, 2017 at 19:56

answered Jun 1, 2017 at 21:09

Barmar

789k57 gold badges555 silver badges669 bronze badges

2 Comments

martha t Over a year ago

the only thing that do after these changes is to overload the page but still seems to ignore the function

Barmar Over a year ago

If you use onsubmit, you also need to return false; to prevent the normal form submission. I've updated the answer.

Collectives™ on Stack Overflow

Call AJAX to send value with button

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related