Use AJAX to send html5 textarea directly without html <form>

ajax, html, javascript, jquery

Solution

Ajax (Asynchronous Javascript & XML) is a way to send data from client to the server asynchronously. For that you'd have to write code for sending the data in the client-side using Javascript/HTML and also to process the received data using server-side languages (eg PHP) on the server-side.

And, yes you don't need a `<form>` tag to do so.

Check out this example.

HTML:

<label>Text</label>
<textarea id="foo"></textarea>

<button id="submit">Submit via Ajax</button>

Javascript:

$('#submit').click(function(e) {
    e.preventDefault();

    // information to be sent to the server
    var info = $('#foo').val();

    $.ajax({
        type: "POST",
        url: 'server.php',
        data: {foo: info}
    });
});

Server-side Handler (PHP): server.php

<?php 

// information received from the client
$recievedInfo = $_POST['foo'];

// do something with this information

See this for your reference http://api.jquery.com/jquery.ajax/

Problem

Recently I am confused about whether it's possible to send input/textarea data directly without being included in html `<form>`. I thought in web page, if we want to get information from user then send the text to authentication server, we must use `<form>` irrespective of in which way it's submitted. But an anonymous reviewer of my paper claims that `<html>` can be bypassed by using an html5 tag "textarea" and JS AJAX post. While I did lots of experiments trying to implement his way but all failed. I wonder if there is really some way to submit user info without using `<form>` tag? Thank you Thanks for everyone's reply. Update: I followed "the_void"'s code and changed the url of AJAX to a ServerSocket (implemented by Java). The server was able to get the POST event, but it cannot read the "data" of AJAX. The following is the html code: HTML ``` <!DOCTYPE html> <head> <meta charset="utf-8" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script> <script type="text/javascript"> $(document).ready(function() { $('#submit').click(function() { // information to be sent to the server info = $('#foo').val(); $.ajax({ type: 'POST', url: 'http://10.0.0.3:8888', data: ({ foo: info }), // crossDomain: true, // dataType: 'json' }); return false; }); }); </script> </head> <body> <label>Text</label> <textarea id="foo"></textarea> <button id="submit">Submit via Ajax</button> </body> </html> ``` It seems that the socket server cannot read from AJAX (but it can read from < form > + < action >). Is there any way to fix the reading issue? Thank you

Original source