"Required field" validation Messsage overlaps with the country select field - javascript

Recently I have create a Form using html,css and jQuery......There I showed the "required field" validation also.....But if I click on the Submit button with out filling the country field,the "required field" validation message is showing up,but it gets overlapped with the country select field....... I need help guys.... Thank you all....Click to see the image
<style>
.captitalize {
text-transform: capitalize;
}
.nav-menu {
display: none
}
</style>
<div class="account-create login login-register">
<div class="col-xs-12 col-sm-6 col-md-6 box register">
<form action="<?php echo $this->getPostActionUrl() ?>" method="post" id="form-validate" class="form-box register-form">
<li><label for="email_address"><?php echo $this->__('Email Address') ?> <span
class="required">*</span></label>
<div class="input-box">
<input type="text" name="email" id="email_address" value="<?php echo $this->escapeHtml($this->getFormData()->getEmail()) ?>" title="<?php echo $this->__('Email Address') ?>" class="form-control input-text input-block-level required-entry validate-email"
/>
</div>
</li>
<?php if (Computenext_Global_Config::getInstance()->hasAttribute('SIMPLIFIED_SIGN_UP_FLOW')): ?>
<li><label for="password"><?php echo $this->__('Password') ?> <span
class="required">*</span></label>
<div class="input-box">
<input type="password" name="password" id="password" value="<?php echo $this->escapeHtml($this->getFormData()->getPassword()) ?>" title="<?php echo $this->__('Password') ?>" class="form-control input-text input-block-level required-entry validate-admin-custom-password"
/>
</div>
</li>
<li><label for="cpassword"><?php echo $this->__('Confirm Password') ?> <span
class="required">*</span></label>
<div class="input-box">
<input type="password" name="cpassword" id="cpassword" value="<?php echo $this->escapeHtml($this->getFormData()->getCpassword()) ?>" title="<?php echo $this->__('Confirm Password') ?>" class="form-control input-text input-block-level required-entry validate-admin-custom-password validate-cpassword"
/>
</div>
<div class="field">
<label for="company"><?php echo $this->__('Company') ?> <span
class="required">*</span></label>
<div class="input-box">
<input type="text" name="company" id="company" value="<?php echo $this->escapeHtml($this->getFormData()->getCompany()) ?>" title="<?php echo $this->__('Company') ?>" class="form-control input-text required-entry validate-alphanum-with-hypens-spaces input-block-level<?php echo $this->helper('customer/address')->getAttributeValidationClass('company') ?>"
maxlength="75" />
</div>
</div>
<!-- country selection drop down -->
<div class="field">
<label for="country"><?php echo $this->__('Country') ?> <span
class="required">*</span> </label>
<div class="input-box" id="country-dropdown">
<?php //echo $this->getCountryHtmlSelect() ?>
<select id="country_id" name="country_id" class="validate-select without-styles form-control required-entry" onchange="setStateCode(this.value);">
<option value=""><?php echo $this->__('--Please Select--'); ?></option>
</select>
</div>
</div>
<div class="field">
<label for="postcode"><?php echo $this->__('Postcode') ?><span
class="required">*</span></label>
<div class="input-box">
<input type="text" name="postcode" id="postcode" value="<?php echo $this->escapeHtml($this->getFormData()->getPostcode()) ?>" title="<?php echo $this->__('Postcode') ?>" class="form-control input-text input-block-level required-entry validate-zip-code-international validate-zip-code"
maxlength="8" />
</div>
</div>
<!-- state selection dropdown/textbox-->
<div class="field">
<label for="company"><?php echo $this->__('State/Region/Country') ?><span class="required">*</span></label>
<div class="input-box" id="region-div-dropdown">
<select id="region" name="region" class="validate-select without-styles form-control required-entry">
</select>
</div>
</div>
<div class="field">
<label for="city"><?php echo $this->__('Town/City') ?><span
class="required">*</span></label>
<div class="input-box">
<input type="text" name="city" id="city" value="<?php echo $this->escapeHtml($this->getFormData()->getCity()) ?>" title="<?php echo $this->__('Town/City') ?>" class="form-control input-text input-block-level required-entry" />
</div>
</div>
<div class="field">
<label for="address1"><?php echo $this->__('Address 1') ?> <span
class="required">*</span></label>
<div class="input-box">
<input type="text" name="address1" id="address1" value="<?php echo $this->escapeHtml($this->getFormData()->getAddress1()) ?>" title="<?php echo $this->__('address 1') ?>" class="form-control input-text required-entry input-block-level <?php echo $this->helper('customer/address')->getAttributeValidationClass('address1') ?>"
/>
</div>
</div>
<div class="field">
<label for="address2"><?php echo $this->__('Address 2') ?> <span
class="required">*</span></label>
<div class="input-box">
<input type="text" name="address2" id="address2" value="<?php echo $this->escapeHtml($this->getFormData()->getAddress2()) ?>" title="<?php echo $this->__('Address 2') ?>" class="form-control input-text required-entry input-block-level <?php echo $this->helper('customer/address')->getAttributeValidationClass('address2') ?>"
/>
</div>
</div>
<div class="field">
<label for="phoneno"><?php echo $this->__('Phone Number') ?> <span
class="required">*</span></label>
<div class="input-box">
<div class="country-data">
<div class="country-code">
<input type="text" name="phone_code" id="phone_code" value="" class="input-text" readonly="readonly" />
</div>
<div class="phone-numer">
<input type="text" name="phoneno" id="phoneno" value="<?php echo $this->escapeHtml($this->getFormData()->getPhone()) ?>" title="<?php echo $this->__('Phone Number') ?>" class="form-control input-text required-entry validate-phoneLax input-block-level"
maxlength="15" onblur="trimPhone(this.id);" />
</div>
</div>
</div>
</div>
</div>
<div class="buttons-box clearfix">
<button type="submit" class="button btn btn-primary">
<?php echo $this->__('Submit') ?>
</button>
<span class="required"><b>*</b> <?php echo $this->__('Required Fields') ?></span>
</div>
</form>
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
var isIE = /*#cc_on!#*/ false || !!document.documentMode;
if (isIE) {
//jQuery("#modal-alert-tag").modal('show');
jQuery("#captcha-reload").trigger("click");
}
loadCountries();
jQuery('#region-div-text').hide();
jQuery('#region').parent().parent().hide();
});
var dataForm = new VarienForm('form-validate', true);
Validation.add('region-other-text', '<?php echo $this->__('
This is a required field.
'); ?>',
function(v) {
var val = jQuery('#region').val();
if (val == 'other') { //validate only if region will be in "other".
return !Validation.get('IsEmpty').test(v);
} else {
return true;
}
});
<?php if($this->getShowAddressFields()): ?>
new RegionUpdater('country', 'region', 'region_id', <?php echo $this->helper('directory')->getRegionJson() ?>, undefined, 'zip');
<?php endif; ?>
function loadCountries() {
var bcmName = "<?php echo Computenext_Global_Const::getChannelCode() ?>";
var urlString = "/js/" + bcmName.toLowerCase() + "/country_list.json";
var jsonTxt = jQuery.ajax({
url: urlString,
dataType: "json",
async: false
}).responseText;
var jsonData = JSON.parse(jsonTxt);
var htm = '';
for (var c = 0; c < jsonData.length; c++) {
var countryObj = jsonData[c];
if (typeof countryObj !== 'undefined') {
htm += '<option value=' + countryObj.code + '>' + countryObj.country + '</option>';
}
}
jQuery('#country_id').append(htm);
}
function setStateCode(country) {
var bcmName = "<?php echo Computenext_Global_Const::getChannelCode() ?>";
if (country == "") {
jQuery('#region').parent().parent().hide();
jQuery('#phone_code').val('');
} else {
var jsonTxt = jQuery.ajax({
url: "/js/" + bcmName.toLowerCase() + "/country_list.json",
dataType: "json",
async: false
}).responseText;
var jsonData = JSON.parse(jsonTxt);
var htm = '';
for (var c = 0; c < jsonData.length; c++) {
var countryObj = jsonData[c];
//alert(JSON.stringify(countryObj));
if (country == countryObj.code) {
var stateList = countryObj.states;
if (stateList.length == 0) {
jQuery('#region').parent().parent().hide();
} else {
jQuery('#region').parent().parent().show();
htm += '<option value=""><?php echo $this->__('--Please Select--')?></option>';
for (var s = 0; s < stateList.length; s++) {
htm += '<option value=' + stateList[s].key + '>' + stateList[s].value + '</option>';
}
}
jQuery('#phone_code').val('+' + countryObj.phonecode);
}
}
jQuery('#region').html(htm);
}
}
</script>
</div>
Snap For Image


Give this a try
margin-top is set to -20px make it -10px. Try it
CSS
.validation-advice{
margin-top: -10px;
}
hope this helps...

Related

Q: Calculate two inputs with javascript

I have created the following code and on the last 3 inputs, I would like to calculate INPUT1 with INPUT2 and automatically get the result on INPUT3.
At the moment it's not working ofc, but if I change the INPUT3 to suddenly it works, but ofc I cannot get any data to be posted onto the database. How can I output the result of the calculation without having to use a span tag?
Here is the Code.
<script>
function divideBy()
{
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
document.getElementById("result").innerHTML = num2 % num1;
}
</script>
<body>
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h2>Create new Route</h2>
</div>
<p>Enter the route<i><strong>"YYYY-MM-DD</i></p>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="form-group <?php echo (!empty($reason_err)) ? 'has-error' : ''; ?>">
<label>Reason</label>
<input type="text" name="reason" class="form-control" value="<?php echo $reason; ?>">
<span class="help-block"><?php echo $reason_err;?></span>
</div>
<div class="form-group <?php echo (!empty($startdest_err)) ? 'has-error' : ''; ?>">
<label>Start Destination</label>
<input type="text" name="startdest" class="form-control" value="<?php echo $startdest; ?>">
<span class="help-block"><?php echo $startdest_err;?></span>
</div>
<div class="form-group <?php echo (!empty($enddest_err)) ? 'has-error' : ''; ?>">
<label>End Destination</label>
<input type="text" name="enddest" class="form-control" value="<?php echo $enddest; ?>">
<span class="help-block"><?php echo $enddest_err;?></span>
</div>
<div class="form-group <?php echo (!empty($startkm_err)) ? 'has-error' : ''; ?>">
<label>INPUT 1</label>
<input type="text" name="startkm" class="form-control" id="firstNumber" value="<?php echo $startkm; ?>">
<span class="help-block"><?php echo $startkm_err;?></span>
</div>
<div class="form-group <?php echo (!empty($endkm_err)) ? 'has-error' : ''; ?>">
<label>INPUT 2</label>
<input type="text" name="endkm" class="form-control" id="secondNumber" onChange="divideBy()" value="<?php echo $endkm; ?>">
<span class="help-block"><?php echo $endkm_err;?></span>
</div>
<div class="form-group <?php echo (!empty($totalkm_err)) ? 'has-error' : ''; ?>">
<label>INPUT3</label>
<input type="text" name="totalkm" id="result" class="form-control" value="<?php echo $totalkm; ?>">
<span class="help-block"><?php echo $totalkm_err;?></span>
</div>
<input type="submit" class="btn btn-primary" value="Submit">
Cancel
</form>
If i change it from:
<div class="form-group <?php echo (!empty($totalkm_err)) ? 'has-error' : ''; ?>">
<label>Total Km</label>
<input type="text" name="totalkm" id="result" class="form-control" value="<?php echo $totalkm; ?>">
<span class="help-block"><?php echo $totalkm_err;?></span>
</div>
To this it works but ofc as I said no data is posted:
<div class="form-group <?php echo (!empty($totalkm_err)) ? 'has-error' : ''; ?>">
<label>Total Km</label>
<span type="text" name="totalkm" id="result" class="form-control" value="<?php echo $totalkm; ?>">
<span class="help-block"><?php echo $totalkm_err;?></span>
</div>```

#KIKO Software I solved after reading your comment a couple of times :) code that was changed "document.getElementById("result").value" and it solved the issue now upon changing the last input it automatically calculates the result from those two inputs mentioned before, and this was the result I was looking for.
<script>
function divideBy()
{
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
document.getElementById("result").value = num2 % num1;
}
</script>
Thank you for your help :)

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; ?>

How to use the value of a textbox in query?

How can I use properly the value of my textbox (ORDER_ID) in my query? What happening right now is, its need to click a button first in ordermodal.php in order to get the value of it, it didn;t get the value when I click the View Order. The output should be like this, when I click the View Order its getting already the value of it. I hope you can help me with my problem, I stucked at this. Thanks!
This is my code for order.php . This is where I click the View Order.
<tr>
<td><?= $order['order_id'] ?></td>
<td><?= $order['user_id'] ?></td>
<td><?= $date ?></td>
<td><?= $time ?></td>
<td><?= $order['order_deliveryCharge'] ?></td>
<td><?= $order['order_totalAmount'] ?></td>
<td><?= $order['address'] ?></td>
<td><?= $order['coordinates'] ?></td>
<td><?= $order['driver_number'] ?></td>
<td><?= $order['order_status'] ?></td>
<td><button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal" onclick="viewOrder( '<?= $order['order_id'] ?>', '<?= $order['order_id'] ?>', '<?= $order['user_id'] ?>', '<?= $date ?>', '<?= $time ?>', '<?= $order['order_deliveryCharge'] ?>', '<?= $order['order_totalAmount'] ?>', '<?= $order['address'] ?>', '<?= $order['coordinates'] ?>', '<?= $order['driver_number'] ?>', '<?= $order['order_status'] ?>')"> View Order </button>
</td>
</tr>
<?php endwhile; ?>
<?php endif; ?>
</tbody>
</table>
</div>
<div class="panel-footer">
</div>
</div>
</div>
<script>
function viewOrder(order_id, order_id, user_id, order_date, order_time, order_deliveryCharge, order_totalAmount, address, coordinates, driver_number, order_status) {
document.getElementById("titleModal").innerHTML = "Order Information";
document.getElementsByName("ORDER_ID")[0].setAttribute("value", order_id);
document.getElementsByName("ORDER_ID_MODAL_2")[0].setAttribute("value", order_id);
document.getElementsByName("user_id")[0].setAttribute("value", user_id);
document.getElementsByName("order_date")[0].setAttribute("value", order_date);
document.getElementsByName("order_time")[0].setAttribute("value", order_time);
document.getElementsByName("order_deliveryCharge")[0].setAttribute("value", order_deliveryCharge);
document.getElementsByName("order_totalAmount")[0].setAttribute("value", order_totalAmount);
document.getElementsByName("address")[0].setAttribute("value", address);
document.getElementsByName("coordinates")[0].setAttribute("value", coordinates);
document.getElementsByName("drivers_number")[0].setAttribute("value", driver_number);
document.getElementsByName("order_status")[0].setAttribute("value", order_status);
document.getElementsByName("viewOrder")[0].setAttribute("name", "viewOrder");
}
</script>
This is my code for ordermodal.php .
<?php
include_once 'ordermodal2.php';
/** *ordermodal.php **/
$id = "";
$order_date = "";
$order_time = "";
$order_id = "";
$order_deliverCharge = "";
$order_status = "";
$order_totalAmount= "";
$coordinates = "";
$driver_number = "";
$address = "";
$food_name="";
$special_request="";
$quantity="";
$amount="";
$orders="";
?>
<!-- MODALS --> <!-- DETAILS -->
<div id="myModal" class="modal fade" role="dialog" style="z-index: 1400;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form action="" method="post" class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><center>×</button>
<h4 class="modal-title" id="titleModal">Order Information</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="order_id" class="col-sm-2 control-label">Order ID</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="ORDER_ID" id="ORDER_ID" placeholder="" value="" required="required" readonly>
</div>
</div>
<div class="form-group">
<label for="id" class="col-sm-2 control-label">User ID</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="user_id" id="user_id" placeholder="" value="" required="required" readonly>
</div>
</div>
<div class="form-group">
<label for="order_date" class="col-sm-2 control-label">Order Date</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="order_date" id="order_date" placeholder="" value="" required="required" readonly>
</div>
</div>
<div class="form-group">
<label for="order_time" class="col-sm-2 control-label">Order Time</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="order_time" id="order_time" placeholder="" value="" required="required" readonly>
</div>
</div>
<div class="form-group">
<label for="order_deliverCharge" class="col-sm-2 control-label">Delivery Charge</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="order_deliveryCharge" id="order_deliveryCharge" placeholder="" value="" required="required" readonly>
</div>
</div>
<div class="form-group">
<label for="order_totalAmount" class="col-sm-2 control-label">Total Amount</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="order_totalAmount" id="order_totalAmount" placeholder="" value="" required="required" readonly>
</div>
</div>
<div class="form-group">
<label for="address" class="col-sm-2 control-label">Address</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="address" id="address" placeholder="" value="" required="required" readonly>
</div>
</div>
<div class="form-group">
<label for="coordinates" class="col-sm-2 control-label">Coordinates</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="coordinates" id="coordinates" placeholder="" value="" required="required" maxlength="11" readonly>
</div>
</div>
<div class="form-group">
<label for="driver_number" class="col-sm-2 control-label">Driver Number</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="drivers_number" id="drivers_number" placeholder="" value="" required="required" readonly>
</div>
</div>
<div class="form-group">
<label for="order_status" class="col-sm-2 control-label">Order Status</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="order_status" id="order_status" placeholder="" value="" required="required" readonly>
</div>
</div>
<?php
$order_id = trim(addslashes($_POST['ORDER_ID']));
$sql = "SELECT food_name, special_request, quantity, amount
FROM cart_tbl
WHERE order_id=$order_id";
$result = mysqli_query(connection2(), $sql);
?>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Food</th>
<th>Special Request</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
</thead>
<?php
if(mysqli_num_rows($result)>0)
{
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["food_name"];?></td>
<td><?php echo $row["special_request"];?></td>
<td><?php echo $row["quantity"];?></td>
<td><?php echo $row["amount"];?></td>
</tr>
<?php
}
}
?>
</table>
</div>
<div class="modal-footer">
<button type="submit" input style="background-color:#00000;color:white;float:left" name="showfood" id="showFood" class="btn btn-primary " onclick="if(!confirm('Are you sure you want to see food order?')){return false;}" > Show Food </button>
<button type="submit" input style="background-color:#4CAF50;color:white" name="submitDelivered" id="submitDelivered" class="btn btn-primary " onclick="if(!confirm('Are you sure you want to deliver order?')){return false;}" > Delivered </button>
<button type="submit" input style="background-color:#0000FF;color:white" name="submitAccept" id="submitAccept" class="btn btn-primary" onclick="if(!confirm('Are you sure you want to accept order?')){return false;}" > Accept </button>
<button type="button" style="background-color:#FFFF00;color:black" class="btn btn-success" data-toggle="modal" data-target="#myDropdown" onclick="send('<?= $_POST['order_id'] ?>')"> Send </button>
<button type="submit" input style="background-color:#f44336;color:white" name="submitCancel" class="btn btn-danger" onclick="if(!confirm('Are you sure you want to cancel order?')){return false;}">Cancel</button>
<?php
if(isset($_POST['submitDelivered'])){
$order_id = trim(addslashes($_POST['ORDER_ID']));
$query = "UPDATE order_tbl SET `order_status`='Delivered' WHERE `order_id` = $order_id";
if (mysqli_query(connection2(), $query)) {
mysqli_query(connection2(), "COMMIT");
$_SESSION['message'] = "Order Delivered"; }
else {
$_SESSION['message'] = mysqli_error(connection2());
mysqli_query(connection2(), "ROLLBACK");
}
}
if(isset($_POST['submitAccept'])){
$order_id = trim(addslashes($_POST['ORDER_ID']));
$query = "UPDATE order_tbl SET `order_status`='Accepted' WHERE `order_id` = $order_id";
if (mysqli_query(connection2(), $query)) {
mysqli_query(connection2(), "COMMIT");
$_SESSION['message'] = "Order Accepted"; }
else {
$_SESSION['message'] = mysqli_error(connection2());
mysqli_query(connection2(), "ROLLBACK");
}
}
if(isset($_POST['submitCancel'])){
$order_id = trim(addslashes($_POST['ORDER_ID']));
$query = "UPDATE order_tbl SET `order_status`='Cancelled' WHERE `order_id` = $order_id";
if (mysqli_query(connection2(), $query)) {
mysqli_query(connection2(), "COMMIT");
$_SESSION['message'] = "Order Cancelled"; }
else {
$_SESSION['message'] = mysqli_error(connection2());
mysqli_query(connection2(), "ROLLBACK");
}
}
?>
</div>
</form>
</div>
</div>
</div>
<script>
function send(order_id) {
document.getElementById("titleModal2").innerHTML = "Choose Driver";
document.getElementsByName("ORDER_ID_MODAL_2")[0].setAttribute("value", order_id);
document.getElementsByName("send")[0].setAttribute("name", "send");
}
</script>

It would be nice if you use jquery.
//Change your button 'View Order' with this
<button type="button" class="btn btn-success" onclick="viewOrder( '<?= $order['order_id'] ?>', '<?= $order['order_id'] ?>', '<?= $order['user_id'] ?>', '<?= $date ?>', '<?= $time ?>', '<?= $order['order_deliveryCharge'] ?>', '<?= $order['order_totalAmount'] ?>', '<?= $order['address'] ?>', '<?= $order['coordinates'] ?>', '<?= $order['driver_number'] ?>', '<?= $order['order_status'] ?>')"> View Order </button>
//place this script below this function
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
function viewOrder(order_id, order_id, user_id, order_date, order_time, order_deliveryCharge, order_totalAmount, address, coordinates, driver_number, order_status) {
$('#titleModal').text("Order Information")
$("#ORDER_ID").val(order_id);
$("#ORDER_ID_MODAL_2").val(order_id);
$("#user_id").val(user_id);
$("#order_date").val(order_date);
$("#order_time").val(order_time);
$("#order_deliveryCharge").val(order_deliveryCharge);
$("#order_totalAmount").val(order_totalAmount);
$("#address").val(address);
$("#coordinates").val(coordinates);
$("#drivers_number").val(driver_number);
$("#order_status").val(order_status);
$("#viewOrder").attr("name", "viewOrder");
$('#myModal').modal('show');
}

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>

How to create multiple text area at the time of edit option using PHP and JavSscript

I am creating multiple text area using + button and I need to do the same operation when edit option is also there using PHP and JavaScript. Here is my code:
<div style="width:24%; float:left; padding:10px;">No of questions :
<input name="no_of_question" id="ques" class="form-control" placeholder="no of question" value="<?php if($_REQUEST['edit']) { echo $getcustomerobj->no_of_question; } else { echo $_REQUEST['no_of_question']; } ?>" type="text" onkeypress="return isNumberKey(event)">
<div id="err_msg_name" style="font-size:12px; color:#FF0000; text-align: center;"></div>
</div>
<div class="clear"></div>
<div style="padding-bottom:10px;">
Questions : <input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+" onClick="addQuestionField();"><input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" onClick="deleteQuestionField();">
</div>
<div id="container">
<div>
<div style="width:24%; float:left; padding:10px;">
<textarea class="form-control" name="questions0" id="questions" placeholder="Questions" style="background:#FFFFFF;" rows="2"><?php if($_REQUEST['edit']) { echo $getcustomerobj->questions; } else { echo $_REQUEST['questions']; } ?></textarea>
</div>
<div style="float:left;margin-top:37px;">
<?php
$status=array("status"=>'1');
$feeddata=$db->kf_answertype->find($ustatus);
?>
<div style="float:left; margin-right:10px;">
<?php
foreach($feeddata as $v){
?>
<input type="radio" name="answer_type0" id="answer_type0" onClick="selectScale(this.value,'0');" value="<?php echo $v['_id']; ?>"> <?php echo $v['answertype']; ?>
<?php
}
?>
</div>
<div style="float:left; margin-top:-10px;display:none;" id="scaleid0"><select class="form-control" id="nscale0" name="noofscale0">
<option value="">Select Answer Type</option>
<?php
$status=array("status"=>'1');
$feeddata=$db->kf_scale->find($ustatus);
foreach($feeddata as $v){
?>
<option value="<?php echo $v['_id']; ?>" <?php if($getcustomerobj->no_of_scale == $v['_id'] or $_REQUEST['no_of_scale'] == $v['_id']){ print 'selected'; } ?>><?php echo $v['noofscale']; ?></option>
<?php } ?>
</select>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
My JavaScript function is given below:
<script>
function addQuestionField(){
var get =$("#ques").val();
if(get==null || get==''){
alert('Please add no of questions');
}else{
var counter = 0;
if (counter > 0){
return;
}else{
counter++;
<?php
$status=array("status"=>'1');
$feeddata=$db->kf_answertype->find($ustatus);
?>
<?php
$status=array("status"=>'1');
$feeddatascale=$db->kf_scale->find($ustatus);
?>
for(var i=1;i<get;i++){
$('#container').append('<div><div style="width:24%; float:left; padding:10px;"> <textarea class="form-control" name="questions'+ i +'" id="questions" placeholder="Questions" style="background:#FFFFFF;" rows="2"><?php if($_REQUEST['edit']) { echo $getcustomerobj->questions; } else { echo $_REQUEST['questions']; } ?></textarea></div><div style="float:left;margin-top:37px;"><div style="float:left; margin-right:10px;"><?php foreach($feeddata as $v){?> <input type="radio" name="answer_type'+i+'" id="answer_type0" onClick="selectScale(this.value,'+i+');" value="<?php echo $v['_id']; ?>"> <?php echo $v['answertype']; ?> <?php }?></div><div style="float:left; margin-top:-10px;display:none;" id="scaleid'+i+'"><select class="form-control" id="nscale'+i+'" name="noofscale'+i+'"><option value="">Select Answer Type</option><?php foreach($feeddatascale as $v){ ?><option value="<?php echo $v['_id']; ?>" <?php if($getcustomerobj->no_of_scale == $v['_id'] or $_REQUEST['no_of_scale'] == $v['_id']){ print 'selected'; } ?>><?php echo $v['noofscale']; ?></option><?php } ?></select></div><div style="clear:both;"></div></div><div style="clear:both;"></div></div>');
}
}
}
}
function deleteQuestionField(){
var get =$("#ques").val();
var textareas = $('#container textarea');
if (textareas.length !== 0) {
textareas.last().remove();
$('#ques').val(textareas.length - 1);
}
}
</script>
Here I can create the multiple text-area,radio button using + button which depends on no of questions field value. Here I need to do the same thing when the following condition is true.
if($id!='' && $_REQUEST['edit']==1){
}
at the time of page reload if the above condition is true then no need to click on + button, the multiple field should also created.

Categories