I created a form generated by the crm I'm using in order to find the form input in the crm. Then I pasted the code on wordpress. It works ok. Then I added a datepicker on some field and tested all of it in local. It still works ok. When I upload all the necessary on wp it doesn't work anymore.
I did some test. Here some of them:
I added the function onload to the body of the template in the file header.php but, even if in the source page there is the onload function, the datepicker doesn't show up.
I tried to write the javascript code inside the page but it doesn't work.
I tried to write < script>function-name()< /script> after the div and it is still working on local but not on wordpress.
I was afraid the problem was that my page couldn't load the file by the relative path so I used the absolute one. Nothing changed.
Eventually I tried to use the absolute path on the local file and it is still working.
The last thing I thought was: My template is ignoring the javascript. But then I realized that in the same page there are 2 other functions and they are working properly.
Here is the code, maybe we can modify that in order to achieve my aim.
<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 is also a live preview.
Thank you in advance to everyone who will try to help. DD
