Use Button1_Click In the HTML page

Hi,

I need to use the below code in the HTML page as a C# code or JavaScript code.
How does the code look like in the HTML page?  And how do I trier it from the Html code?

Thanks.
protected void Button1_Click(object sender, EventArgs e)
        {
            I1.Attributes["src"] = TextBox1.Text;
        }

Open in new window

Rad1Asked:
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.

guru_samiCommented:
So are you going to use asp.net button/Textboxes or normal html inputs?
Can you share code for your button/textbox?
0
Rad1Author Commented:
Hi,

I am unable to use the Button1 from the CS page, I need to use its functionality in the HTML page as JavaScript.

I need to assign the the textbox value to the IFrame they make it refresh.
  I1.Attributes["src"] = TextBox1.Text;

See code below.

Thank you
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Tab_Control._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">

<script runat="server">

    protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
    {
        int index = Int32.Parse(e.Item.Value);
        MultiView1.ActiveViewIndex = index;
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        I1.Attributes["src"] = TextBox1.Text;
    }
</script>

<script language="javascript" type="text/javascript">

    function Submit1_onclick(ObjectToUse) {
        var value1 = document.getElementById('<%=TextBox1.ClientID%>').value;
        window.open(value1);
    }
    
    function Submit2_onclick(ObjectToUse) {
        var value2 = document.getElementById('<%=TextBox2.ClientID%>').value;
        window.open(value2);
    }
    
    function Submit3_onclick(ObjectToUse) {
        var value3 = document.getElementById('<%=TextBox3.ClientID%>').value;
        window.open(value3);
    }
    function Submit4_onclick(ObjectToUse) {
        var value4 = document.getElementById('<%=TextBox3.ClientID%>').value;
        //I3.src.
        
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <style type="text/css">
        html
        {
            background-color:white;
        }
        .tabs
        {
            position:relative;
            top:1px;
            left:10px;
        }
        .tab
        {
            border:solid 1px black;
            background-color:#eeeeee;
            padding:2px 10px;
        }
        .selectedTab
        {
            background-color:white;
            border-bottom:solid 1px white;
        }
        .tabContents
        {
            border:solid 1px black;
            padding:10px;
            background-color:white;
            width: 726px;
            height: 298px;
        }
        #form2
        {
            height: 364px;
            width: 748px;
        }
    </style>
    <title>MultiView Tabs</title>
</head>
<body>
    <form id="form2" runat="server">
    <div>
    
    <asp:Menu
        id="Menu1"
        Orientation="Horizontal"
        StaticMenuItemStyle-CssClass="tab"
        StaticSelectedStyle-CssClass="selectedTab"
        CssClass="tabs"
        OnMenuItemClick="Menu1_MenuItemClick"
        Runat="server" BorderColor="#000099" BorderStyle="Solid" BorderWidth="2px">
<StaticSelectedStyle CssClass="selectedTab"></StaticSelectedStyle>

<StaticMenuItemStyle CssClass="tab"></StaticMenuItemStyle>
        <Items>
        <asp:MenuItem Text="SharePoint" Value="0" Selected="true" />
        <asp:MenuItem Text="File Manager" Value="1" />
        <asp:MenuItem Text="Web Browser" Value="2" />
        </Items>    
    </asp:Menu>
    
    <div class="tabContents">
    <asp:MultiView
        id="MultiView1"  
        ActiveViewIndex="0"
        Runat="server">
        <asp:View ID="View1" runat="server">
            <iframe ID="I1" runat="server" allowtransparency="true" 
                frameborder="1" name="I1" scrolling="auto" 
                style="border: medium solid #0066FF; width: 100%; height: 150%;"></iframe>
                
                        <asp:TextBox ID="TextBox1" runat="server" style="font-weight: 700" 
            Width="412px" ontextchanged="TextBox1_TextChanged">http://www.msn.comx</asp:TextBox>
            
                    <input id="Submit1" onclick="return Submit1_onclick('value1')" type="submit" 
            value="Open in New Window" />
            
            <asp:Button ID="Button1" runat="server" onclick="Button1_Click" 
            Text="Open in Portlet" Width="103px" />
        
        
        </asp:View>        
        <asp:View ID="View2" runat="server" EnableTheming="True">
               <iframe ID="I2" runat="server" allowtransparency="true" 
                frameborder="1" name="I2" scrolling="auto" 
                style="border: medium solid #0066FF; width: 100%; height: 150%;"></iframe>
                
                        <asp:TextBox ID="TextBox2" runat="server" style="font-weight: 700" 
            Width="411px" ontextchanged="TextBox2_TextChanged">http://www.msn.com</asp:TextBox>
            
                    <input id="Submit2" onclick="return Submit2_onclick('value2')" type="submit" 
            value="Open in New Window" />
            
            <asp:Button ID="Button2" runat="server" onclick="Button2_Click" 
            Text="Open in Portlet" Width="103px" />
        
        
            <br />
        </asp:View>        
        <asp:View ID="View3" runat="server">
               <iframe ID="I3" runat="server" allowtransparency="true" 
                frameborder="1" name="I3" scrolling="auto" 
                style="border: medium solid #0066FF; width: 100%; height: 150%;"></iframe>
                
                        <asp:TextBox ID="TextBox3" runat="server" style="font-weight: 700" 
            Width="408px" ontextchanged="TextBox3_TextChanged"></asp:TextBox>
            
                    <input id="Submit3" onclick="return Submit3_onclick('value3')" type="submit" 
            value="Open in New Window" />
            
               <input id="Submit4" onclick="return Submit4_onclick('value4')" type="submit"  
                   value="submit" /><br />
        </asp:View>        
    </asp:MultiView>
        <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" 
            Height="17px" RepeatDirection="Horizontal" Width="724px" 
            onselectedindexchanged="RadioButtonList1_SelectedIndexChanged">
            <asp:ListItem Value="http://www.msn.com">site</asp:ListItem>
            <asp:ListItem Value="http://www.msn.com/">site</asp:ListItem>
            <asp:ListItem>Boeing.com</asp:ListItem>
            <asp:ListItem Value="http://www.msn.com">site</asp:ListItem>
            <asp:ListItem Value="http://www.msn.com">site</asp:ListItem>
            <asp:ListItem Value="http://www.msn.com">site</asp:ListItem>
            <asp:ListItem Value="http://www.msn.com">site</asp:ListItem>
        </asp:RadioButtonList>
    </div>
    
    </div>
            
            <asp:Button ID="Button3" runat="server" onclick="Button3_Click" 
            Text="Open in Portlet" Width="103px" />
        
        
    </form>
</body>
</html>
       

Open in new window

0
GGSanthoshCommented:

Hi,

here is the Java Script funtion for your senario...

function loadIFrame()
{
            var txtBox = document.getElementById('TextBox1');
            if (txtBox != null )
                   document.getElementById('I3').src = txtBox .value;
}

Call this function on Button1 On client click event like below ( I hope you have the framework 2.0 or greater)

     <asp:Button ID="Button1" runat="server" onclick="Button1_Click"  
            Text="Open in Portlet" Width="103px"  OnClientClick="loadIFrame"/>

Let me know how it goes..
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
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

GGSanthoshCommented:
OnClientClick="loadIFrame()"
0
rameshrrCommented:
try this,

function loadIFrame()
{
            var txtBox = document.getElementById('TextBox1');
            if (txtBox != null )
                   document.getElementById('I3').src = txtBox .value;
            return false;
}
HTML Code should be,

     <asp:Button ID="Button1" runat="server"
            Text="Open in Portlet" Width="103px"  OnClientClick="return loadIFrame();"/>
0
Rad1Author Commented:
None of the functions worked???

0
Rad1Author Commented:
Which one is correct to use, the first one or the second?

1) var txtBox = document.getElementById('TextBox1');

2) var txtBox = document.getElementById('<%=TextBox3.ClientID%>').value;

0
rameshrrCommented:
first one is correct.
 since you have placed your textbox directly in the page's HTML code,  the id never changes
var txtBox = document.getElementById('TextBox1');
0
GGSanthoshCommented:
Both are correct but first one does not work if the control is inside any other Rich controls(ex: GRID)
So best practice is to use second one.


I tested the below code Its fine.. I did small changes to the above code ( I typed I3 instead I1 and we have to return false to stop sumition of the page)

 function loadIFrame()
    {
     var txtBox = document.getElementById('TextBox1');
            if (txtBox != null )
                   document.getElementById('I1').src = txtBox .value;
        return false;
    }


   <input type="submit" name="Button1" value="Open in Portlet" onclick=" return loadIFrame();" id="Button1" style="width:103px;" />

0
Rad1Author Commented:
Did you do it in MutiView control?
You can see that in my (above) code.
0
Rad1Author Commented:
Yes, it is working now.

Thank you.
0
GGSanthoshCommented:
No, your code has lot of events and you did not post the CS file. So I just took required part out of it. And made it work.
0
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
.NET Programming

From novice to tech pro — start learning today.