13 Replies - 1389 Views - Last Post: 16 October 2012 - 12:05 PM

#1 [email protected]   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 25
  • Joined: 24-January 12

two fields on my webpage, one field input, second field displays data

Posted 15 October 2012 - 02:24 PM

Hi,
I have two fields on my webpage that I want to display the same data in. The first field is a textbox named txtFirstName. I want the user to input his first name and then I want the first name to display automatically in the next field. I want the information in the second field to display before the user hits the submit button. I am using ASP.net, runat="server" I am coding in html and VB. Can someone please tell me how I would do this?

Thank you
Sharon

Is This A Good Question/Topic? 0
  • +

Replies To: two fields on my webpage, one field input, second field displays data

#2 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5552
  • View blog
  • Posts: 14,558
  • Joined: 18-April 07

Re: two fields on my webpage, one field input, second field displays data

Posted 15 October 2012 - 03:05 PM

This type of functionality is typically done with javascript and the onkeydown event. When the user presses a key you can call some javascript and have it copy that key to the second box automatically.

Hope this is what you were looking to do. :)
Was This Post Helpful? 1
  • +
  • -

#3 NathanMullenax   User is offline

  • D.I.C Head
  • member icon

Reputation: 103
  • View blog
  • Posts: 218
  • Joined: 23-September 12

Re: two fields on my webpage, one field input, second field displays data

Posted 15 October 2012 - 03:10 PM

Sounds like you'd need to do that with some Javascript, since the server isn't going to help you until the form is submitted.

<html>
<head>
    <script language="javascript">
        var copy_field = function(id1,id2)
        {
            document.getElementById(id2).value =
            document.getElementById(id1).value;
        };
    </script>
</head>

<body>
    <form>
    <input type="text" name="n1" id="name1" onchange="copy_field('name1','name2')">
    <input type="text" name="n2" id="name2" />
    </form>
</body>


This sets field n2 to the value of n1 as soon as n1 loses focus.
Was This Post Helpful? 0
  • +
  • -

#4 [email protected]   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 25
  • Joined: 24-January 12

Re: two fields on my webpage, one field input, second field displays data

Posted 16 October 2012 - 07:25 AM

View PostNathanMullenax, on 15 October 2012 - 03:10 PM, said:

Sounds like you'd need to do that with some Javascript, since the server isn't going to help you until the form is submitted.

<html>
<head>
    <script language="javascript">
        var copy_field = function(id1,id2)
        {
            document.getElementById(id2).value =
            document.getElementById(id1).value;
        };
    </script>
</head>

<body>
    <form>
    <input type="text" name="n1" id="name1" onchange="copy_field('name1','name2')">
    <input type="text" name="n2" id="name2" />
    </form>
</body>


This sets field n2 to the value of n1 as soon as n1 loses focus.


Hi,
Thanks for your quick reply. My problem is that I'm using Visual Basic for my language. Can this be done in Visual Basic?

Thanks,
Sharon
Was This Post Helpful? 0
  • +
  • -

#5 NathanMullenax   User is offline

  • D.I.C Head
  • member icon

Reputation: 103
  • View blog
  • Posts: 218
  • Joined: 23-September 12

Re: two fields on my webpage, one field input, second field displays data

Posted 16 October 2012 - 09:35 AM

View Post[email protected], on 16 October 2012 - 07:25 AM, said:

Hi,
Thanks for your quick reply. My problem is that I'm using Visual Basic for my language. Can this be done in Visual Basic?

Thanks,
Sharon


You should be able to setup the client-side Javascript using Visual Basic, since ultimately the server is just spitting out an HTML page. Is it ASP.NET or 'classic'?
Was This Post Helpful? 0
  • +
  • -

#6 [email protected]   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 25
  • Joined: 24-January 12

Re: two fields on my webpage, one field input, second field displays data

Posted 16 October 2012 - 10:08 AM

View PostNathanMullenax, on 16 October 2012 - 09:35 AM, said:

View Post[email protected], on 16 October 2012 - 07:25 AM, said:

Hi,
Thanks for your quick reply. My problem is that I'm using Visual Basic for my language. Can this be done in Visual Basic?

Thanks,
Sharon


You should be able to setup the client-side Javascript using Visual Basic, since ultimately the server is just spitting out an HTML page. Is it ASP.NET or 'classic'?


I'm using asp.net
Was This Post Helpful? 0
  • +
  • -

#7 NathanMullenax   User is offline

  • D.I.C Head
  • member icon

Reputation: 103
  • View blog
  • Posts: 218
  • Joined: 23-September 12

Re: two fields on my webpage, one field input, second field displays data

Posted 16 October 2012 - 10:50 AM

K. So, assuming your textboxes are named 'tb1' and 'tb2' in VB. I think it would go something like this. I have no way of testing, and kind of suck with VB, so you might want to check out:

http://msdn.microsof...y/aa479011.aspx

It's what I'm looking at.
Page.RegisterStartupScript("copyfields",_
    "var copy_field = function(id1,id2)" &_
    "{" &_
         "document.getElementById(id2).value =" &_
         "document.getElementById(id1).value;" &_
    "};");
tb1.Attributes("onchange")="copy_fields('tb1','tb2')";


Hope this works.
Was This Post Helpful? 0
  • +
  • -

#8 [email protected]   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 25
  • Joined: 24-January 12

Re: two fields on my webpage, one field input, second field displays data

Posted 16 October 2012 - 11:05 AM

View Post[email protected], on 16 October 2012 - 10:08 AM, said:

View PostNathanMullenax, on 16 October 2012 - 09:35 AM, said:

View Post[email protected], on 16 October 2012 - 07:25 AM, said:

Hi,
Thanks for your quick reply. My problem is that I'm using Visual Basic for my language. Can this be done in Visual Basic?

Thanks,
Sharon


You should be able to setup the client-side Javascript using Visual Basic, since ultimately the server is just spitting out an HTML page. Is it ASP.NET or 'classic'?


I'm using asp.net


My link

this link has the code that I'm using. I'm trying to insert the javascript you gave me into my html code. I'm not sure what goes into input type....

Please help.

Thanks,
Sharon
Was This Post Helpful? 0
  • +
  • -

#9 [email protected]   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 25
  • Joined: 24-January 12

Re: two fields on my webpage, one field input, second field displays data

Posted 16 October 2012 - 11:30 AM

When I try to put javascript into my html page it errors out. It goes to the next table and says there is no asp. Here is my code:(the first file is the html page, the second file is the vb code that loads the input data to a SQL Database)

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="default.aspx.vb" Inherits="_default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>GDR Request Form</title>
    
    <script src="../Scripts/jQuery.js" type="text/javascript"></script>

    <link href="Styles/style2.css" rel="stylesheet" type="text/css" />
    
</head>

<body>

    <div id="content" style="text-align:center" >
        
         <table class="ftitle2" >
             <tr>
                 <td style="text-align:left" width="295px">
                     Organization name (if different from the Sponsor):</td>
                 <td>
                     <asp:TextBox ID="txtOrganization" runat="server" Width="466px"></asp:TextBox>

                 </td>
                 <td width="25px">
                     Date:</td>
                 <td>
                     <asp:TextBox ID="txtRequester_Date" runat="server" width="70px"
                        ToolTip="Please Enter The Request Date. (MM/DD/YYYY)"></asp:TextBox>
                 </td>
             </tr>
        </table>
        
        <table class="ftitle2" style="text-align:left">
             <tr>
                 <td width="69px">
                     First Name:
                 </td>
                 <td>
                     <asp:TextBox ID="txtFirstname" runat="server" width="175px"></asp:TextBox>
                </td>
                <td style="text-align:left" width="69px">
                     Last Name:
                 </td>
                 <td>
                     <asp:TextBox ID="txtLastname" runat="server" width="175px"></asp:TextBox>
                 </td>
            </tr>
        </table>
        
        <table class="ftitle2">
            <tr>
                <td style="text-align:left" width="25px">
                    Commercial:</td>
                <td>
                    <asp:TextBox ID="txtCommercial" runat="server" Width="110px" ToolTip="Please -Enter: (999) 999-9999"></asp:TextBox>
                </td>
                <td style="text-align:left" width="25px">
                    DSN:</td>
                
            </tr>
        </table>
        
            <table>            
            <tr class="ftitle2">
                <td>
                    Date: 
                    <asp:TextBox ID="txtRequestDate" runat="server" width="70px"></asp:TextBox>
                </td>
            </tr>
            
            <tr class="ftitle2">
                <td colspan="2" style="text-align:left">
                    <b>FROM:</b>
                    <asp:Text ID="txtReqFirstName" runat="server" width="175px"></asp:Text>
                        &nbsp;&nbsp;
                    <asp:Text ID="txtReqLastName" runat="server" width="175px"></asp:Text>
                        &nbsp;&nbsp;
                    <asp:Text ID="txtOrg" runat="server" Width="435px" ></asp:Text>
                </td>
            </tr>
            
        <asp:Button ID="btnSave" runat="server" Text="Submit Request" 
            Font-Bold="True" />
        
    </div>

     </form>

</body>

</html>


[code]
Imports System.Data.SqlClient
Imports System.Data

Partial Class _Default
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _
    Handles Me.Load

        txtRequester_Date.Text = Date.Today
        txtRequestDate.Text = Date.Today

        If (IsPostBack) Then
            ' this creates the connection.
            Dim sqlConn As New SqlConnection("Data Source=JITC-PC\GEOINT; Initial catalog=DEV_GEOINT; Integrated Security=SSPI;")
            ' create the command object
            Dim sqlCmd As New SqlCommand("sp_InsertRequest", sqlConn)
            ' define the connection for the command object
            sqlCmd.Connection = sqlConn
            sqlCmd.CommandType = CommandType.StoredProcedure
            ' define the SQL parameter
            sqlCmd.Parameters.AddWithValue("@Org", txtOrganization.Text)
            sqlCmd.Parameters.AddWithValue("@REQ_Date", txtRequester_Date.Text)
            sqlCmd.Parameters.AddWithValue("@LastName", txtLastname.Text)
            sqlCmd.Parameters.AddWithValue("@FirstName", txtFirstname.Text)
            sqlCmd.Parameters.AddWithValue("@Commercial", txtCommercial.Text)
            ' open the connection
            sqlConn.Open()
            ' execute the data insertion
            sqlCmd.ExecuteNonQuery()
            ' close SQL connection
            sqlConn.Close()
            ' dispose of the connection object (mostly optional but good practice)
            sqlConn.Dispose()
            ' Notify the submission was accepted
            Response.Write("Thank-you for your Request!")
        End If
    End Sub

    Private Function isempty(ByVal p1 As Object) As String
        Throw New NotImplementedException
    End Function
End Class


[/code]
Was This Post Helpful? 0
  • +
  • -

#10 NathanMullenax   User is offline

  • D.I.C Head
  • member icon

Reputation: 103
  • View blog
  • Posts: 218
  • Joined: 23-September 12

Re: two fields on my webpage, one field input, second field displays data

Posted 16 October 2012 - 11:37 AM

OK.

So I think you could modify the page with the form on it like this:

Right below the part where it includes the JQuery script, add
    <script language="javascript">
        var copy_field = function(id1,id2)
        {
            document.getElementById(id2).value =
            document.getElementById(id1).value;
        };
        if( !window.onload )
        { 
            window.onload = function() {
                document.getElementById('txtFirstname').onchange=
                    function(){copy_field('txtFirstname','txtReqFirstName');};
            };
        }
        else
        {
            var f = window.onload;
            window.onload = function()
            {
                f.call(window);
                document.getElementById('txtFirstname').onchange=
                    function(){copy_field('txtFirstname','txtReqFirstName');};
            };
        }
    </script>



So, the part with window.onload is checking if there's already a function associated with the load event; if so, it's defining a function that call the old one and then a new one that registers an event for the txtFirstname element. If not, it simply registers a function that sets up the change event for txtFirstname. Let me know if it works out.

This post has been edited by NathanMullenax: 16 October 2012 - 12:04 PM

Was This Post Helpful? 0
  • +
  • -

#11 NathanMullenax   User is offline

  • D.I.C Head
  • member icon

Reputation: 103
  • View blog
  • Posts: 218
  • Joined: 23-September 12

Re: two fields on my webpage, one field input, second field displays data

Posted 16 October 2012 - 11:54 AM

Er, I suppose before someone calls me out on it, it would make sense to make use of JQuery since it's already included. This would probably work in place of the script I posted last:
<script language="javascript">
$(window).load(function(){
    $("#txtFirstname").change(function(){
        $("#txtFirstname").val($("#txtReqFirstName").val());
    });
});
</script>


I'm also terrible with JQuery, so no guarantees on that one.

This post has been edited by NathanMullenax: 16 October 2012 - 12:03 PM

Was This Post Helpful? 0
  • +
  • -

#12 [email protected]   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 25
  • Joined: 24-January 12

Re: two fields on my webpage, one field input, second field displays data

Posted 16 October 2012 - 11:58 AM

hi,
thanks for the code. I put in the code and when I put in the first name and click on enter I get an error message: microsoft JScript runtime error: Unable to set value of the property 'value': object is null or undefined.

???

Thanks,
Sharon
Was This Post Helpful? 0
  • +
  • -

#13 NathanMullenax   User is offline

  • D.I.C Head
  • member icon

Reputation: 103
  • View blog
  • Posts: 218
  • Joined: 23-September 12

Re: two fields on my webpage, one field input, second field displays data

Posted 16 October 2012 - 12:01 PM

Sorry. Just noticed that the second field is txtReqFirstName (capital N) rather than txtReqFirstname (lowercase n). If you change the script to match it should work.
Was This Post Helpful? 1
  • +
  • -

#14 [email protected]   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 25
  • Joined: 24-January 12

Re: two fields on my webpage, one field input, second field displays data

Posted 16 October 2012 - 12:05 PM

It works! It works!!! Thank you so much.

Thank you,
Shaorn :bananaman:
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1