locked
jquery preview form does not work RRS feed

  • Question

  • User1991482975 posted

    Hi,

    i have those 3 fields :

                 <section>
                                @Html.ValidationMessageFor(m => m.PartnerAdvertiseTitle)
                                <label class="input">
                                    <i class="icon-append icon-pencil"></i>
                                    @Html.TextBoxFor(m => m.PartnerAdvertiseTitle, new { @class = "inputplaceholderviolet wid100x100", id = "PartnerAdvertiseTitleId", placeholder = HttpUtility.HtmlDecode(Html.DisplayNameFor(m => m.PartnerAdvertiseTitle).ToHtmlString()), onblur = "this.placeholder = '", onfocus = "this.placeholder = ''" + HttpUtility.HtmlDecode(Html.DisplayNameFor(m => m.PartnerAdvertiseTitle).ToHtmlString()) + "'" })
                                    <b class="tooltip tooltip-bottom-right">@Html.DisplayNameFor(m => m.PartnerAdvertiseTitle)</b>
                                </label>
                            </section>
                            <section>
                                @Html.ValidationMessageFor(m => m.PartnerAdvertiseDescription)
                                <label class="textarea">
                                    <i class="icon-append icon-comment"></i>
                                    @Html.TextAreaFor(m => m.PartnerAdvertiseDescription, new { @class = "inputplaceholderviolet wid100x100", cols = "200", rows = "10", placeholder = HttpUtility.HtmlDecode(Html.DisplayNameFor(m => m.PartnerAdvertiseDescription).ToHtmlString()), onfocus = "this.placeholder = ''", onblur = "this.placeholder = '" + HttpUtility.HtmlDecode(Html.DisplayNameFor(m => m.PartnerAdvertiseDescription).ToHtmlString()) + "'" })
                                    <b class="tooltip tooltip-bottom-right">@Html.DisplayNameFor(m => m.PartnerAdvertiseDescription)</b>
                                </label>
                            </section>
    
    <div class="row photo-div-file" style="background-color:#ffffff;">
                                        <div class="col-sm-12 col-md-12">
                                            <p>
                                                <label for="file1" class="photo-label-file">
                                                    <b class="fa fa-cut-square-o"></b>
    
                                                    <i class="fa fa-camera"></i>
    
                                                    <span>@ViewRes.Shared.UploadFoto</span>
                                                </label>
                                                <input class="photo-input-file" type="file" accept="image/*" onchange="loadFile(event)" name="files" id="file1" translate="yes">
                                                <img id="output" style="max-width:200px;" />
                                            </p>
    
                                        </div>
                                    </div>

    and this javascrit

    <script>
        $(function () {
            $("#PartnerAdvertiseTitle").change(function () {
                $("#PartnerAdvertiseTitleResult").text($(this).val()).css('color', 'red');
            })
            $("#PartnerAdvertiseDescription").change(function () {
                $("#PartnerAdvertiseDescriptionResult").text($(this).val()).css('color', 'red');
            })
            $("#file1").change(function () {
                var filename = $('input[type=file]')[0].files.length ? ('input[type=file]')[0].files[0].name : "";
                $("#myfileResult").text(filename);
            })
        })
    </script>

    but only the description field is well populate..

    but not the image and not the title filed

    and another thing i want to achive is teh following

    i have two more fields

    id=nameofbutton

    id=linkofbutton

    and with those two field i need to populate the preview of my link

    <a href="linkofbutton" title="nameofbutton">nameofbutton</a>

    thanks

    Friday, December 18, 2020 9:29 AM

Answers

  • User-1330468790 posted

    Hi grafic.web,

     

    Thank you for clarifying.

    If you want to preview the input (text, textarea), select (dropdown list) and file (image), you should use correct 'id' to select element and use onchange() event function to populate the value.

    Moreover, the image can also be previewed in <img> element. 

      

    You could refer to below demo. Few details have been changed:

    • 'PartnerAdvertiseTitle' input's attribute 'id' has been changed to "PartnerAdvertiseTitle".
    • A new property "PartnerAdvertiseType" is added as select list's value.
    • The event function "onchange="loadFile(event)" is removed from the 'file' input
    • A preview area <div> is added at the bottom of the form with five fields (an extra image preview)

      

    cshtml:

    @using (Html.BeginForm("Contact", "Home", FormMethod.Post))
    {
    
    <section>
        @Html.ValidationMessageFor(m => m.PartnerAdvertiseTitle)
        <label class="input">
            <i class="icon-append icon-pencil"></i>
            @Html.TextBoxFor(m => m.PartnerAdvertiseTitle, new { @class = "inputplaceholderviolet wid100x100", id = "PartnerAdvertiseTitle", placeholder = HttpUtility.HtmlDecode(Html.DisplayNameFor(m => m.PartnerAdvertiseTitle).ToHtmlString()), onfocus = "this.placeholder = ''", onblur = "this.placeholder = '" + HttpUtility.HtmlDecode(Html.DisplayNameFor(m => m.PartnerAdvertiseTitle).ToHtmlString()) + "'" })
            <b class="tooltip tooltip-bottom-right">@Html.DisplayNameFor(m => m.PartnerAdvertiseTitle)</b>
        </label>
    </section>
    
    <section>
        @Html.ValidationMessageFor(m => m.PartnerAdvertiseDescription)
        <label class="textarea">
            <i class="icon-append icon-comment"></i>
            @Html.TextAreaFor(m => m.PartnerAdvertiseDescription, new { @class = "inputplaceholderviolet wid100x100", cols = "200", rows = "10", placeholder = HttpUtility.HtmlDecode(Html.DisplayNameFor(m => m.PartnerAdvertiseDescription).ToHtmlString()), onfocus = "this.placeholder = ''", onblur = "this.placeholder = '" + HttpUtility.HtmlDecode(Html.DisplayNameFor(m => m.PartnerAdvertiseDescription).ToHtmlString()) + "'" })
            <b class="tooltip tooltip-bottom-right">@Html.DisplayNameFor(m => m.PartnerAdvertiseDescription)</b>
        </label>
    </section>
    
    <section>
        @Html.ValidationMessageFor(m => m.PartnerAdvertiseType)
        
            <i class="icon-append icon-comment"></i>
            @Html.DropDownListFor(m=>m.PartnerAdvertiseType,
                        (List<SelectListItem>)ViewBag.Types)
                        
            <b class="tooltip tooltip-bottom-right">@Html.DisplayNameFor(m => m.PartnerAdvertiseType)</b>
        
    </section>
    
    <div class="row photo-div-file" style="background-color:#ffffff;">
        <div class="col-sm-12 col-md-12">
            <p>
                <label for="file1" class="photo-label-file">
                    <b class="fa fa-cut-square-o"></b>
    
                    <i class="fa fa-camera"></i>
    
                    <span>UploadFoto</span>
                </label>
                <input class="photo-input-file" type="file" accept="image/*" name="files" id="file1" translate="yes">
                <img id="output" style="max-width:200px;" />
            </p>
    
        </div>
    </div>
    
    <div>
        <div>
            <label>PartnerAdvertiseTitle: </label>
            <label id="PartnerAdvertiseTitleResult"></label>
        </div>
        <div>
            <label>PartnerAdvertiseDescription: </label>
            <label id="PartnerAdvertiseDescriptionResult"></label>
        </div>
        <div>
            <label>PartnerAdvertiseTypeResult: </label>
            <label id="PartnerAdvertiseTypeResult"></label>
        </div>
        <div>
            <label>myfileResult: </label>
            <label id="myfileResult"></label>
        </div>
        <div>
            <label>my image preview: </label>
            <img id="myimagePreview" src="" alt="" />
        </div>
    
    </div>
    }

    Section scripts:

    @section scripts {
        <script>
            $(function () {
                $("#PartnerAdvertiseTitle").change(function () {
                    console.log("PartnerAdvertiseTitle");
                    $("#PartnerAdvertiseTitleResult").text($(this).val()).css('color', 'red');
                })
    
    
                $("#PartnerAdvertiseDescription").change(function () {
                    console.log("PartnerAdvertiseDescription");
                    $("#PartnerAdvertiseDescriptionResult").text($(this).val()).css('color', 'red');
                })
    
                $("#PartnerAdvertiseType").change(function () {
                    console.log("PartnerAdvertiseType");
                    $("#PartnerAdvertiseTypeResult").text($(this).val()).css('color', 'red');
                })
    
                $("#file1").change(function (e) {
                    console.log("file1");
                    if (this.files && this.files[0]) {
    
                        var reader = new FileReader();
    
                        reader.onload = function (e) {
                            $('#myimagePreview').attr('src', e.target.result);
                        }
    
                        reader.readAsDataURL(this.files[0]);
    
                        var filename = this.files.length ? this.files[0].name : "";
                        $("#myfileResult").text(filename);
    
                    }
                })
            })
        </script>
    }
    

    ViewBag.Types:

                ViewBag.Types = new List<SelectListItem>
                {
                    new SelectListItem
                    {
                        Text = "Type1",
                        Value = "1"
                    },
                    new SelectListItem
                    {
                        Text = "Type2",
                        Value = "2"
                    },
                    new SelectListItem
                    {
                        Text = "Type3",
                        Value = "3"
                    }
    
                };

    Demo:

     

    Hope this helps.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 23, 2020 6:53 AM

All replies

  • User-1330468790 posted

    Hi grafic.web,

     

    but only the description field is well populate..

    but not the image and not the title filed

    Could you please also provide us with the model and the values assigned to the model?

    That way, we are able to reproduce the problem and see if the problem is caused by the value format. 

    Thank you for understanding.

      

    and another thing i want to achive is teh following

    i have two more fields

    id=nameofbutton

    id=linkofbutton

    and with those two field i need to populate the preview of my link

    <a href="linkofbutton" title="nameofbutton">nameofbutton</a>

    For this requirement, you cannot directly use Html helper since the 'href' will be assigned the value from controller and action parameter.

    One workaround is that you directly bind the data to the <a> element as below:

    <a href="@Model.linkofbutton" title="@Model.nameofbutton">@Model.nameofbutton</a>

     

    Best regards,

    Sean

    Monday, December 21, 2020 7:34 AM
  • User1991482975 posted

    Hi,

    this is the model :

     [Required(ErrorMessageResourceName = "Required", ErrorMessageResourceType = typeof(ViewRes.ValidationStrings))]
            [Display(Name = "PartnerAdvertiseTitle", ResourceType = typeof(ViewRes.NamesPartner))]
            [StringLength(2000)]
            [AllowHtml]
            public string PartnerAdvertiseTitle { get; set; }
    
            [Required(ErrorMessageResourceName = "Required", ErrorMessageResourceType = typeof(ViewRes.ValidationStrings))]
            [Display(Name = "PartnerAdvertiseDescription", ResourceType = typeof(ViewRes.NamesPartner))]
            [StringLength(8000)]
            [AllowHtml]
            public string PartnerAdvertiseDescription { get; set; }
    
    
            [Display(Name = "PartnerAdvertiseButtonLink", ResourceType = typeof(ViewRes.NamesPartner))]
            public string PartnerAdvertiseButtonLink { get; set; }
    
     public int PartnerAdvertiseButtonId { get; set; }
            public virtual PartnerAdvertiseButton ParentPartnerAdvertiseButton { get; set; }
    
    
    
     public class PartnerAdvertiseButton
        {
            [Key]
            public int PartnerAdvertiseButtonId { get; set; }
    
            [Required]
            public string PartnerAdvertiseButtonTitle { get; set; }
            
        
        }

    but what i wanto to achive has nothing to do with my model, i simply want to make a preview of the fields while i am filling them and see this preview in realtime. and also the link.

    how to achive?

    Monday, December 21, 2020 8:11 AM
  • User-1330468790 posted

    Hi grafic.web,

     

    Sorry that I misunderstand the question about the title field.

    I think what you mean 'preview' is the content of placeholder, correct? (I tried to populate the field with value from model and it was sucessful so that I guess the problem located in model)

     

    I think the link issue is solved, right?

    Let's solve the rest one by one: Title, Image

      

    The reason why you cannot set the placeholder for Title correctly is that you write the codes incorrectly and break the syntax.

    Original Title field placeholder:

    @Html.TextBoxFor(m => m.PartnerAdvertiseTitle, new { @class = "inputplaceholderviolet wid100x100", 
    id = "PartnerAdvertiseTitleId",
    placeholder = HttpUtility.HtmlDecode(Html.DisplayNameFor(m => m.PartnerAdvertiseTitle).ToHtmlString()),
    onblur = "this.placeholder = '",
    onfocus = "this.placeholder = ''" + HttpUtility.HtmlDecode(Html.DisplayNameFor(m => m.PartnerAdvertiseTitle).ToHtmlString()) + "'" })

    Should be changed to :

     @Html.TextBoxFor(m => m.PartnerAdvertiseTitle, new { @class = "inputplaceholderviolet wid100x100", 
    id = "PartnerAdvertiseTitleId",
    placeholder = HttpUtility.HtmlDecode(Html.DisplayNameFor(m => m.PartnerAdvertiseTitle).ToHtmlString()),
    onfocus = "this.placeholder = ''",
    onblur = "this.placeholder = '" + HttpUtility.HtmlDecode(Html.DisplayNameFor(m => m.PartnerAdvertiseTitle).ToHtmlString()) + "'" })

      

    Regarding the image, I have no idea about how you want to 'preview' it.

    Could you please explain more about it?

      

    Hope helps.

    Best regards,

    Sean

    Tuesday, December 22, 2020 9:53 AM
  • User1991482975 posted

    Hi Sean, thanks for your answer.

    i do not want the preview' iof the content of placeholder,

    What i want to achive is the following :

    i have a form

    this form has some imputs :

    text

    textarea

    dropdown

    file

    When i write some text inside the text input and textarea i want to see this straight away as a preview in my div

    the same for my dropdownlist, i want to see as a preiew the text of the select

    and the image i just chose onmy file inmput

    how to achive this?

    thanks

    Tuesday, December 22, 2020 10:46 AM
  • User-1330468790 posted

    Hi grafic.web,

     

    Thank you for clarifying.

    If you want to preview the input (text, textarea), select (dropdown list) and file (image), you should use correct 'id' to select element and use onchange() event function to populate the value.

    Moreover, the image can also be previewed in <img> element. 

      

    You could refer to below demo. Few details have been changed:

    • 'PartnerAdvertiseTitle' input's attribute 'id' has been changed to "PartnerAdvertiseTitle".
    • A new property "PartnerAdvertiseType" is added as select list's value.
    • The event function "onchange="loadFile(event)" is removed from the 'file' input
    • A preview area <div> is added at the bottom of the form with five fields (an extra image preview)

      

    cshtml:

    @using (Html.BeginForm("Contact", "Home", FormMethod.Post))
    {
    
    <section>
        @Html.ValidationMessageFor(m => m.PartnerAdvertiseTitle)
        <label class="input">
            <i class="icon-append icon-pencil"></i>
            @Html.TextBoxFor(m => m.PartnerAdvertiseTitle, new { @class = "inputplaceholderviolet wid100x100", id = "PartnerAdvertiseTitle", placeholder = HttpUtility.HtmlDecode(Html.DisplayNameFor(m => m.PartnerAdvertiseTitle).ToHtmlString()), onfocus = "this.placeholder = ''", onblur = "this.placeholder = '" + HttpUtility.HtmlDecode(Html.DisplayNameFor(m => m.PartnerAdvertiseTitle).ToHtmlString()) + "'" })
            <b class="tooltip tooltip-bottom-right">@Html.DisplayNameFor(m => m.PartnerAdvertiseTitle)</b>
        </label>
    </section>
    
    <section>
        @Html.ValidationMessageFor(m => m.PartnerAdvertiseDescription)
        <label class="textarea">
            <i class="icon-append icon-comment"></i>
            @Html.TextAreaFor(m => m.PartnerAdvertiseDescription, new { @class = "inputplaceholderviolet wid100x100", cols = "200", rows = "10", placeholder = HttpUtility.HtmlDecode(Html.DisplayNameFor(m => m.PartnerAdvertiseDescription).ToHtmlString()), onfocus = "this.placeholder = ''", onblur = "this.placeholder = '" + HttpUtility.HtmlDecode(Html.DisplayNameFor(m => m.PartnerAdvertiseDescription).ToHtmlString()) + "'" })
            <b class="tooltip tooltip-bottom-right">@Html.DisplayNameFor(m => m.PartnerAdvertiseDescription)</b>
        </label>
    </section>
    
    <section>
        @Html.ValidationMessageFor(m => m.PartnerAdvertiseType)
        
            <i class="icon-append icon-comment"></i>
            @Html.DropDownListFor(m=>m.PartnerAdvertiseType,
                        (List<SelectListItem>)ViewBag.Types)
                        
            <b class="tooltip tooltip-bottom-right">@Html.DisplayNameFor(m => m.PartnerAdvertiseType)</b>
        
    </section>
    
    <div class="row photo-div-file" style="background-color:#ffffff;">
        <div class="col-sm-12 col-md-12">
            <p>
                <label for="file1" class="photo-label-file">
                    <b class="fa fa-cut-square-o"></b>
    
                    <i class="fa fa-camera"></i>
    
                    <span>UploadFoto</span>
                </label>
                <input class="photo-input-file" type="file" accept="image/*" name="files" id="file1" translate="yes">
                <img id="output" style="max-width:200px;" />
            </p>
    
        </div>
    </div>
    
    <div>
        <div>
            <label>PartnerAdvertiseTitle: </label>
            <label id="PartnerAdvertiseTitleResult"></label>
        </div>
        <div>
            <label>PartnerAdvertiseDescription: </label>
            <label id="PartnerAdvertiseDescriptionResult"></label>
        </div>
        <div>
            <label>PartnerAdvertiseTypeResult: </label>
            <label id="PartnerAdvertiseTypeResult"></label>
        </div>
        <div>
            <label>myfileResult: </label>
            <label id="myfileResult"></label>
        </div>
        <div>
            <label>my image preview: </label>
            <img id="myimagePreview" src="" alt="" />
        </div>
    
    </div>
    }

    Section scripts:

    @section scripts {
        <script>
            $(function () {
                $("#PartnerAdvertiseTitle").change(function () {
                    console.log("PartnerAdvertiseTitle");
                    $("#PartnerAdvertiseTitleResult").text($(this).val()).css('color', 'red');
                })
    
    
                $("#PartnerAdvertiseDescription").change(function () {
                    console.log("PartnerAdvertiseDescription");
                    $("#PartnerAdvertiseDescriptionResult").text($(this).val()).css('color', 'red');
                })
    
                $("#PartnerAdvertiseType").change(function () {
                    console.log("PartnerAdvertiseType");
                    $("#PartnerAdvertiseTypeResult").text($(this).val()).css('color', 'red');
                })
    
                $("#file1").change(function (e) {
                    console.log("file1");
                    if (this.files && this.files[0]) {
    
                        var reader = new FileReader();
    
                        reader.onload = function (e) {
                            $('#myimagePreview').attr('src', e.target.result);
                        }
    
                        reader.readAsDataURL(this.files[0]);
    
                        var filename = this.files.length ? this.files[0].name : "";
                        $("#myfileResult").text(filename);
    
                    }
                })
            })
        </script>
    }
    

    ViewBag.Types:

                ViewBag.Types = new List<SelectListItem>
                {
                    new SelectListItem
                    {
                        Text = "Type1",
                        Value = "1"
                    },
                    new SelectListItem
                    {
                        Text = "Type2",
                        Value = "2"
                    },
                    new SelectListItem
                    {
                        Text = "Type3",
                        Value = "3"
                    }
    
                };

    Demo:

     

    Hope this helps.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 23, 2020 6:53 AM