HOWTO: text as a submit button 3

[awingnut]

This is actually a 2 part question, which hopefully is not too complicated to implement.

I have a table and in each row there needs to be a text input field and a plain text string. Each row needs to have the equivalent of 2 button actions ('Change' and 'Update') but without looking like buttons.

1. The 'Change' "button": The text string of each row needs to behave like a submit button but include itself as an argument string as well as the input field, if any. This field is not changeable by the user (actually the page is PHP with mysql calls).

2. The 'Update' "button": If the return key is pressed when in the input field I want that to behave like a button with the "Update" value.

Aside from not knowing how to format the text to act like a button but without looking like one, it is not clear to me how to get the data from just that row without all the others as well. Any sugggestions would be appreciated. TIA.

 

[mwolf00]

What is the difference between Change and Update? Can you post just a few lines of the HTML output so we can see how you're formatting your form?

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

 

[Vragabond]

As for formatting text that looks like a button, why not do it the other way around?

<input type=&quot;submit&quot; name=&quot;Change&quot; value=&quot;Change&quot; style=&quot;border: none; text-decoration: underline; background: white; cursor: pointer; color: blue;&quot;>

One linklike button.

Hope this helps.

 

[mwolf00]

Even easier...

<a href=&quot;javascript: document.myForm.submit()&quot;>Update</a>

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

 

[awingnut]

mwolf00: 1

'Change' just changes the status (essentially a boolean field) in a MySQL table while 'Update' inserts the text input field in the table. That is just

Vragabond:

Thanks but I want the text to NOT look like a button. I want it to look like a link but act like a button.

mwolf00: 2

I'm not too well versed on javascript (I have done some) but how does this set up the URL to pass the appropriate variables from the form? And specifically only the variables from that specific row.

 

[Vragabond]

awingnut, I admit mwolf's solution is simpler and clearer but my code does just what you asked: look like a link but act like a button (since it is a button it acts like a button, but looks like a link). Either I went totaly blind or you commented on my code without even checking it.

 

[awingnut]

Sorry. I thought I copied your code correctly. It still looks like a button when I display the page. I guess I need to stare at it more to see what I copied wrong. Probably a case of not seeing the forest because there are too many trees in the way.

 

[awingnut]

I figured it out. It is a problem with the browser, IE and NetScape work fine but Safari apparently doesn't support 'style' in an input tag.

That still leaves the problem of passing ONLY the text field in the row that was clicked rather then from all rows.

 

[mwolf00]

You could make each row it's own form....

<style>
form {diplay: inline;}
</style>

<table>

<tr><form name=&quot;form1&quot; onClick=&quot;handler.asp&quot;>
<td><input name=&quot;field1&quot; value=&quot;Tom&quot;></td>
<td><input name=&quot;field2&quot; value=&quot;Blue&quot;></td>
<td><a href=&quot;javascript: document.form1.submit()&quot;>Update</a> </td>
</form></tr>

<tr><form name=&quot;form2&quot; onClick=&quot;handler.asp&quot;>
<td><input name=&quot;field1&quot; value=&quot;Betty&quot;></td>
<td><input name=&quot;field2&quot; value=&quot;Green&quot;></td>
<td><a href=&quot;javascript: document.form2.submit()&quot;>Update</a> </td>
</form></tr>
</table>


Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

 

[awingnut]

Thanks. I was thinking of that but thought there might be an easier way with a single form. I guess I can do that.

 

[Vragabond]

Note though that putting <form> tag in between <tr> and <td> is not a legitimate html code, so if you care about w3c compliance, you should avoid it.

 

[mwolf00]

I didn't like it there either - was just simplest to show what I meant...

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

 

[awingnut]

Hmmm. If that is not legit, what do I do?

 

[mwolf00]

<tr>
<td><form><table>
<tr>
<td><input></td>
<td><input></td>
</tr>
</table></form></td>
</tr>

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

 

[awingnut]

Yuck, each table row has to be a table with a form in it?

 

[mwolf00]

It's all up to you.

You could have one hidden form that you move the values to and have that submit.
You could use paragraphs or divs instead of tables.

Isn't this form generated dynamically anyways?

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

 

[awingnut]

Yes it is generated by a PHP program. I was making sure I understood the rules. I think what you are saying is that I can generate a table with a single column then each item in a row of that column is a table and form with 1 row and n columns.

<table>
   <tr><td>
      <table><form name=&quot;form1&quot;>
         <tr>
             <td><input name=&quot;field1&quot;></td>
             <td>Some text</td>
             <td><input name=&quot;field2&quot;></td>
         </tr>
      </form></table>
   </td></tr>
   <tr><td>
      <table><form name=&quot;form2&quot;>
         <tr>
             <td><input name=&quot;field1&quot;></td>
             <td>Some text</td>
             <td><input name=&quot;field2&quot;></td>
         </tr>
      </form></table>
   </td></tr>
</table>

I'm not sure I understood the <div> reference. Is this what you mean:

<table>
   <tr>
      <div><form name=&quot;form1&quot;>
         <td><input name=&quot;field1&quot;></td>
         <td>Some text</td>
         <td><input name=&quot;field2&quot;></td>
      </form></div>
  </tr>
   <tr>
      <div><form name=&quot;form2&quot;>
         <td><input name=&quot;field1&quot;></td>
         <td>Some text</td>
         <td><input name=&quot;field2&quot;></td>
      </form></div>
  </tr>
</table>

 

[mwolf00]

I was saying that you could use divs or paragraphs in place of tables. I just comes down to how you want to display your forms...

Another option altogether would be having only one hidden form that submits - like this...

<script>
function subForm(inID){
theRow = document.getElementById(inID)
document.hiddenForm.field1.value = theRow.firstChild.firstChild.value
document.hiddenForm.field2.value = theRow.childNodes[1].firstChild.value
document.hiddenForm.submit()
}
</script>

<form name=&quot;dummyForm&quot;>
<table>
<tr id='row1'>
<td><input name=&quot;field1&quot; value=&quot;Tom&quot;></td>
<td><input name=&quot;field2&quot; value=&quot;Blue&quot;></td>
<td><a href=&quot;subForm('row1')&quot;>Update</a> </td>
</tr>
<tr id='row2'>
<td><input name=&quot;field1&quot; value=&quot;Betty&quot;></td>
<td><input name=&quot;field2&quot; value=&quot;Green&quot;></td>
<td><a href=&quot;subForm('row2')&quot;>Update</a></td>
</tr>=
</table>
</form>

<form name=&quot;hiddenForm&quot; action=&quot;somePage.asp&quot;>
<input type=hidden name=&quot;field1&quot;>
<input type=hidden name=&quot;field2&quot;>
</form>

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

 

[awingnut]

Cool! I like that a one. Thanks.

 

[awingnut]

After mulling this over, I have a few questions about how to implement it for my specific situation.

1. In dummyForm the text in field1 and field2 need to look like links but act like a submit button. It appears to me that your 3rd column is the submit button.

2. The 3rd field is a text box with needs to be passed with the submit. However, here is the kicker. If the 'return' key is pressed when in text box, it needs to be submited but with a different 'submit' value.

In other words when a 'link' is clicked (field1 or field2) the URL should have (from that row):

'?submit=change&field1=whatever&field2=whateverelse&field3=typed%20stuff

When 'return' is pressed while in the text box the URL should have (from that row):

'?submit=update&field1=whatever&field2=whateverelse&field3=typed%20stuff

Not being a javascript expert, it is not clear to me how to accomplish that.

P.S. Should we move this to the javasript forum?