Use AJAX to send html5 textarea directly without html

Question

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

kabirbaidhya · Accepted Answer

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/

darktrek · Answer

Perhaps your reviewer was referring to the HTML5 textarea attribute "form". It allows a textarea to be part of a specified form without being inside the form element. http://www.w3schools.com/tags/att_textarea_form.asp

But generally speaking, as long as you can identify an element, say a textarea, you can access the text inside it and send it to the server without submitting any forms using ajax. From Sable's comment:
http://api.jquery.com/jquery.post OR http://api.jquery.com/jquery.ajax/

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

Tags:

javascript

html

jquery

ajax

user3267738

2 Answers

kabirbaidhya

darktrek

Recent Activity

Donate For Us