First things first, especially for other readers in the future -
Use your Inspect Feature from your browser to see where your code is causing an error. You can read more on Inspect Element
HERE which covers the basics. As a note from them, what is Inspect Element?
There's a powerful tool hiding in your browser: Inspect Element.
Right-click on any web page, click Inspect, and you'll see the innards of that site: its source code, the images and CSS that form its design, the fonts and icons it uses, the Javascript code that powers animations, and more. You can see how long the site takes to load, how much bandwidth it used to download, and the exact colour in its text.
Or, you could use it to change anything you want on the page.
Inspect Element is a perfect way to learn what makes the web tick, figure out what's broken on your sites, mock up what a colour and font change would look like
Once you have the basics, use the tool to your advantage. When you have the Inspect open, at the top, click on Network. It will ask you (Chrome and Edge, not sure about other browsers) to select CTRL + R to run your pages/code.
Once done, if there are any errors, you will see the warning, click on the page link and the Inspect Element will highlight the line of code for you.
Back to your code, I see a few problems here, you selected the first row only, what will happen when other users select other rows, how will your code know which row is selected and what data to return OR will there always be only one row with input elements nested inside the row, see my comment below?
I would suggest you
READ UP ON DOCUMENTATION of datatables to understand how powerful it really is.
Start afresh, give your table some meaningful description -
<table id="mytable" name="mytable" class="mytable">
Then create some headers for this table -
<pre><thead>
<tr>
<th>ID</th>
<th>Customer Name</th>
<th>Address</th>
<th>Gender</th>
<th>Email ID</th>
<th>Mobile Number</th>
<th>Date of Birth</th>
<th>Loan Type</th>
<th>Loan Amount</th>
<th>Tenure</th>
<th>Action</th>
</tr>
</thead>
Now create your rows from data or input as you did. (I am not sure why you are using a table to show normal input elements in your page, you should nest them in divs or the like...), note I removed your headings.
<pre><tbody>
<tr>
<div class="searchstuff">
<td>
<input type="text" name="customerName" id="nam" required></td>
<td><textarea rows="5" cols="20" name="customerAddress" id="addr"></textarea></td>
<td>
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female</td>
<td><input type="button" class = "submit" name="submit" value="Avail Loan"></td>
<td><input type="reset" name="reset" value="reset"></td>
</div>
</tbody>
And so on with all elements.Note that I have added a div with a class name for each button row (submit changed to button for use in the script find function) so the table will know which row was selected.
Once done, you now need to do some basic validation to check that each value has been entered by the user which I will not cover here for now,
READ THIS for more detailed explanation and code samples.
There is also some very nice articles
HERE ON CODEPROJECT.
Once validation is done, return the data from your table row as selected by the user by making use of the respective input element's id -
$ = jQuery;
<script type="text/javascript">
String.prototype.trim = function () {
return this.replace(/^\s+|\s+$/g, "");
}
var table = $('#mytable').DataTable();
$('#mytable').on('click', 'button', function () {
var name = $(this).parents('tr').find('.searchstuff input[id="nam"]').val();
var amount = $(this).parents('tr').find('.searchstuffinput[id="loanamount"]').val();
alert(Thank you" + name + "Your Loan Amount is" + amount + ".");
//Note the spaces in between each variable call...
});
This is just a quick summary of how to handle data tables, if this f\does not work for you, revert back to my comment above, use normal div's to put your elements in.
Submit an article or tip