Solved

ASP.net image button to textbox without postback

Posted on 2014-10-28
4
1,170 Views
Last Modified: 2014-10-30
I'm working on a simple timeclock entry station. I have a textbox and image buttons from 0-9.

On btnImage Click event I have it update the textbox but each time it does it posts back and at times the page loads funky, as in some elements are misplaced in the page. Is there a way to make it so that when clicked on the btnImage it will just fill in the textbox without doing postback and refresh the whole page?

I've done:
<asp:ImageButton ID="btnImage1" runat="server" ImageUrl="~/Images/1.png" CausesValidation="False" OnClientClick="return false;"/>

Open in new window

but it just does not update the textbox if I do it.

I am not opposed to using AJAX, just need some help with it.

Thanks much,
Marek
0
Comment
Question by:maredzki
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 8

Accepted Solution

by:
johny_bravo1 earned 500 total points
ID: 40410002
If you are ok with updatepanel, put your Textbox and imagebutton in updatepanel. So it will not refresh the whole page.

>> OnClientClick="return false;" will prevent the postback

If you can show what you are doing on button_click, and if possible if we can do it from javascript, then there is no need of updatepanel also.

Cheers
0
 
LVL 2

Author Comment

by:maredzki
ID: 40410014
Here is my code, when I debug, I get duplicate of the update panel. I do have a timer on the same page, which that works fine.

Any ideas? Also, how would I update the textbox,text on the image click?

<div align="center">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
            <asp:TextBox ID="txtStudentID" runat="server" BorderStyle="Dotted" style="text-align:center"
            Enabled="False" Font-Bold="True" Font-Size="X-Large" ForeColor="DimGray" 
            Height="40px" MaxLength="9" Width="300px" BackColor="White" Text="000000000" />
        
        <br />
        <asp:Label ID="lblErrorMessage" runat="server" Text="" Font-Bold="True" ForeColor="Red"></asp:Label>
<!-- Your Student ID -->
        
    </div>
    <div align="center">
 


        <asp:ImageButton ID="btnImage1" runat="server" ImageUrl="~/Images/1.png" OnClientClick="return false;" />
        
        <asp:ImageButton ID="btnImage2" runat="server" ImageUrl="~/Images/2.png" CausesValidation="False" OnClientClick="return false;"/>
        <asp:ImageButton ID="btnImage3" runat="server" ImageUrl="~/Images/3.png" CausesValidation="False" OnClientClick="return false;"/><br />
        <asp:ImageButton ID="btnImage4" runat="server" ImageUrl="~/Images/4.png" />
        <asp:ImageButton ID="btnImage5" runat="server" ImageUrl="~/Images/5.png" />
        <asp:ImageButton ID="btnImage6" runat="server" ImageUrl="~/Images/6.png" /><br />
        <asp:ImageButton ID="btnImage7" runat="server" ImageUrl="~/Images/7.png" />
        <asp:ImageButton ID="btnImage8" runat="server" ImageUrl="~/Images/8.png" />
        <asp:ImageButton ID="btnImage9" runat="server" ImageUrl="~/Images/9.png" /><br />
        <asp:ImageButton ID="btnImage0" runat="server" ImageUrl="~/Images/0.png" />
        <br />

    </div>
    
    
    <p align="center">
        <asp:Button ID="btnSubmit" runat="server" BackColor="#66FF33" Text="Submit" 
            Width="75px" Font-Bold="True" Height="75px" onclick="btnSubmit_Click"/>
        <asp:Button ID="btnClear" runat="server" BackColor="#FF3300" Text="Clear" 
            Width="75px" Font-Bold="True" Height="75px" />
    </p>
    </ContentTemplate>
    </asp:UpdatePanel>

Open in new window

0
 
LVL 8

Expert Comment

by:johny_bravo1
ID: 40410019
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<div>
    <asp:TextBox runat="server" ID="txt1"></asp:TextBox>
</div>

        <asp:ImageButton ID="btnImage1" Class="imgCls" runat="server" ImageUrl="~/Images/1.png" OnClientClick="return false;" />
       
        <asp:ImageButton ID="btnImage4" Class="imgCls" runat="server" ImageUrl="~/Images/4.png" OnClientClick="return false;"/>
        <asp:ImageButton ID="btnImage5" Class="imgCls" runat="server" ImageUrl="~/Images/5.png" OnClientClick="return false;"/>

<script language="javascript">
    $(document).ready(function () {
        $('.imgCls').click(function () {
 //logic of your button click will go here
            $('#<%= txt1.ClientID %>').val('Image Button clicked')
            return false;
        });
    });
</script>
0
 
LVL 2

Author Closing Comment

by:maredzki
ID: 40414229
I've put it in an updatepanel and did not postback anymore.

Thanks.
0

Featured Post

NEW Veeam Agent for Microsoft Windows

Backup and recover physical and cloud-based servers and workstations, as well as endpoint devices that belong to remote users. Avoid downtime and data loss quickly and easily for Windows-based physical or public cloud-based workloads!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
NetCrunch network monitor is a highly extensive platform for network monitoring and alert generation. In this video you'll see a live demo of NetCrunch with most notable features explained in a walk-through manner. You'll also get to know the philos…
This tutorial will teach you the special effect of super speed similar to the fictional character Wally West aka "The Flash" After Shake : http://www.videocopilot.net/presets/after_shake/ All lightning effects with instructions : http://www.mediaf…

626 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question