How to change the CSS property (border color) of input tag of form on button click and also submit data?

Question

I have test2.php file which has html form inside php tags in echo ""; like this, I also had submit button inside form, my problem is that on submit click the form data is sent to reciever page via form method post, but also change the css property of input type such that it is confirmed that particular form input is submitted.

content of 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

You are incorrectly applying the CSS from jQuery. It is better to add class on the input elements and apply CSS on that class.

Change this line:

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

with this line:

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

By the way what is elm in this line:

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

It is also throwing an error as elm not defined.

Here is the demo in which I have just changed the border on class.

 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>

Example with highlighting only the clicked form fields:

 $("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>

How to change the CSS property (border color) of input tag of form on button click and also submit data?

Question

1 answers

solution1
1 ACCPTED 2019-04-18 08:23:32

How to change the CSS property (border color) of input tag of form on button click and also submit data?

Question

1 answers

solution1 1 ACCPTED 2019-04-18 08:23:32

solution1
1 ACCPTED 2019-04-18 08:23:32