如何在下一页显示我的已设置样式的车牌？

Question

我正在做一个车牌生成器。我正在使用JQUERY和JAVASCRIPT来设计.But的样式，问题是我必须将我设计的图板展示到下一页。如果有任何方法，我如何通过PHP、JQUERY或JAVASCRIPT来实现这一点。我还附上了我的车牌生成器代码。在full page.Thanks上试用它，提前获得有价值的答案。

​

var inputBox = document.getElementById('search');
    

        inputBox.onkeyup = function() {
            document.getElementById('rareplate-value').innerHTML = inputBox.value;
            document.getElementById('frontplate-value').innerHTML = inputBox.value;
        }

        

       


        $(document).ready(function() {
           



            $("#bothplates").click(function() {
                $('.rare-plate').show();
                $('.front-plate').show();
                $('#price').html('25.60 RS');
            });
            $("#frontplate").click(function() {
                $('.front-plate').show();
                $('.rare-plate').hide();
                $('#price').html('12.80 RS');
            });
            $("#rareplate").click(function() {
                $('.rare-plate').show();
                $('.front-plate').hide();
                $('#price').html('12.80 RS');
            });


            $('#color-1').on('click', function(e) {
                $(this).css('border', '3px solid lime');
                $('#color-2').css('border', '3px solid white');
                $('#color-3').css('border', '3px solid white');
                $('#color-4').css('border', '3px solid white');
                $('#color-5').css('border', '3px solid white');
                $('#color-6').css('border', '3px solid white');
                $('.my-border').css('border', 'none');
            });
            $('#color-2').on('click', function(e) {
                $(this).css('border', '3px solid lime');
                $('#color-1').css('border', '3px solid white');
                $('#color-3').css('border', '3px solid white');
                $('#color-4').css('border', '3px solid white');
                $('#color-5').css('border', '3px solid white');
                $('#color-6').css('border', '3px solid white');
                $('.my-border').css('border', '3px solid #000000');
            });
            $('#color-3').on('click', function(e) {
                $(this).css('border', '3px solid lime');
                $('#color-1').css('border', '3px solid white');
                $('#color-2').css('border', '3px solid white');
                $('#color-4').css('border', '3px solid white');
                $('#color-5').css('border', '3px solid white');
                $('#color-6').css('border', '3px solid white');
                $('.my-border').css('border', '3px solid #222b7b');
            });
            $('#color-4').on('click', function(e) {
                $(this).css('border', '3px solid lime');
                $('#color-1').css('border', '3px solid white');
                $('#color-2').css('border', '3px solid white');
                $('#color-3').css('border', '3px solid white');
                $('#color-5').css('border', '3px solid white');
                $('#color-6').css('border', '3px solid white');
                $('.my-border').css('border', '3px solid #dfbb65');

            });
            $('#color-5').on('click', function(e) {
                $(this).css('border', '3px solid lime');
                $('#color-1').css('border', '3px solid white');
                $('#color-2').css('border', '3px solid white');
                $('#color-3').css('border', '3px solid white');
                $('#color-4').css('border', '3px solid white');
                $('#color-6').css('border', '3px solid white');
                $('.my-border').css('border', '3px solid #fa251d');
            });
            $('#color-6').on('click', function(e) {
                $(this).css('border', '3px solid lime');
                $('#color-1').css('border', '3px solid white');
                $('#color-2').css('border', '3px solid white');
                $('#color-3').css('border', '3px solid white');
                $('#color-4').css('border', '3px solid white');
                $('#color-5').css('border', '3px solid white');
                $('.my-border').css('border', '3px solid #8f2a33');
            });


            

           



        });

        
        function myfunc() {
            var selectBox = document.getElementById("platesize");
            var selectedValue = selectBox.options[selectBox.selectedIndex].value;

            if (selectedValue === "Motor Cycle") {
                document.getElementById('front-plate').style.width = "100%";
                document.getElementById('rare-plate').style.width = "60%";
                document.getElementById('rare-plate').style.margin = "auto";
                document.getElementById('rareplate-value').style.padding = "0rem";
                document.getElementById('price').innerHTML = "20 RS";
            }
            if (selectedValue === "Standard") {
                document.getElementById('front-plate').style.width = "100%";
                document.getElementById('rare-plate').style.width = "100%";
                document.getElementById('rareplate-value').style.padding = "0rem";
                document.getElementById('price').innerHTML = "25.60 RS";
            }
            if (selectedValue === "Larger Car") {
                document.getElementById('front-plate').style.width = "100%";
                document.getElementById('rare-plate').style.width = "100%";
                document.getElementById('rareplate-value').style.padding = "2rem 0rem 2rem 0rem";
                document.getElementById('price').innerHTML = "30 RS";
            }

            
        }
    

        function myfunc2() {
            var selectBox = document.getElementById("text-style");
            var selectedValue = selectBox.options[selectBox.selectedIndex].value;
            var thisprice = document.getElementById('price').innerHTML;

            if (selectedValue === "Standard") {
                document.getElementById('frontplate-value').style.textShadow = "none";
                document.getElementById('rareplate-value').style.textShadow = "none";
            }
            if (selectedValue === "3D") {
                document.getElementById('frontplate-value').style.textShadow = "2px 2px 4px #000";
                document.getElementById('rareplate-value').style.textShadow = "2px 2px 4px #000";

            }
            if (selectedValue === "Domed") {
                document.getElementById('frontplate-value').style.fontWeight = "bold";
                document.getElementById('rareplate-value').style.fontWeight = "bold";
            }
            if (selectedValue === "4D") {
                document.getElementById('frontplate-value').style.textShadow = "1px 1px 0 black, 2px 2px 0 black";
                document.getElementById('rareplate-value').style.textShadow = "1px 1px 0 black, 2px 2px 0 black";
            }

        }

.desktop-nav{
    background-color: #FFD703 !important;
}
.nav-link{
    color: black !important;
}
.tab-and-mobile{
    display: none;
}
.back-color{
    background: #FFD703 !important;
    color: black;
    padding: 0px !important;
    border-radius: 10px;
}
.form-check{
    padding-left: 0 !important;
}
.form-check-input {
    margin-top: 0.5rem !important;
    margin-left: 2.9rem !important;
}
.my-label {
    padding: 25px 15px 10px 15px !important;
    background: #FFD703 !important;
    border: 1px solid black !important;
    border-radius: 10px !important;
}
.my-label:hover{
    background: #000 !important;
    color: white !important;
}
.card-color{
    background-color: #FFD703 !important;
}
.card-header{
    padding: 0px !important;
}
button{
    background: #FFD703;
    width: 100%;
    border: none;
    color: black !important;
    text-align: left;
    padding: 15px;
}
button:focus{
    outline: none !important;
}
button:focus{
    background: #000 !important;
    color: white !important;
}
button:hover{
    background:  #000;
    color: white !important;
}
.front-plate{
    border: 1px solid black;
    width: 100%;
    border-radius: 20px !important;
    background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    
}
.rare-plate{
    border: 1px solid black;
    width: 100%;
    border-radius: 20px !important;
    background: -webkit-linear-gradient(top, #ffd65e 0%,#febf04 100%) !important;
}
.rare-plate h1{
    font-size: 140px !important;
    font-family: myFirstFont;
}
.front-plate h1{
    font-size: 140px !important;
    font-family: myFirstFont;
}
.my-border{
    /* border: 3px solid black; */
    border-radius: 10px;
}
.my-button{
    background: #FFD703 !important;
    width: 100% !important;
    border: none !important;
    color: #000 !important;
    text-align: center !important;
    padding: 10px !important;
    font-size: 20px;
    text-decoration: none !important;
}
.my-button:hover{
    background:  #000 !important;
    color: white !important;
}
.my-label-1{
    background-color: #000 !important;
    color: white !important;
}
.my-input{
    display: none;
}

#id1, #id2 {
    display: none;
}

/* .my-style {
    display: block;
} */
.this-border{
    border: 3px solid white;
    padding: 5px 15px;
    /* margin: none !important;
    padding: none !important; */
}
.this-border input{
    visibility: hidden;
}
.active-border{
    border:  3px solid lime;
    padding: 5px 15px;     
  }
.active-border input{
    visibility: hidden;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

   
</head>


<body>





    <!-- Desktop VERSION -->
    <div class="container-fluid desktop-version my-5 px-md-5">
        <div class="row">


            <div class="col-lg-4 back-color">
                <h4 class="px-3 pt-3">Seclect you options</h4>
                <p class="px-3 py-1">Build your number plate below by choosing from the options and clicking 'Buy Now' to add to basket.</p>
                <hr class="my-3" style="border: 1px solid #fff;">
                <form method="POST" action="my-basket.php">
                    <div class="row px-md-3">
                        <div class="col-4 text-center">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="platevalue" id="bothplates" value="Both Plates" checked>
                                <label class="form-check-label my-label" for="bothplates">
                                    Both Plates
                                </label>
                            </div>
                        </div>
                        <div class="col-4 text-center">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="platevalue" id="frontplate" value="Front Plate">
                                <label class="form-check-label my-label" for="frontplate">
                                    Front Only
                                </label>
                            </div>
                        </div>
                        <div class="col-4 text-center">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="platevalue" id="rareplate" value="Rare Plate">
                                <label class="form-check-label my-label" for="rareplate">
                                    Rare Only
                                </label>
                            </div>
                        </div>
                    </div>
                    <div id="accordion" class="my-4">
                        <div class="card card-color">
                            <div class="card-header" id="headingOne">
                                <h5 class="mb-0">
                                    <button type="button" class="collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        Your Registration
                                    </button>
                                </h5>
                            </div>

                            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                                <div class="card-body">
                                    <input type="text" id="search" name="regno" value="YOUR REG" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="card card-color">
                            <div class="card-header" id="headingTwo">
                                <h5 class="mb-0">
                                    <button type="button" class="collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                        Plate size
                                    </button>
                                </h5>
                            </div>
                            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                                <div class="card-body">
                                    <div class="form-group">
                                        <select class="form-control" id="platesize" name="platesize" onchange="myfunc()">
                                            <option id="standard" value="Standard">Standard Car</option>
                                            <option id="motorcycle" value="Motor Cycle">Standard MotorCycle</option>
                                            <option id="largercar" value="Larger Car">Larger Car</option>
                                            <!-- <option>4</option>
                                <option>5</option> -->
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card card-color">
                            <div class="card-header" id="headingThree">
                                <h5 class="mb-0">
                                    <button type="button" class="collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                        Text Style
                                    </button>
                                </h5>
                            </div>
                            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                                <div class="card-body">
                                    <div class="form-group">
                                        <select class="form-control" id="text-style" name="textstyle" onchange="myfunc2()">
                                            <option value="Standard">Standard</option>
                                            <option value="3D">3D</option>
                                            <option value="Domed">Domed</option>
                                            <option value="4D">4D Prespex</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card card-color">
                            <div class="card-header" id="headingFive">
                                <h5 class="mb-0">
                                    <button type="button" class="collapsed" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                                        Border
                                    </button>
                                </h5>
                            </div>
                            <div id="collapseFive" class="collapse m-0 p-0" aria-labelledby="headingFive" data-parent="#accordion">
                                <div class="card-body m-0 p-0">
                                    <div class="row text-center m-2">
                                        <div class="col-md-2">
                                            <label for="col1" class="active-border text-center" id="color-1">
                                                <input type="radio" name="border" id="col1" value="NONE" checked>
                                            </label>
                                        </div>
                                        <div class="col-md-2">
                                            <label for="col2" class="this-border" id="color-2" style="background: #000000;">
                                                <input type="radio" name="border" value="Black" id="col2">
                                            </label>
                                        </div>
                                        <div class="col-md-2">
                                            <label class="this-border" for="col3" id="color-3" style="background: #222b7b;">
                                                <input type="radio" name="border" value="Blue" id="col3">
                                            </label>
                                        </div>
                                        <div class="col-md-2">
                                            <label class="this-border" for="col4" id="color-4" style="background: #dfbb65;">

                                                <input type="radio" name="border" value="Skin" id="col4">
                                            </label>
                                        </div>
                                        <div class="col-md-2">
                                            <label class="this-border" for="col5" id="color-5" style="background: #fa251d;">
                                                <input type="radio" name="border" value="Red" id="col5">
                                            </label>
                                        </div>
                                        <div class="col-md-2">
                                            <label class="this-border" for="col6" id="color-6" style="background: #8f2a33;">
                                                <input type="radio" name="border" value="Dark Brown" id="col6">
                                            </label>
                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

            </div>
            <div class="col-lg-8">
                <div class="front-plate next-page mb-3 text-center" id="front-plate">
                    <div class="my-border m-3">
                        <h1 id="frontplate-value">
                            <!-- <span id="id1" class="hide-this">hello</span> -->
                            YOUR REG
                        </h1>
                    </div>
                </div>
                <div class="rare-plate next-page text-center" id="rare-plate">
                    <div class="my-border m-3">
                        <h1 id="rareplate-value">
                            <!-- <span id="id2" onclick="someFunc('id2')">hello</span> -->
                            YOUR REG
                        </h1>
                    </div>

                </div>

                <div class="row my-lg-5 my-2">
                    <div class="col-md-9">
                        <h4>Price: <span id="price">25.60 RS</span> </h4>
                        <input type="checkbox" id="this-check" checked>
                        <label for="this-check"> Add a fixing kit for £3.99 extra?</label>
                    </div>
                    <div class="col-md-3">
                        <!-- Button trigger modal -->
                        <button type="button" class="btn my-button" data-toggle="modal" data-target="#exampleModal">
                            Buy Now
                        </button>

                        <!-- Modal -->
                        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">IMPORTANT</h5>
                                    </div>
                                    <div class="modal-body">
                                        Regardless of how you enter your reg number, the finished plate / plates will be legally spaced as is required by law.

                                        <p>Click Ok to proceed or Cancel to edit your order.</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn my-button" data-dismiss="modal">Close</button>
                                        <button type="submit" name="submit-style" class="my-button">OK</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </form>
        </div>
    </div>












        
        


       
    


    

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


</body>

</html>

​

Answer 1

最好修改表单值名称并定义具有完全相同名称的css类，例如，更改

value="Front Plate"
value="Standard"
value="Motor Cycle"
value="Larger car"

到这个

value="front"
value="standard"
value="motor-cycle"
value="larger-car"

在css文件中定义相应类

.front {
    background-color: front plate color;
}  
.standard {
    width: standard plate width;
    height: standard plate height;
}
.motor-cycle {
    width: motorcycle plate width;
    height: motorcycle plate height;
}
.larger-car {
    width: larger-car plate width;
    height: larger-car plate height;
}

对文本样式和边框输入执行相同的操作，更改它们的值并定义相应的类。

提交表单后，您可以访问my-basket.php中的表单变量，并根据它们的值创建一个模板。

$plateValue = $_POST['platevalue'];
$regno = $_POST['regno'];
$size = $_POST['platesize'];
$style = $_POST['textstyle'];
$border = $_POST['border'];

if ($plateValue=='front' || $plateValue=='rare') {
    //create front plate div and apply styles based on posted values
    echo '<div class="' . $plateValue . ' ' . $size '">
        <div class="' . $border . '">
            <h1 class="' . $style . '"><' . $regno . '</h1>
        </div>
    </div>';
} else {
    //code for both plates
}