We Keep Coding

Dynamic Select box using javascript multifield in Codeigniter

Good day,
I've been trying to get all the dynamic select box but it always returning the first color.
For example i have 1 default set of color, but then i click the Add More it adds another set of color but when i posting it in my controller it always return the first color and disregard the other added set of color. This is the sample image set of color
Can someone help me on this? I've been stucked for 4days now.
Here's my view code:
<div class="form-content">
<div class="row">
<div class="col-md-12">
<p><button type="button" id="btnAdd" class="btn btn-primary">Add Color</button></p>
<br/>
</div>
</div>
<div class="row group">
<div class="col-md-5">
<div class="form-group">
<label></label>
<select name="color1[]" id="color1" class="form-control" >
<option value="" > Color 1</option>
<?php foreach($colors as $color): ?>
<option value="<?php echo $color['colorID']; ?>">
<?php echo $color['colorDesc']; ?>
</option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label></label>
<select name="color2[]" id="color2" class="form-control" >
<option value="" > Color 2</option>
<?php foreach($colors as $color): ?>
<option value="<?php echo $color['colorID']; ?>">
<?php echo $color['colorDesc']; ?>
</option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<button type="button" class="btn btn-danger btnRemove">X</button>
</div>
</div>
</div>
</div>
And here's the script
<script type="text/javascript">
$(".form-content").multifield({
section: ".group",
btnAdd:"#btnAdd",
btnRemove:".btnRemove",
});
</script>
And here's my Controller
$color1 = $this->input->post('color1');
$color2 = $this->input->post('color2');
for($i = 0; $i < count($color1); ++$i) {
echo $make = $color1[$i];
}
I just started using Codeigniter newbie in short. Please help me to fix this. Thanks in advance.

Try this (I not tested):
HTML:
<div class="form-content">
<div class="row">
<div class="col-md-12">
<p>
<button type="button" id="btnAdd" class="btn btn-primary">Add Color</button>
</p>
<br/>
</div>
</div>
<?php $count=0 ; if($this->input->post('color1')) $count = count($this->input->post('color1')); for($i=0;$i<$count,$i++):?>
<div class="row group">
<div class="col-md-5">
<div class="form-group">
<label></label>
<select name="color1[<?php echo $i;?>]" id="color1" class="form-control" <?php set_select( 'color1['.$i. ']',$color[ 'colorID']);?>>
<option value=""> Color 1</option>
<?php foreach($colors as $color): ?>
<option value="<?php echo $color['colorID']; ?>">
<?php echo $color[ 'colorDesc']; ?>
</option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label></label>
<select name="color2[<?php echo $i;?>]" id="color2" class="form-control">
<option value=""> Color 2</option>
<?php foreach($colors as $color): ?>
<option value="<?php echo $color['colorID']; ?>" <?php set_select( 'color2['.$i. ']',$color[ 'colorID']);?>>
<?php echo $color[ 'colorDesc']; ?>
</option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<button type="button" class="btn btn-danger btnRemove">X</button>
</div>
</div>
</div>
<?php endfor;?>
</div>
in controller (you can also add validation):
...
if($this->input->post('color1')) {
$result = array();
$count = count($this->input->post('color1'));
for($i=0;$i<$count;$i++) {
if($this->input->post('color1['.$i.']') && $this->input->post('color2['.$i.']')) {
$result[$i] = ['color1'=>$this->input->post('color1['.$i.']'),'color2'=>$this->input->post('color2['.$i.']')];
}
}
print_r($result);
}
...

Firebase: Data not submitting to database on certain page

I have two pages that need to submit to the database; a user registration page and a tire-input page. The user registration page works. The tire-input page does not. The tire page will show the alert inside the "submitClick()" but doesn't input anything into the database. If there is anymore information that you need, let me know. Thanks in advance.
I've tried working with the rules:
Current (letting the user-registration work, but not the tire-input)
{
"rules": {
"users": {
"$uid": {
".read": "$uid === auth.uid",
".write": "$uid === auth.uid"
}
}
}
}
Not letting anything work:
{
"rules": {
"users": {
"$uid": {
".read": "$uid === auth.uid",
".write": "$uid === auth.uid"
}
},
"Tires": {
".read": true,
".write": true
}
}
}
HTML code (tire):
<?php
require ($_SERVER['DOCUMENT_ROOT'] . '/Emily-Projects/variables.php');
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../inc/styles/css.css">
</head>
<body>
<div class="container">
<div class="content" style="background-color: white;">
<div id="heading">
<h1>Add A Tire<h1>
</div>
<form>
<div id="1" class="form-sections">
<div class="input-div">
<label for="width" class="label">Width</label>
<select name="width" id="width" type="select" class="input">
<option value="">---</option>
<?php foreach ($tireWidths as $width) {?>
<option value="<?php echo $width;?>"><?php echo $width;?></option>
<?php } ?>
</select></div>
<div class="easy-div">
<div>
<?php foreach ($width100s as $width){ ?>
<z data-role="button" data-val="<?php echo $width;?>" class="width-sm"><?php echo $width?></z>
<?php } ?>
</div>
<div>
<?php foreach ($width200s as $width){ ?>
<z data-role="button" data-val="<?php echo $width;?>" class="width-sm"><?php echo $width?></z>
<?php } ?>
</div>
<div>
<?php foreach ($width300s as $width){ ?>
<z data-role="button" data-val="<?php echo $width;?>" class="width-sm"><?php echo $width?></z>
<?php } ?>
</div>
</div>
</div> <!-- closing div#1-->
<div id="2" class="form-sections">
<div class="input-div">
<label for="aspect" class="label">Aspect Ratio</label>
<select class="input" name="aspect" id="aspect">
<option value="">---</option>
<?php foreach ($aspects as $aspect) {?>
<option value="<?php echo $aspect;?>"><?php echo $aspect;?></option>
<?php }?>
</select>
</div>
<div class="easy-div">
<div>
<?php foreach ($aspectsTop as $a){ ?>
<z data-role="button" data-val="<?php echo $a;?>" class="aspectVal"><?php echo $a;?></z>
<?php } ?>
</div>
<div>
<?php foreach ($aspectsBottom as $a){ ?>
<z data-role="button" data-val="<?php echo $a;?>" class="aspectVal"><?php echo $a;?></z>
<?php } ?>
</div>
</div>
</div> <!-- closing div#2-->
<div id="3" class="form-sections">
<div class="input-div">
<label class="label" for="rim">Rim Diameter</label>
<select id="rim" name="rim" class="input">
<option value="">---</option>
<?php foreach ($rimDiameter as $rim){ ?>
<option value="<?php echo $rim;?>"><?php echo $rim;?></option>
<?php } ?>
</select>
</div>
<div class="easy-div">
<div>
<?php foreach ($rimDiaTop as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="rimVal"><?php echo $r;?></z>
<?php }?>
</div>
<div>
<?php foreach ($rimDiaBottom as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="rimVal"><?php echo $r;?></z>
<?php }?>
</div>
</div>
</div> <!-- closing div#3-->
<div id="4" class="form-sections">
<div class="input-div">
<label class="label" for="manufacturer">Manufacturer</label>
<select class="input" name="manufacturer" id="manufacturer">
<option value="">---</option>
<?php foreach ($manufacturers as $m) { ?>
<option value="<?php echo $m;?>"><?php echo $m;?></option>
<?php } ?>
</select>
</div>
<div class="easy-div">
<div id="manu-group-one">
<?php foreach ($manufacturersOne as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="manVal"><?php echo $r;?></z>
<?php }?>
</div>
<div id="manu-group-two">
<?php foreach ($manufacturersTwo as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="manVal"><?php echo $r;?></z>
<?php }?>
</div>
<div id="manu-group-three">
<?php foreach ($manufacturersThree as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="manVal"><?php echo $r;?></z>
<?php }?>
</div>
<div id="manu-group-four">
<?php foreach ($manufacturersFour as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="manVal"><?php echo $r;?></z>
<?php }?>
</div>
<div id="manu-group-five">
<?php foreach ($manufacturersFive as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="manVal"><?php echo $r;?></z>
<?php }?>
</div>
<div id="manu-group-six">
<?php foreach ($manufacturersSix as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="manVal"><?php echo $r;?></z>
<?php }?>
</div>
</div>
</div> <!-- closing div#4-->
<div id="5" class="form-sections">
<div id="5a" class="inner-B"><div class="input-div"><label class="label" for="model">Model</label>
<select id="model" name="model" class="input">
<option value="">---</option>
<option value="test">Test</option>
</select>
</div>
<div class="easy-div">EASY BUTTONS</div>
</div><!--closing A -->
<div id="5B" class="inner-A"><label class="label" for="weight">Shipping Weight</label><input type="text" name="weight" id="weight" class="input"></div><!--closing B -->
</div> <!-- closing div#5-->
<div id="6" class="form-sections">
<div id="6A" class="inner-C">
<div class="input-div">
<label class="label" for="trim">Trim</label>
<select name="trim" id="trim" class="input" >
<option value="">---</option>
<option value="test">Test</option>
</select>
</div>
<div class="easy-div">EASY BUTTONS</div>
</div><!--closing A -->
<div id="6B" class="inner-D">
<label class="label" for="cost">Tire Cost</label>
<input name="cost" id="cost" class="input">
</div><!--closing B -->
<div id="6C" class="inner-E">PICTURES</div><!--closing C -->
</div> <!-- closing div#6-->
<div id="7" class="form-sections">
<div id="7A" class="inner-D">
<div class="label">Run Flat?</div>
<div class="input"><input type="radio" name="runflat" value="yes"> Yes <input type="radio" name="runflat" value="no"> No </div>
</div><!--closing A -->
<div id="7B" class="inner-F">
<div class="label">Tread Depth</div>
<div class="input">
<input type="text" name="tread" id="tread" ><br><br>
<?php for($i=1; $i<11; $i++){ ?>
<z data-role="button" > <?php echo $i;?></z>
<?php } ?>
<?php for($i=11; $i<21; $i++){ ?>
<z data-role="button" > <?php echo $i;?></z>
<?php } ?> <z data-role="button" >.25 </z>
<z data-role="button" >.5</z>
<z data-role="button" >.75</z>
</div>
</div><!--closing B -->
<div id="7C" class="inner-F"><div class="label">DOT Date</div><div class="input">INPUT</div></div><!--closing C -->
<div id="7D" class="inner-F"><label class="label" for="patches">Number of Patches</label>
<div class="input"><?php for($i=0;$i<5;$i++){?>
<z data-role="button" ><?php echo $i;?></z>
<?php
}?></div></div> <!--closing D-->
</div> <!-- closing div#7-->
<div id="8" class="form-sections">
<div id="8A" class="inner-G"><div class="label">Retail Price</div>
<input type="text" id="retailPrice" name="retailPrice" class="input">
</div>
<div id="8B" class="inner-G"><div class="label">C.U.T. Share</div><div class="input">- $4.99 </div></div>
<div id="8C" class="inner-G"><div class="label">C.C. Fee</div><div class="input"><?php echo $ccfee;?></div></div>
<div id="8D" class="inner-G">Not Applicable</div>
<div id="8E" class="inner-G"><div class="label">Shipping Est.</div><div class="input"><?php echo $shipEst;?></div></div>
<div id="8F" class="inner-G"><div class="label">My Pay Out</div><div class="input"><?php echo $payOutRetail;?></div></div>
<div id="8G" class="inner-G"><div class="label">Tire NOT listed on Cheapest Used Tires</div><div class="input">INPUT</div></div>
</div> <!-- closing div#8-->
<div id="9" class="form-sections">
<div id="9A" class="inner-G"><div class="label">Wholesale Price</div>
<input type="text" id="retailPrice" name="retailPrice" class="input"></div>
<div id="9B" class="inner-G"><div class="label">C.U.T. Share</div><div class="input">- $4.99</div></div>
<div id="9C" class="inner-G"><div class="label">C.C. Fee</div><div class="input"><?php echo $ccfee;?></div></div>
<div id="9D" class="inner-G"><div class="label">Buyer&apos;s Bucks</div><div class="input">- $3.00</div></div>
<div id="9E" class="inner-G"><div class="label">Shipping Est.</div><div class="input"><?php echo $shipEst;?></div></div>
<div id="9F" class="inner-G"><div class="label">My Pay Out</div><div class="input"><?php echo $payOutWS;?></div></div>
<div id="9G" class="inner-G"><div class="label">Wholesale ONLY</div><div class="input">INPUT</div></div>
</div><!--closing div#9-->
<input type="submit" id="submit" onclick="submitClick()"value="Add This Tire">
</form>
</div>
</div> <!-- closing container -->
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
<script src="/Emily-Projects/new-add-a-tire.js"></script>
</body>
</html>
Tire JS:
//File: new-add-a-tire.js
// Initialize Firebase
var config = {
apiKey: "AIzaSyCLpexd_9jOLjwcraume8RDXqag8mUSyMY",
authDomain: "funoto-a67ec.firebaseapp.com",
databaseURL: "https://funoto-a67ec.firebaseio.com",
projectId: "funoto-a67ec",
storageBucket: "funoto-a67ec.appspot.com",
messagingSenderId: "270438905275"
};
firebase.initializeApp(config);
//Add a Tire to Firbase
var width = document.getElementById("width");
var aspect = document.getElementById("aspect");
var rim = document.getElementById("rim");
var manufacturer = document.getElementById("manufacturer");
var submitBtn = document.getElementById("submit");
//Function: submitClick();
function submitClick(){
window.alert("Works");
var firebaseRef = firebase.database().ref();
firebaseRef.child("Tires").set("some value");
}

I am following the official doc try this
function submitClick(){
window.alert("Works");
var firebaseRef = firebase.database();
firebaseRef.ref("Tires").set({tire: "round"});
}

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

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

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...

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>