Get the return value of the HTML form submit method

I have an HTML form in a Mason (Am) component that uses the post method to call another Mason (Bm) component. I want this Mason (Bm) component to return a value in the HTML form in the Mason (Am) component. Then I want to pass this return value to the Javascript function.

How can i do this? I am new to web development.

+4
source share
1 answer

You need to make an AJAX request. Although this is not strictly necessary, I suggest you use jQuery , this will simplify the situation. Please also take a look at this question: jQuery AJAX submit form

, , , , , . A.mc :

<html>
<head>
  <title>This is A</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>
  $(document).ready(function() {

    $("#myform").submit(function() { // intercepts the submit event
      $.ajax({ // make an AJAX request
        type: "POST",
        url: "B", // it the URL of your component B
        data: $("#myform").serialize(), // serializes the form elements
        success: function(data)
        {
          // show the data you got from B in result div
          $("#result").html(data);
        }
      });
      e.preventDefault(); // avoid to execute the actual submit of the form
    });

  });
  </script>
</head>
<body>
  <form id="myform">
  <input type="text" name="mytext" />
  <input type="submit" />
  </form>

  <div id="result"></div>
</body>
</html>

HTML-, jQuery , AJAX B, "", , B div.

B.mc:

<%class>
  has 'mytext';
</%class>
I got this text <strong><% $.mytext %></strong> from your form,
and its length is <strong><% length($.mytext) %></strong>.

:

enter image description here

+4

All Articles