www.webdeveloper.com
Results 1 to 8 of 8

Thread: Form instead text in JavaScript

  1. #1
    Join Date
    Nov 2010
    Posts
    18

    Form instead text in JavaScript

    Dear all,
    Can anyone help me with this… I do not know if this is possible to be done…
    Instead of text:

    "Your favorite color is <b>Green</b> right?"

    I need to show form like this:

    Code:
    <form action="auto.htm" method="get" >
    Your state<br> 
    <select name="statecode" id="statecode">
    <option value="">Choose State...</option>
    <option value="AK">Alaska</option>
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    </select> 
    <input type="submit" name="search" value="Get Quotes" />
    </form>
    Thank you in advance

    This is code I wish to modify.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    html,body {
        padding:0;
        height:100%;
     }
    #right {
        width:500px;
        height:100%;
        background-color:#999;
        text-align:center;
        float:right;
     }
    #left {
        height:100%;
        margin-right:500px;
        background-color:#f00;
        text-align:center;
     }   
    </style>
    <script type="text/javascript">
    function change()
    {
       switch (document.getElementById("select").value)
       {
          case "1":
          document.getElementById("change").innerHTML = "Your favorite color is <b>Green</b> right?"
          break;
          case "2":
          document.getElementById("change").innerHTML = "Your favorite color is <b>Red</b> right?"
          break;
          case "3":
          document.getElementById("change").innerHTML = "Your favorite color is <b>Yellow</b> right?"
          break;
       }
    }
    </script>
    </head>
    <body>
    What is your favorite color
    <select onchange="change()" id="select">
       <option value="">------</option>
       <option value="1">Green</option>
       <option value="2">Red</option>
       <option value="3">Yellow</option>
    </select>
    <div id="change" style="margin:10px;width:200px;height:100px;padding:5px;">
       Original Text
    </div>
    </body>
    </html>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    html,body {
        padding:0;
        height:100&#37;;
     }
    #right {
        width:500px;
        height:100%;
        background-color:#999;
        text-align:center;
        float:right;
     }
    #left {
        height:100%;
        margin-right:500px;
        background-color:#f00;
        text-align:center;
     }   
    </style>
    <script type="text/javascript">
    function change()
    {
    var color = document.getElementById("select").value;
    document.getElementById("change").innerHTML = 'Your favorite color is <strong style="color:'+color+';">'+color+'<\/strong> right?';
    }
    </script>
    </head>
    <body>
    What is your favorite color
    <select onchange="change()" id="select">
       <option value="">------</option>
       <option value="Green">Green</option>
       <option value="Red">Red</option>
       <option value="Yellow">Yellow</option>
    </select>
    <div id="change" style="margin:10px;width:200px;height:100px;padding:5px;">
       Original Text
    </div>
    </body>
    </html>

  3. #3
    Join Date
    Nov 2010
    Posts
    18
    I’m sorry, I wasn’t precise enough…
    I need, when somebody select option from dropdown menu, I wish to show adequate form for that state, instead to show text "Your favorite color is <b>Green</b> right?". But, when I put <form>, script stops to work. With text, script working fine.

  4. #4
    Join Date
    Nov 2010
    Posts
    18
    Sorry, in hurry I made mistake in previous replay and there is no edit button...
    I wish to show "adequate form", not "adequate form for that state"

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Totally confused

  6. #6
    Join Date
    Nov 2010
    Posts
    18
    Might be this code sample without colors be less confusing

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script type="text/javascript">
    function change()
    {
       switch (document.getElementById("select").value)
       {
          case "1":
          document.getElementById("change").innerHTML = "This text has to be replaced with form adequate to option 1."
          break;
          case "2":
          document.getElementById("change").innerHTML = "This text has to be replaced with form adequate to option 2."
          break;
          case "3":
          document.getElementById("change").innerHTML = "This text has to be replaced with form adequate to option 3."
          break;
       }
    }
    </script>
    </head>
    <body>
    What is your favorite color
    <select onchange="change()" id="select">
       <option value="">------</option>
       <option value="1">option 1</option>
       <option value="2">option 2</option>
       <option value="3">option 3</option>
    </select>
    <div id="change" style="margin:10px;width:200px;height:100px;padding:5px;">
       This text is shown when option is not selected
    </div>
    </body>
    </html>
    And, this is form to be shown for instance for option 1:

    Code:
    <form action="auto.htm" method="get" >
    Your state<br> 
    <select name="statecode" id="statecode">
    <option value="">Choose State...</option>
    <option value="AK">Alaska</option>
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    </select> 
    <input type="submit" name="search" value="Get Quotes" />
    </form>
    Last edited by young_coder; 11-15-2010 at 02:59 PM.

  7. #7
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Something like this
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script type="text/javascript">
    window.onload=function() {
    change(0);
    };
    
    function change(idx) {
    var aObj=document.getElementById("change").getElementsByTagName('p');
    var i=aObj.length; 
    while(i--) { 
        aObj[i].style.display = 'none';
        }
    aObj[idx].style.display = '';
    }
    </script>
    </head>
    <body>
    What is your favorite color
    <select onchange="change(this.value)" id="select">
       <option value="0">------</option>
       <option value="1">option 1</option>
       <option value="2">option 2</option>
       <option value="3">option 3</option>
    </select>
    <div id="change" style="margin:10px;width:200px;height:100px;padding:5px;">
    <p>This text is shown when option is not selected</p>
    <p>form 1</p>
    <p>form 2</p>
    <p>form 3</p>
    </div>
    </body>
    </html>

  8. #8
    Join Date
    Nov 2010
    Posts
    18

    Uploading multiple images in database with same value from one field in form

    Dear all,
    I have a problem that I need to be helped with using one form and storing the images in database. I would like to upload multiple images with same title from "title" field.
    Can somebody help me with this?

    Code:
    <?php
    $db_host = 'localhost'; // don't forget to change 
    $db_user = 'mysql-user'; 
    $db_pwd = 'mysql-password';
    
    $database = 'test';
    $table = 'ae_gallery';
    // use the same name as SQL table
    
    $password = '123';
    // simple upload restriction,
    // to disallow uploading to everyone
    
    
    if (!mysql_connect($db_host, $db_user, $db_pwd))
        die("Can't connect to database");
    
    if (!mysql_select_db($database))
        die("Can't select database");
    
    // This function makes usage of
    // $_GET, $_POST, etc... variables
    // completly safe in SQL queries
    function sql_safe($s)
    {
        if (get_magic_quotes_gpc())
            $s = stripslashes($s);
    
        return mysql_real_escape_string($s);
    }
    
    // If user pressed submit in one of the forms
    if ($_SERVER['REQUEST_METHOD'] == 'POST')
    {
        // cleaning title field
        $title = trim(sql_safe($_POST['title']));
    
        if ($title == '') // if title is not set
            $title = '(empty title)';// use (empty title) string
    
        if ($_POST['password'] != $password)  // cheking passwors
            $msg = 'Error: wrong upload password';
        else
        {
            if (isset($_FILES['photo']))
            {
                @list(, , $imtype, ) = getimagesize($_FILES['photo']['tmp_name']);
                // Get image type.
                // We use @ to omit errors
    
                if ($imtype == 3) // cheking image type
                    $ext="png";   // to use it later in HTTP headers
                elseif ($imtype == 2)
                    $ext="jpeg";
                elseif ($imtype == 1)
                    $ext="gif";
                else
                    $msg = 'Error: unknown file format';
    
                if (!isset($msg)) // If there was no error
                {
                    $data = file_get_contents($_FILES['photo']['tmp_name']);
                    $data = mysql_real_escape_string($data);
                    // Preparing data to be used in MySQL query
    
                    mysql_query("INSERT INTO {$table}
                                    SET ext='$ext', title='$title',
                                        data='$data'");
    
                    $msg = 'Success: image uploaded';
                }
            }
            elseif (isset($_GET['title']))      // isset(..title) needed
                $msg = 'Error: file not loaded';// to make sure we've using
                                                // upload form, not form
                                                // for deletion
    
    
            if (isset($_POST['del'])) // If used selected some photo to delete
            {                         // in 'uploaded images form';
                $id = intval($_POST['del']);
                mysql_query("DELETE FROM {$table} WHERE id=$id");
                $msg = 'Photo deleted';
            }
        }
    }
    elseif (isset($_GET['show']))
    {
        $id = intval($_GET['show']);
    
        $result = mysql_query("SELECT ext, UNIX_TIMESTAMP(image_time), data
                                 FROM {$table}
                                WHERE id=$id LIMIT 1");
    
        if (mysql_num_rows($result) == 0)
            die('no image');
    
        list($ext, $image_time, $data) = mysql_fetch_row($result);
    
        $send_304 = false;
        if (php_sapi_name() == 'apache') {
            // if our web server is apache
            // we get check HTTP
            // If-Modified-Since header
            // and do not send image
            // if there is a cached version
    
            $ar = apache_request_headers();
            if (isset($ar['If-Modified-Since']) && // If-Modified-Since should exists
                ($ar['If-Modified-Since'] != '') && // not empty
                (strtotime($ar['If-Modified-Since']) >= $image_time)) // and grater than
                $send_304 = true;                                     // image_time
        }
    
    
        if ($send_304)
        {
            // Sending 304 response to browser
            // "Browser, your cached version of image is OK
            // we're not sending anything new to you"
            header('Last-Modified: '.gmdate('D, d M Y H:i:s', $ts).' GMT', true, 304);
    
            exit(); // bye-bye
        }
    
        // outputing Last-Modified header
        header('Last-Modified: '.gmdate('D, d M Y H:i:s', $image_time).' GMT',
                true, 200);
    
        // Set expiration time +1 year
        // We do not have any photo re-uploading
        // so, browser may cache this photo for quite a long time
        header('Expires: '.gmdate('D, d M Y H:i:s',  $image_time + 86400*365).' GMT',
                true, 200);
    
        // outputing HTTP headers
        header('Content-Length: '.strlen($data));
        header("Content-type: image/{$ext}");
    
        // outputing image
        echo $data;
        exit();
    }
    ?>
    <html><head>
    <title>MySQL Blob Image Gallery Example</title>
    </head>
    <body>
    <?php
    if (isset($msg)) // this is special section for
                     // outputing message
    {
    ?>
    <p style="font-weight: bold;"><?=$msg?>
    <br>
    <a href="<?=$PHP_SELF?>">reload page</a>
    <!-- I've added reloading link, because
         refreshing POST queries is not good idea -->
    </p>
    <?php
    }
    ?>
    <h1>Blob image gallery</h1>
    <h2>Uploaded images:</h2>
    <form action="<?=$PHP_SELF?>" method="post">
    <!-- This form is used for image deletion -->
    
    <?php
    $result = mysql_query("SELECT id, image_time, title FROM {$table} ORDER BY id DESC");
    if (mysql_num_rows($result) == 0) // table is empty
        echo '<ul><li>No images loaded</li></ul>';
    else
    {
        echo '<ul>';
        while(list($id, $image_time, $title) = mysql_fetch_row($result))
        {
            // outputing list
            echo "<li><input type='radio' name='del' value='{$id}'>";
            echo "<a href='{$PHP_SELF}?show={$id}'>{$title}</a> &ndash; ";
            echo "<small>{$image_time}</small></li>";
        }
    
        echo '</ul>';
    
        echo '<label for="password">Password:</label><br>';
        echo '<input type="password" name="password" id="password"><br><br>';
    
        echo '<input type="submit" value="Delete selected">';
    }
    ?>
    
    </form>
    <h2>Upload new image:</h2>
    <form action="<?=$PHP_SELF?>" method="POST" enctype="multipart/form-data">
    <label for="title">Title:</label><br>
    <input type="text" name="title" id="title" size="64"><br><br>
    
    <label for="photo">Photo:</label><br>
    <input type="file" name="photo" id="photo"><br><br>
    
    <label for="password">Password:</label><br>
    <input type="password" name="password" id="password"><br><br>
    
    <input type="submit" value="upload">
    </form>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles