【问题标题】:How do I simulate a HTTP request如何模拟 HTTP 请求
【发布时间】:2018-05-09 03:31:29
【问题描述】:

当用户在表单的输入字段中输入输入后单击立即注册按钮时,我基本上想切换到动画按钮。

【问题讨论】:

  • 到目前为止你有tried anything吗?
  • @ObsidianAge 我不知道从哪里开始?
  • 也许我没有正确理解您的问题,但我有一个建议,让我们在文档级别捕获提交事件并在将该事件传递给您的目标控件之后执行动画,就像这样。 [link]stackoverflow.com/questions/35054728/…在这种情况下你的html需要改变
  • 在提交表单数据时,您基本上是希望显示<progress><meter> 元素吗?
  • @syed 你可以使用 JS 的 .setTimeout() 方法。在该方法中,将任何微调器附加到您的提交按钮。

标签: javascript jquery


【解决方案1】:

您可以使用 setInterval() 方法。 setInterval() 方法在每个给定的时间间隔重复给定的函数。

function logOptions() {
	var s = document.getElementsByName( 'Interests' )[0];
	var text = s.options[ s.selectedIndex ].text;
	console.log(text)
}

function logEmail() {
	console.log( document.getElementById( 'email' ).value )
}

function myFunction( e ) {
  e.preventDefault();

  document.getElementById( 'result' ).innerHTML = 'Submiting. <br/>Please wait';

  var elapsed = 0,
      str = ".",
      x = setInterval( function() {

      //Ajax simulation
      str = str + ".";
      if ( !elapsed ) document.getElementById( 'result' ).innerHTML = 'Submiting.' + str + '<br/>Please wait';

      // Calculate elapsed time
      elapsed += 1;

      // If the elapsed time is finished, write some text
      if ( elapsed > 2 ) {
        clearInterval( x );
        document.getElementById( 'result' ).innerHTML = 'Form Submited!';
        var elem = document.getElementById( 'inputform' );

        if ( elem.detachEvent) {
          elem.detachEvent( 'onsubmit', myFunction );
          elem.submit();
        } else {
          elem.removeEventListener( 'submit', myFunction );
          elem.submit();
        }
        }
      }, 1000 );

  logOptions();
	logEmail()
};

// attach event
	if ( document.attachEvent ) document.attachEvent( 'onsubmit', myFunction );
	else document.addEventListener( 'submit', myFunction );
<form id="inputform" method="get" action="confirmation.html">
  <input id="email" type="email" placeholder="Email Address" required>
  <button type="submit" id="validate">Sign up now</button>
  <select name="Interests" required>
    <option value="" disabled selected>Interested in..</option>
    <option value="option1">Marketing</option>
    <option value="option2">Option2</option>
    <option value="option3">Option3</option>
    <option value="option4">Option4</option>
  </select>
</form>

<div id="result"></div>

【讨论】:

  • 我想用我现有的按钮来做这个,但是当用户点击它时用“提交...”按钮替换它
猜你喜欢
  • 1970-01-01
  • 2018-05-29
  • 1970-01-01
  • 2016-11-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-12-08
  • 1970-01-01
相关资源
最近更新 更多