Question

Okay here’s my situation.

I have a php file that contains a simple form asking for name, number, etc.
Now when I click submit, I have the form action set to a URL for an API that process those variables.

The problem is that when I submit the form, it takes me to a page where the API website confirms the submission with some jibberish xml text.

What I wanna do is be able to let the user fill the form data, secretly submit that data to the API URL, and display a thank you page for the user. I don’t want the user to be aware of the confirmation page of the API, just a form submission, which takes him directly to a thank you page.

The API accepts requests in the following form

"MY-API-URL.com/json?api_key=KEY&api_secret=SECRET&login=LOGIN&password=PASSWORD"

This is the form header..

<form action="MY-API-URL.com" class="login">

Any help is appreciated!

Answer 1

Make an ajax call to submit your form.

Make a self submitting form action="" like this:

<form id="login" name="login" action="" method="POST">
    <input type="text" name="login" value="">
    <input type="password" name="password" value="">
    <input type="submit" name="submit" value="Log in">
</form>

Handle your form’s submit event with jQuery:

<script>
$(function(){
    $("form#login").submit(function(){
        var login = $("input[name=login]").val();
        var password = $("input[name=password]").val();

        $.ajax({
            url: "MY-API-URL.com/json", 
            type: "POST",
            data: {"api_key":"KEY", "api_secret":"SECRET", "login":login, "password":password},
            dataType: "jsonp",
            cache: false,
            success: function (data) {              
                //make your redirect here or just display a message on the same page
                window.location = "congrats.html";
            },
            error: function(jqXHR, textStatus, errorThrown){
                // handle your error here
                alert("It's a failure!");
            }       
        });
        //cancel the submit default behavior
        return false;
    });
});
</script>

Update:
As far as I understand nexmo doesn’t support jsonp and you can’t use json because you are making cross-domain call.
There are plenty of posts about it here. For example json Uncaught SyntaxError: Unexpected token :

As a work around you can use proxy. You can read about it here and download simple proxy here.

If you would use a proxy mentioned above your code would look like:

<script> 
$(function(){ 
    $("form#sms").submit(function(){ 
        var from = $("input[name=from]").val(); 
        var to = $("input[name=to]").val(); 
        var text = $("input[name=text]").val(); 

        var url = "http://rest.nexmo.com/sms/json?api_key=key&api_secret=secret" + "&from=" + from + "&to=" + to + "&text=" + text; 
        $.ajax({ 
            url: "simple-proxy.php", 
            type: "GET", 
            data: {"url": url}, 
            dataType: "json", 
            cache: false, 
            success: function (data) {               
                //make your redirect here or just display a message on the same page 
                console.log(data); 
                if (data && data.contents && data.contents.messages && data.contents.messages.length) {
                    alert("The status is: " + data.contents.messages[0].status);
                }
                alert("SMS sent!"); 
            }, 
            error: function(jqXHR, textStatus, errorThrown){ 
                // handle your error here 
                alert("textStatus: " + textStatus + "\n" + "errorThrown: " + errorThrown); 
            }       
        }); 
        //cancel the submit default behavior 
        return false; 
    }); 
}); 
</script> 

I made it work on my machine, and it returned proper json response.