Calling a PHP function with Javascript?

[hellonoko]

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,

ian

[BK87]

you just need to make a little php upload script I assume?

 

 

[hellonoko]

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.

[BK87]

without refreshing the page?

 

try regex... http://www.webreference.com/js/column5/methods.html 

 

basically you would "split" the file name the same way you did with your script.... this would work without refresing

[doodmon]

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();

    }

    else

    {

      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.open("POST","path/to/myphpfile.php",false);

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

    xmlhttp.send(null);

    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;

}

 

 

PHP FILE:

<?php

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

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

?>

<response>

    <imagestring1><![CDATA[

      this text can contain html

    ]]></imagestring1>

    <imagestring2><![CDATA[

      this text can contain html

    ]]></imagestring2>

</response>

 

 

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

ie this would not work:

<imagestring1>

  <![[CDATA

    this won't work in firefox but does in IE6

]]>

</imagestring1>

 

 

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:

<?php

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:

    xmlhttp.send(null);

to send whatever variables you want, ie:

    xmlhttp.send("variable="+var1);

 

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