Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
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
Medium Priority
?
2,152 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 

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
 
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 1500 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

715 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