I have wordpress template php file, and I want to add jquery for room allocation but it failed to execute when added, while my jquery code work fine with simple .html file. does it require some other afford to run jquery code in .php file?
WordPress template php file:
<?php
global $accommodation_obj, $currency_symbol, $enc_key, $add_captcha_to_forms;
$c_val_1 = mt_rand(1, 20);
$c_val_2 = mt_rand(1, 20);
$c_val_1_str = contact_encrypt($c_val_1, $enc_key);
$c_val_2_str = contact_encrypt($c_val_2, $enc_key);
?>
<script> window.datepickerDateFormat = 'yy-mm-dd';
window.InvalidCaptchaMessage = <?php echo json_encode(__('Invalid captcha, please try again!', 'bookyourtravel')); ?>;
window.bookingDateFrom = null;
window.bookingDateTo = null;
window.bookingFormFirstNameError = <?php echo json_encode(__('Please enter your first name', 'bookyourtravel')); ?>;
window.bookingFormLastNameError = <?php echo json_encode..............
// ......................................more code
?>
my jquery code part which need to implement.
<div id="panel">
<table name="room1Table">
<tr>
<td>
Adult -: <input type="text" name="adult1" id="adult1" >
</td>
<td>
Child -: <input type="text" name="child1" id="child1" >
</td>
<td>
</td>
</tr>
</table>
</div>
<button type="button" onclick="" align="left" id="addrooms">Add Rooms +</button>
<script src="javascript/jquery.js" type="text/javascript"></script>
<script src="javascript/jquery.php.js" type="text/javascript"></script>
<script>
$("#addrooms").click(function(){
$("#panel").slideDown("slow");
});
</script>
My jquery code work fine in .html while .php file stucked at rounding and rounding.
Complete Code:
<?php
global $accommodation_obj, $currency_symbol, $enc_key, $add_captcha_to_forms;$c_val_1 = mt_rand(1, 20);$c_val_2 = mt_rand(1, 20);$c_val_1_str = contact_encrypt($c_val_1, $enc_key);$c_val_2_str = contact_encrypt($c_val_2, $enc_key);?>
<script> window.datepickerDateFormat = 'yy-mm-dd'; window.InvalidCaptchaMessage = <?php echo json_encode(__('Invalid captcha, please try again!', 'bookyourtravel')); ?>; window.bookingDateFrom = null; window.bookingDateTo = null; window.bookingFormFirstNameError = <?php echo json_encode(__('Please enter your first name', 'bookyourtravel')); ?>; window.bookingFormLastNameError = <?php echo json_encode(__('Please enter your last name', 'bookyourtravel')); ?>; window.bookingFormEmailError = <?php echo json_encode(__('Please enter valid email address', 'bookyourtravel')); ?>; window.bookingFormPhoneError = <?php echo json_encode(__('Please enter your phone number', 'bookyourtravel')); ?>; window.bookingFormConfirmEmailError1 = <?php echo json_encode(__('Please provide a confirm email', 'bookyourtravel')); ?>; window.bookingFormConfirmEmailError2 = <?php echo json_encode(__('Please enter the same email as above', 'bookyourtravel')); ?>; window.bookingFormAddressError = <?php echo json_encode(__('Please enter your address', 'bookyourtravel')); ?>; window.bookingFormCityError = <?php echo json_encode(__('Please enter your city', 'bookyourtravel')); ?>; window.bookingFormZipError = <?php echo json_encode(__('Please enter your zip code', 'bookyourtravel')); ?>; window.bookingFormDatesError = <?php echo json_encode(__('Please select booking dates', 'bookyourtravel')); ?>; window.bookingFormCountryError = <?php echo json_encode(__('Please enter your country', 'bookyourtravel')); ?>; </script>
<?php do_action( 'byt_show_accommodation_booking_form_before' ); ?>
<form id="accommodation-booking-form" method="post" action="" class="booking" style="display:none"> <fieldset> <h3><span>01 </span><?php _e('Submit booking', 'bookyourtravel') ?></h3>
<div class="error" style="display:none;"><div><p></p></div></div>
<div class="row twins">
<div class="f-item">
<label for="first_name"><?php _e('First name', 'bookyourtravel') ?></label>
<input type="text" id="first_name" name="first_name" data-required />
</div> <div class="f-item"> <label for="last_name"><?php _e('Last name', 'bookyourtravel') ?></label> <input type="text" id="last_name" name="last_name" data-required /> </div> </div> <div class="row twins"> <div class="f-item"> <label for="email"><?php _e('Email address', 'bookyourtravel') ?></label> <input type="email" id="email" name="email" data-required /> </div> <div class="f-item"> <label for="confirm_email"><?php _e('Confirm email address', 'bookyourtravel') ?></label> <input type="email" id="confirm_email" name="confirm_email" data-required data-conditional="confirm" /> </div> <span class="info"><?php _e('You'll receive a confirmation email', 'bookyourtravel') ?></span> </div> <div class="row"> <div class="f-item"> <label for="phone"><?php _e('Phone', 'bookyourtravel') ?></label> <input type="text" id="phone" name="phone" data-required /> </div> </div> <div class="row twins"> <div class="f-item"> <label for="address"><?php _e('Street Address and Number', 'bookyourtravel') ?></label> <input type="text" id="address" name="address" data-required /> </div> <div class="f-item"> <label for="town"><?php _e('Town / City', 'bookyourtravel') ?></label> <input type="text" id="town" name="town" data-required /> </div> </div> <div class="row twins"> <div class="f-item"> <label for="zip"><?php _e('ZIP Code', 'bookyourtravel') ?></label> <input type="text" id="zip" name="zip" data-required /> </div> <div class="f-item"> <label for="country"><?php _e('Country', 'bookyourtravel') ?></label> <input type="text" id="country" name="country" data-required /> </div> </div> <div class="row calendar"> <div class="f-item"> <label><?php _e('Booking dates', 'bookyourtravel') ?></label> <div id="accommodation_vacancy_datepicker"></div> </div> </div> <div class="row loading" id="datepicker_loading" style="display:none"> <div class="ball"></div> <div class="ball1"></div> </div> <div class="row twins dates_row" style="display:none"> <div class="f-item"> <label><?php _e('Date from', 'bookyourtravel') ?></label> <span id="date_from"></span> <input type="hidden" name="date_from1" id="date_from1" value="" /> </div> <div class="f-item"> <label><?php _e('Date to', 'bookyourtravel') ?></label> <span id="date_to"></span> <input type="hidden" name="date_to1" id="date_to1" value="" /> </div> </div>
<div class="row triplets bf_room_type_row">
<div class="f-item">
<label for="booking_form_adults">
<?php _e('Adults', 'bookyourtravel') ?>
</label>
<select id="booking_form_adults" name="booking_form_adults"></select>
</div>
<div class="f-item booking_form_children">
<label for="booking_form_children"><?php _e('Children', 'bookyourtravel') ?></label>
<select id="booking_form_children" name="booking_form_children"></select>
</div>
<div class="f-item bf_room_type_cell">
<label><?php _e('Room type', 'bookyourtravel') ?></label>
<span id="room_type"></span>
<input type="hidden" name="room_type_id" id="room_type_id" />
</div>
<div class="f-item">
<script language="javascript" type="text/javascript">
var i=1;
function addRow()
{
var tbl = document.getElementById('table1');
var lastRow = tbl.rows.length;
var iteration = lastRow - 1;
var row = tbl.insertRow(lastRow);
var firstCell = row.insertCell(0);
var el = document.createElement('input');
el.type = 'number';
el.name = 'roomno' + i;
el.id = 'roomno' + i;
el.size = 1;
el.maxlength = 1;
firstCell.appendChild(el);
var secondCell = row.insertCell(1);
var el2 = document.createElement('input');
el2.type = 'number';
el2.name = 'adults' + i;
el2.id = 'adults' + i;
el2.size = 1;
el2.maxlength = 1;
secondCell.appendChild(el2);
var thirdCell = row.insertCell(2);
var el3 = document.createElement('input');
el3.type = 'number';
el3.name = 'children' + i;
el3.id = 'children' + i;
el3.size = 1;
el3.maxlength = 1;
thirdCell.appendChild(el3);
frm.h.value=i;
i++;
}
</script>
<!-- Akash -->
<div id="panel">
<table name="room1Table">
<tr>
<td>
Adult -: <input type="text" name="adult1" id="adult1" >
</td>
<td>
Child -: <input type="text" name="child1" id="child1" >
</td>
<td>
</td>
</tr>
</table>
</div>
<button type="button" onclick="" align="left" id="addrooms">Add Rooms +</button>
<script src="javascript/jquery.js" type="text/javascript"></script>
<script src="javascript/jquery.php.js" type="text/javascript"></script>
<script>
$("#addrooms").click(function(){
$("#panel").slideDown("slow");
});
</script>
</div> </div>
<div class="row price_row" style="display:none">
<div class="f-item">
<script>
window.adultCountLabel = <?php echo json_encode(__('Adults', 'bookyourtravel')); ?>;
window.pricePerAdultLabel = <?php echo json_encode(__('Price per adult', 'bookyourtravel')); ?>;
window.childCountLabel = <?php echo json_encode(__('Children', 'bookyourtravel')); ?>;
window.pricePerChildLabel = <?php echo json_encode(__('Price per child', 'bookyourtravel')); ?>;
window.pricePerDayLabel = <?php echo json_encode(__('Price per day', 'bookyourtravel')); ?>;
<?php
$total_price_label = __('Total price', 'bookyourtravel');
if ($accommodation_obj->get_is_price_per_person() && $accommodation_obj->get_count_children_stay_free() > 0)
$total_price_label = sprintf(__('Total price (first %d children stay free)', 'bookyourtravel'), $accommodation_obj->get_count_children_stay_free()); ?>
window.priceTotalLabel = <?php echo json_encode($total_price_label); ?>;
window.dateLabel = <?php echo json_encode(__('Date', 'bookyourtravel')); ?>;
</script>
<table class="breakdown tablesorter">
<thead></thead>
<tfoot></tfoot>
<tbody></tbody>
</table>
</div>
</div>
<div class="row">
<div class="f-item">
<label>
<?php _e('Special requirements: <span>(Not Guaranteed)</span>', 'bookyourtravel') ?>
</label>
<textarea id="requirements" name="requirements" rows="10" cols="10"></textarea> </div>
<span class="info"><?php _e('Please write your requests in English.', 'bookyourtravel') ?></span> </div>
<?php if ($add_captcha_to_forms) { ?> <div class="row captcha">
<div class="f-item">
<label><?php echo sprintf(__('How much is %d + %d', 'bookyourtravel'), $c_val_1, $c_val_2) ?>?</label>
<input type="text" required="required" id="c_val_s" name="c_val_s" />
<input type="hidden" name="c_val_1" id="c_val_1" value="<?php echo $c_val_1_str; ?>" />
<input type="hidden" name="c_val_2" id="c_val_2" value="<?php echo $c_val_2_str; ?>" /> </div> </div>
<?php } ?>
<input type="hidden" name="room_count" id="room_count" value="1" />
<?php byt_render_submit_button("gradient-button", "submit-accommodation-booking", __('Submit booking', 'bookyourtravel')); ?>
<?php byt_render_link_button("#", "gradient-button cancel-accommodation-booking", "cancel-accommodation-booking", __('Cancel', 'bookyourtravel')); ?>
</fieldset> </form>
<div class="loading" id="wait_loading" style="display:none">
<div class="ball"></div> <div class="ball1"></div> </div>
<?php do_action( 'byt_show_accommodation_booking_form_after' ); ?>
use the jquery tags in between PHP Like below-
Always place your scripts in a document.ready or $(function()
Try this:
And you can just echo the script like this:
or place your script in a file and append it where you want to it to appear: