Jump to content

Calling a PHP function with Javascript?


Recommended Posts

I have a a simple page with two text fields.


One is the URL. The user will past a URL image link into this field. For example http://www.phpfreaks.com/forums/hotgirls.jpg


The second field is blank and for the name/renaming of the image that will then be copied with the submit button.


I have created a function that trims the image name from the full url:


function getImageName($url)

	$length = strlen($url);

	$start = strrpos($url, "/") +1;

	$image = substr($url, $start , ($length-$start));

	return $image;


I want to make my page so the image name field is auto populated with the result of this function OR populated on clicking of the field or a button.


I will do it with a button that reloads the page if I have to but would rather not.


Any one know how to do this?


Thanks in advance,


Link to comment
Share on other sites

I already have all the script that does the upload.

Rather the copying of the URL to an image.


Im looking to parse the url and auto populate  a text field.


For example your click the empty box. And... hotgirl.jpg  apears in it.


Then you can save it or change it and save it.

Link to comment
Share on other sites

Use Ajax...


// Returns the correct XMLHttpRequest for the browser type

function Get_XMLHttpRequest(){

    var xmlHttp = null;

    if (window.XMLHttpRequest) {

      // If IE7, Mozilla, Safari, and so on: Use native object.

      xmlHttp = new XMLHttpRequest();




      if (window.ActiveXObject) {

        // ...otherwise, use the ActiveX control for IE5.x and IE6.

        xmlHttp = new ActiveXObject('MSXML2.XMLHTTP.3.0');



    return xmlHttp;



function load_image(){

    var xmlhttp = Get_XMLHttpRequest();


    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");


    var response = xmlhttp.responseXML.documentElement;

    document.form.element1.value = response.getElementsByTagName('imagestring1')[0].firstChild.data;

    document.form.element2.value = response.getElementsByTagName('imagestring2')[0].firstChild.data;






header('Content-Type: text/xml');

echo '<?xml version="1.0" encoding="ISO-8859-1"?>';




      this text can contain html



      this text can contain html





When using CDATA there cannot be spaces between the parent and the data

ie this would not work:



    this won't work in firefox but does in IE6





you can also return plain text in your myphpfile.php in which case javascript will contain the data in the variable xmlhttp.responseText as opposed to the responseXML:


echo "this is plain text or html formatted text"


your javascript code would need some little changes:

    var response = xmlhttp.responseXML.documentElement; // this line isn't necessary when dealing with text


this line:

    document.form.element1.value = response.getElementsByTagName('imagestring1')[0].firstChild.data;

should become:

    document.form.element1.value = xmlhttp.responseText;


problem is you cannot return more than one chunk of code (ie you can't populate two or more elements at the same time as you can do with XML format). I recommend XML with CDATA if you need to pass HTML and more than one chunk at a time.


finally you can use PHP $_REQUEST['variable'] and $_POST['variable'] to obtain variables passed from javascript if necessary. This can be done by modifying this line:


to send whatever variables you want, ie:



If you are storing these images in a database, you can use PHP to access that database so the data is never hard coded.. it's good practice


fun stuff



Link to comment
Share on other sites

This thread is more than a year old. Are you sure you have something important to add to it?

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.