Forms in js

JavaScript
1

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.


<?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 
<!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

Seems like too complicated. How about ajax call in getting id value in href? any idea?


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

My idea is that you can generate your form with PHP, and let javascript to control its visibility. For example:


<?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. :slight_smile: