1

I created a form demo.php with simple validations(untouch,dirty,valid/invalid) like on touch input change color to yellow ,on valid change color to green.If all fields are valid then submit button is active. everything works fine. On submit it go abc.js file then call ajax process which goes to pusttoDb.php and then the output is carried then display the result in the demo.php. The following image shows my form. enter image description here

if all the fields are valid then shows the submit button.

After submit it goes to js file which as following code:

$(document).ready(function(){
   alert('form js page');
        $( "#myForm" ).on( "submit", function( event ) {
            event.preventDefault(); //this will prevent the form from submitting
         //   var form_data = $("#myForm").serialize();
            var data=$("#myForm :input").serializeArray();
            $.ajax({
                 url: "pushtodb.php",
                method: "POST",            
                data: data,
                success: function (info) {
                    $("#result").html(info);
                    $('#myForm')[0].reset(); // to reset the data
                   /* $('#myForm').unbind("submit");
                    this.$('#myForm').form.markAsPristine();
                    this.$('#myForm').form.markAsUntouched();
                    this.$('#myForm').form.updateValueAndValidity();*/

                }
            });
        });
    });

From the pushtoDb.php file it carries success message but form doesn't reset with all validation and directly showing valid submit button as The below image :enter image description here

if we observe the above image only data is reset but form is showing as valid and submit input is also valid.

how to reset whole form instead of only data/values?

thanks in advance.

Pop-A-Stash
  • 6,572
  • 5
  • 28
  • 54
Ramlal S
  • 1,573
  • 1
  • 14
  • 34
  • 1
    You should really take some time to reduce the problem down. Do you really need all 4 columns (x2) to provide a minimal, verifiable example? https://stackoverflow.com/help/mcve – P.Brian.Mackey May 18 '18 at 19:04
  • for understanding purpose i kept my form images.hope you understand Actual problem is with Js code i.e. where i want to reset the whole form @P.Brian.Mackey – Ramlal S May 18 '18 at 19:07
  • 1
    It's not about whether I understand in this case. It's about brevity and valuing the time of those helping you for free. Who knows you may even find the answer to your question if you reduce the problem down enough? My initial thought was something around `Pristine`, but then I saw how verbose and dense this question is and I just wrote it off instead of deep diving into it to do that work myself. – P.Brian.Mackey May 18 '18 at 19:10
  • I try with `pristine` once again . i understand and thank you for valuable suggest.it helps me to know how to ask.I'll rectify. @P.Brian.Mackey – Ramlal S May 18 '18 at 19:15
  • 1
    I may be wrong about this or it may not be the right approach but is there any reason that you cannot redirect to the same page with and additional parameter in the url. If you redirect the page, it will be reloaded again and you validations will be reset and due to the additional parameter in the url you can show your success message also. – Kishen Nagaraju May 18 '18 at 19:24
  • 1
    using jQuery isn’t the angular way, that said I think whats happening is that these changes are happening outside of the angular env. try calling $scopy.digest(), forces a digest cycle. here's a [SO-post](https://stackoverflow.com/a/35826935/4812515) – alphapilgrim May 18 '18 at 19:59

1 Answers1

1

I think this could works.

$('#myForm [type=submit]').prop('disabled', true);

But I prefer to use a flag variable to set the submit button's state.

Alexis88
  • 297
  • 1
  • 11