SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Forms in js

  1. #1
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)

    Forms in js

    Greetings! My script is all about dynamic content. When I click a link, it will change the content of my div.
    My problem is:

    1. I want to show a form when link is clicked, unfortunately my script is capable only displaying strings.
    2. I want to get the value of link being clicked. Ex. when I hit PC1, my div will display 'You just clicked PC 1. Please fill in the forms below'.


    any idea?I'm going to process forms. really need help. Thank you.


    Code:
    <?php
    class Test
    {
      public static function hello()
      {
        // echo "<input type='text'>";
        echo "hello";
      }
    }
    ?>
    <html> 
    <head> 
    <title></title> 
    <SCRIPT language="javascript"> 
    function ReplaceContentInContainer(id,content) {
    var container = document.getElementById(id);
    container.innerHTML = content;
    }
    </SCRIPT> 
    </head> 
    <body> 
    <div   id="example1div"   style="border-style:solid; padding:10px; text-align:center;">
    I will be replaced when you click.
    </div>
    <a href="javascript:ReplaceContentInContainer ('example1div',' <?php echo Test::hello(); ?>')">PC 1</a>
    <a href="javascript:ReplaceContentInContainer ('example1div',' <?php echo Test::hello(); ?>')">PC 2</a>
    <a href="javascript:ReplaceContentInContainer ('example1div',' <?php echo Test::hello(); ?>')">PC 3</a>
    </body> 
    </html>

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    #mask { /* CSS for the background mask */
     position:fixed;z-Index:101;visibility:hidden;width:100%;height:100%;left:0px;top:0px;background-Color:#FFCC66;cursor:pointer;
    /* Moz */
      opacity: .5;
    /* IE5-7 */
      filter: alpha(opacity=50);
    /* IE8 */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
    
    #form {
      position:fixed;
      visibility:hidden;
      z-Index:111;
      top:200px;
      width:500px;
      height:190px;
      background-Color:#FFFFCC;
    }
    
    
    .table {
     border:solid black 1px;
    }
    
    .table INPUT {
      width:80px;
      border-Width:0px;
    }
    
    .table TD {
      width:80px;
      text-Align:center;
      border:solid black 1px;
    }
    
    .table TH {
      text-Align:center;
      border:solid black 1px;
      background-Color:#CCFFFF
    }
    
    .table .txt {
      width:150px;
    }
    
    .table .nu {
      width:20px;
      background-Color:#CCFFFF
    }
    
    .table .nu2 {
      width:80px;
    }
    
    .table .title {
      font-Weight:bold;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    
    <input type="button" name="" value="Calculate" onmouseup="ShowForm('mask','form',true);" />
    <input type="button" name="" value="Hide Form" onmouseup="ShowForm('mask','form',false);" />
    <div id="form" >
    <form name="myform" >
     <table class="table">
      <tr>
       <th>&nbsp;</th>
       <th>A</th>
       <th>B</th>
       <th>C</th>
       <th>D</th>
       <th>E</th>
      </tr>
      <tr class="title" >
        <td class="nu" >1</td>
        <td class="nu2" >Item Nu.</td>
        <td class="txt" >Material</td>
        <td >Length</td>
        <td >Nu Rqud</td>
        <td >Cost</td>
      </tr>
      <tr>
        <td class="nu" >2</td>
        <td class="nu2" >1</td>
        <td class="txt" >13mm square</td>
        <td ><input name="r0" /></td>
        <td ><input name="r0" /></td>
        <td ><input name="r0" readonly /></td>
      </tr>
      <tr>
        <td class="nu" >3</td>
        <td class="nu2" >2</td>
        <td class="txt" >welding rod</td>
        <td ><input name="r1" /></td>
        <td ><input name="r1" /></td>
        <td ><input name="r1" readonly /></td>
      </tr>
      <tr>
        <td class="nu" >4</td>
        <td class="nu2" >3</td>
        <td class="txt" >brazing</td>
        <td ><input name="r2" /></td>
        <td ><input name="r2" /></td>
        <td ><input name="r2" readonly /></td>
      </tr>
      <tr>
        <td class="nu" >5</td>
        <td class="nu2" >4</td>
        <td class="txt" >paint</td>
        <td ><input name="r3" /></td>
        <td ><input name="r3" /></td>
        <td ><input name="r3" readonly /></td>
      </tr>
      <tr>
        <td class="nu" >6</td>
        <td class="nu2" colspan="4" >Cost</td>
         <td ><input name="cost" readonly /></td>
      </tr>
     </table>
    </form>
    </div>
    <div id="mask" title="Click to Close" onmouseup="ShowForm('form',false);" ></div>
    <br />
    <div   id="example1div"   style="border-style:solid; padding:10px; text-align:center;"></div>
    <a href="javascript:ReplaceContentInContainer ('example1div','tom');ShowForm('mask','form',true);">PC 1</a>
    <a href="javascript:ReplaceContentInContainer ('example1div','dick');ShowForm('mask','form',true);">PC 2</a>
    <a href="javascript:ReplaceContentInContainer ('example1div','harry')ShowForm('mask','form',true);">PC 3</a>
    13mm square = 0.5<br />
    
    Welding Rod = 0.0004<br />
    
    Brazing = 0.000155<br />
    
    Paint = 0.5<br />
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function ReplaceContentInContainer(id,content) {
    var container = document.getElementById(id);
    container.innerHTML = content;
    }
    /*]]>*/
    </script>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function ShowForm(mid,fid,ud){
     var msk=document.getElementById(mid),frm=document.getElementById(fid);;
     frm.style.left=(msk.offsetWidth-frm.offsetWidth)/2+'px'
     frm.style.top=(msk.offsetHeight-frm.offsetHeight)/2+'px'
     frm.style.visibility=ud?'visible':'hidden';
    }
    
    function calculate(ip){
     var frm=ip.form,ips=frm[ip.name],ary=InitForm.ary[ip.name.replace(/\D/g,'')*1],nu=0,z0=0;
     ip.value=ip.value.replace(/\D/g,'');
     ips[2].value='';
     if (ips[0].value&&ips[1].value){
      nu=ips[0].value*ips[1].value*ary[0]; // E2 = C2*D2*0.5
      ips[2].value=nu;
      ary[1]=nu;
     }
     for (nu=0;z0<InitForm.ary.length;z0++){
      if (typeof(InitForm.ary[z0][1])=='number'){
       nu+=InitForm.ary[z0][1];
      }
     }
     frm.cost.value=nu;
    }
    
    function InitForm(nme,ary){
     var frm=document[nme],ips=frm.elements;
     InitForm.ary=ary;
     for (var z0=0;z0<ips.length;z0++){
      ips[z0].onkeyup=function(){ calculate(this); }
     }
    }
    
    InitForm('myform',[[.5],[0.0004],[0.000155],[.5]]);
    
    /*]]>*/
    </script></body>
    
    </html>

  3. #3
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Seems like too complicated. How about ajax call in getting id value in href? any idea?

    Code:
    <li><a href="?page=page&id=<?php echo $val;?> " id="link1">Menu item</a></li>

  4. #4
    SitePoint Member
    Join Date
    Aug 2012
    Location
    Taiwan
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by claro View Post
    Greetings! My script is all about dynamic content. When I click a link, it will change the content of my div.
    My problem is:

    1. I want to show a form when link is clicked, unfortunately my script is capable only displaying strings.
    2. I want to get the value of link being clicked. Ex. when I hit PC1, my div will display 'You just clicked PC 1. Please fill in the forms below'.


    any idea?I'm going to process forms. really need help. Thank you.


    Code:
    <?php
    class Test
    {
      public static function hello()
      {
        // echo "<input type='text'>";
        echo "hello";
      }
    }
    ?>
    <html> 
    <head> 
    <title></title> 
    <SCRIPT language="javascript"> 
    function ReplaceContentInContainer(id,content) {
    var container = document.getElementById(id);
    container.innerHTML = content;
    }
    </SCRIPT> 
    </head> 
    <body> 
    <div   id="example1div"   style="border-style:solid; padding:10px; text-align:center;">
    I will be replaced when you click.
    </div>
    <a href="javascript:ReplaceContentInContainer ('example1div',' <?php echo Test::hello(); ?>')">PC 1</a>
    <a href="javascript:ReplaceContentInContainer ('example1div',' <?php echo Test::hello(); ?>')">PC 2</a>
    <a href="javascript:ReplaceContentInContainer ('example1div',' <?php echo Test::hello(); ?>')">PC 3</a>
    </body> 
    </html>
    My idea is that you can generate your form with PHP, and let javascript to control its visibility. For example:
    Code:
    <?php
    class Test
    {
        public static function hello($formid)
        {
            $formstr = '<form id="' . $formid . '" action="" method="post">
    <input type="text"><input type="submit" value="Submit"></form>';
            return $formstr;
        }
    }
    ?>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Untitled</title>
        <style> 
            .hidden { display: "none"; } 
        </style>
        <script>
            function revealForm(id) {
                var forms = document.getElementsByTagName("form"); // get all form
                for(var i = 0, len = forms.length; i < len; i++) {
                    forms[i].className = "hidden"; // hide them all
                }
    
                document.getElementById(id).className = ""; // show form with that id
            }
        </script>
    </head>
    <body>
    <!-- 3 forms with different id -->
    <?php echo Test::hello('form1'); ?> 
    <?php echo Test::hello('form2'); ?>
    <?php echo Test::hello('form3'); ?>
    
    <a href="javascript:revealForm('form1');return false;">PC 1</a>
    <a href="javascript:revealForm('form2');return false;">PC 2</a>
    <a href="javascript:revealForm('form3');return false;">PC 3</a>
    
    <script>
        revealForm('form1'); // initial state
    </script>
    
    </body>
    </html>
    It's somewhat DOM 0... but hope it helps. :-)


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
  •