Fatal编程技术网
  • javascript/
  • Javascript 单击“提交”按钮时显示图像

Javascript 单击“提交”按钮时显示图像

javascript jquery html image

Javascript 单击“提交”按钮时显示图像,javascript,jquery,html,image,submit,Javascript,Jquery,Html,Image,Submit,很抱歉让你这么难过，但这是我第一次编码。我只是想得到一些建议 经过大量的研究，我还没有找到任何我能理解的答案。我只需要一个图像显示时，输入提交是点击。代码如下： <!DOCTYPE html> <head> <title> Data tracking </title> <script type="text/javascript" src="first script.js"></script> </hea

很抱歉让你这么难过，但这是我第一次编码。我只是想得到一些建议

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

<!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>')
    });
});
我只是无法使图像cookie.png在单击submit时显示，它与html和脚本文件位于同一文件夹中，我不知道为什么

谢谢你的帮助

更新后，它将不会跟随脚本文件的路径，而是跟随html文件/URL的文件夹！确保图片放在那里

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

和图像应该像不一样使用

不要将src=first script.js与空格一起使用。。使用src=first-script.js

你甚至还包括jQuery吗？

你的代码正在工作，至少对我来说，在我填写所有输入并按submit之后，它将加载底部的图像。但是你有一个括号错了

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

您还需要包括jquery

最重要的是，学习如何使用控制台，这些类型的错误都是不言自明的

我不明白为什么你想在没有实际提交任何内容的情况下提交，除非你想通过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();
    });
});
如果您提交表单，则会进行刷新，这样您就不会看到图像…您需要防止默认行为，但最好是绑定表单的提交事件，因为用户仍然可以在不单击提交按钮的情况下提交表单。仅供参考，决不在表单中使用name=submit，它会覆盖本机提交DOM方法，但您是否包括jQuery library anywhere？？因为您的代码需要它才能工作，所以在附加图像之前使用preventDefault；。这样页面在默认情况下不会刷新。@PriyaRajaram Ya，但是没有数据发送到服务器。除非使用Ajax提交表单，否则您怎么能同时提交表单并保持在同一页面上？这应该是一条注释。W虽然是真的，但这只是页面刷新时问题的一小部分！他只是说他希望它出现在提交时？是的，但选项是要么在服务器端处理它，要么停止提交。那么提交就永远不会发生。停止否决投票，问题只是不好：我没有说你否决了我……但现在你做到了，祝贺你！怎么办你阻止表单提交刷新页面并扔掉添加的图像了吗？顺便说一句，img是无效元素；你的观察是错误的。哦，你不应该看到图像，至少不应该超过几毫秒，因为表单已经提交了。我真的不知道他代码的目的是什么，所以从技术上看，图片出现了…现在我不知道了rstand为什么回答这样的问题是如此的浪费…已经发布了这篇文章，并因为它被删除而被否决。这段代码也阻止了表单的提交。对不起。@TrueBlueAustie OP没有说它应该提交或不提交。如果没有提交，非ajax表单是毫无用处的，那么OP的回答将不胜感激：OP还没有提交o解释任何事情……现在继续下去在这一点上浪费了足够多的时间：@TrueBlueAussie这是我第一句话的重点：在没有实际提交的情况下使用表单是没有意义的。然而，如果一个人想要提交并显示图像或其他任何东西，OP的方式并不好。