Javascript Console Commands Not Working After Ajax Sending Back in Page

Question

I'm controlling a website in Chrome developer console. There is a form and a submit button for sending the form via ajax (I guess) without refreshing the page. The form is resetting after sending information.

I assigned some attributes to a form element in the page with Javascript. There are some processes that do not matter, and I'm sending the form but the attributes of the elements are resetting in the new form. I am forced into calling the same scripts again.

Is there anyway for global valid command with console coding, because the webpage isn't mine? (In pure-JavaScript)

Answer 1

there are a couple ways to achieve this.

the easiest: will probably be to create a snippet in the web developer tools, and run it from there.

Another manner would be to create a google extension (with 'declarativeContent' and 'activeTab' permissions) that can inject content script or execute script on a page.

you can find more information on developing chrome extensions and background page events here: https://developer.chrome.com/extensions/background_pages

Answer 2

Remove any submit listener on the form. Then attach your own submit listener with js event.stopPropagation() break.

Answer 3

While using the form in a html page the values inside the form get submitted to the url given in the form action without checking the javascript if some callback functions are defined.

<form method="post" action="your_url">
  ....
</form>

If you doesn't provide the action then the form get submitted to the same page, and no javascript action will take place.

If you want to submit the form using the javascript action then you can use one of the following methods.

Method 1: Calling javascript function from action

<form method="" action="Javascript:your_function()">
  ....
</form>
<script>
function your_function(){
  ...
}
</script>

In this method all the form validation and ajax submission should be carried out manually inside the function. URL and METHOD should also be defined inside the ajax call.

Method 2: Using JQuery form onSubmit

<form id="target" method="" action="">
....
</form>

<script>
$( "#target" ).submit(function( event ) {
  event.preventDefault();
  alert( "Handler for .submit() called." );
});
</script>

In this method the form validation is handled and callback to submit function will take place only when the form is validated. The ajax url should be given inside the ajax call.

Method 3: Using JQuery Ajax Validation Submit

<form id="target" method="post" action="your_url">
....
</form>

<script>
$("#target").validate({
  submitHandler: function(form) {
    $(form).ajaxSubmit({
      dataType:  'json',    //optional
      success: function(data) {
        ...
      }
    })
  }
})
</script>

In this method the URL and METHOD are defined in the form. The validate function will check whether the form is valid and submitHandler will execute when the form is valid. $(form).ajaxSubmit callback function will handle the ajax call to the URL and METHOD given the the form. This method will well suit for your question. Also try other methods in you need so

NOTE: Refer https://jqueryvalidation.org/validate/ for documentation.