单击提交按钮时显示图像

Question

抱歉让您这么不高兴，但这是我第一次编码。我只是想要一些建议。

经过大量研究，我没有找到任何我能理解的问题答案。单击输入提交时，我只需要显示一个图像。这是代码：

<!DOCTYPE html>
<head>
    <title> Data tracking </title>
    <script type="text/javascript" src="first script.js"></script>
</head>
<body>
    <h1>Track your data</h1>
    <p>Would you like to know how many data a web site can track from you?</p>
    <form method="get">
        <fieldset>
            <legend>Personal data</legend>
            <input type="radio" name="sex" value="male" checked>Male
            <br>
            <input type="radio" name="sex" value="female">Female
            <br>
            <input type="email" name="email" placeholder="your email">
            <br>
            <input type="text" name="firstname" placeholder="first name">
            <br>
            <input type="text" name="lastname" placeholder="last name">
            <br>
            <input id="submit" name="submit" type="submit">
        </fieldset>
        <div></div>
    </form>
</body>

JavaScript:

$(document).ready(function ()){
    $("#submit").click(function () {
        $('body').append('<img src="cookie.png"></img>')
    });
});

我只是无法使与 html 和脚本文件位于同一文件夹中的图像 "cookie.png" 在单击提交时出现，不知道为什么。

感谢您的帮助！

Answer 1

（已更新） 它不会遵循脚本文件的路径，而是您的 html 文件 / URL 的文件夹！确保图片放在那里。

但请注意，提交时，页面将被转发到新页面/重新加载。所以你不能两者都做：在同一页上显示图片并在下一页上看到它。您必须在同一页面上通过 Ajax 提交表格。

图像应该像 <img src="cookie.png" /> 一样使用，而不是 <img src="cookie.png"></img>

并且不要使用带空格的 src="first script.js".. 使用 src="first-script.js"

你有 jQuery 吗？

Answer 2

我不明白你为什么要 submit 而 实际上 没有提交任何东西，除非你想 post 通过 Ajax （但你走错了路）。

然而，你需要这样使用preventDefault();

$(document).ready(function()){
    $("#submit").click(function(e) {
        e.preventDefault(); // prevent from submitting
        $('body').append('<img src="cookie.png" />');
    });
});

但这会在您单击页面后加载图像；这不是最好的。

更好的解决方案可能是让您的图像已经加载（但隐藏）并在点击时显示它：

<!DOCTYPE html>
<head>
    <title> Data tracking </title>
    <script type="text/javascript" src="first script.js"></script>
</head>
<body>
    <h1>Track your data</h1> 
    <p>Would you like to know how many data a web site can track from you?</p> 
    <form method="get">
        <fieldset>
            <legend>Personal data</legend>
            <input type="radio" name="sex" value="male" checked>Male
            <br>
            <input type="radio" name="sex" value="female">Female
            <br>
            <input type="email" name="email" placeholder="your email">
            <br>
            <input type="text" name="firstname" placeholder="first name">
            <br>
            <input type="text" name="lastname" placeholder="last name">
            <br>
            <input id= "submit" name= "submit" type="submit">
        </fieldset>
        <div></div>
    </form>

    <igm src="cookie.png" id="formImg" style="display:none;" />
</body>

$(document).ready(function()){
    $("#submit").click(function(e) {
        e.preventDefault(); // prevent from submitting
        $("#formImg").show();
    });
});

单击提交按钮时显示图像

Display an image when submit button is clicked

html

javascript

jquery

image

submit