Page 1 of 1

form with javascript buttons

Posted: Sun Jan 10, 2010 5:00 am
by cali_dotcom
Hi i am not so good with javascript so i really dont know the best way do do what i want to do. want to make a form that allows people to add and delete rows with javascript but it just doesn't work the way i would like. javascript is not passing the variables to php. here is the code i have so far. can anyone tell me where the problem is?

Code: Select all

 
 
<html>
<head>
<SCRIPT language=javascript>
    function doSubmit(Mode){
        document.forms[0].Submit.value = Mode;
        document.forms[0].submit();
    }
    
    function addVariant(mode, language){
        document.forms[0].Submit.value = mode;
        document.forms[0].Submit.lang = language;
        document.forms[0].lang.value = language;
        //var url= "index.php?Submit="+mode+"&lang="+language;
        document.forms[0].submit();
 
        //alert(language);
    }
 
function deleteVariant(mode, language){
        document.forms[0].Submit.value = mode;
        document.forms[0].Submit.lang = language;
        document.forms[0].lang.value = language;
        //var url= "index.php?Submit="+mode+"&lang="+language;
        document.forms[0].submit();
 
        //alert(language);
    }   
    
</SCRIPT>
<link rel="stylesheet" type="text/css" href="admin/Themes/StormyWeather/Style.css">
</head>
<body>
<?showHeader(); ?>
<center>
<form method="POST" >
    <INPUT TYPE=hidden NAME=Submit VALUE="">
    <INPUT TYPE=hidden NAME=lang VALUE="">
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 style="border:1px solid #825e5e">
    <TR class="StormyWeatherFieldCaptionTD">
        <TD COLSPAN=2 ALIGN=center class="tableborder" style=padding:5px><B>Add Resource</B></TD>
    </TR>
    <TR>
        <TD class="StormyWeatherFieldCaptionTD"><B>Resource ID:</B></TD>
        <TD  class="StormyWeatherDataTD"><INPUT TYPE=text SIZE=5 name="rid">
        Note for developer: if in edit mode, this value cannot be changed.
        </TD>
    </TR>
    <tr>
        <TD class="StormyWeatherFieldCaptionTD"><B>Resource Type:</B></TD>
        <TD  class="StormyWeatherDataTD">
            <SELECT name="type_ID">
         <? foreach ($row1 as $vals1){
                if ($vals1){
                
            ?>  <OPTION value="<?= $vals1['Resource_Type_Id']; ?>"><?= $vals1['Resource_Type_Id']; ?> (<?= $vals1['Description'] ?>)</OPTION>
                <? 
                }
                }
             ?>
            </SELECT>
        </TD>
    </tr>
    
    <tr>
        <td class="StormyWeatherFieldCaptionTD"><b>Project ID:</b></td>
        <td class="StormyWeatherDataTD"><input type="text" size=25 name="project_id" />&nbsp;(Optional)</td>
        
    </tr>
    
    <TR>
        <TD class="StormyWeatherFieldCaptionTD"><B>Resource:</B></TD>
        <TD class="StormyWeatherDataTD"><TEXTAREA COLS=50 ROWS=5 name="resource">This is the item (English) that will be translated</TEXTAREA></TD>
    </TR>
    <TR>
        <TD class="StormyWeatherFieldCaptionTD"><B>Description:</B></TD>
        <TD class="StormyWeatherDataTD"><TEXTAREA  COLS=50 ROWS=5 ID="Description" name="Description">Description of translable item goes here</TEXTAREA></TD>
    </TR>
    
 
    <TR>
        <TD class="StormyWeatherFieldCaptionTD"><B>French(0):</B></TD>
        <input type="hidden" name="language_id" value="" />
        <TD class="StormyWeatherDataTD"><TEXTAREA COLS=50 ROWS=5 ID=FR name="FR[]">French translation here</TEXTAREA></TD>      
    </TR>
 
<?
    if ($_SESSION['frVariant'] > 0){
            for ($a=1; $a <= $_SESSION['frVariant']; $a++){
?>          
    <TR>
        <TD class="StormyWeatherFieldCaptionTD"><B>French(<?=$a; ?>):</B></TD>
        <input type="hidden" name="language_id" value="" />
        <TD class="StormyWeatherDataTD"><TEXTAREA COLS=50 ROWS=5 ID=FR name="FR[<?= $a; ?>]">French translation here</TEXTAREA></TD>        
    </TR>       
            
            
            
<?      
            }   
    }
 
?>
 
<TR>
        <TD  class="StormyWeatherFieldCaptionTD">&nbsp;</TD>
        <TD align=right class="StormyWeatherDataTD"><a href="" onclick="javascript&#058;deleteVariant('deleteVariant', 'f');">Delete</a>&nbsp;&nbsp;<A HREF="" onclick="addVariant('addVariant', 'f');">Add Variant</A>
    </TR>  
 
<TR>
        <TD class="StormyWeatherFieldCaptionTD"><B>Spanish(0):</B></TD>
        <input type="hidden" name="language_id" value="" />
        <TD class="StormyWeatherDataTD"><TEXTAREA COLS=50 ROWS=5 ID=FR name="SP[]">Spanish translation here</TEXTAREA></TD>     
    </TR>
<?
        if ($_SESSION['spVariant'] > 0){
            for ($a=1; $a <= $_SESSION['spVariant']; $a++){
?>          
    <TR>
        <TD class="StormyWeatherFieldCaptionTD"><B>Spanish(<?=$a; ?>):</B></TD>
        <input type="hidden" name="language_id" value="" />
        <TD class="StormyWeatherDataTD"><TEXTAREA COLS=50 ROWS=5 ID=FR name="SP[<?= $a; ?>]">Spanish translation here</TEXTAREA></TD>       
    </TR>
    
            
            
            
<?      
            }
    
    
    }
 
 
?>
    
<TR>
        <TD  class="StormyWeatherFieldCaptionTD">&nbsp;</TD>
        <TD align=right class="StormyWeatherDataTD"><a href="" onclick="javascript&#058;deleteVariant('deleteVariant', 's');">Delete</a>&nbsp;&nbsp;<A HREF="" onclick="javascript&#058;addVariant('addVariant', 's');">Add Variant</A>
    </TR> 
 
 
    
    <tr>
        <TD  class="StormyWeatherFieldCaptionTD">Approved By:</TD>
        <TD  class="StormyWeatherDataTD"><input type="text" size=25 name="approved_by" /></TD>
    </tr>
    
    <tr>
        <TD align=right colspan=2 style=padding-top:25px class="StormyWeatherDataTD">
        
        
        <BUTTON ONCLICK="doSubmit('deleteresource');"   type=button>Delete</BUTTON>&nbsp;&nbsp;<BUTTON ONCLICK="doSubmit('add');"   type=button>Submit</BUTTON>&nbsp;&nbsp;<BUTTON ONCLICK=doSubmit('') type=button>Cancel</BUTTON>&nbsp;</TD>
    </tr>
</TABLE>
</form>
</center>
</body>
</html>
<?
 
    
 
}
 
 

Re: form with javascript buttons

Posted: Sun Jan 10, 2010 5:51 am
by gavin1996
you should using "insertROW and innerHTML of DHTML" do it

following is a simple example:

Code: Select all

 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=uf-8" />
<title></title>
<script>
    function add_row()
    {
        var table1=document.getElementById("t1");
        var newRow = table1.insertRow();
        
        var newCell = newRow.insertCell();
        newCell.innerHTML="<input type='text' /><input type='button' value='delete' onclick='delete_row("+newRow.rowIndex+")'/>";
        
    }
    
    function delete_row(rowID)
    {
        
        var table1=document.getElementById("t1");
        table1.deleteRow(rowID);
 
    
    }
</script>
</head>
 
<body>
 
<input value="Add Row" onclick="add_row()" type="button" />
<table id="t1" width="800" border="1">
  <tr>
    <td>
    <input type="text" />
        </td>
  </tr>
</table>
 
 
</body>
</html>
 
 
 
PS: I am a PHPER form China , if you still have any question about it,
you can Add my MSN: gavin_blazepro*msn.cn ( * is @ )