मैं नंबर प्लेट बनाने वाला बना रहा हूं। मैं इसकी स्टाइलिंग के लिए JQUERY और JAVASCRIPT का उपयोग कर रहा हूं। लेकिन समस्या यह है कि मुझे अपनी डिज़ाइन की गई प्लेट को अगले पृष्ठ पर दिखाना है। अगर ऐसा करने का कोई तरीका है तो मैं इसे PHP, JQUERY या JAVASCRIPT के माध्यम से कैसे प्राप्त कर सकता हूं। मैंने अपना नंबर प्लेट बिल्डर कोड भी संलग्न किया है। इसे पूरे पृष्ठ पर आज़माएं। आपके बहुमूल्य उत्तर के लिए अग्रिम धन्यवाद।

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>
0
Moiz-ul -waqar 3 पद 2020, 16:49

1 उत्तर

सबसे बढ़िया उत्तर

यह बेहतर होगा कि फॉर्म वैल्यू नामों को संशोधित करें और सीएसएस कक्षाओं को सटीक समान नामों से परिभाषित करें, उदाहरण के लिए इसे बदलें

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

इसके लिए

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

सीएसएस फ़ाइल में संबंधित वर्गों को परिभाषित करें

.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
}
0
user2463644 4 पद 2020, 22:20