How to use Thymeleaf ID in Javascript? - javascript

I have been using HTML to assign my ID in Thymeleaf (data is from PostgreSQL, framework SpringBoot on Eclipse. PHP and JQuery not included in syllabus).
I want to check if the user has not selected any radio buttons, and want to try it on Javascript.
The HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
<!-- CSSの読み込み -->
<link type="text/css" rel="stylesheet" href="./css/examMain.css">
<title>模擬試験オンラインー英単語試験</title>
</head>
<body>
<form method="post" action="/result" data-th-object="${form}">
<!-- ヘッダータイトル -->
<div class="headerbackground">
<h6>模擬試験オンライン</h6>
</div>
<br>
<!-- 試験指示 -->
<div class="examinstruction">
<p>表示された言葉の英単語を以下から1つを選び、</p>
<p>OKボタンをクリックしてください。</p>
</div>
<br>
<!-- 質問 -->
<div data-th-each="list, st : ${form.list}">
<p style="text-align: center; font-size: 12px;">
<span data-th-text="${list.questionCount}">n</span> <span>/</span> <span
data-th-text="${list.questionTotal}">/n</span>
</p>
<div class="questionborder">
<p style="font-size: 22px; font-weight: bold"
data-th-text="${list.content}">question</p>
</div>
<!-- 解答選択肢 -->
<fieldset style="border: 0">
<div class="choiceradiobox"
data-th-each="choice, stat : ${list.choice}">
<input data-th-id="|choice_id${st.index}${stat.index}|"
data-th-name="|choice${st.count}|" type="radio"
data-th-value="${choice}"
data-th-field="*{list[__${st.index}__].choiceAnswer}" /> <br>
<label data-th-for="|choice_id${st.index}${stat.index}|"
data-th-text="${choice}"></label>
</div>
</fieldset>
</div>
<!-- 解答完了ボタン -->
<div class="submitsection">
<input class="btn btn-secondary" style="font-size: 25px"
type="submit" value="OK!">
</div>
</form>
</body>
</html>
Have been stuck on the Id part- Is there any way to change this bit
data-th-id="|choice_id${st.index}${stat.index}|"
to Javascript code as something that starts with document.getElementById like this?
var choiceselect = document.getElementById("|choice_id${st.index}${stat.index}|".checked);
I read the official Thymeleaf document but still could not understand the Js part :( (the code above creates an error that says java.lang.IndexOutOfBoundsException: Index 1 out of bounds for length 1)
Thank you in advance!

i think i figured it out- for radio buttons instead of the id it's best to use the name.
like this:
for (var j = 0; j < 8; j++) {
var radio_choice = document.getElementsByName("list[" + j +"].choiceAnswer");

Related

If you add HTML Elements to the DOM using Javascript's innerHTML is there a way to access those elements with Javascript?

I am trying to add more HTML elements to the DOM with a button's onclick using "innerHTML" and template literals. That much is working, but when I try to get access to the elements via a "getElementBy" or "querySelector", I can't; and I don't know why not. Any help is appreciated, thank you.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Adding and grabbing HTML Elements</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button id="add-character">Add</button>
<div id="grid"></div>
</body>
<script src="main.js"></script>
</html>
** Javascript**
let grid=document.getElementById("grid")
console.log(grid)
const addCharacter=document.getElementById("add-character")
console.log(addCharacter)
let Hp=0;
let num=0;
addCharacter.addEventListener("click",()=>{
grid.innerHTML+=`
<div id="subgrid" class="subgrid">
<br>
<div id="status" class="status">Status</div>
<br>
<div id="iniative" class="iniative">Iniative</div>
<input id="iniativeel" id="iniativeel" type="number">
<button id="inativebtn" class="inativebtn">Submit</button>
<br>
<div id="character" class="character">Character</div>
<br>
<div id="healthpoints" class="healthpoints">Healthpoints</div>
<br>
<input id="initalHp" class="initalHp" type="number">
<br>
<Button id="initalhp" class="initalhp">Submit</button>
<br>
<input id="damage" class="damage" type="number">
<br>
<button id ="damagebtn" class="damagebtn">Submit</button>
<br>
<div id="weapons" class="weapons">Weapons</div>
</div>`
})
btn()
function btn(){
let iniativeBtn=document.querySelector("#iniativebtn").textContent
console.log(iniativeBtn)
}

How to change text in html element under an element using JS

Full Code at Last/end
I have been working on a project,
So for landing page I wanna make a hero i.e. fade in and out slideshow using JavaScript.
BRIEF:
What I want:-
I have set a variable to get a random number between 1 and 3, so after depending upon the random number, the image of hero, the quote inside the hero and author name would change using Js!
Problem:-
<div class="hero-1" >
<img class="hero-img-1" id="slideshow_background" alt="slideshow photo" src="images/hero-1.jpg" >
<h2 id="quote_h2" >
<span class="quotation" >“</span>
Don't worry about people stealing your design work.
Worry about the day they stop.
<span class="quotation" >”</span>
</h2>
<span class="author" >
<h4 id="author_h4" >–Sohel Shekh</h4>
</span>
</div>
I want to change the text of quote depending upon the random number (i.e. 1-3)
But as the span element is there, which is for "
So if I
quote_txt.innerHTML = "New Quote";
It removes / cancels the <span> element which contains the " quotation marks!
What should I do now so that it only changes the actual text not the <span> present inside the <h3>??????
Please answer if anybody finds solution:
Full HTML Code:
var slideshow_timing = 4000;
var quote_txt = document.getElementById("quote_h2");
var author_name = document.getElementById("author_h4");
var starting_Status = Math.floor((Math.random() * 3) + 1);
var slideshow_Background = document.getElementById("slideshow_background");
if (starting_Status == 1) {
slideshow_Background.src = "images/hero-1.jpg";
} else {
alert("t")
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width" , initial-scale="1.0" user-scalable="no" />
<title>Sohel Editz : Home</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600;700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght#0,400;0,700;1,400;1,700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght#1,700&display=swap">
<link rel="stylesheet" href="css/slick-theme.css">
<style type="text/css">
* {
margin: 0px;
padding: 0px;
background-color: #fff;
font-family: 'Montserrat', sans-serif;
;
}
</style>
</head>
<body>
<!-- Main div element for all the page elements -->
<div class="main_Top">
<div class="nav" id="nav">
<img class="nav-cont nav-menu" alt="menu" src="images/menu.svg" id="menu" onclick="menuOpt()">
<!-- <img class="nav-img" alt="logo" src="images/logo.png" id="logo" > -->
<h2 class="nav-cont nav-logo">Sohel Editz</h2>
<img class="nav-cont nav-account" alt="account" src="images/account.svg" id="account" onclick="accountOpt()">
</div>
<div class="navbar" id="navbar">
<ul>
<li>Apply for logo</li>
<li>Login</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
<div class="account-bar" id="account-bar">
<img id="profile_img" src="images/defaultProfileImg.svg">
<i class="fa fa-edit" id="edit_pencil"></i>
<div id="details" class="details">
<h2 id="user_name">Example Name</h2>
<h5 id="useremail">someone#example.com</h5>
</div>
</div>
<!-- Span element for reserving space-->
<div class="headerSpace">
</div>
<div class="hero">
<!-- Hero 1 -->
<div class="hero-1">
<img class="hero-img-1" id="slideshow_background" alt="slideshow photo" src="images/hero-1.jpg">
<h2 id="quote_h2">
<span class="quotation">“</span> Don't worry about people stealing your design work. Worry about the day they stop.
<span class="quotation">”</span>
</h2>
<span class="author">
<h4 id="author_h4" >–Sohel Shekh</h4>
</span>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</div>
</body>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="js/index.js"></script>
<script src="js/slick.min.js"></script>
</html>
Yes, the problem you have with using .innerHTML is that it will clear the element. It doesn't matter what's inside it, it will be overwritten with what you set it to.
In your case, you have a couple of options:
Move your text into a container so you can select it and update it
After you get your h2 element, find the exact Text Node you want to update and use .replaceWith
Example with replaceWith:
const h2Quote = document.getElementById('quote_h2');
// Find the Text Node you want to update, in this case, index 2
h2Quote.childNodes[2].replaceWith('Test');
<h2 id="quote_h2">
<span class="quotation">“</span>
Don't worry about people stealing your design work. Worry about the day they stop.
<span class="quotation">”</span>
</h2>
The key thing is to keep in a variable the related <span> element which represents the quote.
I think the following can work for you:
const quotation = '<span class="quotation">“</span>';
const quote_txt = document.getElementById('quote_h2');
const quote = 'New Quote';
quote_txt.innerHTML = `${quotation}${quote}${quotation}`;
// or: quote_txt.innerHTML = quotation + quote + quotation;
<h2 id="quote_h2" >
<span class="quotation" >“</span>
Don't worry about people stealing your design work.
Worry about the day they stop.
<span class="quotation" >”</span>
</h2>
I hope that helps!

Add and remove rows in a form with unique id's that returns an object as an array

I already have my own solution for this problem, but then I don't know if I'm using the best techniques/practices to solve this particular scenario, which involves removing and adding DOM elements with unique id's.
I have just used jQuery, the requirements where only a button to add any amount of rows, once another row is added be able to delete that row too, the first row is always mandatory, here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <title>Simple form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">
label{
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="row inputRows">
<div class="col-sm-12" id="newRow-1">
<label>Some label over input</label>
<input type="text" name="txt">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<button id="addRow"><span class="fa fa-plus"></span> Add </button>
<button id="viewInfo"><span class="fa fa-plus"></span> Info </button>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p id="result">
</p>
</div>
</div>
</div>
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script type="text/javascript">
$('.inputRows').on('click', 'button' ,function(){
$(this).parent().remove();
});
$('#addRow').click(function(){
var $newRow = $('div[id^="newRow"]:first').clone(),
newId = Number($('div[id^="newRow"]:last').attr('id').split('-')[1]) + 1;
$newRow.append('<button><span class="fa fa-trash-o"></span></button>');
$newRow.find('input').val('');
$newRow.attr('id','newRow-' + newId);
$('.inputRows').append($newRow);
});
$('#viewInfo').click(function(){
$('#result').text(JSON.stringify(objectifyForm($('div[id^="newRow"]'))));
});
function objectifyForm(formArray) {
var resultArray = {},
inputValue = '';
for (var i = 0; i < formArray.length; i++){
inputValue = $(formArray[i]).find('input').val();
if(inputValue){
resultArray[$(formArray[i]).attr('id')] = inputValue;
}
}
return resultArray;
}
</script>
</body>
</html>
So the code works, the only problem I see is that the numeration of the id's, can sometimes be 1,5,8,7,6,12 depending on which ones you delete, but then it's fine because in the end, it doesn't even matter (joke, RIP Chester, but kind of true). My main concern or question is, is there any other way of achieving this more efficiently using jQuery? Am I doing something wrong by cloning the first element multiple times? If you can share some knowledge on DOM manipulation that would be great.
Thanks in advance,
Leo.

How to stop reload of page after submit

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();" >

Trouble getting button to show up

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>

Categories