كيف يمكن ان اضيف ايقونة جاري التحميل داخل هذا الكود

[departure10001]

السلام عليكم
اخواني , اثناء بحثي عن طريقة ارسال المتغيرات من فورم الى صفحة وتحميلها دون عمل ريفرش للصفحة وجدت هذا الدرس
كيف يمكن ان اضيف ايقونة جاري التحميل داخل هذا الكود؟

[مصطفى فرغلى]

أين الكود ؟
الفكره بسيطه ، قم بإنشاء عنصر جديد من خلال ال DOM و اكتب بداخله "جارى التحميل ..." ، و عندما يصل طلب الاجاكس بسلام ، قم بحذف هذا العنصر أيضا من خلال ال DOM .

[departure10001]

سأحاول , لاني جديد على الاجاكس

[departure10001]

السلام عليكم
اخواني , اثناء بحثي عن طريقة ارسال المتغيرات من فورم الى صفحة وتحميلها دون عمل ريفرش للصفحة وجدت هذا الدرس
كيف يمكن ان اضيف ايقونة جاري التحميل داخل هذا الكود؟

$(function() {
  $('.error').hide();
  $('input.text-input').css({backgroundColor:"#FFFFFF"});
  $('input.text-input').focus(function(){
    $(this).css({backgroundColor:"#FFDDAA"});
  });
  $('input.text-input').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });

  $(".button").click(function() {
        // validate and process form
        // first hide any error messages
    $('.error').hide();
        
      var f_name = $("input#f_name").val();
        if (f_name == "") {
      $("label#f_name_error").show();
      $("input#f_name").focus();
      return false;
    }
    var l_name = $("input#l_name").val();
        if (l_name == "") {
      $("label#l_name_error").show();
      $("input#l_name").focus();
      return false;
    }
    var u_name = $("input#u_name").val();
        if (u_name == "") {
      $("label#u_name_error").show();
      $("input#u_name").focus();
      return false;
    }
    
    var email = $("input#email").val();
        if (email == "") {
      $("label#email_error").show();
      $("input#email").focus();
      return false;
    }

    var pass1 = $("input#pass1").val();
    if(pass1==""){
        $("label#pass1_error"),show();
        $("input#pass1").focus();
        return false;
    }
    var pass2 = $("input#pass2").val();
    if(pass2==""){
        $("label#pass2_error"),show();
        $("input#pass2").focus();
        return false;
    }
    
        var id_town = $("select#id_town").val();
    if(id_town==""){
        $("label#id_town_error"),show();
        $("select#id_town").focus();
        return false;
    }
        
        var jawwal = $("input#jawwal").val();
    if(jawwal==""){
        $("label#jawwal_error"),show();
        $("input#jawwal").focus();
        return false;
    }

        
        var dataString = 'f_name='+ f_name + '&l_name=' + l_name + '&u_name=' + u_name + '&pass2=' + pass2 + '&pass1=' + pass1  + '&jawwal=' + jawwal + '&id_town=' + id_town +'&email=' + email;
        //alert (dataString);return false;
        
        $.ajax({
      type: "POST",
      url: "pages/create_user.php",
      data: dataString,
      success: function() {
        $('#container').html("<div id='message'></div>");
        $('#message').html("<h2>Contact Form Submitted!</h2>")
        .append("<p>We will be in touch soon.</p>")
        .hide()
        .fadeIn(1500, function() {
          $('#message').append("<img id='checkmark' src='images/check.png' />");
        });
      }
     });
    return false;
    });
});
runOnLoad(function(){
  $("input#f_name").select().focus();
}); 

[departure10001]

هل من طريقة؟