Answered by:
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
-
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 issuevartxtparticipateidvalue="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