如何在單擊按鈕時更改表單輸入標簽的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