Как отправить форму в тимилиф и весеннюю загрузку с некоторой проверкой на стороне клиента javascript? - PullRequest
Новая
       9

Как отправить форму в тимилиф и весеннюю загрузку с некоторой проверкой на стороне клиента javascript?

0 голосов
/ 22 января 2019

Как отправить форму в тимелефиле и весенней загрузке с некоторой проверкой на стороне клиента в javascript, если форма не прошла проверку, не было отправлено, иначе запрос отправляется в контроллер?

В приведенном ниже коде, как я могу проверить, если первое число больше второго числа в javascript, только форма была отправлена ​​в контроллер, иначе произошла ошибка проверки и форма не была отправлена. 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Calculation </title>
    </head>
<body>
<h1>Subtraction</h1>
  <form action="#" id="myform" th:action="@{/result}" th:object="${subtraction}" method="POST">
   <table>
   <tr>
   
       <td/>First Number :</td>
	   <td>
   <input type="text" id="firstno" th:field="*{firstnumber}" />     
   </td>	   
  </tr>
   
   <tr><td>Second Number :</td>
     <td>
      <input type="text" id="secondno" th:field="*{secondnumber}" />   
     </td>
	   	</tr>	    
	    	<tr></tr>
	    	<tr><td colspan="2">
	              <input type="submit" value="Submit"/> 
	              <input type="reset" th:value="Reset"/>
	            </td>
	        </tr>
	    
</table>  
 </form>
 
 
 <script th:inline="javascript">

   var a=/*[[${subtraction.firstnumber}]]*/;
 var b=/*[[${subtraction.secondnumber}]]*/;

function isValid(form){
  if(a>b)
    return true;
  else
    return false;
}

 $('#myform').submit(function(e){                                   
                    e.preventDefault();
                   if( isValid($(this))){                           
                    $.ajax({
                        type: 'post',
                         url: /*[[ @{'/result'} ]]*/,
                          data:  $form.serialize(),
                          success: function(returnedData){
                              console.log(returnedData);                      
                            },    

                            error: function(xhr, exception) {

                                }
                    }); 
                   }
                   else{
                       alert("Validation failed");
                   }
                });
</script>
 
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 30 января 2019

После множества попыток я сам нашел решение 

 <script th:inline="javascript">
 
 

 
 $('#myform').submit(function(e){  
	
	var  a=parseInt($('#firstno').val(),10);
	console.log(a);
	var  b=parseInt($('#secondno').val(),10);
	console.log(b);
                   if(a>b){                           
                    $.ajax({
                        type: 'post',
                         url: "/result.html",
                          data: $('#myform').serialize(),
                          success: function(returnedData){
                        	  console.log("Success"); 
                        	  alert("success")
                            },    

                            error: function(xhr, exception) {
                            	console.log(exception);
                                }
                    }); 
                   }
                   else{
                       alert("Validation failed");
                       e.preventDefault(); 
                   }
                                     
                });
     
</script>
0 голосов
/ 23 января 2019

Вы можете использовать для этого javascript / ajax.как ниже 

<script th:inline="javascript">

function isValid(form){
  if(condition)
    return true;
  else
    return false;

}
 $('#myform ').submit(function(e){                                   
                    e.preventDefault();
                   if( isValid($(this))){                           
                    $.ajax({
                        type: 'post',
                         url: /*[[ @{'/url'} ]]*/,
                          data:  $form.serialize(),
                          success: function(returnedData){
                              console.log(returnedData);                      
                            },    

                            error: function(xhr, exception) {

                                }
                    }); 
                   }
                   else{
                       alert("Validation failed");
                   }
                });
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...