How to change class method in immutable js code?

J

jesudode2018-06-20 16:54:11

JavaScript

jesudode, 2018-06-20 16:54:11

There is a code on the site. The script is loaded from the cloud, there is no way to change it. There is html. There is no way to change it either. FTP is also unavailable. There is one condition: it is possible to add code only after/before . This script has a form class and a submitForm method. How can I override the submitForm method after the script is loaded, if I have the opportunity to add code only for this condition? The task itself: there is a form on the site. When the submit button is clicked, form.submitForm() fires. form code:<head> и <body>

<div class="form-wrapper common-form" data-layout="vertical" data-style="colored">
  <div class="input-wrapper js-input-wrapper">
    <input class="js-input" type="text" name="Имя" placeholder="Имя" spellcheck="false" data-sort="0">
  </div>
  <div class="input-wrapper js-input-wrapper">
    <input class="js-input" type="text" name="Мэйл" placeholder="Мэйл">
  </div>
  <div class="input-wrapper js-input-wrapper">
    <input class="js-input" type="text" name="Номер телефона" placeholder="Номер телефона">
  </div>
  <div class="button">
    <div class="caption">Отправить</div>
  </div>
</div>

submitForm code:

submitForm: function(e) {
        this.xhr && this.xhr.abort(), this.xhr = $.ajax({
            dataType: "json",
            contentType: "application/json",
            url: "/api/connect/forms/submit",
            data: JSON.stringify(this.getFormData()),
            method: "POST",
            error: function(t) {
                e({
                    status: t.status,
                    responseJSON: t.responseJSON,
                    responseText: t.responseText
                });
            }
        }), t.analytics && t.analytics.sendEvent("Form Submit Click");
    }

I just need to add on success: This code only works in the chrome console after page load
document.location.href = "...";

form.prototype.submitForm = function { console.log('test') }
form.prototype.submitForm() // test

UPD: the problem is that an instance of a class is created in the loaded script, which I cannot change. The site has a form that, when changing the method in the class prototype, still works according to the old method. Is it even possible to do this?

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

A

Anton Spirin, 2018-06-20
@jesudode

Option 1:
1. Look at the code which listener is hung on the form.
2. If you have access to the handler, take it off.
3. Hang yours.
1. If there is no access to the handler, then replace the element:

var old_element = document.getElementById("btn");
var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);

2. Hang your listener.
For good, of course, find accesses that for some reason you don’t have and rewrite everything.

A

AngReload, 2018-06-20
@AngReload

So you can put any code between head and body? Then what is the question?
If someone else's script is loaded in the head, then directly paste your code, if in the body then by event

document.addEventListener('DOMContentLoaded', () => {
  form.prototype.submitForm = function { console.log('test') }
  form.prototype.submitForm()
});