Toggle Form Test Failed - Revised

DataTalk · 12-20-2010, 11:12 PM

This toggle form action not working

Code:

<script language="JavaScript">
function OnSubmitForm()
{
  if(document.pressed == 'SubmitPage1')
  {
   document.myForm.action ="Page1.php";
  }
  if(document.pressed == 'SubmitPage2')
  {
   document.myForm.action ="Page2.php";
  }
  if(document.pressed == 'SubmitPage3')
  {
    document.myForm.action ="Page3.php";
  }
  return true;
}
</script>

</head>
<form name="myForm" method='post'>

<button  type='submit' onSubmit='document.pressed=this.value' value='SubmitPage1' >
<button  type='submit' onSubmit='document.pressed=this.value' value='SubmitPage2' >
<button  type='submit' onSubmit='document.pressed=this.value' value='SubmitPage3' >
</form>

Old Pedant · 12-20-2010, 11:39 PM

There's no such thing as document.pressed

There's no such thing as onsubmit for a <button>.

Where are you coming up with these oddly-name but non-existent properties????

And why do you work so hard?

Code:

<form name="myForm" method='post'>

<input type="submit" onclick="this.form.action='Page1.php';" value="SubmitPage1" />
<input type="submit" onclick="this.form.action='Page2.php';" value="SubmitPage2" />
<input type="submit" onclick="this.form.action='Page3.php';" value="SubmitPage3" />

</form>

And now there is no need for the JS function OnSubmitForm() [which, by the by, you were never invoking in the code you posted, so of course is wasn't doing anything].

DataTalk · 12-20-2010, 11:49 PM

This is actually a work around for a different purpose and I think I found the answer.

If this does not work i will post the total script, Thanks

Code:

<script language="JavaScript">
function OnSubmitForm()
{
  if(document.pressed == 'Add')
  {
   document.myform.action ="page1.php";
  }
  if(document.pressed == 'Edit')
  {
    document.myform.action ="page2.php";
  }
  if(document.pressed == 'Delete')
  {
    document.myform.action ="page2.php";
  }
  return true;
}
</script>
</head>
<FORM name="myform" onSubmit="return OnSubmitForm();">

<INPUT TYPE="SUBMIT" name="Operation" onClick="document.pressed=this.value" VALUE="Add">
<INPUT TYPE="SUBMIT" name="Operation" onClick="document.pressed=this.value" VALUE="Edit">
<INPUT TYPE="SUBMIT" name="Operation" onClick="document.pressed=this.value" VALUE="Delete">

</FORM>

Old Pedant · 12-21-2010, 12:11 AM

Code:

<script language="JavaScript">
var pressed = ""; // create a global variable; don't use document.pressed
function OnSubmitForm(form)
{
    switch(pressed) {
        case "Add": 
           form.action ="page1.php";
           return true;
        case "Edit": 
            form.action ="page2.php";
            return true;
        case "Delete": 
            form.action ="page2.php";
            return true;
    }
    alert("No submit pushed?  How did we get here?");
    return false;
}
</script>
</head>
<body>
<form name="myform" onsubmit="return OnSubmitForm(this);">
...
<input type="image" onclick="pressed='Add';" src="/images/add.jpg">
<input type="image" onclick="pressed='Edit';" src="/images/edit.jpg">
<input type="image" onclick="pressed='Delete';" src="/images/delete.jpg">
</form>

Keep it simple.

DataTalk · 12-21-2010, 01:08 AM

Ok! I need to add one more function to this.

Using your script with case Add, Edit, Delete -
How would you bring in the values to be posted to the page.

Code:

<head>
<script language="JavaScript">
function Split(sel,first) 
{
  if (sel.selectedIndex == 0 ) return;
  if(sel.value == 'Add') return;
  var temp = sel.id.split(",");
  sel.form["F"+first].value = temp[0];
  sel.form["F"+(first+1)].value = temp[1];
  sel.form["F"+(first+2)].value = temp[2];
  sel.form["F"+(first+3)].value = temp[3];
}
</script>
<script language="JavaScript">
var pressed = ""; // create a global variable; don't use document.pressed
function OnSubmitForm(form)
{
    switch(pressed) {
        case "Add": 
           form.action ="add.php";
           return true;
        case "Edit": 
            form.action ="edit.php";
            return true;
        case "Delete": 
            form.action ="delete.php";
            return true;
    }
    alert("No submit pushed?  How did we get here?");
    return false;
}
</script>
</head>
<form method='post' onSubmit="return OnSubmitForm(this);">
<input type='text' id='F1' name='F1' value='' >
<input type='text' id='F2' name='F2' value='' >
<input type='text' id='F3' name='F3' value='' >
<table>
<tr>
<td align='left'   width='55'  style='color: #FFFF00' bgcolor='#4C0902'><p style='margin: 0 2px'>id</td>
<td align='left'   width='55'  style='color: #FFFF00' bgcolor='#4C0902'><p style='margin: 0 2px'>FirstName</td>
<td align='left'   width='55'  style='color: #FFFF00' bgcolor='#4C0902'><p style='margin: 0 2px'>LastName</td>
<td align='center' width='55'  style='color: #FFFF00' bgcolor='#4C0902'><p style='margin: 0 2px'>Add_Edit_Delete</td>
</tr>
<?php

// Execute requested query
$sql = ("SELECT * FROM members ");
   $result = mysql_query($sql);
      while($row = mysql_fetch_assoc($result)){
        $id        = $row[id];
        $FirstName = $row[firstname];
        $LastName  = $row[lastname];
           echo "<tr>
                 <td>$id</td>
                 <td>$FirstName</td>
                 <td>$LastName</td>
                 <td>
<input type='image' id='$id,$FirstName,$LastName' onclick='Split(this,1);+pressed=Add;' src='/images/add.jpg'>
<input type='image' id='$id,$FirstName,$LastName' onclick='Split(this,1);+pressed=Edit;' src='/images/edit.jpg'>
<input type='image' id='$id,$FirstName,$LastName' onclick='Split(this,1);+pressed=Delete;' src='/images/delete.jpg'>
</td>
</tr>" ; 
}
?>
</table>
</form>

Old Pedant · 12-21-2010, 01:33 AM

AHHHHH!!! NOW I *FINALLY* understand the purpose of all your posts.

I have to tell you, I probably wouldn't have done it this way, at all.

I probably would have simply created a separate <form> for *EACH ROW*, using hidden form fields.

It would be tons simpler, in the long run. But I'm not fanatic about it. You want to see my idea or stick with this scheme?

DataTalk · 12-21-2010, 01:38 AM

Thanks, Now you see it... I would love to see yours

Alse here is I wrote one that works,but the form creates a new row on each in submit so the report has 3 rows for each record.

Code:

<?php
include "includes/start_admin.php";
// You Are Now Connected - Session Started
?>
<script type="text/javascript"> 
function Split(sel,first) 
{
  if (sel.selectedIndex == 0 ) return;
  var temp = sel.id.split(",");
  sel.form1["F"+first].value = temp[0];
  sel.form1["F"+(first+1)].value = temp[1];
  sel.form1["F"+(first+2)].value = temp[2];
  sel.form1["F"+(first+3)].value = temp[3];
}
</script>
<table border='1' width='700' bgcolor='#FBF9FB'>
<tr><td>
<div align='left'>

<table border='1' bordercolor='#c0c0c0' width='700' cellpadding='0' style='border-collapse: collapse; font-size: 8pt; font-family: Arial;' >
<tr>
<td align='left'   width='55'  style='color: #FFFF00' bgcolor='#4C0902'><p style='margin: 0 2px'>Field</td>
<td align='left'   width='55'  style='color: #FFFF00' bgcolor='#4C0902'><p style='margin: 0 2px'>Type</td>
<td align='left'   width='55'  style='color: #FFFF00' bgcolor='#4C0902'><p style='margin: 0 2px'>Null</td>
<td align='left'   width='55'  style='color: #FFFF00' bgcolor='#4C0902'><p style='margin: 0 2px'>Key</td>
<td align='left'   width='55'  style='color: #FFFF00' bgcolor='#4C0902'><p style='margin: 0 2px'>Default</td>
<td align='left'   width='55'  style='color: #FFFF00' bgcolor='#4C0902'><p style='margin: 0 2px'>Extra</td>
<td align='center' width='75'  style='color: #FFFF00' bgcolor='#4C0902'><p style='margin: 0 2px'>Add&nbsp;&nbsp;Edit&nbsp;&nbsp;Del</td>
</tr>
<?php
// get the selected table from database 
$q= $_GET["q"];
$mytable = $_GET['q'] ;

// Define alternating row colors
   $color1 = "#FFFFFF";  // white
   $color2 = "#ECF1F2";  // blue
   $row_count = 0;  

// Execute requested query
$query = "SHOW COLUMNS FROM $mytable";
$result = mysql_query($query);  
while($columns = mysql_fetch_assoc($result)) {
$row_color = ($row_count % 2) ? $color1 : $color2; 
echo "<tr>
            <td bgcolor='$row_color'><p style='margin-left: 10px; margin-top: 0; margin-bottom: 0'>($row_count) $columns[Field]</td>
            <td bgcolor='$row_color'><p style='margin-left: 10px; margin-top: 0; margin-bottom: 0'>$columns[Type]</td>
            <td bgcolor='$row_color'><p style='margin-left: 5px;  margin-top: 0; margin-bottom: 0'>$columns[Null]</td>
            <td bgcolor='$row_color'><p style='margin-left: 5px;  margin-top: 0; margin-bottom: 0'>$columns[Key]</td>
            <td bgcolor='$row_color'><p style='margin-left: 5px;  margin-top: 0; margin-bottom: 0'>$columns[Default]</td>
            <td bgcolor='$row_color'><p style='margin-left: 5px;  margin-top: 0; margin-bottom: 0'>$columns[Extra]</td>
            <td align='center' bgcolor='$row_color'><p style='margin-left: 5px;  margin-top: 0; margin-bottom: 0'>
<form method='post' name='$row_count+1' action='sql_field_add.php'>
<input type='hidden' id='F101' name='F101' value='' >
<input type='hidden' id='F102' name='F102' value='' >
      <button type='submit' id='$mytable,$columns[Field]' onClick='Split(this,101)' style='margin:0; border:0px solid #FFFFFF; padding: 0; width: 12px; height: 12px'>
      <img src='static/icon25/add.jpg' style='border: 0px solid #E6E6FA word-spacing: 0; margin: 0; width: 12; height: 12;'></button></form>

<form method='post' name='$row_count+2' action='sql_field_edit.php'>
<input type='hidden' id='F201' name='F201' value='' >
<input type='hidden' id='F202' name='F202' value='' >
<input type='hidden' id='F203' name='F203' value='' >
      <button type='submit' id='$mytable,$columns[Field],$columns[Field]' onClick='Split(this,201)' style='margin:0; border:0px solid #FFFFFF; padding: 0; width: 12px; height: 12px'>
      <img src='static/icon25/edit.jpg' style='border: 0px solid #E6E6FA word-spacing: 0; margin: 0; width: 12; height: 12;'></button></form>

<form method='post' name='$row_count+3' action='sql_field_delete.php'>
<input type='hidden' id='F301' name='F301' value='' >
<input type='hidden' id='F302' name='F302' value='' >
      <button type='submit' id='$mytable,$columns[Field]' onClick='Split(this,301)' style='margin:0; border:0px solid #FFFFFF; padding: 0; width: 12px; height: 12px'>
      <img src='static/icon25/delete.jpg' style='border: 0px solid #E6E6FA word-spacing: 0; margin: 0; width: 12; height: 12;'></button></form>

</td>
</tr>" ;
// count row colors
$row_count++; 
}
?>
</table>
&nbsp;&nbsp;<font face="Arial" size="2" color="#0000FF">Table Name <b><?php echo $mytable; ?></b></font>
</form>
</div>
</tr>
</table>

Old Pedant · 12-21-2010, 01:39 AM

By the way, that code doesn't make sense on several fronts!

You split the ID and then you use *FOUR* parts from the result. But there are only 3 parts there. In addition, you put stuff into F1, F2, F3, F4...but there's no F4.

Finally, you are posting this page back to itself. So I guess using form fields named F1, F2, F3 is okay. But wouldn't it make more sense for the form fields to be named "id", "FirstName", "LastName"???

DataTalk · 12-21-2010, 01:50 AM

Quote:

Originally Posted by Old Pedant

By the way, that code doesn't make sense on several fronts!

You split the ID and then you use *FOUR* parts from the result. But there are only 3 parts there. In addition, you put stuff into F1, F2, F3, F4...but there's no F4.

Finally, you are posting this page back to itself. So I guess using form fields named F1, F2, F3 is okay. But wouldn't it make more sense for the form fields to be named "id", "FirstName", "LastName"???

I am using this script to add, edit, delete sql tables and fields. I was using the first posting as simple example because its easy to get confused when to much code is posted.

I just edited the posting, please don't be concerned about the xtra F1 F2 F3 because when this is done I will be adding additional values. I just want to be able to split and post to the proper add, edit, delete forms on one click, using an image instead of the html button. The code does work in all browsers but produces 3 rows for each record. Can I see your idea?

Old Pedant · 12-21-2010, 02:02 AM

How's this?

Code:

<html>
<head>
<script type="text/javascript">
function formop(inp,op)
{
    var form = inp.form;

    form.action = op + ".php";
    
    var temp = inp.split(",");
    form.id.value        = temp[0];
    form.FirstName.value = temp[1];
    form.LastName.value  = temp[2];
}
</script>
<style type="text/css">
th { 
    color: #FFFF00;
    background-color: #4C0902;
    margin: 0 2px;
    text-align: left;
}
</head>
<form method="post">
<input type="hidden" name="id">
<input type="hidden" name="FirstName">
<input type="hidden" name="LastName">

<table>
<tr>
    <th>id</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th style="text-align: center;">Add/Edit/Delete</th>
</tr>
<?php

// Execute requested query
$sql = ("SELECT * FROM members ");
   $result = mysql_query($sql);
      while($row = mysql_fetch_assoc($result)){
        $id        = $row[id];
        $FirstName = $row[firstname];
        $LastName  = $row[lastname];
           echo "<tr>
                 <td>$id</td>
                 <td>$FirstName</td>
                 <td>$LastName</td>
                 <td>
<input type='image' id='$id,$FirstName,$LastName' onclick='formop(this,\"add\");' src='/images/add.jpg'>
<input type='image' id='$id,$FirstName,$LastName' onclick='formop(this,\"edit\");' src='/images/edit.jpg'>
<input type='image' id='$id,$FirstName,$LastName' onclick='formop(this,\"delete\");' src='/images/delete.jpg'>
</td>
</tr>" ; 
}
?>
</table>
</form>
</body>
</html>

DataTalk · 12-21-2010, 02:21 AM

I really appreciate your help and insight.

I will try this, and work it into my sql editor...

The reason I was using F1, F2, F3..... because the values change on each submit

Notice that I am using a SQL_Table report to get the field names for each table
The user can click the image Add, Edit, Delete to open the form I created for editing the table or fields.

For Add - TableName
For Edit - TableName, Field, Field, Type, Default, Key, Null (need field twice)
For Delete - TableName, Field

When the data is posted in the editor, I will simply convert the posted data depending on where it needs to be,

$TableName = $_POST[F1];
$FieldName = $_POST[F2];
and so on.....

DataTalk · 12-21-2010, 03:05 AM

Here it is.. I revised the code for the sql editor I am working on, but it is not working...yet!

Code:

<?php
include "includes/start_admin.php";
// You Are Now Connected - Session Started
?>
<script type="text/javascript">
function formop(inp,op)
{
    var form = inp.form;

    form.action = op + ".php";
    
    var temp = inp.split(",");
form.TableName.value   = temp[0];
form.FieldName.value   = temp[1];
}
</script>
<table border='1' width='700' bgcolor='#FBF9FB'>
<form method="post">
<input type="text" name="TableName">
<input type="text" name="FieldName">
<tr><td>
<div align='left'>

<table border='1' bordercolor='#C0C0C0' width='700' cellpadding='0' style='border-collapse: collapse; font-size: 8pt; font-family: Arial;' >
<tr>
<td align='left'   width='55'  style='color: #FFFF00' bgcolor='#4C0902'><p style='margin: 0 2px'>Field</td>
<td align='left'   width='55'  style='color: #FFFF00' bgcolor='#4C0902'><p style='margin: 0 2px'>Type</td>
<td align='left'   width='55'  style='color: #FFFF00' bgcolor='#4C0902'><p style='margin: 0 2px'>Null</td>
<td align='left'   width='55'  style='color: #FFFF00' bgcolor='#4C0902'><p style='margin: 0 2px'>Key</td>
<td align='left'   width='55'  style='color: #FFFF00' bgcolor='#4C0902'><p style='margin: 0 2px'>Default</td>
<td align='left'   width='55'  style='color: #FFFF00' bgcolor='#4C0902'><p style='margin: 0 2px'>Extra</td>
<td align='center' width='75'  style='color: #FFFF00' bgcolor='#4C0902'><p style='margin: 0 2px'>Add&nbsp;&nbsp;Edit&nbsp;&nbsp;Del</td>
</tr>
<?php
// get the selected table from database 
$q= $_GET["q"];
$mytable = $_GET['q'] ;

// Define alternating row colors
   $color1 = "#FFFFFF";  // white
   $color2 = "#ECF1F2";  // blue
   $row_count = 0;  

// Execute requested query
$query = "SHOW COLUMNS FROM $mytable";
$result = mysql_query($query);  
while($columns = mysql_fetch_assoc($result)) {
$row_color = ($row_count % 2) ? $color1 : $color2; 
echo "<tr>
            <td bgcolor='$row_color'><p style='margin-left: 10px; margin-top: 0; margin-bottom: 0'>($row_count) $columns[Field]</td>
            <td bgcolor='$row_color'><p style='margin-left: 10px; margin-top: 0; margin-bottom: 0'>$columns[Type]</td>
            <td bgcolor='$row_color'><p style='margin-left: 5px;  margin-top: 0; margin-bottom: 0'>$columns[Null]</td>
            <td bgcolor='$row_color'><p style='margin-left: 5px;  margin-top: 0; margin-bottom: 0'>$columns[Key]</td>
            <td bgcolor='$row_color'><p style='margin-left: 5px;  margin-top: 0; margin-bottom: 0'>$columns[Default]</td>
            <td bgcolor='$row_color'><p style='margin-left: 5px;  margin-top: 0; margin-bottom: 0'>$columns[Extra]</td>
            <td align='center' bgcolor='$row_color'><p style='margin-left: 5px;  margin-top: 0; margin-bottom: 0'>
<input type='image' id='$mytable,$columns[Field]' onclick='formop(this,\"Sql_field_add\");'    src='static/icon16/add.jpg'>
<input type='image' id='$mytable,$columns[Field]' onclick='formop(this,\"Sql_field_edit\");'   src='static/icon16/edit.jpg'>
<input type='image' id='$mytable,$columns[Field]' onclick='formop(this,\"Sql_field_delete\");' src='static/icon16/delete.jpg'>                                                        
</td>
</tr>" ;
// count row colors
$row_count++; 
}
?>
</table>
&nbsp;&nbsp;<font face="Arial" size="2" color="#0000FF">Table Name <b><?php echo $mytable; ?></b></font>

</div>
</tr>
</form>
</table>

Old Pedant · 12-21-2010, 03:14 AM

Well, I don't use PHP, so I'm not sure how much seeing the PHP code would help, but I'd think that a person would need to see the PHP for at least one of the posted-to pages to help with this.

DataTalk · 12-21-2010, 04:00 AM

This test did not work!, The correct form opens, but the value does not post

Code:

<html>
</head>
<script type="text/javascript">
function formop(inp,op)
{
    var form = inp.form;

    form.action = op + ".php";
    
    var temp = inp.split(",");
    form.id.value        = temp[0];
    form.FirstName.value = temp[1];
    form.LastName.value  = temp[2];
}
</script>
</head>
<body>
<form method="post">
<input type="hidden" name="id">
<input type="hidden" name="FirstName">
<input type="hidden" name="LastName">

<input type='image' id='give,me,data' onclick='formop(this,"add");'   src='static/icon16/add.jpg'>
<input type='image' id='give,me,data' onclick='formop(this,"edit");'  src='static/icon16/edit.jpg'>
<input type='image' id='give,me,data' onclick='formop(this,"delete");'src='static/icon16/delete.jpg'>
</form>
</body>

DataTalk · 12-21-2010, 05:40 AM

This test is not producing any results

Code:

<html>
</head>
<script type="text/javascript">
function formop(inp,op)
{
    var form = inp.form;

    form.action = op + ".php";
    
    var temp = inp.split(",");
    form.id.value        = temp[1];
    form.FirstName.value = temp[2];
    form.LastName.value  = temp[3];
}
</script>
</head>
<body>
<form method="post">
<input type="hidden" name="id">
<input type="hidden" name="FirstName">
<input type="hidden" name="LastName">

<input type='image' id='show,me,data' onclick='formop(this,"add")';    src='static/icon16/add.jpg'>
<input type='image' id='show,me,data' onclick='formop(this,"edit")';   src='static/icon16/edit.jpg'>
<input type='image' id='show,me,data' onclick='formop(this,"delete")'; src='static/icon16/delete.jpg'>
</form>
</body>

Php test

Code:

<?php
// php test the post results
$id = "$_POST[id]";
$firstname = "$_POST[FirstName]";
$lastname  = "$_POST[LastName]";
// proof results
echo "<input type='text' name='id'    value='$id'>";
echo "<input type='text' name='first' value='$firstname'>";
echo "<input type='text' name='last'  value='$lastname'>";

?>