Solved

ASP.net image button to textbox without postback

Posted on 2014-10-28
4
1,037 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
  • 2
  • 2
4 Comments
 
LVL 8

Accepted Solution

by:
johny_bravo1 earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
<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
Comment Utility
I've put it in an updatepanel and did not postback anymore.

Thanks.
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This video discusses moving either the default database or any database to a new volume.
This video explains how to create simple products associated to Magento configurable product and offers fast way of their generation with Store Manager for Magento tool.

763 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now