Onload not working in wordpress
I created a crm generated form which I use to find the form input in crm. Then I pasted the code into wordpress. It works fine. Then I added some fetching to some field and checked it all on local. It still works fine. When I upload everything I need to wp it doesn't work anymore.
I've done some tests. Here are some of them:
I added the onload function to the template body in the header.php file, but even if the original page has an onload function, the datapicker is not displayed.
I tried to write javascript code inside the page, but it doesn't work.
I tried to write <script> function-name () </script> after the div and it still works on local, but not wordpress.
I was afraid that the problem was that my page could not load the file in the relative path, so I used the absolute one. Nothing changed.
I ended up trying to use the absolute path in the local file and it still works.
Last thing I thought: My template ignores javascript. But then I realized that there are two more functions on the same page and they work fine.
Here is the code, maybe we can change this to achieve my goal.
<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 - also live preview.
Thanks in advance to everyone who tries to help. DD
+3
source to share
2 answers
Try this tutorial: https://jqueryui.com/datepicker/
Maybe you can revisit your code and paste it into the tutorial.
0
source to share
- You have too many jQuery loaded. You should only have it once. This breaks your picker . If I search the net for Load jQuery After Wordpress I get answers like
If you don't know how to remove them, you need to get help from the WP developer. I'm not alone, sorry.
- To load datepicker download use this
-
var myCalendar;
$(function() {
myCalendar = new dhtmlXCalendarObject(["datepickr","CONTACTCF81","datepickr2"]);
});
instead
var myCalendar;
function doOnLoad() {
myCalendar = new dhtmlXCalendarObject(["datepickr","CONTACTCF81","datepickr2"]);
}
and remove doOnload from elsewhere
0
source to share