How to send form field value to a REST service using JSON or AJAX

Question

I have a form field (email signup) on the site, and the email provider wants me to submit it to their REST web service and get a response. I've never used JSON or AJAX before so floundering!

The HTML:

<form>
  <input type="hidden" name="gid" value="12345678">
  <input type="hidden" name="user.CustomAttribute.NewsletterPopUp" value="Global">
  <input type="hidden" name="user.CustomAttribute.NewsletterOptIn" value="True">" value="True">
  <input type="text" name="uemail" class="email_input_field" value="please enter your email" size="30" maxlength="64" onFocus="clearText(this)">
  <input type="submit" name="signup" value="signup" class="email_submit_button">
</form>

Currently, using Javascript and using window.location to visit the URL (which creates the action instead of posting it) they want it converted to a form post action with XML response. What happens now:

$(".email_submit_button").click(function(){
    var uemail = $('.email_input_field').val();
    window.location = "http://example.com/automated/action.jsp?action=register&errorPage=/automated/action.jsp&gid=12345678&uemail="+uemail+"&user.CustomAttribute.NewsletterPopUp=Global&user.CustomAttribute.NewsletterOptIn=True";
    return false;
  }
});

score 1 · Answer 1 · edited May 23 '17 at 12:31

I see you'r using jQuery so you can use the $.post to post to the server like this:

var url = "http://example.com/automated/action.jsp"
var data ={
    "gid": form.gid,
    "action": register,
    "uemail": form.uemail,
    "errorPage": "/automated/action.jsp",
    "user.CustomAttribute.NewsletterOptIn": user.CustomAttribute.NewsletterOptIn,
    "user.CustomAttribute.NewsletterPopUp": user.CustomAttribute.NewsletterPopUp
};
var success_func = function(data){
    //do what you want with the returned data
};
$.post(url, data, success_func);

Documentation for $.post.
Or you can use the pure longer Ajax version it's mentioned in the documentation of the $.post.
EDIT:
I forget you can't do xhttpresuext to a different domain you need to use JSONP, here's a link to another SO post explaining everything by detail
Hope this help.

score 0 · Answer 2 · answered Mar 18 '13 at 16:28

$(".email_submit_button").submit(function(e) {
                // stop form from submitting
                e.preventDefault();
                // Grab all values 
                var uemail = $('.email_input_field').val();
                // make a POST ajax call 
                $.ajax({
                    type: "POST",
                    url: "YOUR URL", // set your URL here
                    data: { 
                    uemail: uemail // send along this data (can add more data separated by comma)
                },
                beforeSend: function ( xhr ) {
                // maybe tell the user that the request is being processed
                    $("#status").show().html("<img src='images/preloader.gif' width='32' height='32' alt='processing...'>");
                }
                }).done(function( response ) {
                    // do something with the received data/response
                    //$("#status").html(response);
                });
            });

Not sure if ".email_submit_button" is the class given to the submit button or the form.. you need to use the id or class given to the form and not the submit button.. hope this helps

Thank you, I'm getting the following error message: XMLHttpRequest cannot load http://example.com/automated/action.jsp. Origin http://differentserver.com is not allowed by Access-Control-Allow-Origin. Any ideas? — JayDee, Mar 18 '13 at 16:40
check this out http://stackoverflow.com/questions/8153832/xmlhttprequest-changes-post-to-option — Lucky Soni, Mar 18 '13 at 16:43

How to send form field value to a REST service using JSON or AJAX

2 Answers2

Linked