Results 1 to 9 of 9

Thread: A concept...

  1. #1
    Join Date
    Oct 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb A concept...

    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!

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    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
    Last edited by tech_support; 10-23-2006 at 11:09 PM.
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

  4. #4
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    <!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.
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    Should really be sent by the server, rendering this pointless.
    <style type="text/css">
    <!--
    /* ... */
    -->
    </style>
    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).
    <script language="javascript"
    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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  5. #5
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    Quote 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.

    Quote 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

    Quote Originally Posted by Twey
    Abuse of <br>.
    What do you mean by abuse?
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

  6. #6
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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;
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  7. #7
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    Ah, ok. I'll try to do that next time.
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

  8. #8
    Join Date
    Oct 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

    Quote 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).

  9. #9
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.)
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •