We Keep Coding

Wordpress - Why if I put the js script at the top of the page it doesn't load?

I'm trying to edit woocommerce settings page, everything works fine in a way, but for some reason if I load my custom js file on top of the template it doesn't load. Below is the template ...
If the script <script type="text/javascript" src="https://mywebsite.com/wp-content/themes/astra-child/woocommerce/myaccount/assets/form-edit-account.js"></script> is inserted at the bottom of the page as the last line works fine, but if it is placed at the top of the first lines it does not load, why is this happening?
<?php
?><link href="https://mywebsite.com/wp-content/themes/astra-child/woocommerce/myaccount/assets/form-edit-account.css" rel="stylesheet" type="text/css" ><?php
?><script type="text/javascript" src="https://mywebsite.com/wp-content/themes/astra-child/woocommerce/myaccount/assets/form-edit-account.js"></script><?php
defined( 'ABSPATH' ) || exit;
do_action( 'woocommerce_before_edit_account_form' ); ?>
<form class="form-container" action="" method="post" <?php do_action( 'woocommerce_edit_account_form_tag' ); ?> >
<?php do_action( 'woocommerce_edit_account_form_start' ); ?>
<div class="box-name-surname">
<p class="form-row">
<label class="t2" for="account_first_name"><?php esc_html_e( 'First name', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="text" class="field-settings" name="account_first_name" id="account_first_name" autocomplete="given-name" value="<?php echo esc_attr( $user->first_name ); ?>" />
</p>
<p class="form-row">
<label class="t2" for="account_last_name"><?php esc_html_e( 'Last name', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="text" class="field-settings" name="account_last_name" id="account_last_name" autocomplete="family-name" value="<?php echo esc_attr( $user->last_name ); ?>" />
</p>
</div>
<div class="clear"></div>
<p class="form-row">
<label class="t2" for="account_user_login"><?php esc_html_e( 'Username', 'woocommerce' ); ?></label>
<input type="text" class="field-settings disabled" name="account_user_login" id="account_user_login" disabled value="<?php echo esc_attr( $user->user_login ); ?>" /> <span class="t4-light"><?php esc_html_e( "L'username viene scelto dall'utente al momento della registrazione, esso viene utilizzato insieme alla password per effettuare l'accesso al sito e non può essere modificato. Se la registrazione dell'account avviene tramite social login, l'username viene generato automaticamente. ", 'woocommerce' ); ?></span>
</p>
<p class="form-row">
<label class="t2" for="account_display_name"><?php esc_html_e( 'Display name', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="text" class="field-settings" name="account_display_name" id="account_display_name" value="<?php echo esc_attr( $user->display_name ); ?>" /> <span class="t4-light"><?php esc_html_e( 'This will be how your name will be displayed in the account section and in reviews', 'woocommerce' ); ?></span>
</p>
<div class="clear"></div>
<p class="form-row email">
<label class="t2" for="account_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="email" class="field-settings" name="account_email" id="account_email" autocomplete="email" value="<?php echo esc_attr( $user->user_email ); ?>" />
</p>
<!-- Password Section -->
<div class="drop_btn">Modifica Password<i class="icon_item fa fa-angle-down"></i></div>
<div class="drop_container">
<fieldset>
<p class="">
<label class="t2" for="password_current"><?php esc_html_e( 'Current password (leave blank to leave unchanged)', 'woocommerce' ); ?></label>
<div class="input-group">
<input type="password" class="field-settings" name="password" id="password_current" autocomplete="off"/>
<input type="checkbox" class="togglePw" id="pw_current" onclick="showPassword('password_current')"/>
<label for="pw_current" class="fa"></label>
</div>
</p>
<p class="">
<label class="t2" for="password_1"><?php esc_html_e( 'New password (leave blank to leave unchanged)', 'woocommerce' ); ?></label>
<div class="input-group">
<input type="password" class="field-settings" name="password_1" id="password_1" autocomplete="off" />
<input type="checkbox" class="togglePw" id="pw_1" onclick="showPassword('password_1')"/>
<label for="pw_1" class="fa"></label>
</div>
</p>
<p class="">
<label class="t2" for="password_2"><?php esc_html_e( 'Confirm new password', 'woocommerce' ); ?></label>
<div class="input-group">
<input type="password" class="field-settings" name="password_2" id="password_2" autocomplete="off" />
<input type="checkbox" class="togglePw" id="pw_2" onclick="showPassword('password_2')"/>
<label for="pw_2" class="fa"></label>
</div>
</p>
</fieldset>
</div>
<div class="clear"></div>
<?php do_action( 'woocommerce_edit_account_form' ); ?>
<p>
<?php wp_nonce_field( 'save_account_details', 'save-account-details-nonce' ); ?>
<button type="submit" class="woocommerce-Button button" name="save_account_details" value="<?php esc_attr_e( 'Save changes', 'woocommerce' ); ?>"><?php esc_html_e( 'Save changes', 'woocommerce' ); ?></button>
<input type="hidden" name="action" value="save_account_details" />
</p>
<?php do_action( 'woocommerce_edit_account_form_end' ); ?>
</form>
<?php do_action( 'woocommerce_after_edit_account_form' ); ?>
<?php echo do_shortcode('[elementor-template id="22350"]'); ?>

Try adding defer. It will ensure that the html elements are parsed BEFORE your script tries to act upon them. If the script runs before the page has loaded it won't accomplish what you're wanting.
Change this:
<script type="text/javascript" src="https://mywebsite.com/wp-content/themes/astra-child/woocommerce/myaccount/assets/form-edit-account.js"></script>
To this:
<script type="text/javascript" src="https://mywebsite.com/wp-content/themes/astra-child/woocommerce/myaccount/assets/form-edit-account.js" defer></script>
Notice defer at the end of the second line.
Another option would be to encapsulate your code inside a function that only gets executed after page load:
function main()
{
let p = document.getElementById("test");
p.textContent = "The Page has Loaded";
}
window.onload = main;
<p id="test">Page is NOT loaded yet!</p>

How to get link to tab content?

I have a page with two tabs and each tab can be showed If we clicked on a link inside a page.
Is there anyway to get to my tab and show tab's content ?
Here is my site url https://www.behealthy.asia/cp/
Here is the first tab https://www.behealthy.asia/cp/#regularuser
Here is the second tab https://www.behealthy.asia/cp/#company
and this is my code.
<div class="<?php echo esc_attr($getClasses); ?>">
<div class="tg-registerarea tg-haslayout">
<?php if (!empty($atts['title']))
{ ?>
<div class="tg-loginarea">
<div class="tg-bordertitle">
<h3><?php echo esc_attr($atts['title']); ?></h3>
</div>
</div>
<?php
} ?>
<fieldset>
<ul class="tg-tabnav" role="tablist">
<li role="presentation" class="active">
<a href="#regularuser" data-toggle="tab">
<span class="lnr lnr-user"></span>
<div class="tg-navcontent">
<h3><?php esc_html_e('Regular Single User', 'listingo_core'); ?></h3>
<span><?php esc_html_e('Register As Service Seeker', 'listingo_core'); ?></span>
</div>
</a>
</li>
<li role="presentation">
<a href="#company" data-toggle="tab">
<span class="lnr lnr-briefcase"></span>
<div class="tg-navcontent">
<h3><?php esc_html_e('Company / Professional', 'listingo_core'); ?></h3>
<span><?php esc_html_e('Register As Service Provider', 'listingo_core'); ?></span>
</div>
</a>
</li>
</ul>
<div class="tg-themetabcontent tab-content">
<div class="tab-pane active fade in" id="regularuser">
<form action="#" method="post" class="seeker-register do-registration-form">
<div class="form-group">
<div class="tg-registeras">
<span><?php esc_html_e('Already have an account? Please login', 'listingo_core'); ?></span>
</div>
</div>
<div class="form-group">
<input type="text" name="register[username]" class="form-control" placeholder="<?php esc_html_e('User Name, eg alex', 'listingo_core'); ?>">
</div>
<?php if (apply_filters('listingo_dev_manage_fields', 'true', 'user_nicename') === 'true')
{ ?>
<div class="form-group">
<input type="text" name="register[user_nicename]" class="form-control" placeholder="<?php esc_html_e('Nicename eg : alex', 'listingo_core'); ?>">
<?php do_action('listingo_get_tooltip', 'element', 'nicename'); ?>
</div>
<?php
} ?>
<?php if (apply_filters('listingo_dev_manage_fields', 'true', 'first_name') === 'true')
{ ?>
<div class="form-group">
<input type="text" name="register[first_name]" class="form-control" placeholder="<?php esc_html_e('First Name', 'listingo_core'); ?>">
</div>
<?php
} ?>
<?php if (apply_filters('listingo_dev_manage_fields', 'true', 'last_name') === 'true')
{ ?>
<div class="form-group">
<input type="text" name="register[last_name]" class="form-control" placeholder="<?php esc_html_e('Last Name', 'listingo_core'); ?>">
</div>
<?php
} ?>
<?php if (apply_filters('listingo_dev_manage_fields', 'true', 'gender') === 'true')
{ ?>
<div class="form-group">
<span class="tg-select">
<select name="register[gender]">
<option value=""><?php esc_html_e('Gender', 'listingo_core'); ?></option>
<option value="male"><?php esc_html_e('Male', 'listingo_core'); ?></option>
<option value="female"><?php esc_html_e('Female', 'listingo_core'); ?></option>
</select>
</span>
</div>
<?php
} ?>
<?php if (apply_filters('listingo_dev_manage_fields', 'true', 'phone') === 'true')
{ ?>
<div class="form-group">
<input type="text" name="register[phone]" class="form-control" placeholder="<?php esc_html_e('Phone', 'listingo_core'); ?>">
<?php do_action('listingo_get_tooltip', 'element', 'phone'); ?>
</div>
<?php
} ?>
<div class="form-group">
<input type="email" name="register[email]" class="form-control" placeholder="<?php esc_html_e('Email', 'listingo_core'); ?>">
</div>
<div class="form-group">
<input type="password" name="register[password]" class="form-control" placeholder="<?php esc_html_e('Password', 'listingo_core'); ?>">
</div>
<div class="form-group">
<input type="password" name="register[confirm_password]" class="form-control" placeholder="<?php esc_html_e('Retype Password', 'listingo_core'); ?>">
</div>
<?php do_action('listingo_registration_customer_extra_fields'); ?>
<div class="form-group term-group">
<?php
if (isset($captcha_settings) && $captcha_settings === 'enable')
{
?>
<div class="domain-captcha">
<div id="recaptcha_signup"></div>
</div>
<?php
} ?>
<div class="tg-checkbox">
<input name="terms" type="hidden" value="0" />
<input name="terms" type="checkbox" id="terms">
<label for="terms">
<?php if (!empty($terms_link))
{ ?>
<?php esc_html_e('I have read the', 'listingo_core'); ?> <a target="_blank" href="<?php echo esc_url($terms_link); ?>"><?php esc_html_e('Terms & Conditions', 'listingo_core'); ?></a> <?php esc_html_e('and accept them', 'listingo_core'); ?>
<?php
}
else
{ ?>
<?php
echo "ฉันยอมรับในเงื่อนไขและข้อกำหนดทุกประการ";
?>
<?php
} ?>
คลิกเพื่ออ่านเงื่อนไขและข้อกำหนด
</label>
<input type="hidden" name="register[account]" value="seeker">
<?php wp_nonce_field('register_seeker_request', 'register_seeker_request'); ?>
<button class="tg-btn do-regiter-me" type="submit"><?php esc_html_e('Register Now', 'listingo_core'); ?></button>
</div>
</div>
</form>
</div>
<div class="tab-pane fade in" id="company">
<form action="#" method="post" class="do-registration-form">
<div class="form-group">
<div class="tg-registeras">
<span><?php esc_html_e('Register As', 'listingo_core'); ?>:</span>
<div class="tg-radio">
<input type="radio" class="register_type" value="business" id="business" name="register[type]" checked>
<label for="business"><?php esc_html_e('Business', 'listingo_core'); ?></label>
</div>
<div class="tg-radio">
<input type="radio" class="register_type" value="professional" id="professional" name="register[type]">
<label for="professional"><?php esc_html_e('professional', 'listingo_core'); ?></label>
</div>
</div>
</div>
<div class="form-group">
<span class="tg-select">
<select name="register[category]" class="sp-category">
<option value=""><?php esc_html_e('Select Category', 'listingo_core'); ?></option>
<?php listingo_get_categories('', 'sp_categories'); ?>
</select>
</span>
</div>
Note that there is two tab, #regularuser and #company

multiple forms not submitting correctly

I'm working in OpenCart MVC and I have a page that has a main form called campaign. there is a secondary form called components. the component form allows for multiple instances of itself(click add another component shows). The idea is that a campaign can have infinite components and on submit the campaign info will be written to the campaign table and the component info will be written to the component table. well that is not happening. currently when i fill out both forms and submit. the info for campaign form is written to the table. however in the component table a new record is made but its all blank. Why are the values not being added? Furthermore, additional components seem to not get written at all. so if you start a campaign and add three components then submit only one new(blank) record will be written in components.
MODEL:
public function addCampaign($data) {
$this->db->query("INSERT INTO " . DB_PREFIX . "campaigns SET campaign_name = '" . $this->db->escape($data['campaign_name']) . "', campaign_giving_goal = '" . (float)$data['campaign_giving_goal']
. "', code = '" . $this->db->escape($data['code']) . "', campaign_active = '" . $this->db->escape($data['campaign_active']) . "', campaign_giving_count_goal = '" . (float)$data['campaign_giving_count_goal']
. "', campaign_owner = '" . $this->db->escape($data['campaign_owner']). "', date_beginning = '" . $this->db->escape($data['date_beginning']). "', date_ending = '" . $this->db->escape($data['date_ending']). "'");
$this->cache->delete('campaign');
return $campaign_id;
}
public function addComponent($data) {
$this->db->query("INSERT INTO " . DB_PREFIX . "campaign_components SET component_name = '" . $this->db->escape($data['component_name']) . "', component_date = '" . $data['component_date']
. "', component_owner = '" . $this->db->escape($data['component_owner']). "', campaign_code = '" . $this->db->escape($data['campaign_code']) . "'");
$this->cache->delete('campaign');
return $campaign_id;
}
CONTROLLER:
public function add() {
$this->load->language('campaigns/campaign');
$this->document->setTitle($this->language->get('heading_title'));
$this->load->model('campaigns/campaign');
if (($this->request->server['REQUEST_METHOD'] == 'POST')) {
$this->model_campaigns_campaign->addCampaign($this->request->post);
$this->model_campaigns_campaign->addComponent($this->request->post);
$this->session->data['success'] = $this->language->get('text_success');
$url = '';
if (isset($this->request->get['order'])) {
$url .= '&order=' . $this->request->get['order'];
}
if (isset($this->request->get['page'])) {
$url .= '&page=' . $this->request->get['page'];
}
$this->response->redirect($this->url->link('campaigns/campaign', 'token=' . $this->session->data['token'] . $url, true));
}
$this->getForm();
}
VIEW:
<?php echo $header; ?><?php echo $column_left; ?>
<div id="content">
<div class="page-header">
<div class="container-fluid">
<div class="pull-right">
<button type="submit" form="form-campaign" action="<?php echo $action; ?>" data-toggle="tooltip" title="<?php echo $button_save; ?>" class="btn btn-primary" onclick="submitForms()"><i class="fa fa-save"></i></button>
<i class="fa fa-reply"></i>
</div>
<h1><?php echo $heading_title; ?></h1>
<ul class="breadcrumb">
<?php foreach ($breadcrumbs as $breadcrumb) { ?>
<li><?php echo $breadcrumb['text']; ?></li>
<?php } ?>
</ul>
</div>
</div>
<div class="container-fluid">
<?php if ($error_warning) { ?>
<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> <?php echo $error_warning; ?>
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
<?php } ?>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-pencil"></i> <?php echo $text_form; ?></h3>
</div>
<div class="panel-body">
<form method="post" action="<?php echo $action; ?>" enctype="multipart/form-data" id="form-campaign" class="form-horizontal">
<div class="tab-content">
<div class="tab-pane active" id="tab-general">
<?php foreach ($languages as $language) { ?>
<div class="tab-pane" id="language<?php echo $language['language_id']; ?>">
<div class="form-group">
<div class="col-sm-5 col-sm-push-1 form-group required">
<label class="control-label" for="input-campaign-name"><?php echo $entry_name; ?></label>
<input type="text" name="campaign_name" placeholder="<?php echo $entry_name; ?>" id="input-campaign-name" class="form-control" value="<?php echo $campaign_name; ?>" />
<?php if (isset($error_name[$language['language_id']])) { ?>
<div class="text-danger"><?php echo $error_name[$language['language_id']]; ?></div>
<?php } ?>
</div>
<div class="col-sm-5 col-sm-push-1 form-group required">
<label class="control-label" ><?php echo $entry_owner; ?></label>
<select name="campaign_owner" id="campaign_owner" value="<?php echo $campaign_owner; ?>">
<?php foreach ($users as $user) { ?>
<option value="<?php echo $user['username']; ?>"><?php echo $user['username']; ?></option>
<?php } ?>
</select>
</div>
<div class="col-sm-5 col-sm-push-1 form-group required">
<label class="control-label" for="input-campaign-goal"><?php echo $entry_goal; ?></label>
<input type="text" name="campaign_giving_goal" placeholder="<?php echo $entry_goal; ?>" id="input-campaign-goal" class="form-control" value="<?php echo $campaign_giving_goal; ?>" />
<?php if (isset($error_name[$language['language_id']])) { ?>
<div class="text-danger"><?php echo $error_name[$language['language_id']]; ?></div>
<?php } ?>
</div>
<div class="col-sm-5 col-sm-push-1 form-group required">
<label class="control-label" for="input-campaign-goal"><?php echo $entry_goal_count; ?></label>
<input type="text" name="campaign_giving_count_goal" placeholder="<?php echo $entry_goal_count; ?>" id="input-campaign-goal-count" class="form-control" value="<?php echo $campaign_giving_count_goal; ?>" />
<?php if (isset($error_name[$language['language_id']])) { ?>
<div class="text-danger"><?php echo $error_name[$language['language_id']]; ?></div>
<?php } ?>
</div>
<div class="col-sm-5 col-sm-push-1 form-group required">
<label class="control-label" for="input-date-beginning"><?php echo $entry_campaign_start_date; ?></label>
<div class="input-group date required">
<input type="text" name="date_beginning" placeholder="<?php echo $entry_date; ?>" data-date-format="YYYY-MM-DD" id="input-date-beginning" class="form-control" value="<?php echo $date_beginning; ?>" readonly />
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>
<?php if (isset($error_date_starting)) { ?>
<label class="text-danger"><?php echo $error_date_starting; ?></label>
<?php } ?>
</div>
<div class="col-sm-5 col-sm-push-1 form-group required">
<label class="control-label" for="input-date-ending"><?php echo $entry_campaign_end_date; ?></label>
<div class="input-group date required">
<input type="text" name="date_ending" placeholder="<?php echo $entry_campaign_end_date; ?>" data-date-format="YYYY-MM-DD" id="input-date-ending" class="form-control" value="<?php echo $date_ending; ?>" readonly />
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>
<?php if (isset($error_date_starting)) { ?>
<label class="text-danger"><?php echo $error_date_starting; ?></label>
<?php } ?>
</div>
<div class="col-sm-5 col-sm-push-1 form-group required">
<label class="control-label" for="input-code"><?php echo $entry_code; ?></label>
<div class="input-code required">
<input type="text" name="code" value="<?php echo $code; ?>" placeholder="<?php echo $code; ?>" id="input-code" class="form-control" readonly />
</div>
<?php if (isset($error_date_starting)) { ?>
<label class="text-danger"><?php echo $error_code; ?></label>
<?php } ?>
</div>
<div class="col-sm-5 col-sm-push-1 form-group required">
<label class="control-label" for="input-active"><?php echo $entry_active; ?></label>
<select name="campaign_active" id="input-"active" class="form-control">
<option value="*"><?php echo $text_active; ?></option>
<?php if ($filter_campaign_active) { ?>
<option value="1" selected="selected"><?php echo $text_yes; ?></option>
<?php } else { ?>
<option value="1"><?php echo $text_yes; ?></option>
<?php } ?>
<?php if (!$filter_campaign_active && !is_null($filter_campaign_active)) { ?>
<option value="0" selected="selected"><?php echo $text_no; ?></option>
<?php } else { ?>
<option value="0"><?php echo $text_no; ?></option>
<?php } ?>
</select>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
</form>
</div>
</div>
</div>
<button class="btn btn-primary" id="launch"><?php echo $text_add_component ?></button>
<div class="wrapper">
<div class="panel panel-default" id="add-components">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-pencil"></i> <?php echo $text_add_component; ?></h3>
</div>
<div class="panel-body" id="addon">
<form method="post" enctype="multipart/form-data" id="form-components" class="form-horizontal" action="<?php echo $action; ?>">
<div class="tab-content">
<div class="tab-pane active" id="tab-general">
<?php foreach ($languages as $language) { ?>
<div class="tab-pane" id="language<?php echo $language['language_id']; ?>">
<div class="form-group required">
<div class= "row">
<div class="col-sm-8 col-sm-push-1 form-group required" >
<label for="input-name<?php echo $language['language_id']; ?>"><?php echo $entry_name; ?></label>
<input type="text" name="component_name" placeholder="<?php echo $entry_name; ?>" id="input-name<?php echo $language['language_id']; ?>" class="form-control" />
<?php if (isset($error_name[$language['language_id']])) { ?>
<div class="text-danger"><?php echo $error_name[$language['language_id']]; ?></div>
<?php } ?>
</div>
<div class="col-sm-2 col-sm-push-1 form-group required">
<div class="campaign-group form-group">
<div class="dropdown">
<button class="btn btn-primary pull-left dropdown-toggle" type="button" id="button-type" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><?php echo $text_filter_type;?><span class="caret"></span></button>
<ul class="campaign-form-type dropdown-menu">
<li class="campaign-dropdown-list">Direct Mail</li>
<li class="campaign-dropdown-list">Email</li>
<li class="campaign-dropdown-list">Event</li>
<li class="campaign-dropdown-list">Text Message</li>
<li class="campaign-dropdown-list">Letter</li>
<li class="campaign-dropdown-list">Postcard</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-sm-push-1 form-group required">
<label class="control-label" for="input-date-beginning"><?php echo $entry_campaign_start_date; ?></label>
<div class="input-group date required">
<input type="text" name="date_beginning" placeholder="<?php echo $entry_date; ?>" data-date-format="YYYY-MM-DD" id="input-date-beginning" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>
<?php if (isset($error_date_starting)) { ?>
<label class="text-danger"><?php echo $error_date_starting; ?></label>
<?php } ?>
</div>
<div class="col-sm-4 col-sm-push-1 form-group required">
<label class="control-label" ><?php echo $entry_owner; ?></label>
<select name="campaign_owner" id="component_owner">
<?php foreach ($users as $user) { ?>
<option value="<?php echo $user['username']; ?>"><?php echo $user['username']; ?></option>
<?php } ?>
</select>
</div>
<div class="col-sm-5 col-sm-push-1 form-group required">
<!--label class="control-label" for="input-code"><?php echo $entry_code; ?></label-->
<div class="input-code required">
<input type="text" name="code" value="<?php echo $code; ?>" placeholder="<?php echo $code; ?>" id="input-code" class="form-control" readonly />
</div>
<?php if (isset($error_date_starting)) { ?>
<label class="text-danger"><?php echo $error_code; ?></label>
<?php } ?>
</div>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
</form>
</div>
</div>
<div class="cancel-save">
<button type="submit" form="form-campaign" data-toggle="tooltip" title="<?php echo $button_save; ?>" class="btn btn-primary" onclick="submitForms(0)"><i class="fa fa-save"></i></button>
<i class="fa fa-reply"></i>
</div>
</div>
</div>
<script type="text/javascript" src="view/javascript/summernote/summernote.js"></script>
<link href="view/javascript/summernote/summernote.css" rel="stylesheet" />
<script type="text/javascript" src="view/javascript/summernote/opencart.js"></script>
</script>
<script type="text/javascript"><!--
$('#input-code').on('keyup', function() {
$('#input-example1').val('<?php echo $store; ?>?tracking=' + $('#input-code').val());
$('#input-example2').val('<?php echo $store; ?>index.php?route=common/home&tracking=' + $('#input-code').val());
});
$('#input-code').trigger('keyup');
//--></script>
<script type="text/javascript">
document.getElementById('launch').onclick = function() {
var addOnDiv = document.getElementById('addon');
var container = document.getElementById('add-components')
var clonedNode = addOnDiv.cloneNode(true);
container.appendChild(clonedNode );
}
</script>
<script type="text/javascript"><!--
submitForms = function(){
document.getElementById("form-campaign").submit();
document.getElementById("form-components").submit();
}
</script>
<script type="text/javascript"><!--
$('.date').datetimepicker({
formatDate:'yyyy-mm-dd',
pickTime: false
});
$('.time').datetimepicker({
pickDate: false,
icons: {
up: 'fa fa-chevron-up',
down: 'fa fa-chevron-down',
},
});
$('.datetime').datetimepicker({
pickDate: true,
pickTime: true
});
//--></script>
<script type="text/javascript"><!--
$('#language a:first').tab('show');
$('#option a:first').tab('show');
//--></script></div>
<?php echo $footer; ?>

Not working in Mozilla firefox and works fine in chrome $('input[data-type="choise"]').change(function()

Iam working with online test portal developing its working fine with chrome but the problem is it not working woth mozill.My code is as follows and it works fine in chrome and not working in the mozilla firefox Suggest me the alternative or solution for.
input[data-type="choise"] is not working
<script>
( document ).ready(function() {
$('input[data-type="choise"]').change(function() {
var Question = $(this).attr('name');
var Checked = $(this).attr('value');
y++;
if(Checked=="0"){
}else{
x++;
}
$('#score').replaceWith("<span id='score'><input type='hidden' name='score' id='score' value='"+ x +"' /> <input type='hidden' name='totalquestions' id='totalquestions' value='"+ y +"' /></span>");
alert('Selected Choise for ' + Question + ' is ' + Checked+ 'and score is'+ x);
});
});
</script>
<div class="time">
<label> Remaining Time </label> <span id="timer"></span>
</div>
<?php
include('connection.php');
$test=$_SESSION["testnum"];
$query=mysql_query("select * from questions where Testno='$test' order by Id ASC");
if($query==true){ ?>
<form id="scoretarget" name="formsubmit" action="congrasulations.php" method="POST">
<span id="score"><input type="hidden" name="score" id="score" value="" />
<input type='hidden' name='totalquestions' id='totalquestions' value="" />
</span>
<hr class="hr">
<?php $id=1;
While($row=mysql_fetch_array($query)){ ?>
<?php
$questionnum=$row['Questionno'];
$question=$row['Question'];
$ans=$row['Answer'];
?>
<div class="question">
<div class="row">
<div class="col-md-1">
<label class="control-label form-inline">
<?php echo $questionnum?>
</label>
</div>
<div class="col-md-11 quest-left">
<div class="form-group">
<label class="control-label form-inline">
<?php echo $question;?>
</label>
</div>
<fieldset>
<input type="radio" data-type="choise" name="q<?php echo $id; ?>" value="<?php if($ans=="Option A"){ echo"1";}else{echo"0";} ?>"><span> <?php echo $row['Option1'];?></span><br>
<input type="radio" data-type="choise" name="q<?php echo $id; ?>" value="<?php if($ans=="Option B"){ echo"1";}else{echo"0";} ?>"><span> <?php echo $row['Option2'];?></span><br>
<input type="radio" data-type="choise" name="q<?php echo $id; ?>" value="<?php if($ans=="Option C"){ echo"1";}else{echo"0";} ?>"><span> <?php echo $row['Option3'];?></span><br>
<input type="radio" data-type="choise" name="q<?php echo $id; ?>" value="<?php if($ans=="Option D"){ echo"1";}else{echo"0";} ?>"><span> <?php echo $row['Option4'];?></span><br>
</fieldset>
</div>
</div>
</div><br>
<?php ++$id;} ?>
<input type="submit" name="proceed" value="proceed" class="btn btn-info pull-right">
</form>
<?php } else{?>
<div class="question">
<div class="row">
<div class="col-md-12">
<h4 style="text-align:center; color:red;"> Question Paper is not updated </h4>
</div></div></div>
<?php }
?>
</div>

<script>
( document ).ready(function() {
$('input[data-type="choise"]').click(function() {
var Question = $(this).attr('name');
var Checked = $(this).attr('value');
y++;
if(Checked=="0"){
}else{
x++;
}
$('#score').replaceWith("<span id='score'><input type='hidden' name='score' id='score' value='"+ x +"' /> <input type='hidden' name='totalquestions' id='totalquestions' value='"+ y +"' /></span>");
alert('Selected Choise for ' + Question + ' is ' + Checked+ 'and score is'+ x);
});
});
</script>
<div class="time">
<label> Remaining Time </label> <span id="timer"></span>
</div>
<?php
include('connection.php');
$test=$_SESSION["testnum"];
$query=mysql_query("select * from questions where Testno='$test' order by Id ASC");
if($query==true){ ?>
<form id="scoretarget" name="formsubmit" action="congrasulations.php" method="POST">
<span id="score"><input type="hidden" name="score" id="score" value="" />
<input type='hidden' name='totalquestions' id='totalquestions' value="" />
</span>
<hr class="hr">
<?php $id=1;
While($row=mysql_fetch_array($query)){ ?>
<?php
$questionnum=$row['Questionno'];
$question=$row['Question'];
$ans=$row['Answer'];
?>
<div class="question">
<div class="row">
<div class="col-md-1">
<label class="control-label form-inline">
<?php echo $questionnum?>
</label>
</div>
<div class="col-md-11 quest-left">
<div class="form-group">
<label class="control-label form-inline">
<?php echo $question;?>
</label>
</div>
<fieldset>
<input type="radio" data-type="choise" name="q<?php echo $id; ?>" value="<?php if($ans=="Option A"){ echo"1";}else{echo"0";} ?>"><span> <?php echo $row['Option1'];?></span><br>
<input type="radio" data-type="choise" name="q<?php echo $id; ?>" value="<?php if($ans=="Option B"){ echo"1";}else{echo"0";} ?>"><span> <?php echo $row['Option2'];?></span><br>
<input type="radio" data-type="choise" name="q<?php echo $id; ?>" value="<?php if($ans=="Option C"){ echo"1";}else{echo"0";} ?>"><span> <?php echo $row['Option3'];?></span><br>
<input type="radio" data-type="choise" name="q<?php echo $id; ?>" value="<?php if($ans=="Option D"){ echo"1";}else{echo"0";} ?>"><span> <?php echo $row['Option4'];?></span><br>
</fieldset>
</div>
</div>
</div><br>
<?php ++$id;} ?>
<input type="submit" name="proceed" value="proceed" class="btn btn-info pull-right">
</form>
<?php } else{?>
<div class="question">
<div class="row">
<div class="col-md-12">
<h4 style="text-align:center; color:red;"> Question Paper is not updated </h4>
</div></div></div>
<?php }
?>
</div>

WooCommerce input field - increment/ decrement field button

I'm trying to add an 'increment/decrement button' to a quantity field in woocommerce on my site - http://tbdemo.tk/aquapark/tickets/
My code in /woocommerce/templates/global/quantity-input.php is :
echo "<script>
var i = 0;
function buttonClick() {
document.getElementById('inc').value = ++i;
</script>";
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
?>
<div class="quantity">
<form>
<input type="number" id="inc" onfocus="if(this.value == '0') { this.value = ''; }" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( $max_value ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" />
<input type="button" onclick="buttonClick()" value="Increment Value" />
</form>
</div>
But it doesn't work.
How can I increment value only on OnFocus field? Not at all input fields....
Thank You!

you forgot the '}' at the end of the function.
echo "<script>
var i = 0;
function buttonClick() {
document.getElementById('inc').value = ++i;
}
</script>";
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
?>
<div class="quantity">
<form>
<input type="number" id="inc" onfocus="if(this.value == '0') { this.value = ''; }" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( $max_value ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" />
<input type="button" onclick="buttonClick()" value="Increment Value" />
</form>
</div>