i got an example here at http://www.kriesi.at/archives/create-simple-tooltips-with-css-and-jquery/comment-page-2#comment-2746
it creates a effect in style sheet and masks the default tooltip of any tag that is passed through this function
$(document).ready(function() {
simple_tooltip("img","tooltip");
});
function simple_tooltip(target_items, name){
$(target_items).each(function(i){
$("body").append("<div class='"+name+"' type='img' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
var my_tooltip = $("#"+name+i);
$(this).removeAttr("title").mouseover(function(){
my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(400);
}).mousemove(function(kmouse){
my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
}).mouseout(function(){
my_tooltip.fadeOut(400);
});
});
}
but the problem is it shows tooltip on each an every image tag of the page where as i only wanted to show it on form validation help icon. here is my form
<form id="form1">
<table id="tblSignUp" border="0" cellpadding="2" cellspacing="5"
style="border: 0px solid black; color: #FFFFFF;">
<div id="inputs">
<tr>
<td>First Name<font class="AsterikLabel">*</font> :</td>
<td><input id="firstname" size="35" maxlength="50" type="text"
style="width: 175px;"
onblur="checkError(this);" name="fname" />
<img title="Alphabets, numbers and space(' ') , no special characters min 3 and max 20 characters."
src="PsychOImages/20.png" align="bottom" /></td>
<td id="firstName1"></td>
</tr>
<tr>
<td>Last Name<font class="AsterikLabel">*</font> :</td>
<td><input type="text" id="lastname" style="width: 175px;"
name="lastname"
onblur="checkError(this);" />
<img title="Alphabets, numbers and space(' ') , no special characters min 3 and max 20 characters."
src="PsychOImages/20.png" align="bottom" />
</td>
<td id="lastname1"></td>
</tr>
<tr>
<td>Email<font class="AsterikLabel">*</font> :</td>
<td><input id="email" type="text" style="width: 175px;"
name="email"
onblur="checkError(this);" />
<img title=" The Email address format is yourname#example.com." src="PsychOImages/20.png" align="bottom" /></td>
<td id="email1"></td>
</tr>
<tr>
<td>Telephone<font class="AsterikLabel">*</font> :</td>
<td><input id="phone" type="text" style="width: 175px;"
name="phone"
onblur="checkError(this);" maxlength="16"/>
<img title="Format : 339-4248 or (095) 2569835 or +7 (095)1452389"
src="PsychOImages/20.png" align="bottom" /></td>
<td id="phone1"></td>
</tr>
<tr>
<td>Choose a Password<font class="AsterikLabel">*</font> :</td>
<td><input id="password" type="password" style="width: 175px;"
name="password" onblur="checkError(this);" />
<img title="Password feild can only contains 7 to 15 characters" src="PsychOImages/20.png" align="bottom" /></td>
<td id="password1"></td>
</tr>
<tr>
<td>Re-Type Password<font class="AsterikLabel">*</font> :</td>
<td><input id="repassword" type="password"
style="width: 175px;"
name="retype" onblur="checkError(this);" />
<img title="Retype teh password same as above for confirmation" src="PsychOImages/20.png" align="bottom" /></td>
<td id="repassword1"></td>
</tr>
</div>
</table>
</form>
i have tried putting my form into a div and then giving that Div id to the function
`simple_tooltip("","")` but it stops working then.... please help!
$(function() {
simple_tooltip("#form1 img", "tooltip");
});
First argument of the simple_tooltip function is a selector so you can use it to find any elements you want to.
Also, You have to remove the <div id="inputs"> (and corresponding </div>) tag because your html isn't valid. You can't put a div directly inside the table element.
Related
I have Full name in my form as one input box but I want to make it split in two input boxes
box1= First Name
box2= Last Name
and when submit button is pressed, the value is saved as box1+box2 in the same old full name data scheme in my mysql database.
Here is my current code.
<td colspan="2"><span class="smalltext"><label for="username">{$lang->username}</label></span></td>
</tr>
<tr>
<td colspan="2"><input type="text" class="textbox" name="username" id="username" style="width: 100%" value="" /></td>
</tr>
and here is full page code
<form action="member.php" method="post" id="registration_form"><input type="text" style="visibility: hidden;" value="" name="regcheck1" /><input type="text" style="visibility: hidden;" value="true" name="regcheck2" />
{$regerrors}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead" colspan="2"><strong>{$lang->registration}</strong></td>
</tr>
<tr>
<td width="50%" class="trow1" valign="top">
<fieldset class="trow2">
<legend><strong>{$lang->account_details}</strong></legend>
<table cellspacing="0" cellpadding="{$theme['tablespace']}" width="100%">
<tr>
<td colspan="2"><span class="smalltext"><label for="fullname">{$lang->fullname}</label></span></td>
</tr>
<tr>
<td colspan="2"><input type="text" class="textbox" name="fullname" id="fullname" style="width: 100%" value="fullname" /></td>
</tr>
{$passboxes}
<tr>
<td><span class="smalltext"><label for="email">{$lang->email}</label></span></td>
<td><span class="smalltext"><label for="email2">{$lang->confirm_email}</label></span></td>
</tr>
<tr>
<td><input type="text" class="textbox" name="email" id="email" style="width: 100%" maxlength="50" value="{$email}" /></td>
<td><input type="text" class="textbox" name="email2" id="email2" style="width: 100%" maxlength="50" value="{$email2}" /></td>
</tr>
<tr>
<td colspan="2" style="display: none;" id="email_status"> </td>
</tr>
{$hiddencaptcha}
</table>
</fieldset>
<div align="center">
<input type="hidden" name="step" value="registration" />
<input type="hidden" name="action" value="do_register" />
<input type="submit" class="button" name="regsubmit" value="{$lang->submit_registration}" />
</div>
</form>```
You can concatenate the values in your php file and store them in your database column.
I can explain it more in detail if you share your php file.
I'm going to give you a frontend solution (because of the tags attached to the question), which could work if:
You just need a quick fix
This is a one-time problem
You know that this won't create complications in the future
Other than that, I highly recommend you do this in the backend.
The idea here is to create a hidden fullname input and use javascript to concatenate the first and last name.
const name = {
firstName: '',
lastName: ''
}
document.querySelector('[name="firstName"]').addEventListener('input', (e) => {
name.firstName = e.target.value
updateFullName()
})
document.querySelector('[name="lastName"]').addEventListener('input', (e) => {
name.lastName = e.target.value
updateFullName()
})
function updateFullName() {
document.querySelector('[name="fullname"]').value = `${name.firstName} ${name.lastName}`
}
<form>
<input type="text" name="firstName">
<input type="text" name="lastName">
<input type="hidden" name="fullname">
</form>
I want to display data stored in an array in form-
for example:
var users =
[
{
'name':'John',
'age':'10'
},
{
'name':'Rose',
'age':'18'
}
];
and I want to display name and age of users logged in, in the form below:
<form id="myform">
<div>
</div>
<h2 align="center"> Edit Details</h2>
<table id="table1"; cellspacing="5px" cellpadding="5%"; align="center">
<tr>
<td align="right" class="style1">First Name:</td>
<td class="style1"><input id="firstname" type="text" placeholder="FirstName" /></td>
</tr>
<tr>
<td align="right">Last Name:</td>
<td><input id="lastname" type="text" placeholder="LastName" /></td>
</tr>
<tr>
<td align="right">Email ID:</td>
<td><input id="email" type="text" placeholder="Email" /></td>
</tr>
<tr>
<td align="right">User Name:</td>
<td><input id="username" type="text" placeholder="UserName" /></td>
</tr>
<tr>
<td align="right">Password:</td>
<td><input id="password" type="password" placeholder="Password" /></td>
</tr>
<tr>
<td> <input type="button" value="Edit" onclick="edit()" />
<td> <input type="button" value="Reset" />
</td>
</tr>
</table>
</form>
You can just change the text content with pure javascript.
name.textContent = 'First name' + users[0].name;
Of course, you will need to select all the fields you want to change.
I want to display the div tag hidden content above the button on button(Add Address) click and at the same time shift the button below the div tag content and again on cancel button click put the button to the original position. I am doing the code in a .tpl file.
function addPickupAddress()
{
$("#addPickupAddressForm").show();
}
<div id="addPickupAddressForm" style="height:100px;display: none;">
<span style="font-size:20px">Add Pickup Address</span>
<table id="addAddressTable" style="width: 470px;margin-left: 110px;" cellpadding="2">
<tr>
<td>
Title </td><td> <input type="text" name="title" id="title_rev_pickup" placeholder="Enter Title">
</td>
</tr>
<tr>
<td>
First Name </td><td> <input type="text" name="firstname" id="firstname_rev_pickup" placeholder="Enter First Name">
</td>
</tr>
<tr>
<td>
Last Name </td><td> <input type="text" name="lastname" id="lastname_rev_pickup" placeholder="Enter Last Name">
</td>
</tr>
<tr>
<td>
Address </td><td> <input type="text" name="address1" id="address1_rev_pickup" placeholder="Enter Address">
</td>
</tr>
<tr>
<td>
Address2 </td><td> <input type="text" name="address2" id="address2_rev_pickup" placeholder="Enter Address">
</td>
</tr>
<tr>
<td>
City </td><td> <input type="text" name="city" id="city_rev_pickup" placeholder="Enter City Name">
</td>
</tr>
<tr>
<td>
State </td><td> <input type="text" name="state" id="state_rev_pickup" placeholder="Enter State Name">
</td>
</tr>
<tr>
<td>
PinCode </td><td> <input type="text" name="zipcode" id="zipcode_rev_pickup" placeholder="Enter ZipCode">
</td>
</tr>
<tr>
<td>
Phone <span style="float: right;">+91</span></td><td> <input type="text" name="phone" id="phone_rev_pickup" placeholder="Enter City Name">
</td>
</tr>
</table>
</div>
<button type="button" id="addbuttonpickup" style="color: white;background-color: #0899C9;padding: 5px;padding-top: 10px;cursor:pointer;float: left; margin-left:120px; margin-bottom:10px;" onclick="addPickupAddress();">Add Address</button>
Try using the jquery toggle-function.
Look at this Pen to see how it's used: http://codepen.io/anon/pen/rrxYxq
function addPickupAddress ()
{
$("#addPickupAddressForm").toggle();
}
Also, the Button appears to be inside the form when it's visible because it's height is set to 100px but the children inside the element are actually higher. Remove it and the height will be calculated automatically.
Replace Height 100px to 100% for display in full height.
And Put Cancel button in below div.
Try below code.
function addPickupAddress(isVisible)
{
if(isVisible){
$("#addPickupAddressForm").show();
$('#Cancelbuttonpickup').show();
}
else{
$("#addPickupAddressForm").hide();
$('#Cancelbuttonpickup').hide();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addPickupAddressForm" style="height:100%;display: none;">
<span style="font-size:20px">Add Pickup Address</span>
<table id="addAddressTable" style="width: 470px;margin-left: 110px;" cellpadding="2">
<tr>
<td>
Title </td><td> <input type="text" name="title" id="title_rev_pickup" placeholder="Enter Title">
</td>
</tr>
<tr>
<td>
First Name </td><td> <input type="text" name="firstname" id="firstname_rev_pickup" placeholder="Enter First Name">
</td>
</tr>
<tr>
<td>
Last Name </td><td> <input type="text" name="lastname" id="lastname_rev_pickup" placeholder="Enter Last Name">
</td>
</tr>
<tr>
<td>
Address </td><td> <input type="text" name="address1" id="address1_rev_pickup" placeholder="Enter Address">
</td>
</tr>
<tr>
<td>
Address2 </td><td> <input type="text" name="address2" id="address2_rev_pickup" placeholder="Enter Address">
</td>
</tr>
<tr>
<td>
City </td><td> <input type="text" name="city" id="city_rev_pickup" placeholder="Enter City Name">
</td>
</tr>
<tr>
<td>
State </td><td> <input type="text" name="state" id="state_rev_pickup" placeholder="Enter State Name">
</td>
</tr>
<tr>
<td>
PinCode </td><td> <input type="text" name="zipcode" id="zipcode_rev_pickup" placeholder="Enter ZipCode">
</td>
</tr>
<tr>
<td>
Phone <span style="float: right;">+91</span></td><td> <input type="text" name="phone" id="phone_rev_pickup" placeholder="Enter City Name">
</td>
</tr>
</table>
</div>
<button type="button" id="addbuttonpickup" style="color: white;background-color: #0899C9;padding: 5px;cursor:pointer;float: left; margin-bottom:10px;" onclick="addPickupAddress(true);">Add Address</button>
<button type="button" id="Cancelbuttonpickup" style="color: white;background-color: #0899C9;padding: 5px;cursor:pointer;float: left; margin-bottom:10px;display:none;" onclick="addPickupAddress(false);">Cancel</button>
Check following code. Its implemented according to your requirement
function addPickupAddress() {
$("#addPickupAddressForm").show();
$("#cancelbutton").show();
$("#addbuttonpickup").hide();
}
function hidePickupAddress() {
$("#addPickupAddressForm").hide();
$("#cancelbutton").hide();
$("#addbuttonpickup").show();
}
.buttonstyle {
color: white;
background-color: #0899C9;
padding: 5px;
padding-top: 10px;
cursor: pointer;
float: left;
margin-left: 120px;
margin-bottom: 10px;
}
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addPickupAddressForm" style="display: none;">
<span style="font-size: 20px">Add Pickup Address</span>
<table id="addAddressTable" style="width: 470px; margin-left: 110px;"
cellpadding="2">
<tr>
<td>Title</td>
<td><input type="text" name="title" id="title_rev_pickup"
placeholder="Enter Title"></td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" name="firstname"
id="firstname_rev_pickup" placeholder="Enter First Name"></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="lastname" id="lastname_rev_pickup"
placeholder="Enter Last Name"></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="address1" id="address1_rev_pickup"
placeholder="Enter Address"></td>
</tr>
<tr>
<td>Address2</td>
<td><input type="text" name="address2" id="address2_rev_pickup"
placeholder="Enter Address"></td>
</tr>
<tr>
<td>City</td>
<td><input type="text" name="city" id="city_rev_pickup"
placeholder="Enter City Name"></td>
</tr>
<tr>
<td>State</td>
<td><input type="text" name="state" id="state_rev_pickup"
placeholder="Enter State Name"></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type="text" name="zipcode" id="zipcode_rev_pickup"
placeholder="Enter ZipCode"></td>
</tr>
<tr>
<td>Phone <span style="float: right;">+91</span></td>
<td><input type="text" name="phone" id="phone_rev_pickup"
placeholder="Enter City Name"></td>
</tr>
</table>
</div>
<button type="button" id="addbuttonpickup"
class="buttonstyle"
onclick="addPickupAddress();">Add Address</button>
<button type="button" id="cancelbutton"
class="buttonstyle" style="display:none"
onclick="hidePickupAddress();">Cancel</button>
Just remove the float on the button and the fixed height of your hidden div, and the button will appear under the div as expected. To hide the div again, you can use jQuery's toggle() function. Also try not to use inline styles as it will make your code much less readable.
function addPickupAddress() {
$("#addPickupAddressForm").toggle();
$("#addbuttonpickup").html($("#addbuttonpickup").html() == 'Cancel' ? 'Add Address' : 'Cancel');
}
button {
color: white;
background-color: #0899C9;
padding: 5px;
padding-top: 10px;
cursor: pointer;
margin-left: 120px;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addPickupAddressForm" style="display: none;">
<span style="font-size:20px">Add Pickup Address</span>
<table id="addAddressTable" style="width: 470px;margin-left: 110px;" cellpadding="2">
<tr>
<td>
Title</td>
<td>
<input type="text" name="title" id="title_rev_pickup" placeholder="Enter Title">
</td>
</tr>
<tr>
<td>
First Name</td>
<td>
<input type="text" name="firstname" id="firstname_rev_pickup" placeholder="Enter First Name">
</td>
</tr>
<tr>
<td>
Last Name</td>
<td>
<input type="text" name="lastname" id="lastname_rev_pickup" placeholder="Enter Last Name">
</td>
</tr>
<tr>
<td>
Address</td>
<td>
<input type="text" name="address1" id="address1_rev_pickup" placeholder="Enter Address">
</td>
</tr>
<tr>
<td>
Address2</td>
<td>
<input type="text" name="address2" id="address2_rev_pickup" placeholder="Enter Address">
</td>
</tr>
<tr>
<td>
City</td>
<td>
<input type="text" name="city" id="city_rev_pickup" placeholder="Enter City Name">
</td>
</tr>
<tr>
<td>
State</td>
<td>
<input type="text" name="state" id="state_rev_pickup" placeholder="Enter State Name">
</td>
</tr>
<tr>
<td>
PinCode</td>
<td>
<input type="text" name="zipcode" id="zipcode_rev_pickup" placeholder="Enter ZipCode">
</td>
</tr>
<tr>
<td>
Phone <span style="float: right;">+91</span>
</td>
<td>
<input type="text" name="phone" id="phone_rev_pickup" placeholder="Enter City Name">
</td>
</tr>
</table>
</div>
<button type="button" id="addbuttonpickup" onclick="addPickupAddress();">Add Address</button>
You just have to do this
function addPickupAddress(isShow)
{
$("#addPickupAddressForm,#cancel")[isShow?"show":"hide"]();
}
Plus you have to remove the fixed size of your div content.
Have created a fiddle for same, check it out here
I want my site to display differently based on the size of the web browser. Based on the questions/answers from other users, I got this to work with JavaScript onload. But I can't get it to work dynamically -- that is to say, in real-time, as users are adjusting the window. They have to refresh to get the format of the webpage to change.
Here is my current code:
<table class="index_table" border="0">
<tr>
<!--BELOW IS JAVASCRIPT FOR ADJUSTING HTML BASED ON WINDOW SIZE -->
<script>
if (window.innerWidth > 900){
document.write('<td rowspan="3" class="index_article"></td>');
}
</script>
<!-- END OF JAVASCRIPT -->
<td class="index_article_light">
<h2 class="index_instructions_subheader">INSERT HEADER HERE</h2>
<p class="index_instructions">INSERT PARAGRAPH HERE.</p>
<p class="index_instructions">INSERT PARAGRAPH HERE. </p>
<br />
<form action="signup.html" style="vertical-align:top;">
<table border="0" style="margin-left:auto;margin-right:auto;width:400px;">
<tr>
<td>
<input type="text" name="search" class="firstname" value=" First name">
</td>
<td>
<input type="text" name="search" class="lastname" value=" Last name">
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" name="search" class="email" value=" Email">
</td>
</tr>
<tr>
<td colspan="2">
<div style="color:#979797;">Password: <br /><input type="password" name="password" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td>
<div style="color:#979797;">Verify password: <input type="password" name="verify_passwords" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td colspan="2">
<select>
<option value="kent">INSERT LIST HERE</option>
</select>
</tr>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="signup!" style="float:right;" id="result_submit">
</td>
</tr>
</table>
</form>
</td>
</tr>
<!--BELOW IS JAVASCRIPT FOR ADJUSTING HTML BASED ON WINDOW SIZE -->
<script>
if (window.innerWidth < 900){
document.write('<tr><td class="index_article" style="height:200px;"></td></tr>');
}
</script>
<!-- END OF JAVASCRIPT -->
Note: I know I shouldn't be used tables, I should be using divs. But that's another issue... I started building this website before I knew that. I also know it's pretty sloppy. So just bear with me. I'm trying to just go with it until I have time to fix it up.
You shouldn't use JavaScript to make responsive web design. Use CSS instead, with media querys. So you write your HTML:
<table class="index_table" border="0">
<tr>
<!--This only will display on screen-width>900-->
<td id="big_device_index" rowspan="3" class="index_article"></td>
<td class="index_article_light">
<h2 class="index_instructions_subheader">INSERT HEADER HERE</h2>
<p class="index_instructions">INSERT PARAGRAPH HERE.</p>
<p class="index_instructions">INSERT PARAGRAPH HERE. </p>
<br />
<form action="signup.html" style="vertical-align:top;">
<table border="0" style="margin-left:auto;margin-right:auto;width:400px;">
<tr>
<td>
<input type="text" name="search" class="firstname" value=" First name">
</td>
<td>
<input type="text" name="search" class="lastname" value=" Last name">
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" name="search" class="email" value=" Email">
</td>
</tr>
<tr>
<td colspan="2">
<div style="color:#979797;">Password: <br /><input type="password" name="password" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td>
<div style="color:#979797;">Verify password: <input type="password" name="verify_passwords" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td colspan="2">
<select>
<option value="kent">INSERT LIST HERE</option>
</select>
</tr>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="signup!" style="float:right;" id="result_submit">
</td>
</tr>
</table>
</form>
</td>
</tr>
<!--This only will display on screen-width<900-->
<tr id="small_device_index"><td class="index_article" style="height:200px;"></td></tr>
Use the following CSS:
#media all and (max-width: 899px) {
#big_device_index {
display: none;
}
#media all and (min-width: 900px) {
#small_device_index {
display: none;
}
You can find out more about media queries here
}
Add this outside of if (window.innerWidth > 900){.....
$(window).resize(function(){
if (window.innerWidth > 900){
$('.index_article').remove();
$('.index_table).find('tr:first').append('<td rowspan="3" class="index_article"></td>');
}
}
hope this will help you, make sure to include fisrt jquery.min.js
When I type values in the far right text boxes, then click "click to calculate" i want the values of all the text boxes to add up and display. I cannot figure it out. when i click the click to calculate button, it does nothing. not a thing!
<SCRIPT>
function add()
{
var a = document.getElementById("fscf_field4_8").value;
var b = document.getElementById("fscf_field4_10").value;
var c = document.getElementById("fscf_field4_12").value;
var d = document.getElementById("fscf_field4_14").value;
var e = document.getElementById("fscf_field4_16").value;
document.getElementById("fscf_field4_19").value =a+b+c+d+e;
}
</script>
<table>
<tr>
<td>
<div id="FSContact4" style="width:375px;">
<form action="/payment/#FSContact4" id="fscf_form4" method="post">
<input type="hidden" name="fscf_submitted" value="0">
<input type="hidden" name="fs_postonce_4" value="99193296484a8d52d2b9579199ca2f0c,1384214867">
<input type="hidden" name="si_contact_action" value="send">
<input type="hidden" name="form_id" value="4">
<div id="fscf_required4">
<span style="text-align:left;">*</span> <span style="text-align:left;">indicates required field</span>
</div>
<input type="hidden" name="mailto_id" value="1">
<div id="fscf_div_clear4_4" style="clear:both;">
<div id="fscf_div_field4_4" style="clear:left; float:left; width:99%; max-width:550px; margin-right:10px;">
<div id="fscf_label4_4" style="text-align:left; padding-top:5px;">
<label style="text-align:left;" for="fscf_field4_4">Company Name<span style="text-align:left;">*</span></label>
</div>
<div style="text-align:left;">
<input style="text-align:left; margin:0;" type="text" id="fscf_field4_4" name="company-name" value="">
</div>
</div>
</div>
<div id="fscf_div_clear4_5" style="clear:both;">
<div id="fscf_div_field4_5" style="clear:left; float:left; width:99%; max-width:550px; margin-right:10px;">
<div id="fscf_label4_5" style="text-align:left; padding-top:5px;">
<label style="text-align:left;" for="fscf_field4_5">Person Doing the Transaction<span style="text-align:left;">*</span></label>
</div>
<div style="text-align:left;">
<input style="text-align:left; margin:0;" type="text" id="fscf_field4_5" name="person-doing-the-transaction" value="">
</div>
</div>
</div>
<div id="fscf_div_clear4_6" style="clear:both;">
<div id="fscf_div_field4_6" style="clear:left; float:left; width:99%; max-width:550px; margin-right:10px;">
<div id="fscf_label4_6" style="text-align:left; padding-top:5px;">
<label style="text-align:left;" for="fscf_field4_6">email<span style="text-align:left;">*</span></label>
</div>
<div style="text-align:left;">
<input style="text-align:left; margin:0;" type="text" id="fscf_field4_6" name="email01" value="">
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<table border="1" bordercolor="#FFCC00" style="background-color:#FFFFCC" width="100%" cellpadding="3" cellspacing="3">
<tr>
<td>Invoice Number</td>
<td>Amount (USD)</td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_7 name="Invoice Number 1"></td>
<td><input type="text" id="fscf_field4_8 name="Amount 1"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_9 name="Invoice Number 2"></td>
<td><input type="text" id="fscf_field4_10 name="Amount 2"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_11 name="Invoice Number 3"></td>
<td><input type="text" id="fscf_field4_12 name="Amount 3"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_13 name="Invoice Number 4"></td>
<td><input type="text" id="fscf_field4_14 name="Amount 4"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_15 name="Invoice Number 5"></td>
<td><input type="text" id="fscf_field4_16 name="Amount 5"></td>
</tr>
<tr>
<td><input type="button" id="click" value="Click to Calculate" onclick="add();"></td>
<td><input type="text" id="fscf_field4_19"></td>
</tr>
</table>
<div id="fscf_submit_div4" style="text-align:left; padding-top:2px;">
<input type="submit" id="fscf_submit4" style="cursor:pointer; margin:0;" value="Submit">
</div>
</form>
</div>
</tr>
</td>
</table>
You are not closing the id value of your table properly.
Error:<input type="text" id="fscf_field4_7 name="Invoice Number 1">
There is no closing Quotes for id value(fscf_field4_7)
above. try to close id value if all TextBox's properly.
Replace your table with following:
<table border="1" bordercolor="#FFCC00" style="background-color:#FFFFCC" width="100%" cellpadding="3" cellspacing="3">
<tr>
<td>Invoice Number</td>
<td>Amount (USD)</td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_7" name="Invoice Number 1"/></td>
<td><input type="text" id="fscf_field4_8" name="Amount 1"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_9" name="Invoice Number 2"></td>
<td><input type="text" id="fscf_field4_10" name="Amount 2"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_11" name="Invoice Number 3"></td>
<td><input type="text" id="fscf_field4_12" name="Amount 3"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_13" name="Invoice Number 4"></td>
<td><input type="text" id="fscf_field4_14" name="Amount 4"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_15" name="Invoice Number 5"></td>
<td><input type="text" id="fscf_field4_16" name="Amount 5"></td>
</tr>
<tr>
<td><input type="button" id="click" value="Click to Calculate" onclick="add()"></td>
<td><input type="text" id="fscf_field4_19"></td>
</tr>
</table>
To start with, you forgot to close the quotation marks of all the IDs of inputs. Try doing it.
i.e.
<input type="text" id="fscf_field4_8 name="Amount 1">
needs to be:
<input type="text" id="fscf_field4_8" name="Amount 1">
Also you need to add parseInt() when you parsing string's int value. below i put the new code snippet
Confirmation: Just tried your code with proper quotation marks and intParse(),it works
Your final code for integer parse:
<SCRIPT>
function add()
{
var a = parseInt(document.getElementById("fscf_field4_8").value);
var b = parseInt(document.getElementById("fscf_field4_10").value);
var c = parseInt(document.getElementById("fscf_field4_12").value);
var d = parseInt(document.getElementById("fscf_field4_14").value);
var e = parseInt(document.getElementById("fscf_field4_16").value);
document.getElementById("fscf_field4_19").value =a+b+c+d+e;
}
</script>
Please check this working sample http://jsfiddle.net/6AYFg/
Properly close all your tags and attributes first
parse values from all elements to int
<td><input type="text" id="fscf_field4_7 name="Invoice Number 1"></td>
function add()
{
var a = document.getElementById("fscf_field4_8").value;
var b = document.getElementById("fscf_field4_10").value;
var c = document.getElementById("fscf_field4_12").value;
var d = document.getElementById("fscf_field4_14").value;
var e = document.getElementById("fscf_field4_16").value;
document.getElementById("fscf_field4_19").value =a+b+c+d+e;
}