CODEWITHSUNDEEP
androidajaxformsjquery-mobilecordova
stevieD
stevieD

Reputation: 135

Phonegap + Jquery Mobile Android App Form Submission

I am trying to submit a form in an Eclipse Android emulator using Phonegap and Jquery Mobile. I am looking to submit the form and have a message showing that the form was submitted successfully or not. If I submit the form on an internet browser, the php page works fine. However, trying to use the Android emulator, the form submission never gets to the php file.

Below is the html form that I am using. I have included the phonegap and jquery scripts.

  <form id="myForm" >
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup" data-mini="true">
                        <label for="textinput1">
                            Name
                        </label>
                        <input id="fullnameid" name="fullname" placeholder="" value="" type="text" />
                    </fieldset>
                </div>
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup" data-mini="true">
                        <label for="textinput2">
                            E-Mail
                        </label>
                        <input id="emailid" name="email" placeholder="" value="" type="text" />
                    </fieldset>
                </div>
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <label for="textarea1">
                            Message
                        </label>
                        <textarea id="commentid" name="comment" placeholder="" data-mini="true"></textarea>
                    </fieldset>
                </div>
                 <h3 id="return"></h3>
                <button data-theme="b" id="submitid" data-icon="arrow-r" data-iconpos="left" name="submit" type="submit">Submit</button>

           </form>

The javascript that I am using, which is an AJAX post is:

<script>
 function onSuccess(data, status)
    {
        data = $.trim(data);
        $("#return").text(data);
    }

    function onError(data, status)
    {
        // handle an error
        alert("Error Submitting Form");
    }       

    $(document).ready(function() {
        $("#submitid").click(function(){

            var formData = $("#myForm").serialize();

            $.ajax({
                type: "POST",
                url: "http://www.dowlingnetworks.com/app/contactscript.php",
                cache: false,
                data: formData,
                success: onSuccess,
                error: onError
            });

            return false;
        });
    });
</script>

Any help would be greatly appreciated.

Upvotes: 1

Views: 5939

Answers (4)

Will
Will

Reputation: 2019

You can control what external sources are accessible from your application by setting this in your [project_name]/res/xml/config.xml:

<access origin="http://[some-external-domain.com]" subdomains="true" />

One of the docs is here:

https://build.phonegap.com/docs/config-xml

NOTE: Scroll all the way to the bottom to find the specific section talking about the setting.

Upvotes: 0

yi2ng2
yi2ng2

Reputation: 139

I have the same issue previously. However, when I use the actual android phone as my test device, everything just went fine without additional configuration. Cheers!

Best Regards, Yi Ying

Upvotes: -1

Aurelio
Aurelio

Reputation: 31

Easy way to do cross domain calls is just to put in your php page's header this line: 

header("Access-Control-Allow-Origin: *");

Upvotes: 3

Akilan
Akilan

Reputation: 1717

You cannot post data to server like this from android. You are doing Cross domain request through jquery from a webserver. You have to make a JSON or JSONP request to reach the server. Please go throught the link to make a Request to web server using phonegap jquery mobile.

Upvotes: 1

Related Questions