Saturday, May 9, 2020

Typing and Click Simulation - using jQuery - Automatic Form Submission

simulation-typing-javascript
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 script: I am to write a script which will fill with a typing simulation and submit the "Feedback / Contact" form automatically provided in the right sidebar of this blog. The user have to click on the buttons given in this blog post section to start the event.
The script: 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)

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!!

10 comments :

  1. Sir can't we hack Nitro type using inspect element and the local storage , I was able to make me gold and have any car but before qualifying race , I clicked on race and I found myself gold and with Gotham but after qualifying race the data is not being saved.. I have given the hack on YouTube also but unscripted for you and some other NT hackers so that you can modify that so sir if you one time check that will be a matter of respect for me as only you can make that hack permanent
    The link is:-https://youtu.be/7MVEiDWSq0c
    A lot of respect and love for you from Bengal you are the pride of india

    ReplyDelete
    Replies
    1. Great work buddy, it looked into it and find out that it will work visually only.. No way to push these values on server. However, we can use it to give our profile NT gold feeling. I will am a video about it and give you credit. Thanks for figuring it out.

      Delete
  2. No no sir I am happy that you have seen my video that's my credit☺☺ and no need to give me credit as I don't have any wish of YouTube channel I just want that I could inform you so that you can modify them �� and the credit fully goes to who make the video so you can remove the credits sir. I just want to be little rich on NT ☺☺ , and my credit will be having someone great like you in my friend list ❤❤..
    My user name :- jyotiprasadjpc
    Thank you sir for making the video .. no need to give me credit I just love and respect you☺☺ and sir I am participating in the giveaway������

    ReplyDelete
  3. Sir thank you so so so much sir you are so great and so kindhearted sir means I have no word to thank you sir .. means you made my dream true sir thank you so so much sir.. Sir I am now looking through the inspect element and have found a quite things in the application tab then frame section top then scripts and then ga.js there are all things like cash scripts if you say sir I will make a private video about it

    ReplyDelete
    Replies
    1. I just created a discord server for discussing things about NT. Here is the link - https://discord.gg/ZtUvTxB will invite Ginfio also. It would will easy to share code etc on discord.

      Delete
  4. Ok I clicked in the discord now what I will do??

    ReplyDelete
    Replies
    1. i can't see you in chat,, complete the log in process and join server using this link https://discord.gg/eS9mNt

      Delete
  5. Ok I downloaded the discord thank you for giving me an opportunity to join you sir

    ReplyDelete
  6. I did not had the discord it is my first time and it is downloading sir

    ReplyDelete
    Replies
    1. ok buddy, do it. i will be back after dinner.

      Delete