Link to home
Create AccountLog in
Avatar of Ralph
RalphFlag 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!
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

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.
Avatar of 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
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
ASKER CERTIFIED SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of 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!