通过GET Theme Avada Wordpress通过发送参数将Form与JavaScript集成

如何解决通过GET Theme Avada Wordpress通过发送参数将Form与JavaScript集成

晚安朋友，如果可能的话，我需要您的帮助。我有几天试图将预订系统集成到与Omnibees预订系统集成的酒店网站上，但是我没有设法使Java Script中的表格正确执行并发送参数。将会收到代码的站点带有Wordpress / Avada Theme（两个完整版本）。我已经以几种方式进行了设置，既可以在Theme Avada> Options> Advanced> Code Fields的字段中划分代码，又可以在该位置配置Java脚本代码，但是我无法使其工作。我知道这对许多人来说可能是个简单的问题，但我最终在这里发现困难，Plis帮助Tanks Jorge Mira

这是在静态页面上正常运行的代码示例工作

'<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Booking Form</title>

    <!--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>

通过GET Theme Avada Wordpress通过发送参数将Form与JavaScript集成

如何解决通过GET Theme Avada Wordpress通过发送参数将Form与JavaScript集成

相关推荐