Hello, I am trying to improve the processing of a form with text using jquery. The script displays successfully saved data from the form to the screen without reloading the page if they have been tested for the number of sent characters. The project is done on the Laravel 5.3 php framework.

What exactly are I trying to do? When displaying data, the text should be displayed in green, should appear smoothly, and after 2-3 seconds change to black.

With the output of the text in green, everything is fine, but the animation does not work out. Tell me how you can organize it. Thanks in advance.

Such code at the moment:

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .center { text-align: center; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function () { $("#sendForm").submit(function (ev) { ev.preventDefault(); $('#messageShow').hide(); var title = $("#title").val(); var fail=""; if (title.length < 3) fail="НазваниС ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΡΡ‚ΠΎΡΡ‚ΡŒ ΠΈΠ· Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ 3 символов"; if (fail!=""){ $('#messageShow').css({'color' : 'red'}); $('#messageShow').html(fail); $('#messageShow').show(); return false; } $.ajax({ url: '{{action('CategoriesController@store')}}', type:'POST', data:$('#sendForm').serialize(), cache:false, success: function () { var neww = "new!"; $("#title").val(""); $("#new").css({'color':'red'}); $("#new").html(neww); $("#categoryBlock").append("<h4>"+title+"</h4>").css({'color' : 'limegreen'}).show(); } }) }) }) </script> </head> <body> <div class="center"> <form method="POST" enctype="multipart/form-data" id="sendForm" action="{{action('CategoriesController@store')}}"> {{ csrf_field() }} <input type="text" name="title" id="title" placeholder="Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΡŽ"> <input type="submit" class="btn-primary" value="Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ" > <div id="messageShow"></div> </form> @if(Session::has('message')) {{Session::get('message')}} @endif </div> <br> <div class="center"> <h3>Бписок ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ:</h3><br> @foreach($categories as $category) <h4>{{$category->title}}</h4> @endforeach <div id="new"></div> <div id="categoryBlock"></div> </div> </body> </html> @endsection
  • To change colors: $('.myclass').css('color','green') - Abmin

2 answers 2

 $('button').click(() => { $('#s').text("ВсС ΡΠΎΡ…Ρ€Π°Π½ΠΈΠ»ΠΎΡΡŒ!!! ))").css({ 'opacity': 0, 'color': 'green' }); $('#s').animate({ 'opacity': 1 }, 1000, setBlack()); }) function setBlack() { setTimeout(function() { $('#s').css('color', 'black'); }, 2000); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Click me</button> <br> <span id="s"></span>

  • Thank you very much, helped) - Dust0

Alternatively, you can add a class that will make your text black, and add it with a timeout after the data has been received.

For example, I wrote a similar click action.

 function changeColor() { setTimeout( function() { $('.main').addClass('black'); }, 2000 ) } $('.main').click(changeColor) 
 .main { transition: all 2s; color: green; } .black { color: black } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, maiores.</div>

  • Many thanks, helped) - Dust0