Solved

Disable submit button as long as their is a value in the name field on the first row only.

Posted on 2003-11-10
13
2,141 Views
Last Modified: 2008-03-10
Hi!

I have a table that was created with xslt.
It has a blank row at the top with an add button to the far right.

Is there a way to detect if someone has entered a value in the "name"
field only on the top row then the submit button will be disabled
until the add button is pressed (which causes the contents of the top
row to be moved to the bottom of the table and clears the top row
(this all works) or there is no longer a value in the name field on
the top row. So long as there is a value in the top row's name field
the submit button must be disabled.

I have rows below the first row that will have values in the name
field. It must check just the first row's name field.

The reason for all of this is several users have filled out the top
row and then submitted the form without pressing the add button so the
new information was never sent.

Any suggestions would be greatly appreciated.

Chuck

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
   xmlns:msxsl="urn:schemas-microsoft-com:xslt"
   xmlns:user="https://www.xyz.com/mynamespace">

  <xsl:output method="html" version="4.0"/>

     <table style="font-size: 10pt" width="100%" border="1"
bordercolor="#418181" cellpadding="2" cellspacing="0">
      <tr style="background-color:#CBCCDA">
        <th>Order</th>
        <th>Name</th>
        <th>Phone 1</th>
        <th>Phone 2</th>
        <th>Add/Delete</th>
      </tr>
      <!--
         Creates row of blank fields for adding records
      -->
        <tr>
<xsl:attribute name="bgcolor"><xsl:choose><xsl:when test="position()
mod 2 =
1">#F0F1F5</xsl:when><xsl:otherwise>#E0DFE3</xsl:otherwise></xsl:choose></xs
l:attribute>
          <td align="center">
            <INPUT maxLength="2" name="order" size="2" value=""/>
          </td>
          <td align="center">
            <INPUT maxLength="30" name="name" size="28" value=""/>
          </td>
          <td align="center">
            <INPUT maxLength="30" name="priphone" size="28" value=""/>
          </td>
          <td align="center">
            <INPUT maxLength="30" name="altphone" size="28" value=""/>
          </td>
         <td align="center">
            <INPUT type="button" name="add" value="Add">
<xsl:attribute name="onclick"><![CDATA[ if((document.form1.order.value
== '') ||
              (document.form1.order[0].value == '')) {
if(document.form1.order.length == undefined)
              { document.form1.order.value = '1'; } else {
document.form1.order[0].value = ']]>
              <xsl:value-of select="$users + 1"/><![CDATA['; }}
              if(doSubmit) { document.form1.submit(); }
]]></xsl:attribute>
            </INPUT>
          </td>
        </tr>
      <tr style="background-color:#CBCCDA">
        <td ALIGN="CENTER">
              <xsl:attribute name="colspan">10</xsl:attribute>
          &#160;&#160;
   <input type="submit" NAME="sendChanges" VALUE="Only Press Once to
Send Changes">
              <xsl:attribute name="onclick"><![CDATA[ if(doSubmit) {
document.form1.submit(); } ]]></xsl:attribute>
            </input>
         </td>
      </tr>
    </table>
  </xsl:template>
 <xsl:template match="contact">
    <tr>
      <td align="center">
           <xsl:value-of select="position()"/>
      </td>
      <td align="center">
            <INPUT maxLength="30" name="name" size="28"
value="{con_nam}"/>
      </td>
      <td align="center">
            <INPUT maxLength="12" name="priphone" size="12"
value="{con_mph}"/>
      </td>
      <td align="center">
            <INPUT maxLength="12" name="altphone" size="12"
value="{con_aph}"/>
      </td>
        <td align="center">
          <INPUT type="button" name="delete" value="Delete"
onclick="document.form1.itemToDelete.value={position()};document.form1.submi
t();"/>
        </td>
    </tr>
  </xsl:template>

  <xsl:template match="node()|@*"/>
</xsl:stylesheet>

0
Comment
Question by:TrueBlue
  • 5
  • 4
  • 2
  • +1
13 Comments
 
LVL 4

Expert Comment

by:astankovic
ID: 9717763
Maybe you can do it as follows:
-When page loads the Submit button is disabled
-When user click on Add button you eable the Submit button.
?
If that satisfies the required logic it is much easiery to enable/disalbe something when user clicks on something else, then to constantly monitor a field and then disable a button.
Alex
0
 
LVL 4

Expert Comment

by:af500
ID: 9717875
So, only if the name has data disable the submit button?
0
 
LVL 4

Expert Comment

by:af500
ID: 9718123
I don't know what you are talking about. Perhaps it is a bug in your web application, but this is the second person you asked me about today!
0
 

Author Comment

by:TrueBlue
ID: 9718881
Hi!

The idea of starting the page with the submit button disabled is interesting.
I see two problems though:

1) A user may add a record then fill out the top row again, then forget to press the add button and click the submit button. Then the data is emailed to us, but the new data in the top row was not because they never added it.

Which is exactly what happened recently.

2) Sometimes no new rows are added only existing ones are edited or deleted.

I would greatly appreciate some more thoughts on this subject.

Chuck

0
 
LVL 1

Expert Comment

by:oktexasguy
ID: 9719278
perhaps instead of a submit button you can use a normal button:

<input type="button" value="submit" onclick="if( doValidation() ){document.forms[0].submit;}"/>

in the script header have a method called doValidation() that does the following:

function doValidation(){
  if( [data in row not entered] ){
    alert('you have not added the latest data!');
    return false;
  }
  if( [no data] ){
    alert('no data!');
    return false;
  }
  return true;
}

I can help you flesh out the data tests if you'd like but I think you'll find that pretty trivial.
0
 

Author Comment

by:TrueBlue
ID: 9719450
Hi OkTexasGuy!

I would greatly appreciate help on the data tests.

How would I integrate your suggestion of

onclick="if( doValidation() ){document.forms[0].submit;}"/

with my existing button?

<input type="submit" NAME="sendChanges" VALUE="Only Press Once to
Send Changes">
              <xsl:attribute name="onclick"><![CDATA[ if(doSubmit) {
document.form1.submit(); } ]]></xsl:attribute>
            </input>

Any advantage in placing this script on the xsl page as opposed to my asp page?

Chuck
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 1

Expert Comment

by:oktexasguy
ID: 9723899
>> Any advantage in placing this script on the xsl page as opposed to my asp page?
None except for convenience.  Since it is javascript it can be placed wherever and will only be executed on the client.

I don't mind helping you to write the data tests.  What I do need is either a sample xml file I can use to generate the html or just a sample of the generated html.
0
 

Author Comment

by:TrueBlue
ID: 9724598
Hi oktexasguy!

If this is not what you need, let me know.

Thank you...

Chuck

<?xml version="1.0" encoding="utf-8" ?>
- <contactlist xmlns="http://www.xyz.com">
  <returncode>string</returncode>
- <contacts>
- <contact>
  <con_nam>John Doe</con_nam>
  <con_mph>222-555-1212</con_mph>
  <con_aph>222-555-1313</con_aph>
  </contact>
- <contact>
  <con_nam>Jane Doe</con_nam>
  <con_mph>305-555-1414</con_mph>
  <con_aph>305-555-1515</con_aph>
  </contact>
- <contact>
  <con_nam>Joe Somebody</con_nam>
  <con_mph>813-555-1212</con_mph>
  <con_aph>813-555-1313</con_aph>
  </contact>
  </contacts>
  </contactlist>
0
 
LVL 1

Expert Comment

by:oktexasguy
ID: 9732425
TrueBlue-

When I tried transforming the xml with the xsl you provided I noticed that your first template in the xsl is missing an opening tag.  I tried <xsl:template match"/"> but got an error when I tried the transform (variable or parameter 'users' is undefined).  I don't mind helping you to write the tests but need to know what the generated html will look like in order to write the javascript.
0
 

Author Comment

by:TrueBlue
ID: 9736046
Hi oktexasguy!

You are correct.  

If you replace the part of script above the <table style ...

with this I think it will work for you.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
   xmlns:msxsl="urn:schemas-microsoft-com:xslt"
   xmlns:user="https://www.xyz.com/mynamespace">

 <xsl:variable name="users">
    <xsl:value-of select="count(/contactlist/contacts/contact)"/>
  </xsl:variable>

  <xsl:output method="html" version="4.0"/>

 <xsl:template match="/contactlist">

  <table style ....
0
 
LVL 1

Accepted Solution

by:
oktexasguy earned 500 total points
ID: 9740302
<script>
function doValidation(){
  // unadded data?
  var inputs = document.getElementsByTagName('INPUT');
  var unadded = false;
  for( var c=0; c<inputs.length; c++ ){
    if( inputs[c].type == 'text' && inputs[c].value.length != 0 ){
        unadded = true;
        break;
      }
  }
  if( unadded ){
    alert('you have not added the latest data!');
    return false;
  }
  // I'm unsure exactly how to do the data test.  It's unclear to me
  // what happens when the add button is pressed.  If you are keeping
  // the added items in an array then check the array length.  If they
  // are just being added as rows in a table check the table.rows length.
  if( [your test for no data here] ){
    alert('no data!');
    return false;
  }
  return true;
}
</script>

<input type="button" value="submit" onclick="if( doValidation() ){document.forms[0].submit;}"/>

By using a "button" type input you can selectively submit the form only if the tests are passed.
0
 

Author Comment

by:TrueBlue
ID: 9741981
Hi oktexasguy!

When the add button is pressed the new data is added as the last row in the table, how would I test for this?

Thank you for your help.

Chuck
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now