Как изменить свойство CSS (цвет границы) тега ввода формы при нажатии кнопки, а также отправить данные? - PullRequest
Новая
       1

Как изменить свойство CSS (цвет границы) тега ввода формы при нажатии кнопки, а также отправить данные?

0 голосов
/ 18 апреля 2019

У меня есть файл test2.php, который имеет html-форму внутри тегов php в echo ""; таким образом, у меня также была кнопка отправки внутри формы, моя проблема в том, что при нажатии кнопки «Отправить» данные формы отправляются на страницу получателя с помощью сообщения метода формы, но также меняют свойство css типа ввода таким образом, чтобы было подтверждено, что конкретный ввод формы представленный.

содержание test2.php 

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">
        .form-filled{
            border: 1px solid #ffff00;

        }
    </style>
</head>
<body>

    <form id='form1' action='test2.php' method='post'>
        <label></label> 

            <input type='text' name='fname' value='Rinku' >
            <input type='text' name='lname' value='yadav' >
            <input type='text' name='deg' value='BE' >
            <input type='text' name='course' value='CSE' >

        <label>checkbox: </label>
        <input type='checkbox' name='check' onchange='checkfunction()'>
        <br>
        <input type='submit' name='submit1' value='Submit1' onclick="alert('submit 1 button pressed');">
        <input type=submit name='submit2' value='Submit2' onclick='myfunction()'>
    </form>


<?php

    echo "<form id='form2' action='test2.php' method='post'>";

        echo "<label></label>";

        echo "<input type='text' name='fname' value='Rinku' >";
        echo "<input type='text' name='lname' value='yadav' >";
        echo "<input type='text' name='deg' value='BE' >";
        echo "<input type='text' name='course' value='CSE' >";
        echo "<label>checkbox: </label>";
        echo "<input type='checkbox' name='check' onchange='checkfunction()'>";
        echo "<br>";
        echo "<input type='submit' name='submit1' value='Submit1' onclick="."alert('submit 1 button pressed');".">";
        echo "<input type=submit name='submit2' value='Submit2' onclick='myfunction()'>";

    echo "</form>";

?>


    <script type='text/javascript'>


        function myfunction(){
            alert('Submit 2 is clicked!');

            $('input').addClass("form-filled");

        }

        function checkfunction(){
            alert('checkbox is check/unchecked');

        }

    </script>
</body>
</html>

1 Ответ

1 голос
/ 18 апреля 2019

Вы неправильно применяете CSS из jQuery.Лучше добавить класс к элементам ввода и применить CSS к этому классу.

Изменить эту строку: 

$('input').css({'border: 1px solid #ffff00;'});

с помощью этой строки: 

$('input').addClass("form-filled");

Byто, что elm в этой строке: 

document.elm.style.border = "3px solid #FF0000";

Также выдает ошибку, поскольку elm не определено.

Вот демонстрация, в которой я только что изменилграничить с классом.

function myfunction(){
    alert('Submit 2 is clicked!');
    $('input[type=text]').addClass("form-filled");
}

function checkfunction(){
    alert('checkbox is check/unchecked');
}

$("form").submit(function(e){
    e.preventDefault();
});
.form-filled{
    border: 1px solid #ffff00;

}
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

    <form id='form1' action='test2.php' method='post'>
        <label></label> 

            <input type='text' name='fname' value='Rinku' >
            <input type='text' name='lname' value='yadav' >
            <input type='text' name='deg' value='BE' >
            <input type='text' name='course' value='CSE' >

        <label>checkbox: </label>
        <input type='checkbox' name='check' onchange='checkfunction()'>
        <br>
        <input type='submit' name='submit1' value='Submit1' onclick="alert('submit 1 button pressed');">
        <input type=submit name='submit2' value='Submit2' onclick='myfunction()'>
    </form>
    
    <hr>

    <form id='form2' action='' method='post'>
        <label></label>
        <input type='text' name='fname' value='Rinku' >
        <input type='text' name='lname' value='yadav' >
        <input type='text' name='deg' value='BE' >
        <input type='text' name='course' value='CSE' >
        <label>checkbox: </label>
        <input type='checkbox' name='check' onchange='checkfunction()'>
        <br>
        <input type='submit' name='submit1' value='Submit1' onclick="."alert('submit 1 button pressed');".">
        <input type=submit name='submit2' value='Submit2' onclick='myfunction()'>

    </form>

</body>
</html>

Пример с выделением только полей формы, по которым щелкнули: 

$("form .submit2").click(function() {
    alert('Submit 2 is clicked!');
    var formId = $(this).parent().attr("id");
    $('#' + formId + ' input[type=text]').addClass("form-filled");
});

function checkfunction(){
    alert('checkbox is check/unchecked');
}

$("form").submit(function(e){
    e.preventDefault();
});
.form-filled{
    border: 1px solid #ffff00;
}
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

    <form id='form1' action='test2.php' method='post'>
        <label></label> 

            <input type='text' name='fname' value='Rinku' >
            <input type='text' name='lname' value='yadav' >
            <input type='text' name='deg' value='BE' >
            <input type='text' name='course' value='CSE' >

        <label>checkbox: </label>
        <input type='checkbox' name='check' onchange='checkfunction()'>
        <br>
        <input type='submit' name='submit1' value='Submit1' onclick="alert('submit 1 button pressed');">
        <input type=submit name='submit2' value='Submit2' class="submit2">
    </form>
    
    <hr>

    <form id='form2' action='' method='post'>
        <label></label>
        <input type='text' name='fname' value='Rinku' >
        <input type='text' name='lname' value='yadav' >
        <input type='text' name='deg' value='BE' >
        <input type='text' name='course' value='CSE' >
        <label>checkbox: </label>
        <input type='checkbox' name='check' onchange='checkfunction()'>
        <br>
        <input type='submit' name='submit1' value='Submit1' onclick="alert('submit 1 button pressed');">
        <input type=submit name='submit2' value='Submit2' class="submit2">

    </form>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...