Clicking the text in div does not set bootstrap's state to pressed.
To reproduce, run the code snippet below and click in Set button to pressed state. The button is still in unpressed state but the alert shows that the checked property is set.
How to fix it, so the buttons appear in the checked state if clicked in the text inside the div ?
The Bootstrap documentation contains:
If the checked state of a checkbox button is updated without firing a click event on the button (e.g. via or via setting the checked property of the input), you will need to toggle the .active class on the input's label yourself.
Shoud this be implemented and if yes, how ?
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(function () {
$('.designer-field').on("click", function () {
$('#designer-javascript-bold').prop('checked', true);
// alert($('#designer-javascript-bold').prop('checked'));
});
});
</script>
</head>
<body>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-info">
<input type="checkbox" autocomplete="off" id="designer-javascript-bold"><span class="glyphicon glyphicon-bold"></span>
</label>
<label class="btn btn-info">
<input type="checkbox" autocomplete="off"><span class="glyphicon glyphicon-bold"></span>
</label>
</div>
<div class="designer-field">Set button to pressed state</div>
</body>
You also need to trigger the class change on the parent label. The plugin you are using does not do that automatically on manual trigger it seems.
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(function () {
$('.designer-field').on("click", function () {
$('#designer-javascript-bold').prop('checked', true);
$('#designer-javascript-bold').parent().toggleClass('active');
});
});
</script>
</head>
<body>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-info">
<input type="checkbox" autocomplete="off" id="designer-javascript-bold"><span class="glyphicon glyphicon-bold"></span>
</label>
<label class="btn btn-info">
<input type="checkbox" autocomplete="off"><span class="glyphicon glyphicon-bold"></span>
</label>
</div>
<div class="designer-field">Set button to pressed state</div>
</body>
Related
I am doing an MVC Application with Rating Bootstrap.
<input id="input-21b" type="number" class="rating" data-show-clear="false" data-show-caption="false" min=0 max=5 step=1 data-glyphicon="false" data-size="sm">
I have also define this...in order to know how many start has been clicked.
$(document).ready(function () {
$("#input-21b").on("rating.change", function (event, value, caption) {
$('#hdfRatingValue').val(value);
});
I have a hidden input to keep the starts selected.
It Works fine...
When User clicks "OK" buttom, a Ajax function is called to save the rating.
What I need is to UnSelect the starts selected via Jquery....
I have try
$('#input-21b').rating({
'update': 0,
'showCaption': false,
'showClear': false
});
Ais it says is Bootstrap-star-rating set default stars
But Nothing happend. I also Include
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- required libraries -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.1/css/star-rating.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.1/js/star-rating.min.js"></script>
Still nothing happend.
Is that Posible?
Thanks
I tried But Nothing happend:
$('#input-21b').rating({
'update': 0,
'showCaption': false,
'showClear': false
});
update is a method and you cannot use it at initialization. Moreover, you don't need initialization because you specified all attributes in the HTML.
If you want to use that method you must write:
$('#input-21b').rating('update', 0).trigger('rating.change');
But you can also directly reset the rating to its initial value:
$('#input-21b').rating('reset').trigger('rating.change');
Why do you need to trigger the event rating.change? Because in this way you can execute your related event handler (i.e.: copy the value to your hidden field).
$(document).ready(function () {
$("#input-21b").on("rating.change", function (event, value, caption) {
$('#hdfRatingValue').val(value);
});
$('button').on('click', function(e) {
//$('#input-21b').rating('update', 0).trigger('rating.change');
$('#input-21b').rating('reset').trigger('rating.change');
})
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- required libraries -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.1/css/star-rating.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.1/js/star-rating.min.js"></script>
<div class="container">
<form>
<div class="form-group">
<label for="input-21b">Rating:</label>
<input id="input-21b" type="number" class="rating" data-show-clear="false" data-show-caption="false"
min=0 max=5 step=1 data-glyphicon="false" data-size="sm">
</div>
<div class="form-group">
<label for="input-21b">Rating Value:</label>
<input id="hdfRatingValue" type="text">
</div>
<button type="button" class="btn btn-primary">Reset rating</button>
</form>
</div>
In the form, I have put a textbox and a button as:
<input type="text" class="form-control" id="txtCustomerId" placeholder="Customer ID">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button" data-toggle="modal" data-target="#LovCustomer"><i class="fa fa-list"></i></button>
</span>
when this button is pressed, a modal form (bootstrap) is popped up. I have placed a button on the modal form as:
<td><button id="LSSL" value="LSSL" class="btn btn-info btn-xs"><i class="fa fa-caret-right"></i></button></td>
I have below jQuery in <head>:
$(function(){
$('#LSSL').click(function(){
$('#txtCustomerId').val($(this).val());
});
});
My requirement is to obtain the value of the button being pressed (in the modal form) and assign it to the txtCustomerId of the parent form. But when I press the button, page gets refreshed and the text filed is blank (since it is refreshed).
I think the value is assigned but since the page is refreshed, assigned value vanishes.
I would like to know either to stop the page refresh or any other way of getting this achieved.
Thanks in advance.
Below is my <head> section for your reference:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function(){
$('button').click(function(e){
e.preventDefault();
var value = $(this).val();
$('#txtCustomerId').val(value);
});
});
</script>
</head>
Your button should be like this,
<td><button type="button" id="LSSL" value="LSSL" class="btn btn-info btn-xs"><i class="fa fa-caret-right"></i></button></td>
And in Js part, you can do preventDefault(),
$(function(){
$('#LSSL').click(function(e){
e.preventDefault();
var value = $(this).attr('value');
$('#txtCustomerId').val(value);
});
});
//You can also use $(document).ready(function(){}) as well.
$(document).ready(function(){
$('#LSSL').click(function(e){
e.preventDefault();
var value = $(this).attr('value');
$('#txtCustomerId').val(value);
});
});
Use
preventDefault() to stop the default behavior of button
$(function(){
$('#LSSL').click(function(e){
e.preventDefault();
alert($(this).val());
});
});
or use
<input id="LSSL" type="button" value="Click" onclick="doSomething(this)">
function doSomething(obj) {
alert(obj.value);
}
I am using summernote js in laravel 5.2.
In a form,when user clicks on edit button, summernote editor should open for the fields.Actually it was working for a single field but when i applied it for more than one field,its not working.
my view:
<form action="{{route('account')}}" id="acc" class="ac" method="post">
<div class="col-lg-3"><label>Estado</label>
#foreach($accounts as $account)
#if($user== $account->user)
{!! $account->estado !!}
<textarea style="display:none;" name="textfield4" id="textfield4"></textarea>
<div class="col-lg-2 estado " id="estado"></div>
#endif
#endforeach
</div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<section class="col-lg-3 "><label for="textfield5">I'm Good At:</label>
#foreach($accounts as $account)
#if($user== $account->user)
{!! $account->goodat !!}
<textarea style="display:none;" name="textfield5" id="textfield5"></textarea>
<div class="col-lg-2 col-md-2 es" id="goodat"></div>
#endif
#endforeach
<br /><div><button type="button" class="btn btn-info edit">Edit</button>
<button type="submit" class="btn btn-success" id="btn-send-message" >Save</button>
<input type="hidden" value="{{Session::token()}}" name="_token">
</div>
</form>
my script:
<script>
$(document).ready(function() {
var $estado = $('#estado');
var $goodat = $('#goodat');
var edit = function() {
$estado.summernote({focus: true});
$goodat.summernote({focus: true});
};
$('.edit').on('click', edit);
$("#acc").on('submit', function(e) {
e.preventDefault();
var self = this;
// lets check some stuff
console.log($estado);
console.log($estado.summernote('code'));
console.log($('#textfield4'));
console.log($('#textfield4').val());
console.log($('#textfield4').text());
var estado = $estado.summernote('code');
$("#textfield4").val(estado); //populate text area
var goodat = $goodat.summernote('code');
$("#textfield5").val(goodat); //populate text area
self.submit();
return false;
});
});
</script>
EDIT 1:
I've found out that, after clicking on save button ( which results in null values in db)(everytime a user logins) , edit button starts working perfectly.
EDIT 2:
after placing all links and scripts in head tag ,error: $ is not defined .
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="_token" content="{{ csrf_token() }}">
<title>#yield('title')</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{URL::to('src/css/crush.css')}}">
<link rel="stylesheet" type="text/css" href="{{URL::to('src/css/groups.css')}}">
<link rel="stylesheet" type="text/css" href="{{URL::to('src/css/Untitled-2.css')}}">
<link rel="stylesheet" type="text/css" href="{{URL::to('src/css/font-awesome.css')}}">
<link rel="stylesheet" type="text/css" href="{{URL::to('src/css/style.css')}}">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js" ></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
<script src="/src/js/myplace.js"></script>
<script src="{{URL::asset('src/js/script.js')}}"></script>
</head>
You wanted multiple textareas with summernote?
Take: (;
$(function() {
var $estado = $('#estado');
var $goodat = $('#goodat');
var isEditorsActive = false;
function activateEditors() {
$estado.summernote({
focus: true
});
$goodat.summernote({
focus: true
});
isEditorsActive = true;
}
function deactivateEditors() {
$estado.summernote('destroy');
$goodat.summernote('destroy');
isEditorsActive = false;
}
$('button.edit').click(function(e){
e.preventDefault();
(isEditorsActive)? deactivateEditors() : activateEditors();
});
$("form#ac").submit(function(e) {
e.preventDefault();
var $this = $(this);
if(isEditorsActive) {
var estado = $estado.summernote('code');
var goodat = $goodat.summernote('code');
$('#data-estado').html(estado);
$('#data-goodat').html(goodat);
}
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
<form action="{{route('account')}}" id="ac" class="ac" method="post">
<div class="row">
<div class="col-lg-3">
<label>Estado</label>
#foreach($accounts as $account)
#if($user== $account->user)
<div class="estado" id="estado" style="width:100%">
{!! $account->estado !!}
</div>
#endif
#endforeach
</div>
<div class="col-lg-3"></div>
<div class="col-lg-3">
<label>I'm Good At:</label>
#foreach($accounts as $account)
#if($user==$account->user)
<div class="goodat" id="goodat" style="width:100%">
{!! $account->goodat !!}
</div>
#endif
#endforeach
</div>
</div>
<button type="submit" class="btn btn-success save">Save</button>
<button class="btn btn-default edit">Edit</button>
</form>
ESTADO:
<div id="data-estado">
</div>
GOOD AT:
<div id="data-goodat">
</div>
but after this You still cannot get the data that inside these textareas - so really something is wrong with Your blade template
http://num8er.me/summernote.html
I think you could have some asynchronous issues here, since it works sometimes, and sometimes not. You are setting the value of the textareas based on the values of the summernote fields. You can't be sure though, that $estado.summernote('code') is already finished before using the value of the summernote field to set the value of textfield4 (same holds for $goodat.summernote('code') and textfield5.
When you use callbacks for the summernote events, you can prevent this behaviour and have more control.
$('#estado').summernote({
callbacks: {
onChange: function(contents, $editable) {
console.log('onChange:', contents, $editable);
$("#textfield4").val(contents); //populate text area
}
}
});
Read more here
Another thing that could be causing trouble, is the foreach loop containing elements with hardcoded id's. Since id's have to be unique this can give some unexpected results. Of course, when $user matches $account->user only once, everything is fine, but I usually don't take the risk.
UPDATE: added a jsfiddle here of a possible implementation.
I have a page with a form that is being used to ask a question. When the submit button is clicked, it does the follow, determines if the user checked the right box, displays the answer and explanation, and disables the checkboxes and submit button to prevent re-answering the question.
My issue is that when the user clicks the submit button the answers, and the disabling appear for only a split second before the page reloads. How do I stop this, I want the user to see if they are correct and not be able to change their answers. When I run it in Dreamweaver where I am building the pages, it runs fine in live view.
Code is below:
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"
rel="stylesheet" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="../styles/casestyles.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
<!-- show all on submit and show checked answer -->
<script type="text/javascript" src="../js/submit_answers.js"> </script>
<!-- Add jQuery library -->
<script type="text/javascript" src="fancybox/lib/jquery-1.10.1.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="../js/fancybox.js"></script>
<script type="text/javascript">
/***********************************************
* Limit number of checked checkboxes script- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
function checkboxlimit(checkgroup, limit){
var checkgroup=checkgroup
var limit=limit
for (var i=0; i<checkgroup.length; i++){
checkgroup[i].onclick=function(){
var checkedcount=0
for (var i=0; i<checkgroup.length; i++)
checkedcount+=(checkgroup[i].checked)? 1 : 0
if (checkedcount>limit){
alert("You can only select a maximum of "+limit+" diagnosis")
this.checked=false
}
}
}
}
</script>
<!-- disable checkboxes -->
<script type="text/javascript">
function disablefields(){
{
document.getElementById('check1').disabled='disabled';
document.getElementById('check2').disabled='disabled';
document.getElementById('check3').disabled='disabled';
document.getElementById('check4').disabled='disabled';
document.getElementById('ex3').disabled='disabled';
document.getElementById('ex3').value='Answers Submitted'; }
}
</script>
</head>
<script type="text/javascript">
function myfunction(){
//call disable checkbox
disabled(document);
//call disable submit
checkForm(form) ;
}
</script>
.explanation {
display: none;
}
.correct {
display:none;
}
.incorrect {
display:none;
}.explanation {
display: none;
}
.correct {
display:none;
}
.incorrect {
display:none;
}
<div class="row-offcanvas row-offcanvas-left">
<div id="sidebar" class="sidebar-offcanvas">
<div class="col-md-12">
<ul class="nav nav-pills nav-stacked">
<li>History of Present Illness </li>
<li>Review of Systems </li>
<li>Past Medical History </li>
<li>Physical Examination </li>
<li>Essential Differential Diagnosis</li>
<li>Relevant Testing</li>
<li>Diagnosis</li>
<li>Treatment</li>
<li>Questions</li>
<li>About the Case</li>
</ul>
</div>
</div>
<form name="limit" onreset="disablefields();" onSubmit="disablefields();" >
<div id="main" class="container-fluid">
<div class="col-md-12">
<p class="visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas"> <i class="glyphicon glyphicon-chevron-left"></i> </button>
</p>
<!-- Footer Code -->
<div id="footer" style="overflow-y:hidden; overflow-x:hidden;">
<div class="container" style="overflow-y:hidden; overflow-x:hidden;">
<p class="muted credit"><img src="img/prev.png" width="24" height="21" / > <a href="relevant_testing.html" > Relevant Testing </a> | <a href="treatment.html" > Treatment </a><img src="img/next.png" width="24" height="21" />
</div>
</div>
<!-- Change the Heading -->
<h3>Diagnosis</h3>
<h5>At this time, the most likely diagnosis is</h5>
<p>Please choose only one.</p>
<!-- First Column-->
<div class="col-md-3">
<div class="bootstrap-demo">
<!-- content goes here -->
<p style="margin-bottom:0px">
<input id="check1" name="field" type="checkbox" value="incorrect" />
Acute bronchitis</p>
<div class="correct" style="margin-left:20px;"><font color="#008000">Correct</font></div>
<div class="incorrect" style="margin-left:20px;"><font color="#FF0000">Incorrect</font></div>
<div class="explanation" style="margin-left:20px;">Although the patient has a productive cough, he also has an infiltrate on chest x-ray.</div>
<p style="margin-bottom:0px">
<input id="check2" name="field" type="checkbox" value="correct" />
Community-acquired pneumonia</p>
<div class="correct" style="margin-left:20px;"><font color="#008000">Correct</font></div>
<div class="incorrect" style="margin-left:20px;"><font color="#FF0000">Incorrect</font></div>
<div class="explanation" style="margin-left:20px;">The chest x-ray shows a definite infiltrate.</div>
<p style="margin-bottom:0px">
<input id="check3" name="field" type="checkbox" value="incorrect" />
Health-care associated pneumonia</p>
<div class="correct" style="margin-left:20px;"><font color="#008000">Correct</font></div>
<div class="incorrect" style="margin-left:20px;"><font color="#FF0000">Incorrect</font></div>
<div class="explanation" style="margin-left:20px;">The patient was not a resident in a nursing home or other long-term care facility.</div>
<p style="margin-bottom:0px">
<input id="check4" name="field" type="checkbox" value="incorrect" />
Lung cancer</p>
<div class="correct" style="margin-left:20px;"><font color="#008000">Correct</font></div>
<div class="incorrect" style="margin-left:20px;"><font color="#FF0000">Incorrect</font></div>
<div class="explanation" style="margin-left:20px;">Although an obstructing cancer may cause an infiltrate, it is not the most likely cause of this patient’s acute symptoms.</div>
<p> <br />
<input type="submit" value="Submit" id="ex3" onclick="show_all();" >
</p>
</div>
</div>
<!-- Second Column -->
<div class="col-md-3">
<div class="bootstrap-demo">
<!-- content goes here -->
<p>Click <a class="fancybox fancybox.iframe" href="relevant_testing_all.html">here</a> to see the tests and explanations for this diagnosis</p>
</div>
</div>
<div class="col-md-3"> <img src="../img/patient-001.png" width="231" height="184" alt="Patient 001" /></div>
</div>
</div>
</form>
</div>
<!-- Bootstrap script -->
<script type="text/javascript" language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../lightbox/js/lightbox.min.js"></script>
<link href="../lightbox/css/lightbox.css" rel="stylesheet" type="text/css" />
<script type='text/javascript'>
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});
</script>
<script type="text/javascript">
var one="";
var two="";
function check(browser)
{
//document.getElementById("answer").value = browser
one = browser
updateIt()
}
function check1(browser)
{
//document.getElementById("answer").value += " " + browser
two = browser
updateIt()
}
function updateIt()
{
document.getElementById("answer").value = one +" "+ two
}
</script>
<!--Script to call limit checkbox code-->
<script type="text/javascript">
//Syntax: checkboxlimit(checkbox_reference, limit)
checkboxlimit(document.forms.limit.field, 1)
</script>
As of right now your code is not "determining if the user checked the right box, displaying the answer and explanation" as you explained but that is OK and easy to implement after. Here is the answer to your question.
You should replace your id="ex3" button with the anchor tag code provided below (anchor tag is for simplicity but you can use another element to call the function with a click event). Either way, you do not need to submit a form as you are not posting information according to your requested behavior.
<a id="ex3" href="javascript:disablefields()">submit</a>
Update your function with this:
function disablefields() {
{
document.getElementById('check1').disabled = 'disabled';
document.getElementById('check2').disabled = 'disabled';
document.getElementById('check3').disabled = 'disabled';
document.getElementById('check4').disabled = 'disabled';
document.getElementById('ex3').disabled = 'disabled';
document.getElementById('ex3').innerHTML = 'Answers Submitted';
}
}
You will then get the exact behavior requested in your question minus the validation process that you described. It is easy to add that to this solution with a conditional statement or calling a validation function and then if valid calling the disablefields function.
function formVal() {
{
//put all of your validation requirements here and see if
var isValid = [check form function here]
if(isValid){
disablefields();
}else {
//send a message to user to correct fields and do not disable
}
<a id="ex3" href="javascript:formVal()">submit</a>
If you do choose to submit the information to the server at some later date simply make an AJAX call sending the form information after your disablefields call.
Fixed it by calling both function from the onClick and changing the type to button.
<input type="button" value="Submit" id="ex3" onclick="show_all(); disablefields();" >
I'm new to jQuery and JavaScript. I have a checkbox list that looks great, but I'm trying to add a button to it so that when the user is done checking, the button is hit, and then my function is called to figure out what is checked and also what is not checked.
However, my button is missing. I tried adding the code within li tags with the rest of the checkbox part, but it didn't show up. I tried adding it after the dd tag and also after the end of the div. I think I have to keep it within the form tag for my function to work, unless I'm mistaken. Any ideas why the button isn't showing up?
This is the example I found the function idea in. I searched on the internet and can't find any good ideas why my button doesn't show up. It's probably a syntax error with the tab or something.
Thanks!
This is my code:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>jQuery Michele Project</title>
<link href="css/skins/polaris/polaris.css" rel="stylesheet">
<link href="css/skins/all.css" rel="stylesheet">
<link href="css/demo/css/custom.css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script src="js/icheck.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.input').iCheck({
checkboxClass:'icheckbox_polaris',
radioClass:'iradio_polaris',
increaseArea:'10%'
});
});
</script>
<script type="text/javascript">
// Returns an array with values of the selected (checked) checkboxes in "frm"
function getSelectedChbox(frm) {
// JavaScript & jQuery Course - http://coursesweb.net/javascript/
var selchbox = []; // array that will store the value of selected checkboxes
// gets all the input tags in frm, and their number
var inpfields = frm.getElementsByTagName('input');
var nr_inpfields = inpfields.length;
// traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox
for(var i=0; i<nr_inpfields; i++) {
if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(inpfields[i].value);
}
return selchbox;
}
document.getElementById('btntest').onclick = function() {
var selchb = getSelectedChbox(this.form);
alert(selchb);
}
</script>
<style type="text/css">
ul {list-style-type: none}
img {padding-right: 20px; float:left}
#infolist {width:500px}
</style>
</head>
<body>
<form>
<div class="skin skin-line">
<div class="arrows">
<div class="top" data-to="skin-flat"></div>
<div class="bottom" data-to="skin-polaris"></div>
</div>
</div>
<div class="skin skin-polaris">
<div class="arrows">
<div class="top" data-to="skin-line"></div>
<div class="bottom" data-to="skin-futurico"></div>
</div>
<h3>Select Items for Column Headings</h3>
<dl class="clear">
<dd class="selected">
<div class="skin-section">
<h4>Live</h4>
<ul class="list">
<li>
<input tabindex="21" type="checkbox" id="polaris-checkbox-1">
<label for="polaris-checkbox-1">Checkbox 1</label>
</li>
<li>
<input tabindex="22" type="checkbox" id="polaris-checkbox-2" checked>
<label for="polaris-checkbox-2">Checkbox 2</label>
</li>
<li>
<input type="checkbox" id="polaris-checkbox-3" >
<label for="polaris-checkbox-3">Checkbox 3</label>
</li>
<li>
<input type="checkbox" id="polaris-checkbox-4" checked >
<label for="polaris-checkbox-4">Checkbox 4</label>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
$('.skin-polaris input').iCheck({
checkboxClass: 'icheckbox_polaris',
radioClass: 'iradio_polaris',
increaseArea: '20%'
});
});
</script>
$('#checkbox').prop('checked')
</dd>
</dl>
</div>
<input type="button" value="Click" id="btntest" /> //this button isnt showing up on web page
</form>
</body>
</html>