Typing and Click Simulation - using jQuery - Automatic Form Submission

Sometimes when we try to automate a human like behavior on a web page using scripts, we have to trigger the events such a clicks and keyboard pressing events (i.e. keypress, keydown, keyup). This task can be accomplished using plain JavaScript OR jQuery. In this demonstration, i am using both JavaScript and jQuery for accomplishing this goal because it makes it easier.

Goal of the typing simulation script

I am to write a script which will fill with a typing simulation and submit the "Feedback / Contact" form automatically provided below. The user have to click on the buttons given in this blog post section to start the event. Firstly, i will make a self executable function which will contain all the function and it will run when document (this page) is completely loaded in browser.

$(document).ready(function(){
  //code goes here
});

I have provided four buttons in this post which shall act as a trigger for firing the events. The first will simulated the name entry in the feedback form. The Second will simulated the email id part of the same. The third will fill the message part of the form which is also mandatory. Finally the fourth will trigger the click on send button to submit the form.

Mission Control (works only in desktop mode)
Name Email Message Send

{contactform}

Attaching event listeners

Now it's time to attach event listeners to the above four button which will call the respective functions to simulate event when clicked. For this, i have assigned each button an unique ID being nameBut, emailBut, msgBut and sendBut. To attach an event listener using jQuery follwing code is used.

$(document).ready(function(){
  $("#nameBut").on("click",function(){
      //Code to type name goes here
  });
  $("#emailBut").on("click",function(){
      //Code to type email goes here
  });
  $("#msgBut").on("click",function(){
      //Code to type message goes here
  });
  $("#sendBut").on("click",function(){
      //Code to simulate click
  });
});
  

At this point, we need a function which is capable of taking an string input as argument and simulate keypress for each and every character one by one. In order to make it look like an automated typing bot, we have to include some kind of delay in between the two keypress event OR keydown event. So, the function i came up with looks like this.

function type(i, charToType, target){
	setTimeout(function(){
	target.dispatchEvent(new KeyboardEvent('keypress',
	{'key':charToType}));
	}, 200 * i);
}
function typeSetter(data, target){
	target.focus();
	target.addEventListener('keypress', (event) => {
	target.value += event.key;
	});
	for(var i = 0; i<data.length; i++){
		type(i, data[i], target);
	}
}
  

So, using above, if i pass a string and target (which is the ID of the element on which typing has to situlated) to the typeSetter function, it will first put cursor on that element and further adds an event listener for keypress event. Whenever a key is simulated OR physically pressed, the listener will add the pressed key to the value of the target element. The reason to add listener here is that we can't simulate actual keypress or keydown events using JS or jQuery due to security limitation. Now its time to store the values which are to be typed in variables alongwith IDs of the target elements for further use in this script.

var name = "A Person Passing By :)";
var email = "abc@example.com";
var message = "Wow, it works!!";
var nameField = $("#ContactForm1_contact-form-name")[0];
var emailField = $("#ContactForm1_contact-form-email")[0];
var msgField = $("#ContactForm1_contact-form-email-message")[0];
  

Most of the things are done at this point, we just need to call the typeSetter function with relevant arguments when above given trigger / buttons are click. Finally for simulating a click event on send button we need one more line of code. So, here goes the final version.

$(document).ready(function(){
    var name = "A Person Passing By :)";
    var email = "abc@example.com";
    var message = "Wow, it works!!";
    var nameField = $("#ContactForm1_contact-form-name")[0];
    var emailField = $("#ContactForm1_contact-form-email")[0];
    var msgField = $("#ContactForm1_contact-form-email-message")[0];
    function type(i, charToType, target){
        setTimeout(function(){
            target.dispatchEvent(new KeyboardEvent('keypress',
            {'key':charToType}));
        }, 200 * i);
    }
    function typeSetter(data, target){
        target.focus();
        target.addEventListener('keypress', (event) => {
            target.value += event.key;
        });
        for(var i = 0; i<data.length; i++){
            type(i, data[i], target);
        }
    }
    $("#nameBut").on("click",function(){
        typeSetter(name, nameField);
        $("#nameBut").off("click");
    });
    $("#emailBut").on("click",function(){
        typeSetter(email, emailField);
        $("#emailBut").off("click");
    });
    $("#msgBut").on("click",function(){
        typeSetter(message, msgField);
        $("#msgBut").off("click");
    });
    $("#sendBut").on("click",function(){
        $("#ContactForm1_contact-form-submit").trigger("click");
        $("#sendBut").off("click");
    });
});
  

Give it a try and comment down below to share your experiments and improvements of this script & don't spam me using the triggers, please 😁. Happy Coding!! {alertSuccess}