Click here to Skip to main content
14,639,666 members
Rate this:
Please Sign up or sign in to vote.
I'm beginner.I have to write java script code to display "Thank you <customername>. Your Loan Amount is loanAmount>" in a div tag with id "result"

What I have tried:

<html>
    <head>
        <style>
            body
            {
                background-color:#FFAACC;
            }
            h1{
                color:#770080;
                font-family:cursive;
                text-align:center;
            }
            #result
            {
                font-weight:bold;
                color:#770080;
            }
        </style>
    </head>
    <body>
        <h1>DAC BANK - AVAIL LOAN</h1>
        <form onsubmit="">
            <table>
                <tr>
                    <td>Customer Name</td>
                    <td><input type="text" name="customerName" id="nam" required></td>
                </tr>
                <tr>
                    <td>Address</td>
                    <td><textarea rows="5" cols="20" name="customerAddress" id="addr"></textarea></td>
                </tr>
                <tr>
                    <td>Gender</td>
                    <td><input type="radio" name="gender" value="male">Male
                        <input type="radio" name="gender" value="female">Female</td>
                </tr>
                <tr>
                    <td>Email ID</td>
                    <td><input type="email" name="customerEmail" id="email"></td>
                </tr>
                <tr>
                    <td>Mobile Number</td>
                    <td><input type="text" name="customerMobileNumber" id="mob"></td>
                </tr>
                <tr>
                    <td>Date of Birth</td>
                    <td><input type="date" name="dob" id="dob"></td>
                </tr>
                <tr>
                    <td>Loan Type</td>
                    <td><input name="loanType" list="loan" autocomplete="on">
                    <datalist id="loan">
                        <option value="Vehicle">Vehicle</option>
                        <option value="Home">Home</option>
                        <option value="Education">Education</option>
                    </datalist></td>
                </tr>
                <tr>
                    <td>Loan Amount</td>
                    <td><input type="text" name="loanAmount" placeholder="Enter the Amount" id="amt" required></td>
                </tr>
                <tr>
                    <td>Tenure</td>
                    <td><input type="number" name="loanTenure" id="loan" min="1" max="5"></td>
                </tr>
                <tr>
                    <td><input type="submit" name="submit" value="Avail Loan"></td>
                    <td><input type="reset" name="reset" value="reset"></td>
                </tr>
            </table>
        </form>
        <div id="result"></div>
        <script>
            function display()
            {
                var name=document.getElementByName("customerName")[0].value;
                var amount=document.getElementByName("loanAmount")[0].value;
                
                
              document.getElementById("result").innerHTML="Thank you"+name+"Your Loan Amount is"+amount; 
                
            }
        </script>
    </body>
</html>

I'm getting error:
Fail 1 - Check with the Javascript code or Check with Client UI requirements
Posted
Updated 8-Jul-20 23:56pm
Comments
MadMyche 8-Jul-20 15:06pm
   
I've never seen that "Fail 1" error..... Anyways what is being displayed when you run this?
Richard MacCutchan 9-Jul-20 5:04am
   
I suspect that error message comes from the teacher.
Rate this:
Please Sign up or sign in to vote.

Solution 3

Quote:
document.getElementById("result").innerHTML="Thank you"+name+"Your Loan Amount is"+amount; 
You've just introduced a cross-site scripting (XSS) vulnerability into your code.
Cross Site Scripting (XSS) | OWASP[^]

You need to properly encode the user's input before appending it to the document.

Either change the code to set the innerText:
document.getElementById("result").innerText = "Thank you " + name + " Your Loan Amount is " + amount;
Or use a library like mathiasbynens/he[^] to encode the user input.
   
Rate this:
Please Sign up or sign in to vote.

Solution 1

document.getElementById("result").innerHTML="Thank you"+name+"Your Loan Amount is"+amount; 

Look at the answer you are generating, there are no spaces before and after the name, and the amount. So the generated message will be something like:
Thank youNagashreeYour Loan Amount is1500
   
Rate this:
Please Sign up or sign in to vote.

Solution 2

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();

//Change your submit buttons to normal buttons...
$('#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();

//Now that you have the crows detail, do with it as you require, I am just using alert... -
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.
   
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100