Integrar Form com JavaScript com envio de parâmetros Via GET Theme Avada Wordpress

Stack Overflow em Português Asked by Gbyteinfo on January 6, 2021

Boa noite Amigos, se possível preciso de uma ajuda de vocês.
Estou a uns dias tentando integrar um sistema de reservas em um site de hotel integrado ao sistema de reservas Omnibees, porem não estou conseguindo fazer com que o form em Java Script Execute o Input com o Envio dos parâmetros corretamente. O site que ira receber o código esta com WordPress / Theme Avada (Ambos full version).
Já fiz de várias maneiras as configurações, tanto dividindo os códigos nos campos do Theme Avada > Opções > Avançado > Code Fields e configurei os códigos java script nesse local, mas não consigo fazer funcionar.

Sei que póde ser uma duvida fácil para muitos, mas eu acabei encontrando dificuldade aqui, Plis help Tanks Jorge Mira

Aqui esta o Código que roda normalmente em uma pagina estática
Exemplo funcionando

<!DOCTYPE html>

Booking Form

    <!--Load external library in Jquery-->
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script>
        $( function() {
            $( "#dpd1" ).datepicker({
                dateFormat: "dd/mm/yy"
            });
            $( "#dpd2" ).datepicker({
                dateFormat: "dd/mm/yy"
            });
        } );

        function submitform() {
            var dpd1 = $('#dpd1').val( $('#dpd1').val().replace(///g, '') );
            var dpd2 = $('#dpd2').val( $('#dpd2').val().replace(///g, '') );
            
            var q = $('#q');
            var lang = $('#lang');
            var ad = $('#ad');
            var ch = $('#ch');
            var code = $('#code');
            
            window.open('https://myreservations.omnibees.com/default.aspx?q=' + q.val() +'&lang=' + lang.val() + '&CheckIn=' + dpd1.val() + '&CheckOut='+ dpd2.val() + '&ad='+ ad.val() + '&ch='+ ch.val() + code.val(), 'Reserva'); 
        }


    </script>


    <style>
        #be {
            background: #f5f2f0;
            border: 1px solid #ccc;
            padding: 20px;
            border-radius: 3px;
            width: 300px;
            margin: 0 auto;
            font-family: sans-serif;
        }
        #be .row {
            position: relative;
            width: 100%;
            display: block;
            margin: 10px auto
        }
        #be label {
            font-size: 10px;
            text-transform: uppercase;
        }
        #be .columns {
            float: left;
            width: 140px;
            margin: 0 5px;
        }
        #be .clearfix:after {
            clear: both;
        }
        #be .clearfix:after,
        #be .clearfix:before {
            content: ' ';
            display: table;
        }
        #be input,
        #be select,
        #be button{
            width: 100%;
            font-size: 11px;
        }
        #be button {
            margin-top: 17px;
            background: #ccc;
            color: #111;
            text-transform: uppercase;
            font-size: 10px;
            border: none;
            padding: 5px;
            transition: all ease-in-out .2s;
            cursor: pointer;
        }
        #be button:hover {
            background: #aaa;
        }
        #be h1{
            font-size: 24px;
            text-align: center;
            margin: 0 0 20px 0;
            color: #aaa
        }
    </style>

</head>
<body>

    <div id="be">
        <h1>Booking Now!</h1>
        <form  id="datepickerform"  onsubmit="submitform()">
            <!--Hotel ID-->
            <input type="hidden" name="q" id="q" value="2825"/>

            <!--Language-->
            <input type="hidden" name="lang" id="lang" value="pt-PT"/>


            <div class="row clearfix">
                <!--Check In-->
                <div class="columns">
                    <label for="dpd1">Check-in</label>
                    <input type="text" id="dpd1" name="CheckIn" class="date-selector" placeholder=""/>
                </div>
                <!--Check Out-->
                <div class="columns">                       
                    <label for="dpd2">Check-Out</label>
                    <input type="text" id="dpd2" name="CheckOut" class="date-selector" placeholder=""/>
                </div>
            </div>

            <div class="row clearfix">
                <!--Number of Adults-->
                <div class="columns"> 
                    <label for="ad">Adults</label>
                    <select name="ad">
                        <option value="1">1</option>
                        <option value="2" selected="selected">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="4">5</option>
                    </select>
                </div>

                <!--Number of Childs-->
                <div class="columns"> 
                    <label for="Ch">Childs</label>
                    <select name="Ch">
                        <option value="0" selected="selected">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                    </select>
                </div>
            </div>

            <div class="row clearfix">
                <!--Promotional Code-->
                <div class="columns"> 
                    <label for="code">Promo Code</label>
                    <input type="text" id="code" name="code"/>
                </div>

                <!--Submit Button-->
                <div class="columns"> 

                    <input type="submit" value="Submit" name="submit" class="submit" id="submit" />
                </div>

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

</body>

api formulário javascript wordpress wordpress theme

Add your own answers!

Ask a Question

Get help from others!