Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

ASP.net image button to textbox without postback

Posted on 2014-10-28
4
Medium Priority
?
1,200 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 2000 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

Get your Disaster Recovery as a Service basics

Disaster Recovery as a Service is one go-to solution that revolutionizes DR planning. Implementing DRaaS could be an efficient process, easily accessible to non-DR experts. Learn about monitoring, testing, executing failovers and failbacks to ensure a "healthy" DR environment.

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
This article discusses how to implement server side field validation and display customized error messages to the client.
In this video you will find out how to export Office 365 mailboxes using the built in eDiscovery tool. Bear in mind that although this method might be useful in some cases, using PST files as Office 365 backup is troublesome in a long run (more on t…
In response to a need for security and privacy, and to continue fostering an environment members can turn to for support, solutions, and education, Experts Exchange has created anonymous question capabilities. This new feature is available to our Pr…

715 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