Remove From My Forums

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

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

0

Sign in to vote
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

0

Sign in to vote
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
0

Sign in to vote

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
0

Sign in to vote
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

0

Sign in to vote

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

0

Sign in to vote

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
0

Sign in to vote
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
0

Sign in to vote
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

Answered by:

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

Question

Answers

All replies