Send PHP form post JSON to an API URL?

Having a few issues understanding how I should treat this form post. What I need is to send a php form data to a url. The url reads the json and then that is it.

I have tried a few methods, but what I uncovered is that I think the form needs to submit server side? What does this mean?

  • Michelle Shull

    Hi there, Casey!

    I'd love to help, would you mind sharing just a few more details about your plan here? If I can't help you myself, I can try to find someone who can, but we'd love to know a few more specifics about your project. Where do you need to send the PHP form data to? Is there a public API you're tying into we could take a look at for the form destination?

    I think with even a few more details we can get on the same page here. :slight_smile:

    Thanks, Casey!

  • Casey

    Thanks! Yes. Url is https://testapi.onecallnow.com/MarketingAPI/api/SendMessage
    It may not be much to go off of. The following is what I am trying to post. So someone enters a form. Hits submit. json data sent to the url. Thats it.
    `
    {
    "FirstName": "John",
    "LastName": "Doe",
    "Phone": "enter number",
    "Ext": "",
    "Email": "enter email",
    "FromIp": "enter ip",
    "MinutesToDelay": "",
    "Language": ""
    }

  • Bojan Radonic

    Hey there @Casey,

    Hope you're well and sorry for the delay on this one.

    Since this is a bit out of scope of my knowledge so I'll include one of our SLS guys (advanced support staff and coding experts) for their valuable input on this matter. I just want you to know that SLS deals with more complex threads so their responses can sometimes be a little slower than normal.

    Best regards,
    Bojan

  • Jose

    Hi there Casey,

    Hope you are doing great.

    I'm still not clear on what you are trying to do and what is the current problem that you are having.

    You can call to an API endpoint either from the client side (using javascript, silverlight, actionscript or any other script language running on the browser), or from the server side (in this case using PHP and some transport method like cURL, which is the default in wordpress wp_remote_post() method).

    This is a complete example using javscript/jQuery:

    function try_inject_script(){
        ?>
        <form id="myformID" action="https://testapi.onecallnow.com/MarketingAPI/api/SendMessage">
            First name: <input type="text" name="FirstName" value="John"><br>
            Last name: <input type="text" name="LastName" value="Connor"><br>
            Phone: <input type="text" name="Phone" value="454546454"><br>
            Ext: <input type="text" name="Ext" value="154"><br>
            Email: <input type="text" name="Email" value="john@connor.com"><br>
            FromIp: <input type="text" name="FromIp" value="74.65.21.10"><br>
            MinutesToDelay: <input type="text" name="MinutesToDelay" value="0"><br>
            Language: <input type="text" name="Language" value="en-US"><br>
      <input type="submit" value="Submit">
    </form>
    <script>
        jQuery(document).ready(function($){
            $("form#myformID").on( "submit", function(event){
                event.preventDefault();
                event.stopPropagation();
    
                // Get some values from elements on the page:
                var $form = $( this ),
                    $data = {
                        FirstName: $form.find( "input[name='FirstName']" ).val(),
                        LastName: $form.find( "input[name='LastName']" ).val(),
                        Phone: $form.find( "input[name='Phone']" ).val(),
                        Ext: $form.find( "input[name='Ext']" ).val(),
                        Email: $form.find( "input[name='Email']" ).val(),
                        FromIp: $form.find( "input[name='FromIp']" ).val(),
                        MinutesToDelay: $form.find( "input[name='MinutesToDelay']" ).val(),
                        Language: $form.find( "input[name='Language']" ).val()
                    },
                    url = $form.attr( "action" );
    
                // Send the data using post
                var posting = $.post( url, $data );
    
                posting.done(function( data ) {
                    //Do whatever you need with the returned data here.
                    console.log(data);
                    alert(data);
                });
    
            });
        });
    </script>
    <?php
    }
    add_action('wp_footer', 'try_inject_script');

    This will render the form in your site's footer and will hit the API via AJAX.

    I just tried in my own install, but there is a crossdomain issue. For security reasons, you can not load data from a different domain using javascript, except the server explicitly allows it by adding a 'Access-Control-Allow-Origin' header in the response.
    You would need to fix this on the API side (assuming that the API is yours).

    If not, you need to code a proxy handler in your wordpress site parsing the AJAX data and sending it to the API via wp_remote_post().

    Hope all this information helps :slight_smile:

    Please let me know if you get stack with some specific piece of code.

    Cheers,
    Jose

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.