Dear SirI have created a form where I have saved some values and image but while I have saved all value and image then image automatic hidelttable border34134 class34autostyle4334gt lttrgt lttd class34autostyle7534gt ltimg src34imagesm1png34 class34autostyle4234 gtlttdgt ltth class34autostyle4634 style34boxsizing borderbox34 colspan34534gtltspan class34

Hi indradeoWhen you are clicking on Button your entire page reloading so that your Image URL value is destroyingSo the solution is that you need to set Image url value in HiddenField and call that HiddenField on jQuery Button click it will retain your Image url value on Button clickPlease refer below sampleHTMLltimg id34imgMVC34 src34ImagesMVCpng34 alt34MVC Logo34 width3420034 gtltbr gtltinput type34hidden34 id34hfImg34 runat34server34 gtltaspButton ID34btnSubmit34 Text34Submit34 runat34server34 OnClick34Submit34 gtlthr gtltimg id34imgCopy34 width3420034 runat34server34 gtltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsjquery183jqueryminjs34gtltscriptgtltscript type34textjavascript34gt function 39IdbtnSubmit39on39click39 function

Retain (Maintain) Image URL set using jQuery on ASP.Net Button Click (PostBack)

indradeo

SOLVED CLOSED ACTIVE ANSWERED
User: indradeo
Posted: on May 15, 2022 11:19 PM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 2033

Dear Sir,

I have created a form where I have saved some values and image, but while I have saved all value and image then image automatic hide.

<table border="1" class="auto-style43">
        <tr>
            <td class="auto-style75">
                <img src="images/m1.png" class="auto-style42" /></td>
            <th class="auto-style46" style="box-sizing: border-box;" colspan="5"><span class="auto-style44">Meja Thermal Power Plant<br />
                <span style="color: rgb(0, 0, 0); font-family: Roboto; font-size: 15px; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">A Joint Venture of NTPC Ltd &amp; UPRVUNL</span></span><br class="auto-style44" />
            </th>
        </tr>
        <tr>
            <td class="auto-style100"></td>
            <th class="auto-style101" style="box-sizing: border-box;" colspan="5"></span>
        <font style="box-sizing: border-box;">
            <span class="auto-style45">VISITOR GATE PASS </span></font></th>
        </tr>
        <tr>
            <td class="auto-style63" rowspan="2">
                <img id="imgCapture" /></td>
            <th class="auto-style68" style="box-sizing: border-box;" colspan="4">Visitor Id:
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></th>
            <th class="auto-style88">Visitor Aadhar No. :
            <asp:TextBox ID="TextBox2" runat="server" Height="33px" Width="223px"></asp:TextBox>
            </th>
        </tr>
        <tr>
            <th class="auto-style83" style="box-sizing: border-box;" colspan="4">Visitor Name :
            <asp:TextBox ID="TextBox1" runat="server" Height="33px" Width="223px"></asp:TextBox>
            </th>
            <th class="auto-style84">Gender :
            <asp:DropDownList ID="DropDownList1" runat="server" Height="33px" Width="149px" CssClass="auto-style35">
                <asp:ListItem>Male</asp:ListItem>
                <asp:ListItem>Female</asp:ListItem>
                <asp:ListItem>Others</asp:ListItem>
                <asp:ListItem></asp:ListItem>
            </asp:DropDownList>
            </th>
        </tr>
        <tr>
            <th class="auto-style122" style="box-sizing: border-box;">Father/Husband Name:</th>
            <th class="auto-style114" style="box-sizing: border-box;" colspan="2">&nbsp;<asp:TextBox ID="TextBox4" runat="server" Height="33px" Width="223px"></asp:TextBox>
            </th>
            <th class="auto-style96" colspan="2">Current Address :&nbsp;
            </th>
            <th class="auto-style97">
                <asp:TextBox ID="TextBox5" runat="server" Height="33px" Width="346px" CssClass="auto-style120"></asp:TextBox>
            </th>
        </tr>
        <tr>
            <th class="auto-style94" style="box-sizing: border-box;">Purpose of visit :</th>
            <th class="auto-style54" style="box-sizing: border-box;" colspan="4">
                <asp:TextBox ID="TextBox6" runat="server" CssClass="auto-style116" Height="50px" Width="346px"></asp:TextBox>
            </th>
            <th class="auto-style72"></th>
        </tr>
        <tr>
            <th class="auto-style121" style="box-sizing: border-box;">Emp.Name:</th>
            <th class="auto-style118" style="box-sizing: border-box;" colspan="2">
                <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label></th>
            <th class="auto-style103">Emp. ID :</th>
            <th class="auto-style113">
                <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label></th>
            <th class="auto-style93">Department :<asp:Label ID="Label12" runat="server" Text=""></asp:Label></th>
        </tr>
        <tr>
            <th class="auto-style99">Gate pass Cretion Date/Time:</th>
            <th class="auto-style112">
                <asp:Label ID="Label10" runat="server" Text="Label" CssClass="auto-style106"></asp:Label></th>
            <th class="auto-style90" colspan="2">Plant Entry&nbsp; Date/Time:</th>
            <th class="auto-style109">
                <asp:Label ID="Label11" runat="server" Text="Label"></asp:Label></th>
            <th class="auto-style90"></th>
        </tr>
        <tr>
            <th height="120" colspan="3" class="auto-style73" style="height: 60px">CISF Signature</th>
            <th height="120" colspan="3" colspan="2" class="auto-style73" style="height: 60px">Employee Signature</th>
        </tr>
        <tr>
            <th colspan="6" class="auto-style73">
                <div class="noprint">
                    <input id="btnCapture" type="button" value="Image Capture" />
                    &nbsp;&nbsp;&nbsp;&nbsp;
                            <asp:Button ID="Button2" runat="server" Text="Submit" CssClass="auto-style81" CausesValidation="false" Height="22px" Width="78px" OnClick="Button1_Click" />
                    &nbsp;&nbsp;&nbsp;&nbsp;       
                        <button id="Print" onclick="window.print();return false;" causesvalidation="false">
                            Print</button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                </div>
        </tr>
    </table>
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="WebCam.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        Webcam.set({
            width: 170,
            height: 120,
            image_format: 'jpeg',
            jpeg_quality: 90
        });
        Webcam.attach('#webcam');
        $("#btnCapture").click(function () {
            Webcam.snap(function (data_uri) {
                $("#imgCapture")[0].src = data_uri;
                $("#btnUpload").removeAttr("disabled");
            });
        });
        $("#btnUpload").click(function () {
            $.ajax({
                type: "POST",
                url: "cisf_v.aspx/SaveCapturedImage",
                data: "{data: '" + $("#imgCapture")[0].src + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) { }
            });
        });
    });
</script>
<div class="noprint">
    <table align="center" border="1" bgcolor="#B7FFC9" cellpadding="4" cellspacing="2" style="border: 1px solid #999999; font-family: Century; width: 311px; margin-left: 44px;" class="auto-style1">
        <tr>
            <td class="auto-style80" colspan="4" style="text-align: center; background-color: #FEEEDE">Capture Image</td>
            <div class="noprint">
                <th height="120" colspan="2" class="auto-style74">
                    <div id="webcam"></div>
            </div>
        </tr>
    </table>
</div>

Download FREE API for Word, Excel and PDF in ASP.Net

arjunv

0 2

Reply
ANSWER
User: arjunv
Replied: on May 17, 2022 01:41 AM
Modified: on Jun 10, 2022 08:00 AM
Report

Hi indradeo,

When you are clicking on Button your entire page reloading so that your Image URL value is destroying.

So the solution is that you need to set Image url value in HiddenField and call that HiddenField on jQuery Button click it will retain your Image url value on Button click.

Please refer below sample.

HTML

<img id="imgMVC" src="Images/MVC.png" alt="MVC Logo" width="200" />
<br />
<input type="hidden" id="hfImg" runat="server" />
<asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClick="Submit" />
<hr />
<img id="imgCopy" width="200" runat="server" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript"> 
    $(function () {
        $('[Id*=btnSubmit]').on('click', function () {
            var img = $('[id*=imgMVC]');
            $('[id*=hfImg]').val(img.attr('src'));
        });
    });
</script>

Code

protected void Submit(object sender, EventArgs e)
{
    imgCopy.Attributes["src"] = hfImg.Value;
}

VB.Net

Protected Sub Submit(ByVal sender As Object, ByVal e As EventArgs)
    imgCopy.Attributes("src") = hfImg.Value
End Sub

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Retain (Maintain) Image URL set using jQuery on ASP.Net Button Click (PostBack)

Company

Explore

Follow us

Contact Us