Question

我有一个按钮，我希望用户点击它，它会变成像this这样的微调器，所以我想的是让它像这样......

<form method="post" id="new_resource" class="new_resource" action="/resources">
  <div class="field">
    <input type="text" size="30" name="resource[url]" id="resource_url">
    <input type="hidden" value="5" name="resource[course_id]" id="resource_course_id">
  </div>
  <div class="actions">
    <input type="submit" value="Create" name="commit" id="resource_submit">
  </div>
</form>

所以我需要的是，如果有人点击id =“resource_submit的提交表单按钮，我会显示一个微调器......我正在考虑将微调器放在这个输入标签下面的span或image标签中但是我不确定最好的方式...

到目前为止，这是我的Jquery

$('form').submit(function(e){
 $(this).find('#resource_submit').hide();
 e.preventDefault();
});

我在页面上有多个表单，这就是为什么我使用这种方法，但我不知道如何实现微调器逻辑

Answer 1

除了动画旋转器的隐藏图像之外，我不确定你在这里缺少什么。

<强> CSS

.noShow{display:none;}

<强> HTML

<img src="/images/spinner.gif" class="noShow" />

<强> JS

$('form').submit(function(e){
    $(this).find('#resource_submit').hide();
    $(this).find('#spinnerImage').show();
});

Answer 2

将此html放在页面中的某个位置：

<div id="spinner" style="display: none"><img src="spinner.gif" /></div>

然后在你的表单提交功能：

$('form').submit(function(e){
  $(this).find('#resource_submit').hide();
  $("#resource_url").after("#spinner");
  $("#spinner").show();
  e.preventDefault();
});

通过jquery交换？

2 个答案: