locked
New to Web Dev? Using a Table while adding textboxes for user input RRS feed

  • Question

  • User899457413 posted

    Afternoon all. I have a Table object where i have added Textbox's and Some buttons to the Table. The Purpose is to Validate some user input, Provide feed back to the input i.e( User pushed the Button, Change the Text and Color of the Button). onClick my Functions fires to change the object(ID), but immediately changes back to default. Not sure how to troubleshoot the postback event of the Table / button events, or what is calling the postback. Keep in mind New to Web Development.

    Code:

    function ChangeButtonText(id) {

                   button = document.getElementById(ID);
                    button.innerHTML = vStrSanitized;
                    button.style.backgroundColor = "LimeGreen";
                    button.style.textDecoration = "Blink";

    }

     <table id="skPcsTbl" border="1" class="auto-style4">
                <tr>
                    <td class="styleShift">Shift</td>
                    <td class="styleLine">Line</td>
                    <td class="styleBuckets">Buckets</td>
                    <td class="styleConveyors" id="skPcs_Conv" aria-checked="mixed" aria-selected="true">Conveyors</td>
                    <td class="styleNapkin">Napkin Carousel(If Applicable)</td>
                    <td class="styleRollers">Film/Napkin Rollers</td>
                    <td class="styleStraw">Straw Dispenser (If Applicable)</td>
                    <td class="styleFeedTable">Feed Table</td>
                    <td class="styleUpConv">Up Conveyor(If Applicable)</td>
                    <td class="styleShaker">Shaker Conv(If Applicable)</td>
                    <td class="styleEmpinit">Emp Initials</td>
                </tr>
                <tr>
                    <td>
                        <input type="text" class="styleShift" id="tbCurrShift" onload="getCurrentShift(this.id)" /></td>
                    <td>
                        <input type="text" class="styleLine" id="tbMachID" /></td>
                    <td>
                        <button class="styleBuckets" id="btnBuckets" onclick="ChangeButtonText(this.id);">Not Sanitized</button></td>
                    <td>
                        <button class="styleConveyors" id="btnConv" onclick="ChangeButtonText(this.id);">Not Sanitized</button></td>
                    <td>
                        <button class="styleNapkin" id="btnNapkin" onclick="ChangeButtonText(this.id);">Not Sanitized</button></td>
                    <td>
                        <button class="styleRollers" id="btnRollers" onclick="ChangeButtonText(this.id);">Not Sanitized</button></td>
                    <td>
                        <button class="styleStraw" id="btnStraw" onclick="ChangeButtonText(this.id);">Not Sanitized</button></td>
                    <td>
                        <button class="styleFeedTable" id="btnFeedTbl" onclick="ChangeButtonText(this.id);">Not Sanitized</button></td>
                    <td>
                        <button class="styleUpConv" id="btnUpConv" onclick="ChangeButtonText(this.id);">Not Sanitized</button></td>
                    <td>
                        <button class="styleShaker" id="btnShaker" onclick="ChangeButtonText(this.id);">Not Sanitized</button></td>
                    <td>
                        <input type="text" class="styleEmpinit" value="Initials" /></td>
                </tr>
            </table>

    Thank you for any directions the group can provide.

    Alan C.

    Tuesday, January 3, 2017 7:32 PM

All replies

  • User527778624 posted

    Hi,

    Button tag tries to submit the form.

    Try using Input type="button" instead.

    or, try change your code to return false.

    function ChangeButtonText(me) {
    
                   var button = me; //document.getElementById(ID);
                    button.innerHTML = vStrSanitized;
                    button.style.backgroundColor = "LimeGreen";
                    button.style.textDecoration = "Blink";
                return false;
    }
    
    <button class="styleBuckets" id="btnBuckets" onclick="return ChangeButtonText(this);">Not Sanitized</button>

    Wednesday, January 4, 2017 6:12 AM
  • User-707554951 posted

    Hi Alan Cannon,

    For your problem. it’s mainly reason is that the default type of your button is submit. So, a post back will be occur.

    You need set type of your html button as button type.

    Besides, please pay attention to the changes in js function the following code:

     <script>
            function ChangeButtonText(id) {
                button = document.getElementById(id);
                button.innerHTML = "vStrSanitized";    
                button.style.backgroundColor = "LimeGreen";
                button.style.textDecoration = "blink";        
            }
        </script>
    
     <table id="skPcsTbl" border="1" class="auto-style4">
                <tr>
                    <td class="styleShift">Shift</td>
                    <td class="styleLine">Line</td>
                    <td class="styleBuckets">Buckets</td>
                    <td class="styleConveyors" id="skPcs_Conv" aria-checked="mixed" aria-selected="true">Conveyors</td>
                    <td class="styleNapkin">Napkin Carousel(If Applicable)</td>
                    <td class="styleRollers">Film/Napkin Rollers</td>
                    <td class="styleStraw">Straw Dispenser (If Applicable)</td>
                    <td class="styleFeedTable">Feed Table</td>
                    <td class="styleUpConv">Up Conveyor(If Applicable)</td>
                    <td class="styleShaker">Shaker Conv(If Applicable)</td>
                    <td class="styleEmpinit">Emp Initials</td>
                </tr>
                <tr>
                    <td>
                        <input type="text" class="styleShift" id="tbCurrShift" onload="getCurrentShift(this.id)" /></td>
                    <td>
                        <input type="text" class="styleLine" id="tbMachID" /></td>
                    <td>
                        <button class="styleBuckets"  type="button" id="btnBuckets" onclick="ChangeButtonText(this.id);">Not Sanitized</button></td>
                    <td>
                        <button class="styleConveyors" type="button" id="btnConv" onclick="ChangeButtonText(this.id);">Not Sanitized</button></td>
                    <td>
                        <button class="styleNapkin"  type="button" id="btnNapkin" onclick="ChangeButtonText(this.id);">Not Sanitized</button></td>
                    <td>
                        <button class="styleRollers" type="button" id="btnRollers" onclick="ChangeButtonText(this.id);">Not Sanitized</button></td>
                    <td>
                        <button class="styleStraw" id="btnStraw" onclick="ChangeButtonText(this.id);">Not Sanitized</button></td>
                    <td>
                        <button class="styleFeedTable" id="btnFeedTbl" onclick="ChangeButtonText(this.id);">Not Sanitized</button></td>
                    <td>
                        <button class="styleUpConv" id="btnUpConv" onclick="ChangeButtonText(this.id);">Not Sanitized</button></td>
                    <td>
                        <button class="styleShaker" id="btnShaker" onclick="ChangeButtonText(this.id);">Not Sanitized</button></td>
                    <td>
                        <input type="text" class="styleEmpinit" value="Initials" /></td>
                </tr>
            </table>

    Output screenshot as below:

    As you can see in the picture, when click fifth button, a whole post back occurred, all the style you set before through js function disappeared.

    Best Regards

    Cathy

    Wednesday, January 4, 2017 6:48 AM
  • User899457413 posted

    Thank you very much for the information it is much appreciated.Smile

    1 additional Structure question if you may. I have a class (SK_DKpcsValidation) used on "Form 2" the user is obliged to get to "Form 2" from "Form1" by selecting a Radio button "Machine Sanitized" which on CheckChanged calls the following:
        protected void PCSVerified_CheckedChanged(object sender, EventArgs e)
        {

            if ((SelectedDeptID > 0) & (PCSFormLink != null))
            {
                string redirect = "~/" + PCSFormLink + ".aspx";
                Response.Redirect(redirect);
            }
              
        }

    _____________________________________

    public class SK_DKpcsValidation
    {
        public Boolean bucket = false;
        public Boolean conveyors = false;
        public Boolean Napkin = false;
        public Boolean Rollers = false;
        public Boolean Straw = false;
        public Boolean FeedTable = false;
        public Boolean UpConv = false;
        public Boolean Shaker = false;
    }

    And i am using it in my page to set bits, but i do not seem to understand the concept for my searching as the values are not setting for use in other forms. On a Button click i wanted to perform a Validtation of the User input "Checked the Boxes and filled out information....", so i used the table Buttons events to set bits. When the Validate button event fires and i debug the code the Class members are all false?

    So i either failed to understand the  implementation of (<%=XXXX) or i missed an additional step to set the values of my Class?

    HTML Code:

    <script type="text/javascript" style="background-color: #00FF00">

                function ChangeButtonText(id) {
                    var vStrSanitized = "Sanitized";
                    var vStrNotSanitized = "Not Sanitized";
                    var ID = id;
                    var button;

                    // We need to gather the Status of the items for evaluation and setting based on the events
                    // Since Javascript does not like CapF in False we have to Convert each object
                    var skPcsStatus_Bucket = new String(<%=skPcsValid.bucket.ToString().ToLower()%>);
                    var skPcsStatus_Conv = new String(<%=skPcsValid.conveyors.ToString().ToLower()%>);
                    var skPcsStatus_Napkin = new String(<%=skPcsValid.Napkin.ToString().ToLower()%>);
                    var skPcsStatus_Rollers = new String(<%=skPcsValid.Rollers.ToString().ToLower()%>);
                    var skPcsStatus_Straw = new String(<%=skPcsValid.Straw.ToString().ToLower()%>);
                    var skPcsStatus_FeedTbl = new String(<%=skPcsValid.FeedTable.ToString().ToLower()%>);  
                    var skPcsStatus_UpConv = new String(<%=skPcsValid.UpConv.ToString().ToLower()%>);
                    var skPcsStatus_Shaker = new String(<%=skPcsValid.Shaker.ToString().ToLower()%>);       
                    button = document.getElementById(ID);

                    //
                    switch(ID){
                        case 'btnBuckets':
                            if (button.innerHTML == vStrNotSanitized) {
                                button.innerHTML = vStrSanitized;
                                skPcsStatus_Bucket = true; // Just for Debugging to see if i am getting the values
                                document.getElementById(ID).style.backgroundColor = "LimeGreen";
                                document.getElementById(ID).style.textDecoration = "Blink";
                                (<%=skPcsValid.bucket.ToString().ToLower()%>).Value=true; // This should set the Class member value
                                break;
                            }else if(button.innerHTML == vStrSanitized){
                                (<%=skPcsValid.bucket.ToString().ToLower()%>).Value=false;
                                    skPcsStatus_Bucket = false; // Just for Debugging to see if i am getting the values
                                    button.innerHTML = vStrNotSanitized;
                                    document.getElementById(ID).style.backgroundColor = "LightGray";
                                    document.getElementById(ID).style.textDecoration = "";
                                    break;
                                }

    Form data:

    public partial class SchoolKit_PCS : System.Web.UI.Page
    {
        static public SK_DKpcsValidation skPcsValid = new SK_DKpcsValidation();
        public string vStrSanitized = "Sanitized";
        public string vStrNotSanitized = "Not Sanitized";


        protected void Page_Load(object sender, EventArgs e)
        {
            // Close the First time event of data loading with !isPostback
            if (!Page.IsPostBack)
            {
                DateTime todayDate = DateTime.Now;
                tbSKPCS_Date.Text = Convert.ToString(todayDate);
            }

        }

        protected void btnSchoolKitValidate_Click(object sender, EventArgs e)
        {
            bool bucket = skPcsValid.bucket;
            bool conveyor = skPcsValid.conveyors;
            bool Sum = (bucket & conveyor);

            if (Sum) {
                Label1.Text = "Valid";
            }
            else {
                Label1.Text = "In Valid";
            }
        }

    }

    Wednesday, January 4, 2017 4:19 PM
  • User-707554951 posted

    Hi Alan Cannon,

    Considering the solution  of your original problem have been given.

    And this is a new problem. I suggest you could post it in a new thread.

    Best Regards

    Cathy

    Friday, January 13, 2017 7:21 AM