onload在wordpress中不起作用

时间:2015-04-17 05:38:33

标签: javascript html wordpress datepicker onload

我创建了一个由crm生成的表单,用于在crm中查找表单输入。然后我将代码粘贴在wordpress上。它工作正常。然后我在某个字段上添加了一个日期选择器,并在本地测试了所有这些字段。它仍然可以正常工作。当我在wp上传所有必要的内容时,它就再也无法工作了。

我做了一些测试。其中一些:

我将函数onload添加到文件header.php中的模板正文中,但是,即使在源页面中有onload函数,datepicker也不会显示。

我尝试在页面内编写javascript代码,但它不起作用。

我试着写<脚本>函数名称()< /脚本>在div之后,它仍然在本地工作但不在wordpress上工作。

我担心的问题是我的页面无法通过相对路径加载文件,因此我使用了绝对路径。什么都没有改变。

最终我尝试在本地文件上使用绝对路径,它仍在工作。

我想到的最后一件事是:我的模板忽略了javascript。但后来我意识到在同一页面上还有另外两个功能,它们正常工作。

这是代码,也许我们可以修改它以实现我的目标。

<div id='crmWebToEntityForm' align='left' >
    <META HTTP-EQUIV='content-type' CONTENT='text/html;charset = UTF-8'>

    <form  action='https://************/crm/WebToContactForm' name=**************************** method='POST' enctype='multipart/form-data' onSubmit='javascript:document.charset="UTF-8"; return checkMandatery()' accept-charset='UTF-8'>
        <input type='text' style='display:none;' name='xnQsjsdp' value='*************' />
        <input type='hidden' name='zc_gad' id='zc_gad' value='' />
        <input type='text' style='display:none;' name='xmIwtLD' value='*****************' />
        <input type='text' style='display:none;' name='actionType' value='Q29udGFjdHM=' />
        <input type='text' style='display:none;' name='returnURL' value='*************************************' />
        <input type='text' style='display:none;' maxlength='20' name='CONTACTCF7' value='Applicant'/>
         <div id="cf-two-columns">
           <div id="left">
               <p>First Name *<br /><input type='text' style='width:250px;'  maxlength='40' name='First Name' /></p>

 <p>Last Name *<br /><input type='text' style='width:250px;' maxlength='80' name='Last Name' /></p>
              <p>Date Of Birth *<br /><input id="datepickr" readonly="readonly"  type="text" style="width:250px;" maxlength="20" name="Date of Birth" placeholder="dd/MM/yyyy"></p>



             <p>Email *<br /><input type='email' style='width:250px;' maxlength='40' name='Email' /></p>
               <p>Phone *<br /><input type='text'style='width:250px;' maxlength='50' name='Phone' /></p>
               <p> * These fields are required <br /></p>
           </div>
           <div id="right">
               <p>Address* <br /><input type='text' style='width:250px;' maxlength='250' name='Mailing Street' /></p>
               <p>Suburb or city* <br /><input type='text' style='width:250px;' maxlength='30' name='Mailing City' /></p>
               <p>Postcode* <br /><input type='text' style='width:250px;' maxlength='30' name='Mailing Zip' /></p>
                <p>Country* <br />
                <select style='width:250px;' name='Mailing Country'>
                    <option value='Select One'>Select one</option>
                    <option value='Afghanistan'>Afghanistan</option>
                    <option value='Albania'>Albania</option>
                    <option value='Algeria'>Algeria</option>

                </select>
               </p>
               <p>State* <br />
                    <select style='width:250px;' name='CONTACTCF9'>
                        <option value='Select One'>Select one</option>
                        <option value='Western Australia'>Western Australia</option>
                        <option value='New South Wales'>New South Wales</option>
                        <option value='Queensland'>Queensland</option>
                        <option value='ACT'>ACT</option>
                        <option value='South Australia'>South Australia</option>
                        <option value='Northern Territory'>Northern Territory</option>
                        <option value='Off Shore'>I am outside Australia</option>
                    </select>
               </p>

            </div>
           <div id="right1">
               <p>Current VISA*<br />
               <select onchange="showDiv(this)" id="CONTACTCF1" style='width:250px;' name='CONTACTCF1'>
                        <option value='Select One'>Select one</option>
                        <option value='Bridging'>Bridging</option>
                        <option value='DeFacto'>DeFacto</option>
                        <option value='Partner'>Partner</option>
                        <option value='Permanent'>Permanent</option>
                        <option value='Sponsored'>Sponsored</option>
                        <option value='Student'>Student</option>
                        <option value='Tourist'>Tourist</option>
                        <option value='Working Holiday'>Working Holiday</option>
                        <option value='2 Working Holiday'>2 Working Holiday</option>
                        <option value='Business application'>Business application</option>
                    </select>
               </p>

<p id="hide" style="display: none;">VISA Expiry Date *<br /><input readonly type='text' id="CONTACTCF81" style='width:250px;' maxlength='20' name='CONTACTCF81' placeholder='dd/MM/yyyy' />
</p>


<script>
function showDiv(elem){
   if(elem.value == 'Bridging') {
      document.getElementById('hide').style.display = "none";
} else if(elem.value == 'Select One') {
document.getElementById('hide').style.display = "none";
}
else {
document.getElementById('hide').style.display = "block";
}
}
</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<p>Passport Number *<br /><input type='text' style='width:250px;' maxlength='15' name='CONTACTCF2' /></p>
               <p>Passport Expiry Date *<br /><input readonly id="datepickr2" type='text' style='width:250px;' maxlength='15' name='CONTACTCF84' placeholder='dd/MM/yyyy' /></p>
<p>Nationality *<br /><input type='text' style='width:250px;' maxlength='20' name='CONTACTCF3' /></p>
            </div>
           <div id="right2">
               <p>Passport Upload *<br /><input type='file' name='theFile'></input></p>
               <br>
               <p>Enter this code<br /></p>
               <p><img id='imgid' style="border:1px solid black;" src='*****************************************'>
               <a href='javascript:;' onclick='reloadImg()'>Reload</a></p><br />
               <p><input type='text' style='width:250px;' maxlength='80' name='enterdigest' /></p><br />
               <p><input class="wpcf7-submit" style='font-size:12px;color:black' type='submit'  value='Submit' /> </p>
            </div>
        </div>
        <script>
            var mndFileds = new Array('First Name', 'Last Name', 'Email', 'Phone', 'Date of Birth', 'Mailing Street', 'Mailing City', 'Mailing Zip', 'Mailing Country', 'CONTACTCF2', 'CONTACTCF3', 'CONTACTCF81', 'CONTACTCF1', 'CONTACTCF84', 'CONTACTCF9');
            var fldLangVal = new Array('First Name', 'Last Name', 'Email', 'Phone', 'Date of Birth', 'Mailing Street', 'Mailing City', 'Mailing Zip', 'Mailing Country', 'Passport Number', 'Nationality', 'Visa Expiry Date', 'Current visa', 'Passport Expiry Date', 'State');
            function reloadImg() {
                if (document.getElementById('imgid').src.indexOf('&d') !== -1) {
                    document.getElementById('imgid').src = document.getElementById('imgid').src.substring(0, document.getElementById('imgid').src.indexOf('&d')) + '&d' + new Date().getTime();
                } else {
                    document.getElementById('imgid').src = document.getElementById('imgid').src + '&d' + new Date().getTime();
                }
            }
            function checkMandatery() {
                var name = '';
                var email = '';
                for (i = 0; i < mndFileds.length; i++) {
                    var fieldObj = document.forms['WebToContacts1328094000000077001'][mndFileds[i]];
                    if (fieldObj) {
                        if (((fieldObj.value).replace(/^\s+|\s+$/g, '')).length == 0) {
                            alert(fldLangVal[i] + ' cannot be empty');
                            fieldObj.focus();
                            return false;
                        } else if (fieldObj.nodeName == 'SELECT') {
                            if (fieldObj.options[fieldObj.selectedIndex].value == '-None-') {
                                alert(fldLangVal[i] + ' cannot be none');
                                fieldObj.focus();
                                return false;
                            }
                        } else if (fieldObj.type == 'checkbox') {
                            if (fieldObj.checked == false) {
                                alert('Please accept  ' + fldLangVal[i]);
                                fieldObj.focus();
                                return false;
                            }
                        }
                        try {
                            if (fieldObj.name == 'Last Name') {
                                name = fieldObj.value;
                            }
                        } catch (e) {}
                    }
                }
                try {
                    if ($***) {
                        var firstnameObj = document.forms['WebToContacts1328094000000077001']['First Name'];
                        if (firstnameObj) {
                            name = firstnameObj.value + ' ' + name;
                        }
                        $***.salesiq.visitor.name(name);
                        var emailObj = document.forms['WebToContacts1328094000000077001']['Email'];
                        if (emailObj) {
                            email = emailObj.value;
                            $***.salesiq.visitor.email(email);
                        }
                    }
                } catch (e) {}
            }
</script>
    </form>

</div>

                    <script src="http://getyourvisa.com.au/datepicker/codebase/dhtmlxcalendar.js"></script>
              <script>
        var myCalendar;
        function doOnLoad() {
            myCalendar = new dhtmlXCalendarObject(["datepickr","CONTACTCF81","datepickr2"]);
        }
    </script>

HERE也是实时预览。

提前感谢所有愿意提供帮助的人。 DD

2 个答案:

答案 0 :(得分:0)

试用本教程: https://jqueryui.com/datepicker/

也许您可以修改代码并在教程中插入代码。

答案 1 :(得分:0)

  1. 你加载的jQuery太多了。你需要只有它一次。 这打破了你的选择。如果我在网上搜索Load jQuery Once wordpress,我会得到像这样的答案
  2. 如果您不知道如何删除这些内容,则需要获得WP开发人员的帮助。我不是一个,抱歉。

    1. 要加载datepicker onload,请使用此
    2. -

      var myCalendar;
      $(function() {
        myCalendar = new dhtmlXCalendarObject(["datepickr","CONTACTCF81","datepickr2"]);
      });
      

      而不是

      var myCalendar;
      function doOnLoad() {
         myCalendar = new dhtmlXCalendarObject(["datepickr","CONTACTCF81","datepickr2"]);
      }
      

      并从其他任何地方删除doOnload