Cant submit html form after use js script

Question

I have this html site

<html>
<head>
    <link rel="stylesheet" href="~/Content/index.css" />
    <link rel="stylesheet" href="~/Scripts/fancyBox/source/jquery.fancybox.css" type="text/css" media="screen" />
    <meta name="viewport" content="width=device-width" />
    <script type="text/javascript" src="~/Scripts/prototype.js"></script>
    <script type="text/javascript" src="~/Scripts/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="~/Scripts/Scale.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="~/Scripts/fancyBox/source/jquery.fancybox.pack.js"></script>
    <title>Countries</title>
</head>
<body>
    <div>
        @foreach (var country in Model)
        {
            <a class="fancybox">
                <div class="tooltip">
                    @using (Html.BeginForm("ChangeCulture", "Home", new { lang = country.Culture }))
                    {
                        <!-- onclick="zoomIn('@country.Culture')"-->
                        <input id="@country.Culture" class="@country.Sprite" type="image" name="submit" src="//" />
                        <span class="tooltiptext">@country.Country</span>
                    }
                </div>
            </a>
        }
    </div>
    <script type="text/javascript">
    $(document).ready(function () {
        $(".fancybox").fancybox({
            afterShow : function() {
                this.find("form").submit();
            }
        });
    })
</script>
</body>
</html>

The bottom line is that the flags of countries with tooltips are displayed on the screen and by pressing it is necessary to change the language of the tooltips to the language used in the country. I did this, and now I need to increase the whole screen after receiving the picture with the flag, and then the language would change. I found the fancybox scripts, but after it is inserted, the form is not sent, the selected flag appears in the center, but nothing happens after that, what could be the problem? I have not written to asp and js before

After click on the image I got an error

Uncaught TypeError: this.find is not a function
    at Object.afterShow (Index:119)
    at Function.trigger (jquery.fancybox.pack.js:17)
    at HTMLDivElement._afterZoomIn (jquery.fancybox.pack.js:33)
    at HTMLDivElement.d.complete (jquery-latest.min.js:4)
    at j (jquery-latest.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-latest.min.js:2)
    at i (jquery-latest.min.js:4)
    at m.fx.tick (jquery-latest.min.js:4)

My method

public ActionResult ChangeCulture(string lang)
        {
            var returnUrl = this.Request.UrlReferrer?.AbsolutePath;
            var cookie = this.Request.Cookies["lang"];
            if (cookie != null)
            {
                cookie.Value = lang;
            }
            else
            {
                cookie = new HttpCookie("lang")
                {
                    HttpOnly = false,
                    Value = lang,
                    Expires = DateTime.Now.AddYears(1)
                };
            }
            this.Response.Cookies.Add(cookie);
            return this.Redirect(returnUrl ?? "Index");
        }

Have you found JS errors in browser's console? $(this).closest("form").submit() usually work. — Tetsuya Yamamoto
– Tetsuya Yamamoto, Commented Aug 4, 2017 at 6:35
Try console.log(this) in $(".fancybox").fancybox. What you've get? I think you should use $(this).find("form").submit(); instead. — Tetsuya Yamamoto
– Tetsuya Yamamoto, Commented Aug 4, 2017 at 6:46
If I use $(this).find("form").submit(); I havent any errors but form doesnt submit — SmiLe
– SmiLe, Commented Aug 4, 2017 at 6:48
@TetsuyaYamamoto, Its in a loop - thats invalid html because of the duplicate id attributes — user3559349
– user3559349, Commented Aug 4, 2017 at 6:53

Karan Patel · Accepted Answer · 2017-08-04 07:08:09Z

1

You should user jquery selector

   <script type="text/javascript">
    $(document).ready(function () {
        $(".fancybox").fancybox({
            afterShow : function() {
                $(".fancybox").submit();
            }
        });
    })

answered Aug 4, 2017 at 7:08

Karan Patel

2,3193 gold badges21 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tetsuya Yamamoto · Accepted Answer · 2017-08-04 07:11:42Z

The error is located in this statement:

this.find("form").submit();

You're trying to call find() method on plain JS object inside this wrapper, where the function belongs to a jQuery object. The correct way is using jQuery object like this:

<script type="text/javascript">
    $(document).ready(function () {
        $(".fancybox").fancybox({
            afterShow : function() {
                // alternative: use $(this).closest("form").submit();
                $(this).find("form").submit();
            }
        });
    });
</script>

Additionally your redirection method in controller action should be like below, since Controller.Redirect requires full path or URL for redirect to another page:

public ActionResult ChangeCulture(string lang)
{
    var returnUrl = this.Request.UrlReferrer?.AbsolutePath;

    // cookie settings here

    if (string.IsNullOrEmpty(returnUrl))
    {
        return this.RedirectToAction("Index");
    }

    return this.Redirect(returnUrl);
}

Paolo Forgia · Accepted Answer · 2017-08-04 07:54:59Z

0

The this in this.find("form") is not $(".fancybox") here.

Try using $('.fancybox form') instead.

edited Aug 4, 2017 at 7:54

Paolo Forgia

6,7568 gold badges51 silver badges60 bronze badges

answered Aug 4, 2017 at 7:04

Ryan

244 bronze badges

Collectives™ on Stack Overflow

Cant submit html form after use js script

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related