getting value from a textbox via javascript

Hello,
I have a javascript code that I'm editing to collect user input and write to a database table.
The code is as follows:
--------
<script language="JavaScript" type="text/javascript">
<!--
function showSelected()
{
    form = document.forms[0];
var selObj = document.getElementById('sponsorshiplevel');
//var txtIndexObj = document.getElementById('txtIndex');
var ScholarshipAmountObj = document.getElementById('txtScholarshipAmount');      

var txtValueObj = document.getElementById('txtValue');
//var txtTextObj = document.getElementById('txtText');
var txtSponsorshipAmountObj = document.getElementById("ctl00_ctl00_cphPage_cphContent_SpecialControl_RSVPForm1_SponsorshipAmount");
var hdnTotalObj = document.getElementById('hdnTotal');
var selIndex = selObj.selectedIndex;
var sponsoramt = ScholarshipAmountObj.value;
      
var obj1 = document.getElementById("ctl00_ctl00_cphPage_cphContent_SpecialControl_RSVPForm1_SponsorshipAmount");
      
var txtScholarshipAmountObj = document.getElementById('ctl00_ctl00_cphPage_cphContent_SpecialControl_RSVPForm1_ScholarshipAmount');
      
obj1.value = selIndex;
      
      txtValueObj.value = selObj.options[selIndex].value;
      // if i change selObj.options[selIndex].value to "text" i see only the names of the options in ddl
     
     //this is where i added this line to capture sponsorship levels
   // txtSponsorshipAmountObj.value = selObj.options[selIndex].text;

    txtSponsorshipAmountObj.value = selObj.options[selIndex].value;
   
      txtScholarshipAmountObj.value = ScholarshipAmountObj.options[sponsoramt].value;
      
      
      hdnTotalObj.value = txtValueObj.value;


      obj.value = form.Total.value;
// obj1.value = parseFloat(form.txtValue.value);
//txtScholarshipAmountObj.value = parseFloat(form.txtScholarshipAmount.value);
   
}
//-->
</script>
------------
the code that drives this functions follows:
------
<tr>
  <td colspan="3" style="width:100%" valign="top" align="left"><strong><span style="color:crimson">Scholarship Donation</span></strong></td>
  </tr>
  <tr>
  <td colspan="3" style="width:100%" valign="top" align="center">&nbsp; </td>
  </tr>  
 
    <!--this will be input C for scholarship donations -->
    <tr>
  <td style="width:33%" valign="top" align="right">Donation Amount&nbsp;&nbsp;</td>
  <td style="width:33%" valign="top" align="left">
 
  <input type="text" id="txtScholarshipAmount" name="input_C" size="10"  value="0" onblur="OnCalculateTotal(this.form.input_B.value, this.form.input_C.value, this.form)" />&nbsp;

 
<asp:HiddenField ID="ScholarshipAmount"  runat="server" Visible="true"/>
   
  </td>
 
  <td style="width:33%; background-color:#ffffff" valign="top" align="left"  >&nbsp; </td>
  </tr>
---------
I am missing the last part of this puzzle which is detecting data written to a textbox
called "txtScholarshipAmount" and t his is what i need to detect the input from and write to database.

ANY help would be greatly appreciated.
Codeaddict7423Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

jorge_torizResearch & Development ManagerCommented:
document.getElementById('txtScholarshipAmount').value
tan_devCommented:
If you are working on a usercontrol, this might work:
var txtScholarshipAmountText = "<%=txtScholarshipAmount.Text%>"
Codeaddict7423Author Commented:
tan dev,

Thank you for your suggestion. I've tried everything i know. below, please find my javascript code:
--------
<script language="JavaScript" type="text/javascript">
<!--
function showSelected()
{
    form = document.forms[0];
   
      var selObj = document.getElementById('sponsorshiplevel');
      //var txtIndexObj = document.getElementById('txtIndex');
      
      var ScholarshipAmountObj = document.getElementById('txtScholarshipAmount');      
      
      var txtValueObj = document.getElementById('txtValue');
      //var txtTextObj = document.getElementById('txtText');
      
      var txtSponsorshipAmountObj = document.getElementById("ctl00_ctl00_cphPage_cphContent_SpecialControl_RSVPForm1_SponsorshipAmount");
      
      //var txtScholarshipAmountObj = document.getElementById('txtScholarshipAmount');
      
      var hdnTotalObj = document.getElementById('hdnTotal');
            
      var selIndex = selObj.selectedIndex;
      
      var sponsoramt = ScholarshipAmountObj.value;
      
      var obj1 = document.getElementById("ctl00_ctl00_cphPage_cphContent_SpecialControl_RSVPForm1_SponsorshipAmount");
      
      
      var txtScholarshipAmountText = "<%=txtScholarshipAmount.Text%>"
      
    //var obj2 = document.getElementById('txtScholarshipAmount').value;
             
      obj1.value = selIndex;
      
      txtValueObj.value = selObj.options[selIndex].value;
      
      // if i change selObj.options[selIndex].value to "text" i see only the names of the options in ddl
     
     //this is where i added this line to capture sponsorship levels
   // txtSponsorshipAmountObj.value = selObj.options[selIndex].text;

    txtSponsorshipAmountObj.value = selObj.options[selIndex].value;
   
   // txtValueObj.value = selObj.options[selIndex].value;
   
      txtScholarshipAmountObj.value = form.txtScholarshipAmount.value;
      
      obj2.value = form.txtScholarshipAmount.value;
            
      hdnTotalObj.value = txtValueObj.value;


      obj.value = form.Total.value;

      
   // obj1.value = parseFloat(form.txtValue.value);
      
      //txtScholarshipAmountObj.value = parseFloat(form.txtScholarshipAmount.value);
   
   
}
//-->
</script>
--------
the code call is like this:
-------
<tr>
  <td colspan="3" style="width:100%" valign="top" align="left"><strong><span style="color:crimson">Scholarship Donation</span></strong></td>
  </tr>
  <tr>
  <td colspan="3" style="width:100%" valign="top" align="center">&nbsp; </td>
  </tr>  
 
    <!--this will be input C for scholarship donations -->
    <tr>
  <td style="width:33%" valign="top" align="right">Donation Amount&nbsp;&nbsp;</td>
  <td style="width:33%" valign="top" align="left">
 
  <input type="text" id="txtScholarshipAmount" name="input_C" size="10"  value="0" onblur="OnCalculateTotal(this.form.input_B.value, this.form.input_C.value, this.form)" />&nbsp;

 
<asp:HiddenField ID="ScholarshipAmount"  runat="server" Visible="true"/>
 
 
  </td>
 
  <td style="width:33%; background-color:#ffffff" valign="top" align="left"  >&nbsp; </td>
  </tr>
----------

ANY help would be greatly appreciated.
JavaScript Best Practices

Save hours in development time and avoid common mistakes by learning the best practices to use for JavaScript.

tan_devCommented:
did you try this:

var txtScholarshipAmountText = "<%=txtScholarshipAmount.Text%>"

it should work everytime. Is it just txtScholarshipAmount value you cant read? What about txtValue? Can you read that? Where are you calling showSelected()
Codeaddict7423Author Commented:
tan dev,
Thank you for your insight.
I implemented your code and I'm getting a compilation error as follows:
------
Compilation Error
Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: BC30451: Name 'txtScholarshipAmount' is not declared.

Source Error:

 

Line 116:      
Line 117:      
Line 118:      var txtScholarshipAmountText = "<%=txtScholarshipAmount.Text%>"
Line 119:      
Line 120:    //var obj2 = document.getElementById('txtScholarshipAmount').value;
 

Source File: Y:\default\main\www\WORKAREA\Common\htdocs\uc\RSVP\RSVP_GISDaySponsors.ascx    Line: 118

------
can youi please help?
Codeaddict7423Author Commented:
tan dev,
I changed my script as follows:
----
<script language="JavaScript" type="text/javascript">
<!--
function showSelected()
{
    form = document.forms[0];
   
      var selObj = document.getElementById('sponsorshiplevel');
      //var txtIndexObj = document.getElementById('txtIndex');
      
      var ScholarshipAmountObj = document.getElementById('txtScholarshipAmount');      
      
      var txtValueObj = document.getElementById('txtValue');
      //var txtTextObj = document.getElementById('txtText');
      
      var txtSponsorshipAmountObj = document.getElementById("ctl00_ctl00_cphPage_cphContent_SpecialControl_RSVPForm1_SponsorshipAmount");
      
      //var txtScholarshipAmountObj = document.getElementById('txtScholarshipAmount');
      
      var hdnTotalObj = document.getElementById('hdnTotal');
            
      var selIndex = selObj.selectedIndex;
      
      var sponsoramt = ScholarshipAmountObj.value;
      
      var obj1 = document.getElementById("ctl00_ctl00_cphPage_cphContent_SpecialControl_RSVPForm1_SponsorshipAmount");
      
      
      //var txtScholarshipAmountText = "<%=txtScholarshipAmount.Text%>"
      
    var obj2 = document.getElementById('txtScholarshipAmount').value;
             
      obj1.value = selIndex;
      
      txtValueObj.value = selObj.options[selIndex].value;
      
      // if i change selObj.options[selIndex].value to "text" i see only the names of the options in ddl
     
     //this is where i added this line to capture sponsorship levels
   // txtSponsorshipAmountObj.value = selObj.options[selIndex].text;

    txtSponsorshipAmountObj.value = selObj.options[selIndex].value;
   
   // txtValueObj.value = selObj.options[selIndex].value;
   
      txtScholarshipAmountObj.value = form.txtScholarshipAmount.value;
      
      txtScholarshipAmountText.text = form.txtScholarshipAmount.text;
            
      hdnTotalObj.value = txtValueObj.value;


      obj.value = form.Total.value;

      
   // obj1.value = parseFloat(form.txtValue.value);
      
      //txtScholarshipAmountObj.value = parseFloat(form.txtScholarshipAmount.value);
   
   
}
//-->
</script>
-----

the call to this script is as follows:

----------

  <input type="text" id="txtScholarshipAmount" name="input_C" size="10"  value="0" onchange="showSelected();" onblur="OnCalculateTotal(this.form.input_B.value, this.form.input_C.value, this.form)" />&nbsp;
------
Can you please review?
tan_devCommented:
is your text box displaying the right value through OnCalculate function?

  <input type="text" id="txtScholarshipAmount" name="input_C" size="10"  value="0" onblur="OnCalculateTotal(this.form.input_B.value, this.form.input_C.value, this.form)" />&nbsp;

if you were using document.getElementById('txtScholarshipAmount'); to get the values of all other textboxes and the only one that wasnt working was for txtScholarshipAmount. then i dont think the problem is in the code trying to retrieve the value i.e. there is no problem with your document.getElement method. In that case one out of two things might be wrong:

1. You oncalculate is not working fine. You can tell this if your textbox is displaying the right value or not.

2. Your onblur of textbox is calculating the txtScholarshipAmount value after your showSelected() function is being called. Hence showSelected() isnt getting the value of txtScholarshipAmount
tan_devCommented:
I do think whats happening is your value isnt getting calculated using OnCalculateTotal before you are processing it in  showSelected().

why dont you use one event to call both functions one after the other.

  <input type="text" id="txtScholarshipAmount" name="input_C" size="10"  value="0" onblur="OnCalculateTotal(this.form.input_B.value, this.form.input_C.value, this.form)" />&nbsp;

and inside

OnCalculateTotal()
{
//do everything else

showSelected();

}
Codeaddict7423Author Commented:
tan dev,
you read my mind. I was thinking of calling two different functions as follows:
------
 <input type="text" id="txtScholarshipAmount" name="input_C" size="10"  value="0" onblur="(showSelected() && OnCalculateTotal(this.form.input_B.value, this.form.input_C.value, this.form)" />&nbsp;
------
Codeaddict7423Author Commented:
tan_dev,
I'm trying to make this work and not having any success.  My javascript code follows:
---------
<script language="JavaScript" type="text/javascript">
<!--
function showSelected()
{
    form = document.forms[0];
   
      var selObj = document.getElementById('sponsorshiplevel');
      //var txtIndexObj = document.getElementById('txtIndex');
      
      var ScholarshipAmountObj = document.getElementById('txtScholarshipAmount');      
      
      var txtValueObj = document.getElementById('txtValue');
      //var txtTextObj = document.getElementById('txtText');
      
      var txtSponsorshipAmountObj = document.getElementById("ctl00_ctl00_cphPage_cphContent_SpecialControl_RSVPForm1_SponsorshipAmount");
      
      //var txtScholarshipAmountObj = document.getElementById('txtScholarshipAmount');
      
      var hdnTotalObj = document.getElementById('hdnTotal');
            
      var selIndex = selObj.selectedIndex;
      
      var sponsoramt = ScholarshipAmountObj.value;
      
      var obj1 = document.getElementById("ctl00_ctl00_cphPage_cphContent_SpecialControl_RSVPForm1_SponsorshipAmount");
      
      
      
    var obj2 = document.getElementById('txtScholarshipAmount').value;
             
      obj1.value = selIndex;
      
      txtValueObj.value = selObj.options[selIndex].value;
      
      // if i change selObj.options[selIndex].value to "text" i see only the names of the options in ddl
     
     //this is where i added this line to capture sponsorship levels
   // txtSponsorshipAmountObj.value = selObj.options[selIndex].text;

    txtSponsorshipAmountObj.value = selObj.options[selIndex].value;
   
   // txtValueObj.value = selObj.options[selIndex].value;
   
      txtScholarshipAmountObj.value = form.txtScholarshipAmount.value;
      
      txtScholarshipAmountText.text = form.txtScholarshipAmount.text;
            
      hdnTotalObj.value = txtValueObj.value;


      obj.value = form.Total.value;

      
   // obj1.value = parseFloat(form.txtValue.value);
      
      //txtScholarshipAmountObj.value = parseFloat(form.txtScholarshipAmount.value);
   
   
}
//-->
</script>


<script language="javascript" >

function CalculateTotal(Btext,Ctext,  form)

{

var B = parseFloat(Btext);

var C = parseFloat(Ctext);

//var D = parseFloat(Dtext);

form._Total.value = B + C   ;


//form.EnableViewState= true;

//alert("is this working");

}

/* ClearForm: this function has 1 argument: form.
   It clears the input and answer fields on the form.
   It needs to know the names of the INPUT elements in order
   to do this. */

function ClearForm(form)
{
form.input_B.value = "";

form.input_C.value = "";

form.input_D.value = "";

form._Total.value = "";
}

// end of JavaScript functions -->
</script>

<script language="javascript" >

function OnCalculateTotal(Btext,Ctext, form)
{
var B = parseFloat(Btext);

var C = parseFloat(Ctext);

var obj2 = document.getElementById('txtScholarshipAmount').value;
      


//var D = parseFloat(Dtext);

var obj = document.getElementById(hdnTotalId);

obj.value = form.Total.value = B + C  ;

obj2.value = form.txtScholarshipAmount.value;

function showSelected();

}

</script>
------------
the call to this is as follows:
------

  <input type="text" id="txtScholarshipAmount" name="input_C" size="10"  value="0"  onblur="OnCalculateTotal(this.form.input_B.value, this.form.input_C.value,  this.form)"  />

--------

however, the calculation is not working.  can you please review?


tan_devCommented:
is your calculation not correct?

i think there might be something wrong with this:

var obj2 = document.getElementById('txtScholarshipAmount').value;

you are defining obj2 as a value of textbox not a textbox. try this:

function OnCalculateTotal(Btext,Ctext, form)
{
var B = parseFloat(Btext);

var C = parseFloat(Ctext);

var obj2 = document.getElementById('txtScholarshipAmount');
      


//var D = parseFloat(Dtext);

var obj = document.getElementById(hdnTotalId);

obj.value = form.Total.value = B + C  ;

obj2.value = form.txtScholarshipAmount.value;

function showSelected();

}

Open in new window

Codeaddict7423Author Commented:
tan_dev,
I think this may be the issue:
below, please find my javascript:
-------------------
<script language="javascript" >

function CalculateTotal(Btext,Ctext,  form)

{

var B = parseFloat(Btext);

var C = parseFloat(Ctext);

//var D = parseFloat(Dtext);

C = form.input_C.value;

form._Total.value = B + C   ;


//form.EnableViewState= true;

//alert("is this working");

}

/* ClearForm: this function has 1 argument: form.
   It clears the input and answer fields on the form.
   It needs to know the names of the INPUT elements in order
   to do this. */

function ClearForm(form)
{
form.input_B.value = "";

form.input_C.value = "";

form.input_D.value = "";

form._Total.value = "";
}

// end of JavaScript functions -->
</script>

<script language="javascript" >

function OnCalculateTotal(Btext,Ctext, form)
{
var B = parseFloat(Btext);

var C = parseFloat(Ctext);

//var D = parseFloat(Dtext);

var obj = document.getElementById(hdnTotalId);

var obj2 = document.getElementById('txtScholarshipAmount').value;

obj.value = form.Total.value = B + C  ;


obj2.value = form.txtScholarshipAmount.value;

}

</script>
------------------
below is the cal to this script:
-----
<input type="text" id="txtScholarshipAmount" name="input_C" size="10"  value="0"  onblur="OnCalculateTotal(this.form.input_B.value, this.form.input_C.value,  this.form)"  />
 
<asp:HiddenField ID="ScholarshipAmount"  runat="server" Visible="true"/>
-----

I'm stil not getting the "scholarshipamount" field to the database.  ANY help would be greatly appreciated.
Codeaddict7423Author Commented:
tan_dev,
thanks for your quick reply.
below, please find my edited javascript:
------
<script language="javascript" >

function CalculateTotal(Btext,Ctext,  form)

{

var B = parseFloat(Btext);

var C = parseFloat(Ctext);

//var D = parseFloat(Dtext);

C = form.input_C.value;

form._Total.value = B + C   ;


//form.EnableViewState= true;

//alert("is this working");

}

/* ClearForm: this function has 1 argument: form.
   It clears the input and answer fields on the form.
   It needs to know the names of the INPUT elements in order
   to do this. */

function ClearForm(form)
{
form.input_B.value = "";

form.input_C.value = "";

form.input_D.value = "";

form._Total.value = "";
}

// end of JavaScript functions -->
</script>

<script language="javascript" >

function OnCalculateTotal(Btext,Ctext, form)
{
var B = parseFloat(Btext);

var C = parseFloat(Ctext);

//var D = parseFloat(Dtext);

var obj = document.getElementById(hdnTotalId);

var obj2 = document.getElementById('txtScholarshipAmount').value;

obj.value = form.Total.value = B + C  ;

obj2.value = form.C.value;

}

</script>
-----
my call to this scrips is as follows:
------
  <input type="text" id="txtScholarshipAmount" name="input_C" size="10"  value="0"  onblur="OnCalculateTotal(this.form.input_B.value, this.form.input_C.value,  this.form)"  />
------
The calculation is correct.
i just want to capture t he amount of the donation (input_C) that is in control "txtScholarshipAmount"





tan_devCommented:
you can just pass it as a variable to showSelected();

function OnCalculateTotal(Btext,Ctext, form)
{
var B = parseFloat(Btext);

var C = parseFloat(Ctext);

//var D = parseFloat(Dtext);

var obj = document.getElementById(hdnTotalId);

var obj2 = document.getElementById('txtScholarshipAmount').value;

obj.value = form.Total.value = B + C  ;

obj2.value = form.C.value;

showSelected(obj2);

}


function showSelected(var obj2)
{
//process obj2)
....

}

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.