How do I simulate a HTTP request

Question

I basically want to switch to an animated button when the user clicks the sign up now button after entering their input to the input fields for the form.

Have you [**tried anything**](http://meta.stackoverflow.com/questions/261592) so far? — Obsidian Age, May 09 '18 at 03:34
maybe I didn't understand your question properly, but one suggestion I have, let capture the submit event at the document level and do animation after that pass that event to your target control, something like this. [link]https://stackoverflow.com/questions/35054728/calling-a-function-before-any-click-event-handler In this case your html need to be change — Ashish Yadav, May 09 '18 at 04:03
Are you basically looking to show a [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) or [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter) element while the form data is being submitted? — Anthony, May 09 '18 at 04:16
@Anthony pretty much but instead I want to show a "Submitting.." animation for 2 seconds when the user clicks the "Sign up now" button. Just to simulate a HTTP request, that's all. — syed, May 09 '18 at 04:20
Why two seconds? Seems made up. And why reinvent something that can be done with native html? And are you going to be submitting the data via an ajax request, or still having it do it via actual form submit to a different page? If the latter, why show an animation at all? Especially if it will just slow down the form actually being submitted? — Anthony, May 09 '18 at 04:24
And why make a drop-down required? I've never understood that. It has an option already selected, it can't not be empty. And you have the first one selected and disabled. May I recommend using a radio instead? — Anthony, May 09 '18 at 04:27
@Anthony All I am trying to accomplish is simulate a HTTP request. It's for a school project and one of our requirements is asking for this and I'm having difficulty figuring out how to do this. That's why. — syed, May 09 '18 at 04:27
@syed You can use JS .setTimeout() method. In that method, append any spinner to your submit button. — Akash Pinnaka, May 09 '18 at 04:28

Kavian K. · Answer 1 · 2018-05-09T06:14:51.660

You can use The setInterval() Method. The setInterval() method repeats a given function at every given time-interval.

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>

I want to do this with the existing button I have but replace it with a "Submitting..." button when the user clicks on it — syed, May 09 '18 at 13:09

How do I simulate a HTTP request

1 Answers1