Solved

ASP.net image button to textbox without postback

Posted on 2014-10-28
4
1,142 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

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

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

Suggested Solutions

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …
This video shows how to use Hyena, from SystemTools Software, to update 100 user accounts from an external text file. View in 1080p for best video quality.

734 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