How can I change radio buttons to Bootstrap buttons - javascript

I am trying to change radio buttons in PHP to buttons from Bootstrap.
(I would also like to get rid of the submit button at the bottom of the page and have these submit the answer.)
This code works but it uses radio buttons:
<div id='javatbd<?php echo $myfname; ?>' class='col-xs-12 form-group answer-item radio-item radio' <?php echo $sDisplayStyle; ?> >
<input
class="radio"
type="radio"
value="<?php echo $code; ?>"
name="<?php echo $name; ?>"
id="answer<?php echo $name.$code; ?>"
<?php echo $checkedState;?>
onclick="if (document.getElementById('answer<?php echo $name; ?>othertext') != null) document.getElementById('answer<?php echo $name; ?>othertext').value='';checkconditions(this.value, this.name, this.type)"
aria-labelledby="label-answer<?php echo $name.$code; ?>"
/>
<label for="answer<?php echo $name.$code; ?>" class="control-label radio-label"></label>
<div class="label-text label-clickable" id="label-answer<?php echo $name.$code; ?>">
<?php echo $answer; ?>
</div>
</div>
.
.
.
<div class="col-xs-6 save-all text-right">
<button type="submit" id="movesubmitbtn" value="movesubmit" name="movesubmit" accesskey="l" class="submit button btn btn-lg btn-primary">Submit</button>
</div>
I've tried this but it does not send the value.
<div id='javatbd<?php echo $myfname; ?>' class='col-xs-12 form-group answer-item radio-item btn' <?php echo $sDisplayStyle; ?> >
<div class="container-fluid">
<input
class="btn btn-primary btn-block"
type="button"
value="<?php echo $code; ?>"
name="<?php echo $name; ?>"
id="answer<?php echo $name.$code; ?>"
<?php echo $checkedState;?>
onclick="if (document.getElementById('answer<?php echo $name; ?>othertext') != null) document.getElementById('answer<?php echo $name; ?>othertext').value='';checkconditions(this.value, this.name, this.type)"
aria-labelledby="label-answer<?php echo $name.$code; ?>"
/>
</div>
</div>

You can use the Bootstrap buttons radio component to make a radio button look like normal button.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
You can see the live example, and other options here - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-stateful-buttons.php

This worked. Thanks! Now I'll try to remove the O in the middle of the button and remove the Submit button, so clicking on Boss will submit the value.
<div class="btn btn-primary btn-block">
<input
class="radio"
type="radio"
value="<?php echo $code; ?>"
name="<?php echo $name; ?>"
id="answer<?php echo $name.$code; ?>"
<?php echo $checkedState;?>
onclick="if (document.getElementById('answer<?php echo $name; ?>othertext') != null) document.getElementById('answer<?php echo $name; ?>othertext').value='';checkconditions(this.value, this.name, this.type)"
aria-labelledby="label-answer<?php echo $name.$code; ?>"
/>
<label for="answer<?php echo $name.$code; ?>" class="control-label radio-label"></label>
Image of radio / buttons

This worked! Thanks very much! Now I will try to remove the Submit button and make the clicked values submit the value. I'm trying to reduce space on the page.
Bootstrap Radio / buttons. It worked
<div class="btn-block" data-toggle="buttons">
<label class="btn btn-primary btn-block">
<input
class="radio"
type="radio"
value="<?php echo $code; ?>"
name="<?php echo $name; ?>"
id="answer<?php echo $name.$code; ?>"
<?php echo $checkedState;?>
onclick="if (document.getElementById('answer<?php echo $name; ?>othertext') != null) document.getElementById('answer<?php echo $name; ?>othertext').value='';checkconditions(this.value, this.name, this.type)"
aria-labelledby="label-answer<?php echo $name.$code; ?>"
/>
<label for="answer<?php echo $name.$code; ?>" class="control-label radio-label"></label>
<div class="label-text label-clickable" id="label-answer<?php echo $name.$code; ?>">
<?php echo $answer; ?>
</div>
</div>

Related

How to validate multi step form jquery Php

I am working with multi step form with php, I have array $rec where i am getting all
questions ( from database/dynamic).
I want to validate those fields whose key is mandatory and value is 1 (coming from array($rec)).
I want "next" page/question shouldn't display until I fill first question.
Here is my html code
<form action="<?php echo site_url('Nps/FormAdd'); ?>" method="post">
<?php //echo "<pre>"; print_R($keyslug);?>
<input type="hidden" name="mobile_no" value="<?php echo $keyslug['mobileNo']; ?>">
<input type="hidden" name="contact_mapping_id" value="<?php echo $keyslug['id']; ?>">
<?php $i="1";
$lastElement = end($rec);
$i="1";
foreach($rec as $key => $records)
{
<div class="card" id="<?php echo $records['ques_id']; ?>" >
<?php if($records['type']=="range" )
{
?>
<div class="form-group" style="margin-top: 10px;">
<div class="chart-scale develop-rating">
<?php $j=$records['start_range'];
$max= $records['end_range'];
for($i=$j;$i<=$max; $i++) {
?>
<button id="rating" attr-hide-div="<?php if($i <= $records['min_value']) { echo $records['max_show_ques_id']; } else { echo $records['show_ques_id']; }?>"
attr-show-div="<?php if($i <= $records['min_value']) { echo $records['show_ques_id']; } else { echo $records['max_show_ques_id']; }?>"attr-value="<?php echo $i; ?>" class="btn rating-button-click btn-scale btn-scale-asc-<?php echo $i; ?>">
<?php echo $i; ?>
</button>
<?php } ?>
<input type="hidden" id='ques_<?php echo $records['ques_id']; ?>' class="input-develop all-mandatory-check" attr-required="<?php echo $records['mandatory']; ?>" <?php if($records['IsRatingQuestion']=="1") { ?> name='rangeR_<?php echo $records['ques_id']; ?>' <?php } else { ?> name='ques_<?php echo $records['ques_id']; ?>' <?php } ?> value="">
</div>
</div>
<?php
}
elseif($records['type']=="check_box")
{
?>
<div class="form-group checkboxes">
<label class="form-control-label"><?php echo $records['question']; ?></label>
<div>
<?php
$opt = explode("::", $records['options']);
$result = count($opt);
$i="1";
foreach($opt as $s)
{
?>
<label class="form-container"><?php echo $s; ?>
<input class="all-mandatory-check" type="checkbox" attr-required="<?php echo $records['mandatory']; ?>" id="name" value='<?php echo $s; ?>' name='check_<?php echo $records['ques_id']; ?>[]'>
<span class="checkmark"></span>
</label>
<?php } ?>
</div>
</div>
<?php
}
$key;
if($key!="0"){
?>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<?php } ?>
<?php
$record_last_end = $rec;
$lastElement = array_key_last($record_last_end);
if($key == $lastElement)
{
?>
<input type="submit" name="submit" value="submit" class="next action-button" >
<?php } else { ?>
<input type="button" name="next" id="next1" class="next action-button" value="Next" />
<?php } ?>
</div>
</div>
<?php
//$i++;
} ?>
</form>

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>

"if" condition variable in PHP

I am building a quiz app, working fine now decided to add "boosters" (help tools for the player), I've already posted a question here about adding extra time to the timer, I am still digging to find a solution, but no luck til now.. Anyway, this is not my question now.
I started to work on the second booster: Successfully skip a question (without losing points)
So the original code (before adding the boost part) was like this:
<div id='question<?php echo $i;?>' class='cont'>
<p class='questions' id="qname<?php echo $i;?>">
<?php echo $i?>.<?php echo $result['question_name'];?></p>
<input type="radio" value="1" id='radio1_<?php echo $result['id'];?>'
name='<?php echo $result['id'];?>'/>
<?php echo $result['answer1'];?><br/>
<input type="radio" value="2" id='radio1_<?php echo $result['id'];?>'
name='<?php echo $result['id'];?>'/>
<?php echo $result['answer2'];?><br/>
<input type="radio" value="3" id='radio1_<?php echo $result['id'];?>'
name='<?php echo $result['id'];?>'/>
<?php echo $result['answer3'];?><br/>
<input type="radio" value="4" id='radio1_<?php echo $result['id'];?>'
name='<?php echo $result['id'];?>'/>
<?php echo $result['answer4'];?><br/>
<input type="radio" checked='checked' style='display:none' value="5"
id='radio1_<?php echo $result['id'];?>'
name='<?php echo $result['id'];?>'/><br/>
<button id='<?php echo $i;?>' class='next btn btn-success' type='button' >Next</button>
And this is how the points are count:
if(isset($_POST[1])){
$keys=array_keys($_POST);
$order=join(",",$keys);
//$query="select * from questions id IN($order) ORDER BY FIELD(id,$order)";
// echo $query;exit;
$response=mysql_query("select id,answer from questions where id IN($order) ORDER BY FIELD(id,$order)") or die(mysql_error());
$right_answer=0;
$wrong_answer=0;
$unanswered=0;
while($result=mysql_fetch_array($response)){
if($result['answer']==$_POST[$result['id']]){
$right_answer++;
}else if($_POST[$result['id']]==5){
$unanswered++;
}
else{
$wrong_answer++;
}
}
So my idea was about adding a button called "Success skipe"
<button id='<?php echo $success;?>' class='skip btn btn-success' type='button'>Success Skip</button>
And while counting the right answers I tried to make a condition that once this button is clicked the answer is considered correct so I added this:
while($result=mysql_fetch_array($response)){
if($success){ //Just added
$right_answer++; //this "if" condition
}
But it didn't work, what's wrong?

Why does onclick=window.location initiate form validation of non-related field in Magento custom login form?

I am modifying my login/registration form via login.phtml and have a problem with the "Create Account" button when I use an image button instead of the standard css button.
I modified this original code
<button type="button" title="<?php echo $this->__('Create an Account') ?>" class="button" onclick="window.location='<?php echo Mage::helper('persistent')->getCreateAccountUrl($this->getCreateAccountUrl()) ?>';"><span><span><?php echo $this->__('Create an Account') ?></span></span></button>
to
<input type="image" src="http://localhost/magento/skin/frontend/default/mytemplate/images/button-createaccount.png" title="<?php echo $this->__('Create an Account') ?>" onclick="window.location='<?php echo Mage::helper('persistent')->getCreateAccountUrl($this->getCreateAccountUrl()) ?>';">
and moved the button into the "content" div of the right floating "create account" div. The button is display correctly but everytime when I click create account, my browser highlights the obligatory fields of the login form in the left floating "Login" div before continuing to the create account page.
When I click the original css create account button, on the lower part of the page (within another div, which is neither part of the login nor create account div) the browser continues correctly without highlighting the form fields first. Has this somehow to do with the position of the button within the div or with the window.location method???
Here's the complete code:
<div class="account-login"> <?php echo $this->getMessagesBlock()->getGroupedHtml() ?>
<form action="<?php echo $this->getPostActionUrl() ?>" method="post" id="login-form">
<div class="col2-set">
<div class="col-2 new-users">
<div class="content"> <?php echo $this->__('New Customers') ?>
<p><?php echo $this->__('By creating an account with our store, you will be able to move through the checkout process faster, store multiple shipping addresses, view and track your orders in your account and more.') ?></p>
<!-- Insert image button for Create Account in new div class "button" -->
<div class="button">
<input type="image" src="http://localhost/magento/skin/frontend/default/mytemplate/images/button-createaccount.png" title="<?php echo $this->__('Create an Account') ?>" onclick="window.location='<?php echo Mage::helper('persistent')->getCreateAccountUrl($this->getCreateAccountUrl()) ?>';">
</div>
<!-- End Insert image button for Create Account in new div class "button" -->
</div>
</div>
<div class="col-1 registered-users">
<div class="content">
<h2><?php echo $this->__('Registered Customers') ?></h2>
<p><?php echo $this->__('If you have an account with us, please log in.') ?></p>
<ul class="form-list">
<li>
<label for="email" class="required"><em>*</em><?php echo $this->__('Email Address') ?></label>
<div class="input-box">
<input type="text" name="login[username]" value="<?php echo $this->htmlEscape($this->getUsername()) ?>" id="email" class="input-text required-entry validate-email" title="<?php echo $this->__('Email Address') ?>" />
</div>
</li>
<li>
<label for="pass" class="required"><em>*</em><?php echo $this->__('Password') ?></label>
<div class="input-box">
<input type="password" name="login[password]" class="input-text required-entry validate-password" id="pass" title="<?php echo $this->__('Password') ?>" />
</div>
</li>
<?php echo $this->getChildHtml('persistent.remember.me'); ?>
</ul>
<?php echo $this->getChildHtml('persistent.remember.me.tooltip'); ?>
<!-- Insert image button for Login in div class "button" -->
<div class="button">
<input type="image" src="http://localhost/magento/skin/frontend/default/mytemplate/images/button-login.png" title="<?php echo $this->__('Login') ?>" name="send" id="send2">
</div>
<!-- End Insert image button for Login in div class "button" -->
<div class="buttons-set"> <?php echo $this->__('Forgot Your Password?') ?> </div>
</div>
</div>
<div class="col2-set">
<div class="col-2 new-users">
<div class="buttons-set">
<button type="button" title="<?php echo $this->__('Create an Account') ?>" class="button" onclick="window.location='<?php echo Mage::helper('persistent')->getCreateAccountUrl($this->getCreateAccountUrl()) ?>';"><span><span><?php echo $this->__('Create an Account') ?></span></span></button>
</div>
</div>
<div class="col-1 registered-users">
<div class="buttons-set"> <?php echo $this->__('Forgot Your Password?') ?>
<button type="submit" class="button" title="<?php echo $this->__('Login') ?>" name="send" id="send2"><span><span><?php echo $this->__('Login') ?></span></span></button>
</div>
</div>
</div>
<?php if (Mage::helper('checkout')->isContextCheckout()): ?>
<input name="context" type="hidden" value="checkout" />
<?php endif; ?>
</form>
<script type="text/javascript">
var dataForm = new VarienForm('login-form', true);
</script>
</div>
You are having his issue because the form is initiated in javascript as a Varien_Form:
<script type="text/javascript">
var dataForm = new VarienForm('login-form', true);
</script>
This has a number of default behaviours which are obviously behaing strangely when it encounters buttons and elements it is not expecting. These are defined somewhere in Magento's js libraries.
Hope this helps point you in the right direction.

Categories