如何通过JavaScript实现点击Input Submit后显示图片并修正代码

原实现的错误在于试图在<input>的value属性中拼接HTML标签，但<input>的value仅支持纯文本，无法渲染HTML内容。以下是符合要求的修正方案：

修正后的HTML代码 #

<html>
<form class="ajaxform" id="ajaxform" method="post" data-action="">
  <div class="submit-container">
    <input name="submit" id="submit" type="submit" value="Login">
    <img src="https://i.ibb.co/QCMtktm/ns.gif" height="16px" width="16px" style="display:none; vertical-align:middle;" />
  </div>
</form>
</html>

修正后的JavaScript代码 #

jQuery(document).ready(function($) {
  $('.ajaxform').on('submit', function(event) {
    event.preventDefault();
    let form = $(this);
    let submit = form.find('[type="submit"]'),
        loadingImg = form.find('img');

    submit.prop('disabled', true);
    submit.val('Logging in');
    loadingImg.show();
  });
});

实现逻辑说明 #

• 将提交按钮和加载图标放在同一个容器内，初始通过display:none隐藏加载图标
• 监听表单提交事件，先阻止默认提交行为
• 修改按钮的value为“Logging in”，同时禁用按钮防止重复提交
• 显示加载图标，实现文本+图标的加载状态效果

内容的提问来源于stack exchange，提问作者Steve Conder