Javascript 页面概念：Php/Jquery/JS_Javascript_Php_Jquery

Javascript 页面概念：Php/Jquery/JS

javascript php jquery

Javascript 页面概念：Php/Jquery/JS,javascript,php,jquery,Javascript,Php,Jquery,我正在寻找有关我创建php页面的方法的建议或评论我在同一页上有3个表单（步骤：1、2、3），但我当时只显示1个。每次提交后，我重新加载页面并检查当前步骤。你可以在下面找到我创建页面的方式。我想知道是不是有什么不对劲，还是我做了一些不推荐的事情这似乎很好，但我可能错了或做了坏事。例如，我可以在javascript开关中使用php变量吗 <?php include_once('header.inc.php'); //POST Step1 if(isset($_POST['nextste

我正在寻找有关我创建php页面的方法的建议或评论

我在同一页上有3个表单（步骤：1、2、3），但我当时只显示1个。每次提交后，我重新加载页面并检查当前步骤。你可以在下面找到我创建页面的方式。我想知道是不是有什么不对劲，还是我做了一些不推荐的事情

这似乎很好，但我可能错了或做了坏事。例如，我可以在javascript开关中使用php变量吗

<?php
include_once('header.inc.php'); 

//POST Step1
if(isset($_POST['nextstep12'])) {
        $_SESSION['step'] = 2;
}
//POST Step 2
if(isset($_POST['prevStep21'])) {
    $_SESSION['step'] = 1;
}   
if(isset($_POST['nextStep23'])) {
    $_SESSION['step'] = 3;
}

if (!isset($_SESSION['step'])) {
    $_SESSION['step']= 1;
}
?>
<body> 
    <?php if ($_SESSION['step'] == 1) { ?>
    <!-- STEP 1 -->
    <div id="Step1" class="row">
        <div class="form-container col-md-12 col-sm-12 col-xs-12">
            <form id="step1"  method="post" action="index.php">                                                 
                <div class="row">
                    <div class="form-group col-xs-12">
                        <label class="event" for="title"><?php echo T_("Title"); ?></label>
                        <input class="form-control" id="title" type="text" name="title" /> 
                    </div><!--//form-group-->
                </div>              
            </form>
        </div><!--//form-container-->
    </div><!--// STEP 1 -->

    <?php } else if ($_SESSION['step'] == 2) { ?>
    <!--// STEP 2 -->
        <div id="Step2" class="row">
            <div class="form-container col-md-12 col-sm-12 col-xs-12">
                <form id="Step2"  method="post" action="index.php">
                    <div class="row">
                        <div class="form-group col-xs-12">
                            <input class="form-control" id="autocomplete" onFocus="geolocate()" type="text" name="autocomplete"
                        </div><!--//form-group-->
                    </div>                                              
                </form>
            </div><!--//form-container-->
        </div><!--// STEP 2 -->
    <?php } ?>

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() {  
        var curStep = <?php echo $_SESSION['step']; ?>;
        //STEP1 : DateTimePickers
        switch (curStep) {
            case 1:
                initDateTimePickers();
                initStep1Form();
                break;
            case 2:
                initGeolocate();
                initStep2Form();
                break;
        }

        // TOOLTIP (question mark)
        $('[data-toggle="tooltip"]').tooltip();

        // Form Validate
        jQuery.validator.setDefaults({
          debug: false,
          focusInvalid: true
        });

        function initStep1Form () {
            jQuery("#eventFormSOne").validate({
                rules: {
                     "title":{
                        required: true,
                        minlength: 2,
                        maxlength: 105
                     }
                },
                messages: {
                    "event-title": "<?php echo T_("Title is required"); ?>"             
                }
            });
        }

        function initStep2Form () {
            jQuery("#eventFormSTwo").validate({
                rules: {
                     "place":{
                        required: false,
                        minlength: 0,
                        maxlength: 105
                     }   
                },
                messages: {
                    "place": "<?php echo T_("Place is requiered"); ?>"
                }
            });
        }
    });
</script>

 <script type="text/javascript" charset="utf-8">    
    function initDateTimePickers() {

            var $inputEndDate = $( '#end-date' ).pickadate({
                min: true,
                max: undefined,
                onSet: function(thingSet) {
                    $("#Step1").validate().element("#end-date");
                    $("#eventFormSOne").validate().element("#end-time");
                }
            }),endPicker = $inputEndDate.pickadate('picker');

            var $inputBeginDate = $( '#begin-date' ).pickadate({
                min: true,
                max: undefined,
            }),beginPicker = $inputBeginDate.pickadate('picker');           

        }
 </script>

 <script type="text/javascript" charset="utf-8">    
    function initGeolocate() {
        // This example displays an address form, using the autocomplete feature
        // of the Google Places API to help users fill in the information.

        var placeSearch, autocomplete;
        var componentForm = {
          street_number: 'short_name',
          route: 'long_name',
          locality: 'long_name',
          administrative_area_level_1: 'short_name',
          country: 'long_name',
          postal_code: 'short_name'
        };
        // [END region_geolocation]
    }

    function initAutocomplete() {
          // Create the autocomplete object, restricting the search to geographical
          // location types.
          autocomplete = new google.maps.places.Autocomplete(
              /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')))
              ,{types: ['geocode']};
          // When the user selects an address from the dropdown, populate the address
          // fields in the form.
          autocomplete.addListener('place_changed', fillInAddress);
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&signed_in=true&libraries=places&callback=initAutocomplete" async defer></script>


$（文档）.ready（函数（）{
var curStep=；
//步骤1：日期时间选择器
开关（游标步）{
案例1：
initDateTimePickers（）；
initStep1Form（）；
打破
案例2：
initgeologite（）；
initStep2Form（）；
打破
}
//工具提示（问号）
$（'[data toggle=“tooltip”]'）。tooltip（）；
//表单验证
jQuery.validator.setDefaults({
调试：错误，
焦点有效：正确
});
函数initStep1Form（）{
jQuery（“#eventFormSOne”）.validate({
规则：{
“标题”：{
要求：正确，
最小长度：2，
最大长度：105
}
},
信息：{
“事件标题”：”
}
});
}
函数initStep2Form（）{
jQuery（“#eventFormSTwo”）.validate({
规则：{
“地点”：{
必填项：false，
最小长度：0，
最大长度：105
}   
},
信息：{
“地点”：”
}
});
}
});
函数initDateTimePickers（）{
变量$inputEndDate=$（“#结束日期”）.pickadate({
敏：是的，
马克斯：未定义，
开始：功能（thingSet）{
$（“#步骤1”）.validate（）.element（“#结束日期”）；
$（“#eventFormSOne”）.validate（）.element（“#结束时间”）；
}
})，endPicker=$inputenedDate.pickadate（'picker'）；
变量$inputBeginDate=$（“#开始日期”）.pickadate({
敏：是的，
马克斯：未定义，
})，beginPicker=$inputBeginDate.pickadate（'picker'）；
}
函数initgeologite（）{
//此示例使用自动完成功能显示地址表单
//谷歌的PlacesAPI帮助用户填写信息。
var placeSearch，自动完成；
变量组件形式={
街道编号：“短名称”，
路线：'long_name'，
地点：'long_name'，
行政区域级别1:“短名称”，
国家：'long_name'，
邮政编码：“短名称”
};
//[终端区域\地理位置]
}
函数initAutocomplete（）{
//创建自动完成对象，将搜索限制为地理位置
//位置类型。
autocomplete=new google.maps.places.autocomplete(
/**@type{！HTMLInputElement}*/（document.getElementById（'autocomplete'））
，{types:['geocode']}；
//当用户从下拉列表中选择地址时，填充该地址
//表单中的字段。
autocomplete.addListener（'place\u changed'，fillInAddress）；
}

如有任何建议或意见，将不胜感激

问候。

尽管您的代码看起来不错。我想在这里补充几点：

您不必一次又一次地编写脚本标记。我是说这个

您的最后一行：

不应该是最后一个，，，因为它加载了一些脚本，…，所以有在

标记中加载它的习惯

您在脚本标记中使用了

async

和

defer

。。。我相信你应该用任何一个

以下是一些需要遵循的一般规则：

一,。如果脚本是模块化的，不依赖于任何脚本，则使用异步

二,。如果脚本依赖于另一个脚本或被另一个脚本依赖，则使用defer

3.如果脚本很小，并且异步脚本依赖于它，则使用不在异步脚本上方放置属性的内联脚本

如果可能的话，我会尝试增加更多的分数，我希望这将在将来对您有所帮助

这正是我想要的。谢谢你抽出时间来帮助我。请毫不犹豫地添加更多评论。