A concept...

**personman** · 10-23-2006, 03:45 AM

Hello!

I have an fun little idea I want to implement into my website, but being the total JavaScript newb that I am, just can't seem to find a way to make it work.

First, the user selects a radio button, each one with a picture and name of an animal above (let's say cat, dog, bird).

Next, the user inputs a name into a text field.

Finally, the user hits the submit button and gets taken to a page that displays the following information:

"My pet [animal name here], [name here]"
[picture here]

But it also displays a text box underneath with an HTML code of the whole thing so that the user can copy and paste it into his/her own website/blog/whatever.

Any help to get me started would be greatly appreciated. Thanks!

**djr33** · 10-23-2006, 04:04 AM

What would the html code be? It would have an image tag for the selected image, followed by the name they typed?

"Taken to a page"... just use php.

If you need something to happen WITHOUT reloading, use javascript.

Otherwise, use php which is a much more compatible solution as it operates on the server then outputs text. It's easy, too.

PHP is a programming language designed, among other things, to handle form data.

Assuming the method of the form is post (<form method="post" ...>), then:
on the page the data it sent to (the action of the form... <form action="thispage.php">)
Use:

PHP Code:


<?php
echo 'My pet ' . $_POST['animal'] . ', ' . $_POST['name'] . "\n" . '<img src="'.$_POST['animal'].'.jpg">';
?>
//This does: My pet [animal name], [name] (line break) image tag.

The file extension of the page must be .php (and all html will work as normal. Just put the above code exactly where you want the result to display).

That's it.*
(*Assuming/once you have PHP installed and working on your server.)

As for outputting into a textarea, just repeat the process, but like:
<textarea><?php PHP HERE ?></textarea>

Or, instead of echo, you could do:
<?php
$output = "My pet............;
?>
Then you could access the variable $output twice, once with
echo $output;
and again, the same way, within the textarea.

The same is possible in javascript, but it would be more complex (to me, anyway, and certainly would be a longer code), and it would rely on the user's browser being compatible, unlike php which just outputs pure html once processed on the server.

**tech_support** · 10-23-2006, 07:20 AM

JavaScript version:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
.style1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
}
-->
</style>
</head>

<body>
<script language="javascript" type="text/javascript">
var imagesDir = "images/" //Images Directory
var imageType = ".gif" //Image Extension
function displayResults()	{

var animalChoice = checkRadio();
var name = document.forms['form'].name.value
var image = "<img src='" + imagesDir + animalChoice + imageType + "' border='0'>"
var valueGenerate = "My pet " + animalChoice + ", " + name + "<br>" + image
document.getElementById("preview").innerHTML = valueGenerate

var htmlCode = "<p>" + valueGenerate + "</p><br>" + image
document.forms['form'].code.value = htmlCode
}
function checkRadio()	{

for (i=0;i<document.forms['form'].radios.length;i++) {
	if (document.forms['form'].radios[i].checked) {
		return document.forms['form'].radios[i].value;
	}
}
}
</script>
<form name="form">
  <label>
  <span class="style1">
  <input name="radios" type="radio" value="Dog" checked>
    Dog</span></label>
  <span class="style1"><br>
  <label>
  <input name="radios" type="radio" value="Cat">
  Cat</label>
  <br>
  <label>
  <input name="radios" type="radio" value="Bird">
  Bird</label>
  </span>
  <p class="style1"> <label>Name:
    <input name="name" type="text" id="name">
    </label>  
</p>
  <p class="style1">
    <input name="display" type="button" id="display" value="Display" onclick="displayResults()">
<br>
    <span class="style1">Preview:</span>
  <div id="preview"></div>
  <p class="style1">
    <label>Code: <br>
    <textarea name="code" cols="50" rows="10" id="code"></textarea>
    </label>
  </p>
</form>

</body>
</html>

Hope it helps

**Twey** · 10-23-2006, 11:30 AM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Please, use Strict. Transitional shouldn't be used for new pages; we're well past the transitional phase now.

Should really be sent by the server, rendering this pointless.

The comment delimiters are unnecessary, and have been so for a long time. Firefox will complain about them, too (although it shouldn't; the standard does make allowance for them).

language is deprecated.

document.forms['form'].radios

... could well be undefined. Use the elements collection. Also, referring to the form in such an inflexible way is a bad idea.

</p><br>

Abuse of <br>.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Animal Chooser</title>
    <style type="text/css">
      .animalHolder {
        float: left;
        width: 100px; /* width of your images, add a few pixels. */
      }

      .animalHolder label {
        display: block;
      }
    </style>
    <script type="text/javascript">
      function getRadioValue(el) {
        if(!el.length) return null;
        for(var i = 0; i < el.length; ++i)
          if(el[i].checked) return el[i].value;
        return null;
      }

      function getElementsByClassName(root, tag, class) {
        var op = [];
        for(var i = 0, e = document.getElementsByTagName(tag); i < e.length; ++i)
          if(e[i].className === class)
            op.push(e[i]);
        return op.length > 0 ? op : null;
      }

      function clearNode(node) {
        while(node.hasChildNodes)
          node.removeChild(node.firstChild);
      }

      function previewAnimals(frm) {
        var f = frm.elements,
          n = frm.elements['petName'],
          s = getRadioValue(frm.elements['animal']),
          p = getElementsByClassName(frm, "p", "preview")[0],
          ps = p.getElementsByTagName("span"),
          se = ps[0],
          ne = ps[1],
          ie = p.getElementsByTagName("img")[0],
          op = getElementsByClassName(frm, "p", "code")[0].getElementsByTagName("textarea")[0],
          isrc = f['animal'];

          for(var i = 0; typeof isrc !== "string" && i < isrc.length; ++i)
            if(isrc[i].checked)
              isrc = isrc[i].parentNode.getElementsByTagName("img")[0].src;

          ie.src = isrc;

          clearNode(ne);
          ne.appendChild(document.createTextNode(n));

          clearNode(se);
          se.appendChild(document.createTextNode(s));

          op.value = '<div><p><img src="' + isrc + '"></p><p>This is my pet " + s + ", " + n + "!</p></div>";

          return false;
      }
    </script>
  </head>
  <body>
    <form action="" onsubmit="return previewAnimals(this);">
      <p>
        <label>
          Pet name:
          <input type="text" name="petName">
        </label>
      </p>
      <p class="animalHolder">
        <img src="cat.png">
        <label>
          Cat
          <input type="radio" name="animal" value="cat">
        </label>
      </p>
      <p class="animalHolder">
        <img src="dog.png">
        <label>
          Dog
          <input type="radio" name="animal" value="dog">
        </label>
      </p>
      <p class="animalHolder">
        <img src="civet.png">
        <label>
          Palm civet
          <input type="radio" name="animal" value="palm civet">
        </label>
      </p>
      <p class="preview">
        <img src="dog.png">
        This is my pet <span>dog</span>, <span>Fido</span>.
      </p>
      <p class="code">
        Code:
        <textarea rows="40" cols="80"></textarea>
      </p>
      <p>
        <input type="submit" value="Go">
      </p>
    </form>
  </body>
</html>

Untested. However, as djr33 said, it would be much better done on the server-side.

**tech_support** · 10-23-2006, 11:09 PM

Originally Posted by Twey

Please, use Strict. Transitional shouldn't be used for new pages; we're well past the transitional phase now.

Sorry, that's just the default for Dreamweaver.

Originally Posted by Twey

... could well be undefined. Use the elements collection. Also, referring to the form in such an inflexible way is a bad idea.

When I tried using the elments collection it gives me a JavaScript error

Originally Posted by Twey

Abuse of <br>.

What do you mean by abuse?

**Twey** · 10-23-2006, 11:18 PM

When I tried using the elments collection it gives me a JavaScript error

In your case, it should be:

Code:

document.forms['form'].elements['radios']

What do you mean by abuse?

You're using it as padding rather than styling that <p> with a margin.

Also, something I failed to mention above: when you have code like that you used there:

Code:

for (var i=0;i<document.forms.form.elements.radios.length;i++)
  if (document.forms.form.elements.radios[i].checked)
    return document.forms.form.elements.radios[i].value;

Each of those dots or square brackets is another lookup. It is far more efficient to save the result of the first lookup to a variable and then use that:

Code:

for (var i=0, e = document.forms.form.elements.radios; i<e.length;i++)
  if (e[i].checked)
    return e[i].value;

**tech_support** · 10-23-2006, 11:19 PM

Ah, ok. I'll try to do that next time.

**personman** · 10-25-2006, 12:06 AM

Sorry for the late reply, I was busy during the week.

Originally Posted by djr33

What would the html code be? It would have an image tag for the selected image, followed by the name they typed?

Something like

HTML Code:

<div align="center">
  <p>My pet [species of pet], [pet's name]</p>
  <p> <img src="petimage.gif"></p>
  <p>From <a href="site URL here">my site</a></p>
</div>

It figures I would have to use PHP. I have read about it. But I guess I would have to convert my entire site to PHP? Because right now it's in HTML (it's a pretty small site though).

**djr33** · 10-25-2006, 01:13 AM

There's no converting. Change the file extension to .php on only the pages that need php scripting. Then change links pointing to them to .php as well. That's it.

As for what you have above, sure.... just change the PHP (anything in quotes is output as html) to do that. Easy. Note that \n is a linebreak in the source code (NOT the output... that's still <br>, etc.)

Thread: A concept...

Thread Tools

Search Thread

A concept...

Bookmarks

Bookmarks

Posting Permissions