javascript button click event

Hi experts,

I'm using Visual Studio 2010 and ASP.NET and .NET 4.0

I have asp page called TextboxToListBox1.aspx

This is the code for TextboxToListBox1.aspx:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TextboxToListBox1.aspx.vb" Inherits="Binding1.TextboxToListBox1" %>

<!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 runat="server">
    <title></title>
    </head>
<body>
    <form id="form1" runat="server">
    <div>
        This 
        example passes the text entered in a Asp TextBox to a Asp ListBox<br />
        <br />
        <br />
        Enter your name:
    
    <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
    
    <br /><br /><br />
    
    <asp:Button ID="btnSubmit" runat="server"
    OnClick="btnSubmit_Click" Text="Submit" />
    
    <br /><br />
    
    <asp:ListBox ID="ListBox1" runat="server"></asp:ListBox>

    <br />
    <br />
    
    </div>
    </form>
</body>
</html>

Open in new window


This is the code for TextboxToListBox1.aspx.vb:

Public Class TextboxToListBox1
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        ListBox1.Width = "200"
    End Sub

    Protected Sub btnSubmit_Click(sender As Object, e As EventArgs)


        ListBox1.Items.Add(New ListItem(txtName.Text))


    End Sub

End Class

Open in new window


On this page I have ASP TextBox , ASP Button and ASP Listbox.

When I enter a name in the textbox and then click the button , it adds the name to the listbox.

So when I run this page it looks like this:

my page

Now I'm trying to create the same example but a little different.
I want to use  a HTML TextBox , HTML Button and ( ASP Listbox or a HTML ListBox).

I'm not sure how to set up the click event of the HTML button to pass the value from the HTML textbox to the listbox.

So far I have this , but not sure how the syntax for the click event would go.

TextboxToListBox2.aspx
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TextboxToListBox2.aspx.vb" Inherits="Binding1.TextboxToListBox2" %>

<!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 runat="server">
    <title></title>
    </head>
<body>
    <form id="form1" runat="server">
    <div>
        This 
        example passes the text entered in a HTML TextBox to a Asp ListBox<br />
        <br />
        <br />
        Enter your name:
    
    <input id="txtName" type="text" />
    
    <br /><br /><br />
    
       <script language="javascript" type="text/javascript">
   
       </script>
        <input id="Button1" type="button" value="button" onclick=""/>
    <asp:Button ID="btnSubmit" runat="server"  Text="Submit" />
    
    <br /><br />
    
    <asp:ListBox ID="ListBox1" runat="server"></asp:ListBox>

    <br />
    <br />
    
    </div>
    </form>
</body>
</html>

Open in new window


TextboxToListBox2.aspx.vb
Public Class TextboxToListBox2
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        ListBox1.Width = "200"
    End Sub

    Protected Sub btnSubmit_Click(sender As Object, e As EventArgs)


        'ListBox1.Items.Add(New ListItem(txtName.Text))


    End Sub

End Class

Open in new window


Can anyone help?
LVL 1
maqskywalkerAsked:
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.

GaryCommented:
An ASP TextBox is an HTML Textbox - they are the same thing.
You're working within the .Net environment so why are you trying to work outside it.
Doing it yourself means writing a load of code to do what .Net can handle with one line.
0
Pierre CorneliusCommented:
demo of how to add html textbox value to html listbox:

<!DOCTYPE html> 
<html>
<head>
	<script type="text/javascript">
		function AddToListbox() {
			var tb = document.getElementById("txtName");
			var lb = document.getElementById("ListBox1");
			var option = document.createElement("option");
			option.innerHTML = tb.value;
			lb.appendChild(option);
		}
    </script>
</head>
<body>     	
    <p>This example passes the text entered in a HTML TextBox to a HTML ListBox</p>
	<p>        
        Enter your name: <input id="txtName" type="text" />
        <input id="Button1" type="button" value="Add to listbox" onclick="AddToListbox();"/>
    </p> 
    
	<select id="ListBox1" name="ListBox1" size="5" style="width: 300px" >	
	</select>    
</body>
</html>	

Open in new window

0

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.