Нужно отправить данные из формы ajaxom

114
23 февраля 2021, 13:00

Полученные данные из формы после того как форма прошла проверку нужно отправить ajaxom в контроллер а из его в базу данных. Пожалуйста помогите Вот код

<form id="registration_form">
    <div>
        <input type="text" id="form_fname" name="" required="">
        <span class="error_form" id="fname_error_message"></span>
        <label>
            First Name
        </label>
    </div>
    <div>
        <input type="text" id="form_sname" name="" required="">
        <span class="error_form" id="sname_error_message"></span>
        <label>
            Second Name
        </label>
    </div>
    <div>
        <input type="email" id="form_email" name="" required="">
        <span class="error_form" id="email_error_message"></span>
        <label>Email id</label>
    </div>
    <div>
        <input type="password" id="form_password" name="" required="">
        <span class="error_form" id="password_error_message"></span>
        <label>Password</label>
    </div>
    <div>
        <input type="password" id="form_retype_password" name="" required="">
        <span class="error_form" id="retype_password_error_message"></span>
        <label>Re-Enter Password</label>
    </div>
    <input type="submit" name="register" id="submit"/>
</form>
</div>
<script type="text/javascript">
    $(function() {
        $("#fname_error_message").hide();
        $("#sname_error_message").hide();
        $("#email_error_message").hide();
        $("#password_error_message").hide();
        $("#retype_password_error_message").hide();
        var error_fname = false;
        var error_sname = false;
        var error_email = false;
        var error_password = false;
        var error_retype_password = false;
        $("#form_fname").focusout(function(){
            check_fname();
        });
        $("#form_sname").focusout(function() {
            check_sname();
        });
        $("#form_email").focusout(function() {
            check_email();
        });
        $("#form_password").focusout(function() {
            check_password();
        });
        $("#form_retype_password").focusout(function() {
            check_retype_password();
        });
        function check_fname() {
            var pattern = /^[a-zA-Z]*$/;
            var fname = $("#form_fname").val();
            if (pattern.test(fname) && fname !== '') {
                $("#fname_error_message").hide();
                $("#form_fname").css("border-bottom","2px solid #34F458");
            } else {
                $("#fname_error_message").html("Should contain only Characters");
                $("#fname_error_message").show();
                $("#form_fname").css("border-bottom","2px solid #F90A0A");
                error_fname = true;
            }
        }
        function check_sname() {
            var pattern = /^[a-zA-Z]*$/;
            var sname = $("#form_sname").val()
            if (pattern.test(sname) && sname !== '') {
                $("#sname_error_message").hide();
                $("#form_sname").css("border-bottom","2px solid #34F458");
            } else {
                $("#sname_error_message").html("Should contain only Characters");
                $("#sname_error_message").show();
                $("#form_sname").css("border-bottom","2px solid #F90A0A");
                error_fname = true;
            }
        }
        function check_password() {
            var password_length = $("#form_password").val().length;
            if (password_length < 8) {
                $("#password_error_message").html("Atleast 8 Characters");
                $("#password_error_message").show();
                $("#form_password").css("border-bottom","2px solid #F90A0A");
                error_password = true;
            } else {
                $("#password_error_message").hide();
                $("#form_password").css("border-bottom","2px solid #34F458");
            }
        }
        function check_retype_password() {
            var password = $("#form_password").val();
            var retype_password = $("#form_retype_password").val();
            if (password !== retype_password) {
                $("#retype_password_error_message").html("Passwords Did not Matched");
                $("#retype_password_error_message").show();
                $("#form_retype_password").css("border-bottom","2px solid #F90A0A");
                error_retype_password = true;
            } else {
                $("#retype_password_error_message").hide();
                $("#form_retype_password").css("border-bottom","2px solid #34F458");
            }
        }
        function check_email() {
            var pattern = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            var email = $("#form_email").val();
            if (pattern.test(email) && email !== '') {
                $("#email_error_message").hide();
                $("#form_email").css("border-bottom","2px solid #34F458");
            } else {
                $("#email_error_message").html("Invalid Email");
                $("#email_error_message").show();
                $("#form_email").css("border-bottom","2px solid #F90A0A");
                error_email = true;
            }
        }
        $("#submit").click(function() {
            error_fname = false;
            error_sname = false;
            error_email = false;
            error_password = false;
            error_retype_password = false;
            check_fname();
            check_sname();
            check_email();
            check_password();
            check_retype_password();
            if (error_fname === false && error_sname === false && error_email === false && error_password === false && error_retype_password === false) {
                submit();
            }

        });
    });
    function submit() {
        $.ajax ({
            url: 'controlers/register.php',
            type: 'POST',
            dataType: 'json',
            data: {'firstname': firstname, 'lastname': lastname, 'email_address': email_address, 'phone_number': phone_number, 'password': password},
            success: function (data) {
                alert('fsijfjs')
            }
        });
    });
    });
Answer 1
     var error_fname = false;
     var error_sname = false;
     var error_email = false;
     var error_password = false;
     var error_retype_password = false;
     var fname;
     ...
     function check_fname() {
        error_fname = false;
        var pattern = /^[a-zA-Z]*$/;
        fname = $("#form_fname").val();
        if (pattern.test(fname) && fname !== '') {
           $("#fname_error_message").hide();
           $("#form_fname").css("border-bottom","2px solid #34F458");
        } else {
           $("#fname_error_message").html("Should contain only Characters");
           $("#fname_error_message").show();
           $("#form_fname").css("border-bottom","2px solid #F90A0A");
           error_fname = true;
        }
     }
     ...
             $.ajax ({
                 url: 'controlers/register.php',
                 type: 'POST',
                 dataType: 'json',
                 data: {'firstname': fname, ...},
                 success: function (data) {

Для остальных значений - аналогично.

if форма == True вызвать функцию function submit()

   if (error_fname === false && error_sname === false &&
       error_email === false && error_password === false &&
       error_retype_password === false) {
     submit();
   } else {
     return false;
   }
READ ALSO
Удалить объект из массива, проводник?

Удалить объект из массива, проводник?

Подскажите как можно удалить "папку" (объект) при нажатии кнопки в нашем дереве

120
Валидация input[type=radio]

Валидация input[type=radio]

Народ, подскажите кто может знает, как в этот цикл добавить проверку на заполнение input [type="radio"]Сейчас проверяет только текстовые input

189
HTMLCollection в componentDidMount пустой

HTMLCollection в componentDidMount пустой

Необходимо поместить в React-компонент HTML полученный извне и произвести с ним ряд манипуляций (навесить обработчики на ссылки)Для этого сделан...

125
Slick Slider не переключает слайды, если их мало

Slick Slider не переключает слайды, если их мало

На сайте есть Slick Slider с функцией Slider Syncing, то есть, когда два слайдера синхронизированные и при переключении слайдов одного из них, переключаются...

91