AboutPricingCommunityTeamsStart Free TrialLog in
Avatar of Ralph
Ralph
Flag for United States of America asked on

jQuery .prop change in 1 of 20 forms just doesn't work!

When clicking the
button (2nd one) it should clear elements then
  toggle [Update] disabled ON, (so [Update] is unavailable),
  and [New/Submit] disabled OFF, (so [New] is available).

When it does work, (19 of 20 forms) the HTML looks like this.
<span class="field_left field_buttons">
              <input ID="TableRefresh"  class="Button_Refresh"  type="reset"  value="Revert"   name="refresh_CustomerProgramTable" onclick="RevertForm('PopulateCustomerProgramTable')" />
              <input ID="TableClear"    class="Button_Clear"    type="button" value="Clear"    name="clear_CustomerProgramTable"   onclick="ClearFormElements('PopulateCustomerProgramTable')"/>
              <input ID="TableSearch"   class="Button_Search"   type="button" value="Search"   name="search_CustomerProgramTable" onclick="search_CustomerProgram()" />
            </span>
            <span class="field_center field_buttons"><input ID="TableNoteAdd"    class="Button_AddNote"     type="button" value="Add Note"      name="addnote_CustomerProgramTable" />
                                                     <input ID="TableNoteSearch" class="Button_SearchNotes" type="button" value="Search Notes"  name="searchnotes_CustomerProgramTable" /></span>
            <span class="field_right field_buttons"><input ID="TableUpdate"      class="Button_Update"      type="button" value="Update"        name="Update"    />
                                                    <input ID="TableSubmit"      class="Button_Submit"      type="submit" value="New"           name="commit_CustomerProgramTable" /></span>

Open in new window

When it does NOT work the HTML looks like this.
<span class="field_left field_buttons">
            <input  ID="TableRefresh"    class="Button_Refresh" type="reset"  value="Revert"    name="refresh_AircraftTable" onclick="RevertForm()" />
            <input ID="TableClear"       class="Button_Clear"   type="button" value="Clear"     name="clear_AircraftTable"   onclick="ClearFormElements('PopulateAircraftTable')"/>
            <input ID="TableSearch"      class="Button_Search"  type="button" value="Search"    name="search_AircraftTable"  onclick="search_Aircraft()" />
          </span>
          <span class="field_center field_buttons"><input ID="TableNoteAdd"   class="Button_AddNote"     type="button" value="Add Note"     name="addnote_AircraftTable" />
                                                   <input ID="TableNoteSearch" class="Button_SearchNotes" type="button" value="Search Notes" name="searchnotes_AircraftTable" /></span>
          <span class="field_right field_buttons"> <input ID="TableUpdate"     class="Button_Update"      type="button" value="Update"       name="Update"    />
                                                   <input ID="TableSubmit"     class="Button_Submit"      type="submit" value="New"          name="commit_AircraftTable" /></span>

Open in new window

The relevant JS:
function ClearFormElements(formId) 
{
  var nElements = document[formId].elements.length ;
  for (var i = 0; i < nElements; i++)
  {
      if (document[formId].elements[i].type === "text")
      { document[formId].elements[i].value="" ;  }
      
      if (document[formId].elements[i].type === "checkbox")
      { document[formId].elements[i].checked=false ;  }
      
      if (document[formId].elements[i].type === "textarea")
      { document[formId].elements[i].value="" ;  }
      
      if (document[formId].elements[i].type === "tel")
      { document[formId].elements[i].value="" ;  }
      
      if (document[formId].elements[i].type === "email")
      { document[formId].elements[i].value="" ;  }
      
      if (document[formId].elements[i].type === "number")
      { document[formId].elements[i].value="" ;  }
      
      if (document[formId].elements[i].type === "date")
      { document[formId].elements[i].value="" ;  }
      
      if (document[formId].elements[i].type === "select")
      { document[formId].elements[i].value="" ;  }
      
      if (document[formId].elements[i].type === "radio")
      { document[formId].elements[i].checked=false ;  }  
  }
  
  $("#TableSubmit").prop('disabled',false) ;
  $("#TableUpdate").prop('disabled',true) ;
  
  if (formId == "PopulateCustomerProgramTable") { $("input[name=cust_name]").prop('disabled',false) ; } 
}

function RevertForm(formId)
{ 
  $("#TableSubmit").prop('disabled',true) ;
  $("#TableUpdate").prop('disabled',false) ;
  if (formId == "PopulateCustomerProgramTable") { $("input[name=cust_name]").prop('disabled',true) ; }

Open in new window


W H Y ?

Does that happen to anyone else?
Any suggestions?  Is the solution obvious and I'm just not seeing it?

...Yes, more coding to do w/ the +/? Notes, Update, and Commit/New.  Not there yet.

Thanks!
JavaScript
Avatar of undefined
Last Comment
Ralph
8/22/2022 - Mon
Scott Fell
Please put together a working sample page and a non working sample page.  http://sscce.org/  Take out personal information and keep just the minimum amount to see it working.

It's hard to to see anything here because you are referencing a form, but the form code is not there.
Ralph
ASKER
Sure!
After some global find/replacing

The one that works
<!DOCTYPE html>

<html>
  <head>
    <title>Customer Program Table</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="http://10.139.164.5/Cell_Modems/CSS/PopulateTables.css">
    
    <script type="text/javascript" src="http://10.139.164.5/Cell_Modems/javascripts/TableScripts.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.1.js"></script>
    <script type="text/javascript">
      $(document).ready(Uncle_Table);
    </script>
    
  </head>
  <body>
    <div ID="tblUncle">
        <p style="font-weight: bold; font-size:1.2em; "> &nbsp; Table: Uncle</p>
        
        <form name="PopulateUncleTable"  ID="PopulateUncleTable"  action="populate_Uncle" class="form" >
          <p>
            <span class="field_left"> Customer: <input type="text" name="cust_name" value="" size="30"  disabled /></span>
            <span class="field_center"> Program Code: <input type="text" name="program_code" value="" size="15"   /></span>
            <span class="field_right" style="border: 1px solid transparent;  background-color: lightgray; "></span>
            <span class="small_height"></span>
        
            <span class="field_left field_buttons">
              <input ID="TableRefresh"  class="Button_Refresh"  type="reset"  value="Revert"   name="refresh_UncleTable" onclick="RevertForm('PopulateUncleTable')" />
              <input ID="TableClear"    class="Button_Clear"    type="button" value="Clear"    name="clear_UncleTable"   onclick="ClearFormElements('PopulateUncleTable')"/>
              <input ID="TableSearch"   class="Button_Search"   type="button" value="Search"   name="search_UncleTable" onclick="search_Uncle()" />
            </span>
            <span class="field_center field_buttons"><input ID="TableNoteAdd"    class="Button_AddNote"     type="button" value="Add Note"      name="addnote_UncleTable" />
                                                     <input ID="TableNoteSearch" class="Button_SearchNotes" type="button" value="Search Notes"  name="searchnotes_UncleTable" /></span>
            <span class="field_right field_buttons"><input ID="TableUpdate"      class="Button_Update"      type="button" value="Update"        name="Update"    />
                                                    <input ID="TableSubmit"      class="Button_Submit"      type="submit" value="New"           name="commit_UncleTable" /></span>
          </p>
        </form>
      </div>
  </body>
</html>

Open in new window



The one that doesn't.
<!DOCTYPE html>
<html>
  <head>
    <title>Fruit Table</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="http://10.139.164.5/Cell_Modems/CSS/PopulateTables.css">
    
    <script type="text/javascript" src="../../javascripts/TableScripts.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.1.js"></script>
    <script type="text/javascript">
      $(document).ready(Fruit_Table);
    </script>
    
  </head>
  <body>
    
    <div ID="tblFruit">
      <p style="font-weight: bold; font-size:1.2em; "> &nbsp; Table: Fruit</p>

      <form name="PopulateFruitTable" ID="PopulateFruitTable" action="populate_Fruit" class="form">
        <p>
          <span class="field_left searchable"> Fruit Registration #: <input type="text" name="Fruit_reg_no" value="" size="16" maxlength="16"  /></span>
          <span class="field_center"> Fruit Type: <input type="text" name="Fruit_type" value="" size="20" maxlength="20" /></span>
          <span class="field_right" style="border: 1px solid transparent;  background-color: lightgray; "></span>

          <span class="field_left"> IFE System Type: <input type="text" name="ife_system_type" value="" size="20" maxlength="20"  /></span>
          <span class="field_center">Fruit Status: 
            <select name="Fruit_status" style="padding-top: 4px">
              <option value="Fruit_status_choice0">Select Fruit Status</option>
              <option value="Fruit_status_choice1">Fruit status choice 1</option>
              <option value="Fruit_status_choice2">Fruit status choice 2</option>
              <option value="Fruit_status_choice3">Fruit status choice 3</option>
            </select>
          </span>
          <span class="field_right" style="border: 1px solid transparent;  background-color: lightgray; "></span>
          <span class="small_height"></span>

          <span class="field_left field_buttons">
            <input  ID="TableRefresh"    class="Button_Refresh" type="reset"  value="Revert"    name="refresh_FruitTable" onclick="RevertForm()" />
            <input ID="TableClear"       class="Button_Clear"   type="button" value="Clear"     name="clear_FruitTable"   onclick="ClearFormElements('PopulateFruitTable')"/>
            <input ID="TableSearch"      class="Button_Search"  type="button" value="Search"    name="search_FruitTable"  onclick="search_Fruit()" />
          </span>
          <span class="field_center field_buttons"><input ID="TableNoteAdd"   class="Button_AddNote"     type="button" value="Add Note"     name="addnote_FruitTable" />
                                                   <input ID="TableNoteSearch" class="Button_SearchNotes" type="button" value="Search Notes" name="searchnotes_FruitTable" /></span>
          <span class="field_right field_buttons"> <input ID="TableUpdate"     class="Button_Update"      type="button" value="Update"       name="Update"    />
                                                   <input ID="TableSubmit"     class="Button_Submit"      type="submit" value="New"          name="commit_FruitTable" /></span>
        </p>
      </form>
    </div>
  </body>
</html>

Open in new window


The JS is the same.

Please let me know if I went too far, (not far enough isn't that critical here).

Thank you.
SOLUTION
Scott Fell
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
ASKER CERTIFIED SOLUTION
Kim Walker
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Ralph
ASKER
Well, xmediaman, you win the prize for solving the problem
AND for creating a larger quandary (which I will chose to ignore).

including the full path makes the buttons work as desired.

However, A) there is only one TableScripts.js file in the entire project tree, and
B) In both the working and previously not working usages of that JS file, entering text to search by in the field Fruit Registration # made heavy use of that JS file to do AJAX and more jQuery.
The way I'm using AJAX the php_parameters I'm also passing would not match with anything in my other JS files!

So I'm at a loss to understand why that made a useful difference.

-- -- --

It fits in the same Twilight Zone as my other oddity.

There I have a large PHP tool I wrote that takes a clean HTML file and using functions it correctly places and sets values, check- and radioboxes, select options, etc.

The mystery there is I save the new lines of html to a file and then use jQuery to load that into the correct DIV.
Works fine for 19 of 20 forms.
In the one that it doesn't, it somehow swaps the last 5 lines of the HTML file into reverse order as PHP writes the modified HTML to disk.

Before and after it writes to the file  I
echo htmlspecialchars($lines[$i])."</br>"  in a for/loop.
All the array is in fine working order before and after the write.

It's consistent about it at least!  Here's what gets written out.
<span class="field_center field_buttons"><input ID="TableNoteAdd"    class="Button_AddNote"     type="button" value="Add Note"     name="addnote_ModemActivityTable" />
                                                     <input ID="TableNoteSearch" class="Button_SearchNotes" type="button" value="Search Notes" name="searchnotes_ModemActivityTable" /></span>
            <span class="field_right field_buttons"> <input ID="TableUpdate"     class="Button_Update"      type="button" value="Update"       name="Update"    />

</html>
  </body>
      </div>
        </form>
          </p>
                                                     <input ID="TableSubmit"     class="Button_Submit"      type="submit" value="New"          name="commit_ModemActivityTable" /></span>

Open in new window


Just odd!

-- -- --

Thank you both!
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Plans and Pricing
Resources
Product
Podcasts
Careers
Contact Us
Teams
Certified Expert Program
Credly Partnership
Udemy Partnership
Privacy Policy
Terms of Use

© 1996-2023 Experts Exchange, LLC. All rights reserved. Covered by US Patent