CODEWITHSUNDEEP
jqueryajaxmetro-ui-css
satyajit bhowmik
satyajit bhowmik

Reputation: 31

How to submit form using jquery ajax after validating with metro ui

I am learning webpage programming and I am using Metro 4 UI. I am trying to submit form data using jquery ajax after passing Metro4 validation. Normally, my form is submitting after validation, but when I am trying to submit the said form using jquery ajax the form is submitting data with data validation error. Please help to solve the same. Here is my HTML code.

$(document).ready(function(){
	$('#submt').on('click', function(){
		//event.preventDefault(); //prevent default action
		var form = $('#semi');
        $.ajax({
                 url: 'marks.inc.php',
                 data: form.serialize(),
                 method: 'POST',
                 beforeSend: function(){
                     $("#loading-gif").show();
                 },
                 success: function(response) {
					Metro.dialog.create({
						title: "Response on Form submit.",
						content: "<div>"+response+"</div>"
					});
                 },
                 complete: function(){
					 $("#semi input[type=text]").val('');
					 $("#semi input[type=checkbox]").prop("checked", false);
                     $('#loading-gif').hide();
                 }
       });
	   //return false;
    });	
});
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
  </head>
  <body>
<form id="semi" name="semi" class="mt-2" data-role="validator" data-clear-invalid="5000" method="POST" action="javascript:" enctype="multipart/form-data">
    <div class="row">
      <div class="cell-md-4">
        <div class="form-group">
        <label>English</label>
        <input data-validate="required pattern=(^([0-9]|[1-4][0-9]|[5][0]|[0-9]\.[0-9]{2}|[0-9]\.[0-9]{1}|[1-4][0-9]\.[0-9]{2}|[1-4][0-9]\.[0-9]{1}|[5][0]\.[0]{2})$)" type="text" id="ntwsys_th" name="ntwsys_th" data-role="input">
        <span class='invalid_feedback temps'>
            Accepts 0 to 50.00 only
        </span>
        </div>
      </div>
    </div>
<br />
    <div class="row">
      <div class="cell-md-4">
        <button class="button primary" id="submt">Submit</button>
      </div>
		</div>
	</form>
 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
</body>

Please help me to solve this.

Upvotes: 0

Views: 535

Answers (1)

Pedro Antonio
Pedro Antonio

Reputation: 1

try using this version of jquery: jquery-2.1.3.js, it worked for me.

Upvotes: 0

Related Questions