CODEWITHSUNDEEP
phpjavascripthtmlexternal
user755889
user755889

Reputation: 13

Calling an external PHP file within a local JavaScript file?

I have an HTML form on my website that submits all the information (after pressing submit) while remaining on the same page. A JavaScript file enable this, so after you fill it out and press submit, the module fades and says thank you for submitting your info, all while remaining on that same page.

Now in that JS that enables the function, I have to call the actual PHP that sends the form.

When it was internally located on my server, that line of code looked like this:

 var result= postData(data,'./form.php"');      
 if (result !=null){
     $('#form').html('<img src="./images/thankyou.png"></img>');

Now this worked perfectly. I had to move that PHP to another server at http://www.somesite.com/php/action.php

How could I call that PHP? I tried 

var result= postData(data,'http://www.somesite.com/php/form.php"');

and it does work. What is the easiest way to make it work?

Upvotes: 1

Views: 4204

Answers (3)

Janaka R Rajapaksha
Janaka R Rajapaksha

Reputation: 3744

Try with this way:

In your local server: <script type="text/javascript" src="path/to/external/php/file"></script>

And modify the php file:

 <?
Header("content-type: application/x-javascript");
//your php codes here as normal
//your dispalying resoursec here in this format: echo "document.write(\"what you want to display\")";
?>

This external php file will output a javascript file to your local server.

Upvotes: 0

msigman
msigman

Reputation: 4524

This is what you would use AJAX for. These answers assume you're working on the same domain.

The easy way

The easiest way to use AJAX is to use jQuery, however this is not strictly necessary (see below). http://www.queness.com/post/160/create-a-ajax-based-form-submission-with-jquery

Generic sample:

$.ajax({
  url: "test.html",
  context: document.body
}).done(function() { 
  $(this).addClass("done");
});

http://api.jquery.com/jQuery.ajax/

The less easy way

If you didn't want to use jQuery, you can do without it. http://www.webreference.com/programming/javascript/ajax_forms/index.html

Sample HTML

<p><html><br/>
<head><br/>
<title>Form Posts with Ajax</title><br/>
<script type="text/javascript" src="js/Ajax.js"></script><br/>
<script type="text/javascript" src="js/Post.js"></script><br/>
</head><br/><br/>
<body><br/><br/>
<form action="bridge.php" method="post" onsubmit="Post.Send(this); return false;"><br/>
Name:<br/><input type="text" name="name" /><br/>
<br/><br/><br/>
Message:<br/><textarea name="message"></textarea><br/>
<br/><input type="submit" value="submit" /><br/>
</form><br/><br/>
</body><br/>
</html></p>

Sample JavaScript

    var Ajax = new Object();
    Ajax.isUpdating = true;
    Ajax.Request = function(method, url, query, callback)
    {
        this.isUpdating = true;
        this.callbackMethod = callback;
        this.request = (window.XMLHttpRequest)? new XMLHttpRequest(): new ActiveXObject("MSXML2.XMLHTTP");
        this.request.onreadystatechange = function() { Ajax.checkReadyState(); };
        if(method.toLowerCase() == 'get') url = url+"?"+query;
        this.request.open(method, url, true);
        this.request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        this.request.send(query);
    }
    Ajax.checkReadyState = function(_id)
    {
        switch(this.request.readyState)
        {
            case 1: break;
            case 2: break;
            case 3: break;
            case 4:
                this.isUpdating = false;
                this.callbackMethod(this.request.responseXML.documentElement);
        }
    }

Upvotes: 3

jamesmortensen
jamesmortensen

Reputation: 34038

It sounds like you are trying to submit form data from one domain context to another server. You can do this using JSONP, or cross domain JavaScript.

function sendFormData(urlToSendTo) {
    var script = document.createElement("script");
    script.setAttribute("type","text/javascript");
    script.setAttribute("src", urlToSendTo);
    document.getElementsByTagName("head")[0].appendChild(script);
}

$('form').click(function() {
    src="http://www.example.com/php/action.php?name=" + $(this).find('[name="name"]').val() + "&email=" + $(this).find('[name="email"]');
    sendFormData(src);
    return false;  // if this doesn't work, try event.preventDefault();
});

If you are indeed trying to send data from a webpage loaded at http://domain.com to a PHP page hosted on http://example.com, this is the only way you can send the data to the server without reloading the page. If the PHP page is on the same server, then the other solution that was posted by @msigman will work.

Upvotes: 1

Related Questions