CODEWITHSUNDEEP
javascripthtmlajaxbutton
martha t
martha t

Reputation: 3

Call AJAX to send value with button

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>

Upvotes: 0

Views: 297

Answers (2)

Barmar
Barmar

Reputation: 780949

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;
    });
});

Upvotes: 1

itay
itay

Reputation: 357

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.');
                }
        });
});

Upvotes: 1

Related Questions