jquery 我如何使html img src显示后点击输入提交通过JavaScript

bq3bfh9z 于 2023-10-17 发布在 jQuery

关注(0)|答案(1)|浏览(121)

大家好，我需要帮助，使一个<img src="https://i.ibb.co/QCMtktm/ns.gif" height="16px"width="16px" />显示在输入提交运行JavaScript，所以什么代码做它改变值“登录”到“登录”时，点击，所以我希望img显示旁边的“登录”当我点击提交
例如

<html>
<form class="ajaxform" id="ajaxform" method="post" data-action"">
<input name="submit" id="submit" type="submit" value="Login">
</form>
</html>

<script>
jQuery(document).ready(function($) {
        $('.ajaxform').on('submit', function(event) {
            event.preventDefault();
            let form = $(this);
            let formData = form.serializeArray(),
                submit = form.find('[type="submit"]'),
                action = form.attr('data-action')

            submit.prop('disabled', true);
            submit.val('Logging in'+<img src="https://i.ibb.co/QCMtktm/ns.gif" height="16px"width="16px" />);

});
    });

</script>

注意：请这个代码是错误的帮助我纠正它，也不要使用按钮标签只输入谢谢。

jquery

来源：https://stackoverflow.com/questions/77167517/how-do-i-make-html-img-src-display-after-clicking-input-submit-via-javascript

1条答案

按热度按时间

mbjcgjjk1#

嘿，我想你是想添加一个<img>到html <input type="submit"/>，但input不是一个容器标签，所以它不可能添加一个标签内使用上面提供的代码。
因此，有很多方法可以解决这个问题（方法2是最简单的方法）：
1.使用<input type="image" src=""/>在这里你可以改变src到你需要的图像后的行动.而不是

<input name="submit" id="submit" type="submit" value="Login">

<input type=image src=https://i.ibb.co/QCMtktm/ns.gif alt="Submit feedback" id="submit" value="login">

但是在这里你不能正常添加文本，所以你需要创建一个gif，它本身就有文本（“登录”）。
1.使用css并将背景设置为所需的gif/image。

jQuery(document).ready(function($) {
  $('.ajaxform').on('submit', function(event) {
    event.preventDefault();
    let form = $(this);
    let formData = form.serializeArray(),
    submit = form.find('[type="submit"]'),
    action = form.attr('data-action')

    submit.prop('disabled', true);
    submit.val('Logging in');
    submit.css({
      'background': 'url("https://i.ibb.co/QCMtktm/ns.gif") no-repeat',
      'background-size': '25% 100%',
      'text-align':'left',
      'background-position': 'right center',
    });
  });
});

input{
  border:1px solid #222;
  width:128px;
  height:32px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <body>
    <form class="ajaxform" id="ajaxform" method="post" data-action="">
      <input name="submit" id="submit" type="submit" value="Login">
    </form>
  </body>
</html>

注意：这里我使用了32 x32 px而不是16 x16的gif大小。（为了更好的可见性）。这里我已经将提交按钮的背景图像添加到加载gif中，并通过使用jQuery添加css将其定位在右侧。

赞(0）回复(0）举报 2023-10-17

我来回答

jquery 我如何使html img src显示后点击输入提交通过JavaScript

1条答案

相关问题

热门标签

最新问答