如何在单击按钮时更改表单输入标签的 CSS 属性（边框颜色）并提交数据？答案

【问题标题】：How to change the CSS property (border color) of input tag of form on button click and also submit data?如何在单击按钮时更改表单输入标签的 CSS 属性（边框颜色）并提交数据？
【发布时间】：2019-09-08 12:24:21
【问题描述】：

我有 test2.php 文件，它在 echo "" 的 php 标签内有 html 表单；像这样，我在表单中也有提交按钮，我的问题是在提交点击时表单数据通过表单方法 post 发送到接收者页面，但也更改了输入类型的 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>

【问题讨论】：

标签： php html css forms

【解决方案1】：

您错误地应用了 jQuery 的 CSS。最好在输入元素上添加类并在该类上应用 CSS。

改变这一行：

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

用这一行：

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

顺便说一句，这行中的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>

【讨论】：

但是点击提交2时输入标签的边框颜色仍然没有改变
需要从红色变为#ffff00
@Rink16 从 jQuery 添加类并在该类上应用 css，这是输入字段的更好选择。
@Rink16 我已经添加了在所有输入字段上添加类的解决方案。您只需要在该类上移动样式。
我更新了我正在尝试的上面有问题的 php 代码，但在提交 2 点击时边框颜色仍然没有改变