locked
Button click function triggering even keeping the cursor on input text control RRS feed

  • Question

  • User-571605279 posted

    Dear All,

    I had written the below code which is working fine to fetching the values of all the columns of a row including controls on button click.
    But my function is also triggering even keeping the cursor input text control.

    Can any one please do let me know for what reason it is functioning and how can I solve it

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #customers {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }
    
    #customers td, #customers th {
        border: 1px solid #ddd;
        padding: 8px;
    }
    
    #customers tr:nth-child(even){background-color: #f2f2f2;}
    
    #customers tr:hover {background-color: #ddd;}
    
    #customers th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: #4CAF50;
        color: white;
    }
    </style>
    </head>
    <body>
    
    <table id="customers">
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
        <td><input type="text"  id="'+"txtparticipants"+'" ></td>
        <td><input type="button" value="Submit" class="use-address" onclick="submitvallues()"></td>
      </tr>
      
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td><input type="text"  id="'+"txtparticipants"+'" ></td>
        <td><input type="button" value="Submit" class="use-address" onclick="submitvallues()"></td>
      </tr>
      
      <tr>
        <td>Berglunds snabbköp</td>
        <td>Christina Berglund</td>
        <td>Sweden</td>
        <td><input type="text"  id="'+"txtparticipants"+'" ></td>
        <td><input type="button" value="Submit" class="use-address" onclick="submitvallues()"></td>
      </tr>
      
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
        <td><input type="text"  id="'+"txtparticipants"+'" ></td>
        <td><input type="button" value="Submit" class="use-address" onclick="submitvallues()"></td>
      </tr>
      
      <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
        <td><input type="text"  id="'+"txtparticipants"+'" ></td>
        <td><input type="button" value="Submit" class="use-address" onclick="submitvallues()"></td>
      </tr>
      
      <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
        <td><input type="text"  id="'+"txtparticipants"+'" ></td>
        <td><input type="button" value="Submit" class="use-address" onclick="submitvallues()"></td>
      </tr>
      
      <tr>
        <td>Königlich Essen</td>
        <td>Philip Cramer</td>
        <td>Germany</td>
        <td><input type="text"  id="'+"txtparticipants"+'" ></td>
        <td><input type="button" value="Submit" class="use-address" onclick="submitvallues()"></td>
      </tr>
      
      <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
        <td><input type="text"  id="'+"txtparticipants"+'" ></td>
        <td><input type="button" value="Submit" class="use-address" onclick="submitvallues()"></td>
      </tr>
      
      <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
        <td><input type="text"  id="'+"txtparticipants"+'" ></td>
        <td><input type="button" value="Submit" class="use-address" onclick="submitvallues()"></td>
      </tr>
      
      <tr>
        <td>North/South</td>
        <td>Simon Crowther</td>
        <td>UK</td>
        <td><input type="text"  id="'+"txtparticipants"+'" ></td>
        <td><input type="button" value="Submit" class="use-address" onclick="submitvallues()"></td>
      </tr>
      
      <tr>
        <td>Paris spécialités</td>
        <td>Marie Bertrand</td>
        <td>France</td>
        <td><input type="text"  id="'+"txtparticipants"+'" ></td>
        <td><input type="button" value="Submit" class="use-address" onclick="submitvallues()"></td>
      </tr>
    </table>
    
    </body>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript">
    
    function submitvallues()
    {
      alert("Submit");
    
      var t = document.getElementById('customers');
      alert("Got the Values of Table Name");
         var rows = t.rows;
         for (var i=0; i<rows.length; i++) {
             rows[i].onclick = function () {
                 if (this.parentNode.nodeName == 'THEAD') {
                     return;
                 }
                 var cells = this.cells; //cells collection
            
    
                 var u= cells[0].innerHTML;
                 alert(u);
    
                var u= cells[1].innerHTML;
                alert(u);
    
                var u= cells[2].innerHTML;
                alert(u);
    
                var u= cells[3].innerHTML;
                alert(u);
    
                var u= cells[4].innerHTML;
                alert(u);
    
                var u= cells[5].document.getElementById('txtparticipants').value;
                alert(u);
    
             };
         }
    }
    </script>
    </html>
    Tuesday, March 13, 2018 10:07 AM

Answers

  • User-1838255255 posted

    Hi Beginer,

    If you add this keyword to the submitvallues() function? like this: 

    <td><input type="button" value="Submit" class="use-address" onclick="submitvallues(this)"></td>
    

    Also i hope you could check my code again. 

    Best Regards,

    Eric Du 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 15, 2018 1:52 AM

All replies

  • User516094431 posted

    You need to add text with innerHTML like of button. Check following code:

    <td><input type="button" value="Submit" class="use-address" onmouseover="submitvallues()" onclick="submitvallues()"></td>

    Tuesday, March 13, 2018 10:49 AM
  • User-571605279 posted

    Shoaib .

    I don't want to trigger the function on mousehover on input control.And the function is getting triggered on text control insert the curosor in input contrl.
    Also, I had set the onmouseover attribute to onmouseover=" " .But still I am facing the same issue

    vartxtparticipateidvalue="txtparticipate"+count;
    var txtparticipants= '<input type="text" onmouseover=" " name="' + count + '" ' + ' id="'+vartxtparticipateidvalue+'" ' + ' value="'+vartxtparticipateidvalue+'" disabled>';

    Tuesday, March 13, 2018 11:34 AM
  • User516094431 posted

    the function is getting triggered on text control insert the curosor in input contrl.

    As per what I'm got from you description, you need to use onfocus event on textbox control attribute.

    <input type="text"  id="txtparticipants" onfocus ="submitvallues()">

    But don't use alert in  focus function. otherwise it will goes in loop. 

    Tuesday, March 13, 2018 11:47 AM
  • User-1838255255 posted

    Hi Beginer,

    According to your description and code, i think you wanted to use focus event, please check the following sample code and tutorial: 

    Sample Code: 

    <head>
        <title></title>
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            function showmeg() {
                document.write("^^Bye Bye^^");
            }
            $(function () {
                $("#Text1").focus(function () {
                    showmeg();
                });
            });
           
        </script>
    </head>
    <body>
        <input id="Text1" type="text" />
    </body>

    jQuery Focus Method: 

    https://www.w3schools.com/jquery/event_focus.asp 

    Best Regards,

    Eric Du 

    Wednesday, March 14, 2018 6:19 AM
  • User-571605279 posted

    Contributes,

    I request you to please read my issue one more time.

    My problem is , I am having function for button click  and this function is executing like focus event even when I put the cursor or control on input control  Which I don't want 


    Wednesday, March 14, 2018 6:37 AM
  • User-1838255255 posted

    Hi Beginer,

    I apologize to you of my wrong understanding, i checked your code and description again, you add cell click event in the button click event,but you don't need through click cell to trigger the function. About you need result, please check the following sample code:

    Sample Code:

    <head>
        <style>
            #customers {
                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                border-collapse: collapse;
                width: 100%;
            }
    
                #customers td, #customers th {
                    border: 1px solid #ddd;
                    padding: 8px;
                }
    
                #customers tr:nth-child(even) {
                    background-color: #f2f2f2;
                }
    
                #customers tr:hover {
                    background-color: #ddd;
                }
    
                #customers th {
                    padding-top: 12px;
                    padding-bottom: 12px;
                    text-align: left;
                    background-color: #4CAF50;
                    color: white;
                }
        </style>
    </head>
    <body>
    
        <table id="customers">
            <tr>
                <th>Company</th>
                <th>Contact</th>
                <th>Country</th>
                <td><input type="text" id="'+" txtparticipants"+'"></td>
                <td><input type="button" value="Submit" class="use-address" onclick="submitvallues(this)"></td>
            </tr>
    
            <tr>
                <td>Alfreds Futterkiste</td>
                <td>Maria Anders</td>
                <td>Germany</td>
                <td><input type="text" id="'+" txtparticipants"+'"></td>
                <td><input type="button" value="Submit" class="use-address" onclick="submitvallues(this)"></td>
            </tr>
    
            <tr>
                <td>Berglunds snabbköp</td>
                <td>Christina Berglund</td>
                <td>Sweden</td>
                <td><input type="text" id="'+" txtparticipants"+'"></td>
                <td><input type="button" value="Submit" class="use-address" onclick="submitvallues(this)"></td>
            </tr>
    
            <tr>
                <td>Centro comercial Moctezuma</td>
                <td>Francisco Chang</td>
                <td>Mexico</td>
                <td><input type="text" id="'+" txtparticipants"+'"></td>
                <td><input type="button" value="Submit" class="use-address" onclick="submitvallues(this)"></td>
            </tr>
    
            <tr>
                <td>Ernst Handel</td>
                <td>Roland Mendel</td>
                <td>Austria</td>
                <td><input type="text" id="'+" txtparticipants"+'"></td>
                <td><input type="button" value="Submit" class="use-address" onclick="submitvallues(this)"></td>
            </tr>
    
            <tr>
                <td>Island Trading</td>
                <td>Helen Bennett</td>
                <td>UK</td>
                <td><input type="text" id="'+" txtparticipants"+'"></td>
                <td><input type="button" value="Submit" class="use-address" onclick="submitvallues(this)"></td>
            </tr>
    
            <tr>
                <td>Königlich Essen</td>
                <td>Philip Cramer</td>
                <td>Germany</td>
                <td><input type="text" id="'+" txtparticipants"+'"></td>
                <td><input type="button" value="Submit" class="use-address" onclick="submitvallues(this)"></td>
            </tr>
    
            <tr>
                <td>Laughing Bacchus Winecellars</td>
                <td>Yoshi Tannamuri</td>
                <td>Canada</td>
                <td><input type="text" id="'+" txtparticipants"+'"></td>
                <td><input type="button" value="Submit" class="use-address" onclick="submitvallues(this)"></td>
            </tr>
    
            <tr>
                <td>Magazzini Alimentari Riuniti</td>
                <td>Giovanni Rovelli</td>
                <td>Italy</td>
                <td><input type="text" id="'+" txtparticipants"+'"></td>
                <td><input type="button" value="Submit" class="use-address" onclick="submitvallues(this)"></td>
            </tr>
    
            <tr>
                <td>North/South</td>
                <td>Simon Crowther</td>
                <td>UK</td>
                <td><input type="text" id="'+" txtparticipants"+'"></td>
                <td><input type="button" value="Submit" class="use-address" onclick="submitvallues(this)"></td>
            </tr>
    
            <tr>
                <td>Paris spécialités</td>
                <td>Marie Bertrand</td>
                <td>France</td>
                <td><input type="text" id="'+" txtparticipants"+'"></td>
                <td><input type="button" value="Submit" class="use-address" onclick="submitvallues(this)"></td>
            </tr>
        </table>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script type="text/javascript">
            function submitvallues(ele) {
                var row = $(ele).parent().parent();
                var celllen = $(row).children('td').length;
                for (var i = 0; i < celllen - 1; i++) {
                    var data = $(row).children('td').eq(i).text();
                    alert(data);
                }
            }
        </script>
    </body>

    Best Regards,

    Eric Du 

    Wednesday, March 14, 2018 9:11 AM
  • User-571605279 posted

    ERIC Sir,

    Thanks for your kind support and gentle response. 

    But in your code I am unable to get the input control value

    function submitvallues(ele) {
    var row = $(ele).parent().parent();
    var celllen = $(row).children('td').length;
    for (var i = 0; i < celllen - 1; i++) {
    var data = $(row).children('td').eq(i).text();
    alert(data);
    }

    Wednesday, March 14, 2018 5:37 PM
  • User-1838255255 posted

    Hi Beginer,

    If you add this keyword to the submitvallues() function? like this: 

    <td><input type="button" value="Submit" class="use-address" onclick="submitvallues(this)"></td>
    

    Also i hope you could check my code again. 

    Best Regards,

    Eric Du 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 15, 2018 1:52 AM
  • User-571605279 posted

    Sir,

    After adding using the above piece of code I had replaced my below code in the function and now I am getting input control's value and drop-down values

    var row=$(button).closest('tr'),
    select=row.find("select");
    input=row.find("td:eq(7) input"); 
    
    alert( select.val() + "  " + input.val() );     
    
     var itemidvalue = $(row).children('td').eq(12).text();

    Monday, March 19, 2018 3:20 PM