ajax load image

[inna]

Hi!
I need a really simple ajax code to load an image on my web site when
a form is compiled, but I can't find a solution.

The form should contain only 1 field.

The text field the user will put his name and when he press "submit" a
request like:
GET http://www.namegenerator.com?name=name_in_form
and put the output png file in the page where there is ajax code.

is this possible? how?

thanks!

 

[Thomas 'PointedEars' Lahn]

The form should contain only 1 field.

The text field the user will put his name and when he press "submit" a
request like:
GET http://www.namegenerator.com?name=name_in_form
and put the output png file in the page where there is ajax code.

is this possible? how?

It is possible to submit the request, however it is generally not possible
to create an image from given binary data. A `data:' URI as value of the
`src' attribute of an `img' element or the `data' attribute of an `object'
element would allow it (see RFC2397), but that is not universally supported.

The best you can do for now is to add an `img' element that refers the image
data per its URI, and you don't need "ajax" for that:

<form action="http://www.namegenerator.com"
onsubmit="return addImage(this);">
<script type="text/javascript">
function addImage(f)
{
// add runtime feature tests here, see the FAQ Notes
var img = document.createElement("img");
var name = f.elements["name"].value;
img.src = f.action + "?name=" + encodeURIComponent(name);
img.alt = name;
document.body.appendChild(img);
if (img) return false;
}
</script>
<input name="name">
<input type="submit" value="...">
</form>


HTH

PointedEars

 

[inna]

The form should contain only 1 field.

The text field the user will put his name and when he press "submit" a
request like:
GEThttp://www.namegenerator.com?name=name_in_form
and put the output png file in the page where there is ajax code.

is this possible? how?

It is possible to submit the request, however it is generally not possible
to create an image from given binary data. A `data:' URI as value of the
`src' attribute of an `img' element or the `data' attribute of an `object'
element would allow it (see RFC2397), but that is not universally supported.

The best you can do for now is to add an `img' element that refers the image
data per its URI, and you don't need "ajax" for that:

<form action="http://www.namegenerator.com"
onsubmit="return addImage(this);">
<script type="text/javascript">
function addImage(f)
{
// add runtime feature tests here, see the FAQ Notes
var img = document.createElement("img");
var name = f.elements["name"].value;
img.src = f.action + "?name=" + encodeURIComponent(name);
img.alt = name;
document.body.appendChild(img);
if (img) return false;
}
</script>
<input name="name">
<input type="submit" value="...">
</form>

thanks!! it's really what I need!
I see, every time I click the button a new image is added. How could I
allow only one image, that will be substitute if a new request is
done?

 

[Thomas 'PointedEars' Lahn]

<form action="http://www.namegenerator.com"
onsubmit="return addImage(this);">
<script type="text/javascript">
function addImage(f)
{
// add runtime feature tests here, see the FAQ Notes
var img = document.createElement("img");
var name = f.elements["name"].value;
img.src = f.action + "?name=" + encodeURIComponent(name);
img.alt = name;
document.body.appendChild(img);
if (img) return false;
}
</script>
<input name="name">
<input type="submit" value="...">
</form>

thanks!! it's really what I need!

You're welcome.

I see, every time I click the button a new image is added. How could I
allow only one image, that will be substitute if a new request is
done?

The most simple way is:

// initialization with `null' is not required;
// it serves only to indicate the type of data to be stored here
var img = null;

function addImage(f)
{
var imgExisted = img;

// add runtime feature tests here, see the FAQ Notes
if (!imgExisted) img = document.createElement("img");
if (img)
{
// ...
if (!imgExisted) document.body.appendChild(img);
return false;
}
}

You could also use the arguments.callee property to access a property of the
Function object that `addImage' refers to or any other globally available
property.


PointedEars