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

Question

我有test2.php文件，该文件在echo“”的php标签内具有html形式； 这样，我在表单内也有一个提交按钮，我的问题是在提交单击时，表单数据通过表单方法发布发送到收件人页面，而且还更改了输入类型的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>

Answer 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>

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-04-18 08:23:32

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-04-18 08:23:32

解决方案1
1 已采纳 2019-04-18 08:23:32