I have this code of my admin page. Earlier this code used to work on my system. But now it ain't working anymore. My client needs to update this page and now when I tried running this page it does not perform JQuery requests.
What it does is on focus or change of value of first dropdown other category and subcategory dropdown gets updated by making Jquery requests to another php file which returns the category values. Also just to mention, I tried to run this page in different browsers with no success.
Also facing issue in posting the code through code snippet So writing the code right here..
The code is below-
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cracktitude-Admin</title>
<script src="scripts/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("form").on('submit',function(event){
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "GET",
url: "admin-adddata.php",
data: data
}).done(function( msg ) {
alert( "Data Saved: " + msg );
location.reload(true);
});
});
});
</script>
<script>
function categorylist(str)
{
if (str=="")
{
document.getElementById("category").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("category").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","admin-getdata.php?choice="+str,true);
xmlhttp.send();
}
</script>
<script>
function subcategorylist(str1)
{
if (str1=="")
{
document.getElementById("subcategory").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("subcategory").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","admin-getdata1.php?choice="+str1,true);
xmlhttp.send();
}
</script>
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #333;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;}
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 960px;
background-color: #FFF;
margin: 0 auto;
}
.content {
padding: 10px 0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
form{
font-size:14px;
font-family:Verdana, Geneva, sans-serif;
color:#333;
}
form p{
vertical-align:top;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<h1>Admin Panel</h1>
<form>
<p>Section:
<select name="section" id="section" tabindex="1" onchange="categorylist(this.value)" onfocus="categorylist(this.value)" autofocus="autofocus">
<option value="Aptitude">Aptitude</option>
<option value="1">Engineering</option>
<option value="2">GK</option>
<option value="3">Interview</option>
<option value="4">Puzzle & Mind Games</option>
</select>
</p>
<p>Question:
<textarea name="question" id="question" cols="45" rows="5" tabindex="2" required="required"></textarea>
</p>
<p>Option A:
<input type="text" name="optiona" id="optiona" required="required"/>
</p>
<p>Option B:
<input type="text" name="optionb" id="optionb" required="required"/>
</p>
<p>Option C:
<input type="text" name="optionc" id="optionc" required="required"/>
</p>
<p>Option D:
<input type="text" name="optiond" id="optiond" required="required" />
</p>
<p>Correct Answer:
<label>
<input type="radio" name="answer" value="A" id="answer_0" />
Option A |</label>
<label>
<input type="radio" name="answer" value="B" id="answer_1" />
Option B |</label>
<label>
<input type="radio" name="answer" value="C" id="answer_2" />
Option C |</label>
<label>
<input type="radio" name="answer" value="D" id="answer_3" />
Option D</label>
<br />
</p>
<p>Explanation:
<textarea name="explanation" id="explanation" cols="45" rows="5" required="required"></textarea>
</p>
<p>Category:
<span name="category" id="category">
<select name="cat">
<option></option>
</select>
</span>
</p>
<p>Sub-category:
<span name="subcategory" id="subcategory">
<select name="subcat">
<option></option>
</select>
</span>
</p>
<p>Type:
<select name="type" id="type">
<option value="1">I</option>
<option value="2">II</option>
<option value="3">III</option>
<option value="4">IV</option>
</select>
</p>
<p>
<input type="submit" name="add" id="add" value="Add" />
<input type="reset" name="reset" id="reset" value="Clear" />
</p>
</form>
</div>
<!-- end .container -->
</div>
</body>
</html>
Following on from comments, this may help: http://jsfiddle.net/TrueBlueAussie/4s4d1qgu/1/
Rather than use onchange= and onfocus= attribute handlers in the HTML, use jQuery to connect the events to your controls. e.g. like this:
$('#section').on('focus change', function () {
var str = $(this).val();
if (str == "") {
document.getElementById("category").innerHTML = "";
return;
}
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("category").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "admin-getdata.php?choice=" + str, true);
xmlhttp.send();
});
If you view the console (in say Chrome), you will see the php is being called in the current directory, so please ensure your page is in the same folder as the admin-adddata.php & admin-getdata.php files. Use a tool like Fiddler2 or the Chrome F12 debug Network panel to see what is being sent and what the response is from the server. It may be as simple as a 404 (not found).
Related
The idea is for the user to select the options and the best employment
sector would be suggested by the form based on his selection.
<!DOCTYPE html>
<html lang="en">
<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">
<title>
Survey that will will give you suggestion.
</title>
<style>
/* Styling the Body element i.e. Color,
Font, Alignment */
body {
background-color: #05c46b;
font-family: Verdana;
text-align: center;
}
/* Styling the Form (Color, Padding, Shadow) */
form {
background-color: #fff;
max-width: 500px;
margin: 50px auto;
padding: 30px 20px;
box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);
}
/* Styling form-control Class */
.form-control {
text-align: left;
margin-bottom: 25px;
}
/* Styling form-control Label */
.form-control label {
display: block;
margin-bottom: 10px;
}
/* Styling form-control input,
select, textarea */
.form-control input,
.form-control select,
.form-control textarea {
border: 1px solid #777;
border-radius: 2px;
font-family: inherit;
padding: 10px;
display: block;
width: 95%;
}
/* Styling form-control Radio
button and Checkbox */
.form-control input[type="radio"],
.form-control input[type="checkbox"] {
display: inline-block;
width: auto;
}
/* Styling Button */
button {
background-color: #05c46b;
border: 1px solid #777;
border-radius: 2px;
font-family: inherit;
font-size: 21px;
display: block;
width: 100%;
margin-top: 50px;
margin-bottom: 20px;
}
</style>
</head>
The form is made with HTML. and for javascript operations i have added
value=1 in the checkbox for generating the different output string.
please view the code below to understand better.
<body>
<h1>Your job type survey suggestion quiz</h1>
<!-- Create Form -->
<form id="form">
<!-- Details -->
<div class="form-control">
<label for="name" id="label-name">
Name
</label>
<!-- Input Type Text -->
<input type="text"
id="name"
placeholder="Enter your name" />
</div>
<div class="form-control">
<label for="email" id="label-email">
Email
</label>
<!-- Input Type Email-->
<input type="email"
id="email"
placeholder="Enter your email" />
</div>
<div class="form-control">
<label for="age" id="label-age">
Age
</label>
<!-- Input Type Text -->
<input type="text"
id="age"
placeholder="Enter your age" />
</div>
<div class="form-control">
<label for="role" id="label-role">
Which option best describes you?
</label>
<!-- Dropdown options -->
<select name="role" id="role">
<option value="student">Student</option>
<option value="intern">Intern</option>
<option value="professional">
Professional
</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-control">
<label>
DO you like studying?
</label>
<!-- Input Type Radio Button -->
<label for="recommed-1">
<input type="radio"
id="recommed-1"
name="recommed">Yes</input>
</label>
<label for="recommed-2">
<input type="radio"
id="recommed-2"
name="recommed">No</input>
</label>
<label for="recommed-3">
<input type="radio"
id="recommed-3"
name="recommed">Maybe</input>
</label>
</div>
<div class="form-control">
<label>Skills that you have
<small>(Check all that apply)</small>
</label>
<!-- Input Type Checkbox -->
<label for="inp-1">
<input type="checkbox" name="inp" id="c" value=1>Coding</input></label>
<label for="inp-2">
<input type="checkbox" name="inp" id="d" value=2>Dancing</input></label>
</div>
<button onclick="checkCheckbox()">
Submit
</button>
</form>
Here as of now only 2 questions are in the form, I want to add more
questions and on based of the selection the form will suggest. In this
the alert or any message i`enter code here`s not shown neither there is any error.
<script>
function checkCheckbox() {
var c = document.getElementById("c");
var d = document.getElementById("d");
var add=0
if (c.checked == true){
var y = document.getElementById("c").value;
var add=y;
return add;
}
else if (d.checked == true){
var n = document.getElementById("d").value;
var add += n;
}
else {
return document.getElementById("error").innerHTML = "*Please mark any of checkbox";
}
if(add==2){
alert('You are multi-talented! become a dancer or a coder');
}
else{
alert('Become a coder');
</script>
</body>
</html>
here on selecting dancing and coding a different output should be
given and on selecting either dancing or either coding a different
output string should be shown. please suggest for any modifications or
if there is a better way to complete this idea.
There are several errors in the script section. You can use Web Developer debugging in your browser to check them out. I can see that you are new to coding in general, so there are a couple of common mistakes we've all made in the beginning.
This is one way of writing the function so it works as I think you intended it:
function checkCheckbox() {
var c = document.getElementById("c");
var d = document.getElementById("d");
var add = 0, val;
if (c.checked == true){
val = "coder";
add += 1;
}
if (d.checked == true){
val = "dancer";
add += 1;
}
if (add == 2) {
alert('You are multi-talented! become a dancer or a coder');
return true;
}
else if (add == 1) {
alert('Become a ' + val);
return true;
}
else {
document.getElementById("error").innerHTML = "*Please mark any of checkbox";
return false;
}
}
Also, you need to add return in the event handler of the button, to avoid it submitting when the form is invalid:
<button onclick="return checkCheckbox()">Submit</button>
And lastly add an element for the error message that is referred to in the script. Something like:
<div id="error"></div>
I am trying to create form with Inputs (majorly expandable textarea). I have created a button with id "create_pdf" when clicked it will generated the whole HTML into one PDF however When I click on the generate PDF button designed to run this code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Incident Report</title>
<!-- CSS -->
<style>
.myForm {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 0.8em;
width: 45em;
padding: 1em;
border: 1px solid #ccc;
}
.myForm * {
box-sizing: border-box;
}
.myForm fieldset {
background-color: #eeeeee;
}
.myForm legend
{
background-color: gray;
color: white;
padding: 5px 10px;
}
.myForm label {
padding: 0;
font-weight: bold;
}
.myForm label.choice {
font-size: 0.9em;
font-weight: normal;
}
.myForm input[type="text"],
.myForm input[type="tel"],
.myForm input[type="email"],
.myForm input[type="datetime-local"],
.myForm select,
.myForm textarea {
float: right;
width: 60%;
border: 1px solid #ccc;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 0.9em;
padding: 0.3em;
}
.myForm textarea {
height: 50px;
width: 550px
}
.myForm button {
padding: 1em;
border-radius: 0.5em;
background: #eee;
border: none;
font-weight: bold;
margin-left: 40%;
margin-top: 1.8em;
}
.myForm button:hover {
background: #ccc;
cursor: pointer;
}
#autoresizing {
display: block;
overflow: hidden;
resize: none;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
<script src="jspdf.min.js"></script>
</head>
<body>
<input type="button" id="create_pdf" value="Generate PDF">
<form class="myForm" method="get" enctype="application/x-www-form-urlencoded" action="/html/codes/html_form_handler.cfm">
<h2>Incident Report</h2>
<fieldset>
<legend>Incident Metrics</legend>
<p><label>Customer Name <input type="text" name="customer_name" required> </label></p>
<p><label>Case <input type="text" name="case" required> </label></p>
<p>
<label>Severity
<select id="Severity" name="Severity">
<option value="" selected="selected">Select One</option>
<option value="Critical" >Critical</option>
<option value="High" >High</option>
</select>
</label>
</p>
<p><label>Incident Reported Time<input type="datetime-local" name="Incident_reported_Time" required></label></p>
<p><label>Incident Resolved Time<input type="datetime-local" name="Incident_resolved_Time" required></label></p>
<p><label>MTTR<input type="text" name="MTTR" required> </label></p>
<p>
<label>SLA Achieved
<select id="SLA" name="SLA">
<option value="" selected="selected">Select One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</label>
</p>
<p>
<label>Product
<select id="Product" name="Product">
<option value="" selected="selected">Select One</option>
<option value="Command Center">Command Center</option>
<option value="ALM">ALM</option>
<option value="AGA">AGA</option>
</select>
</label>
</p>
<p><label>Teams Involved</label></p>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox4" value = "option1"> L2
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox5" value = "option2"> L3
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox6" value = "option3"> Network
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox6" value = "option3"> SysAdmin
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox6" value = "option3"> DBA
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox6" value = "option3"> Others(Please Mention)
</label>
<textarea id="textarea6">List Other Teams Involved</textarea>
</fieldset>
<br>
<fieldset>
<legend>Problem Statement</legend>
<p><label>Description</label></p>
<textarea id="autoresizing">Add Description</textarea>
<br>
<p><label>Business Impact</label></p>
<textarea id="autoResizing">Add Business Impact</textarea>
</fieldset>
<br>
<fieldset>
<legend>Workaround/Corrective Measures</legend>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Manual WO
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Patch
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox3" value = "option3"> N/A
</label>
</fieldset>
<br>
<fieldset>
<legend>Investigation Done</legend>
<textarea id="textarea3">Add Investigation Done</textarea>
</fieldset>
<br>
<fieldset>
<legend>Preventive Analysis</legend>
<textarea id="textarea4">Add Preventive Analysis</textarea>
</fieldset>
<br>
<fieldset>
<legend>Root Cause Analysis</legend>
<textarea id="textarea5">Add Root Cause Analysis</textarea>
</fieldset>
<p><input type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)" style="display: none;"></p>
<p><label for="file" style="cursor: pointer;">Upload Image</label></p>
<p><img id="output" width="500" /></p>
</form>
<script>
(function () {
var
form = $('.myForm'),
cache_width = form.width(),
a4 = [595.28, 841.89]; // for a4 size paper width and height
$('#create_pdf').on('click', function () {
$('body').scrollTop(0);
createPDF();
});
//create pdf
function createPDF() {
getCanvas().then(function (canvas) {
var
img = canvas.toDataURL("image/png"),
doc = new jsPDF({
unit: 'px',
format: 'a4'
});
doc.addImage(img, 'JPEG', 20, 20);
doc.save('Incident_Report.pdf');
form.width(cache_width);
});
}
// create canvas object
function getCanvas() {
form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');
return html2canvas(form, {
imageTimeout: 2000,
removeContainer: true
});
}
}());
</script>
<script>
/*
* jQuery helper plugin for examples and tests
*/
(function ($) {
$.fn.html2canvas = function (options) {
var date = new Date(),
$message = null,
timeoutTimer = false,
timer = date.getTime();
html2canvas.logging = options && options.logging;
html2canvas.Preload(this[0], $.extend({
complete: function (images) {
var queue = html2canvas.Parse(this[0], images, options),
$canvas = $(html2canvas.Renderer(queue, options)),
finishTime = new Date();
$canvas.css({ position: 'absolute', left: 0, top: 0 }).appendTo(document.body);
$canvas.siblings().toggle();
$(window).click(function () {
if (!$canvas.is(':visible')) {
$canvas.toggle().siblings().toggle();
throwMessage("Canvas Render visible");
} else {
$canvas.siblings().toggle();
$canvas.toggle();
throwMessage("Canvas Render hidden");
}
});
throwMessage('Screenshot created in ' + ((finishTime.getTime() - timer) / 1000) + " seconds<br />", 4000);
}
}, options));
function throwMessage(msg, duration) {
window.clearTimeout(timeoutTimer);
timeoutTimer = window.setTimeout(function () {
$message.fadeOut(function () {
$message.remove();
});
}, duration || 2000);
if ($message)
$message.remove();
$message = $('<div ></div>').html(msg).css({
margin: 0,
padding: 10,
background: "#000",
opacity: 0.7,
position: "fixed",
top: 10,
right: 10,
fontFamily: 'Tahoma',
color: '#fff',
fontSize: 12,
borderRadius: 12,
width: 'auto',
height: 'auto',
textAlign: 'center',
textDecoration: 'none'
}).hide().fadeIn().appendTo('body');
}
};
})(jQuery);
</script>
<script type="text/javascript">
var textarea = document.querySelectorAll("#autoResizing,#autoresizing,#textarea3,#textarea4,#textarea5,#textarea6");
for (var i = 0; i < textarea.length; i++){
textarea[i].addEventListener('input', autoResize, false);
}
function autoResize() {
this.style.height = 'auto';
this.style.height = this.scrollHeight + 'px';
}
</script>
<script>
var loadFile = function(event) {
var image = document.getElementById('output');
image.src = URL.createObjectURL(event.target.files[0]);
};
</script>
</body>
</html>
It only generates one Page of the whole form as PDF, Basically it is discarding everything beyond that. Can someone help me in correcting this ?
I am wanting to display an image in a div when checkboxes or buttons are selected. I need to to be able to select multiple boxes and display a different image based on the total selection.
The selection matrix would be as follows: A, B, C, D, AB, AC, AD, BC, BD, ABC, ABD. C and D cannot appear together. When nothing is selected I want it to display image F.
I was also hoping to use Bootstrap styling to make them look like buttons not checkboxes.
<div>
<form name="test1">
<div data-toggle="buttons" class="btn-group itemcontent">
<label class="btn btn-default"><input type="checkbox" name="myimages" value="01" id="myimages" onclick="check_value(1)" />Selector1</label>
<label class="btn btn-default"><input type="checkbox" name="myimages" value="02" id="myimages" onclick="check_value(2)" />Selector2</label>
<label class="btn btn-default"><input type="checkbox" name="myimages" value="03" id="myimages" onclick="check_value(3)" />Selector3</label>
<label class="btn btn-default"><input type="checkbox" name="myimages" value="04" id="myimages" onclick="check_value(4)" />Selector4</label>
</form>
</div>
I was thinking of using a script like this:
function check_value(fieldvalue)
{
switch(fieldvalue)
{
case 1:
document.getElementById("imagetest").innerHTML = "<img src='img/600/600T_W_Base_Model.png'>";
break;
case 2:
document.getElementById("imagetest").innerHTML = "<img src='img/600/600T_W_DW.png'>";
break;
For my image display div:<div class="col-6" id="imagetest"></div>
But I'm honestly not sure where to go from here. I'm VERY new to JavaScript.
Thank you!
UPDATE
With a friends help we were able to come up with a test, but I can't get the code to work correctly...
<!DOCTYPE html>
<html>
<head>
<title>Test </title>
<script src="https://cdnjs.cloudflare.com/.../jquery/1.12.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/.../jque.../1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/.../jqu.../1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/.../3.3.6/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/.../3.3.6/css/bootstrap.css" />
<style type="text/css">
input {
display: none;
}
input:checked ~ label {
background: #00C000;
border: 1px solid #090;
color: #fff;
}
label {
background: #ddd;
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
not supported by any browser */
padding: 10px 30px;
border: 1px solid #aaa;
color: #555;
}
</style>
</head>
<body>
<div id="form1">
<form name="test">
<span><input type="checkbox" id="chk1" onchange="check_value()" data-val="A"><label for="chk1">A</label></span>
<span><input type="checkbox" id="chk2" onchange="check_value()" data-val="B"><label for="chk2">B</label></span>
<span><input type="checkbox" id="chk3" onchange="check_value()" data-val="C"><label for="chk3">C</label></span>
<span><input type="checkbox" id="chk4" onchange="check_value()" data-val="D"><label for="chk4">D</label></span>
</form>
</div>
<div id="imagetest" style="height:200px;width: 200px; border: 5px solid red;">
</div>
</body>
<script type="text/javascript">
function check_value()
{
var myVal = '';
$("input[type=checkbox]").each(function()
{
if ($(this).is(':checked'))
{
myVal += $(this).data('val');
}
});
alert(myVal);
var myDiv = $('#imagetest');
if (myVal == 'A')
{
myDiv.css('background-color', 'blue');
}
else if (myVal == 'B')
{
myDiv.css('background-color', 'green');
}
else if (myVal == 'C')
{
myDiv.css('background-color', 'grey');
}
else if (myVal == 'D')
{
myDiv.css('background-color', 'pink');
}
else if (myVal == 'AB')
{
myDiv.css('background-color', 'orange');
}
else if (myVal == 'AC')
{
myDiv.css('background-color', 'yellow');
}
else if (myVal == 'AD')
{
myDiv.css('background-color', 'black');
}
else if (myVal == 'BC')
{
myDiv.css('background-color', 'lightblue');
}
else if (myVal == 'BD')
{
myDiv.css('background-color', 'lightgreen');
}
else if (myVal == 'ABC')
{
myDiv.css('background-color', 'brown');
}
else if (myVal == 'ABD')
{
myDiv.css('background-color', 'Cyan');
}
else
{
myDiv.css('background-color', 'white');
}
}
</script>
<style type="text/css">
input {
display: none;
}
input:checked ~ label {
background: #00C000;
border: 1px solid #090;
color: #fff;
}
label {
background: #ddd;
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
not supported by any browser */
padding: 10px 30px;
border: 1px solid #aaa;
color: #555;
}
</style>
</html>
What am I doing wrong here..?
Ok, I got it you want to change image in radio-button selection. If you want to select multiple radio-button you must use another type, checkbox.
Vanilla JavaScript
This is a vanilla, pure javascript, code:
function changeImage(elem) {
var imageUrl = elem.getAttribute('image');
document.getElementById('imgview').setAttribute('src', imageUrl);
}
document.querySelector('[value="one"]').click();
<div id="form1">
<form name='test'>
<span><input onclick="changeImage(this)" type="radio" image="https://placebear.com/300/200" name="field" value="one">BASE</span>
<span><input onclick="changeImage(this)" type="radio" image="https://placebear.com/300/300" name="field" value="two">Deep Well </span>
<span><input onclick="changeImage(this)" type="radio" image="https://placebear.com/200/200" name="field" value="three">Extension </span>
<span><input onclick="changeImage(this)" type="radio" image="https://placebear.com/200/300" name="field" value="four">Treadmill</span>
<span><input onclick="changeImage(this)" type="radio" image="https://placebear.com/300/250" name="field" value="five">Stairs </span>
</form>
</div>
<div id="imagetest">
<img id="imgview" src="">
</div>
Simple explanation:
You give every radio button an attribute with the link (relative or absolute is your choice) and then in the function call grep the value for that attribute for the clicked element and set it as image element source.
jQuery
If you want to use jQuery to accomplish it this is a sample:
$(document).ready(function() {
$('#form1 input[name=field][value]').on('click', function(e) {
var imageUrl = $(this).attr('image');
$('#imgview').attr('src', imageUrl);
});
$('#form1 input[name=field][value=one]').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="form1">
<form name='test'>
<span><input type="radio" image="https://placebear.com/300/200" name="field" value="one">BASE</span>
<span><input type="radio" image="https://placebear.com/300/300" name="field" value="two">Deep Well </span>
<span><input type="radio" image="https://placebear.com/200/200" name="field" value="three">Extension </span>
<span><input type="radio" image="https://placebear.com/200/300" name="field" value="four">Treadmill</span>
<span><input type="radio" image="https://placebear.com/300/250" name="field" value="five">Stairs </span>
</form>
</div>
<div id="imagetest">
<img id="imgview" src="">
</div>
Edit:
Multiple selection with multiple image view
$(document).ready(function() {
$('#form1 input[name=field][value]').on('click', function(e) {
var imageUrl = $(this).attr('image');
var fieldValue = $(this).val();
var idImage = 'image_' + fieldValue;
if ($(this).is(':checked')) {
$('#imagetest').append('<img src="' + imageUrl + '" id="' + idImage + '">');
} else {
$('#'+idImage).remove();
}
});
$('#form1 input[name=field][value=one]').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form1">
<form name='test'>
<label><input type="checkbox" image="https://placebear.com/300/200" name="field" value="one">BASE</label>
<label><input type="checkbox" image="https://placebear.com/300/300" name="field" value="two">Deep Well </label>
<label><input type="checkbox" image="https://placebear.com/200/200" name="field" value="three">Extension </label>
<label><input type="checkbox" image="https://placebear.com/200/300" name="field" value="four">Treadmill</label>
<label><input type="checkbox" image="https://placebear.com/300/250" name="field" value="five">Stairs </label>
</form>
</div>
<div id="imagetest">
</div>
I am developing a simple log in form by using XML file values. I have an XML with values last name and first name. I am accessing the file and checking the values against the given values in order to validate log in.
It works fine in chrome, IE and safari. But, In mozilla it is not getting forwarded to the next page. The page just stays in the same page and shows a loading URL icon for indefinite time.
Here is my CODE:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link href="css/stylemp3.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form onsubmit="return myFunction()" action="action.html">
First name:<br/>
<input type="text" required="required" name="firstname" id="firstname"/>
<br>
Last name:<br>
<input type="password" required="required" name="lastname" id="lastname"/>
<br/>
<select class="dropdown" id="ddl">
<option value="haha" selected="selected">show</option>
<option value="hihi" >hide</option>
</select>
<br/>
<input type="text" name="hide" id="hidee" class="hide"/>
<br/>
<input button type="submit" value="Submit"/>
</form>
<div></div>
<script>
window.onload = function() {
document.getElementById("firstname").focus();
};
$( "#ddl" )
.change(function () {
if($( "select option:selected" ).text() == "hide")
{
$("#hidee").hide();
}
else
{
$("#hidee").show();
}
})
.change();
</script>
<script>
function myFunction() {
var lastname = document.getElementsByName('lastname')[0].value;
var firstname = document.getElementsByName('firstname')[0].value;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","login.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("login");
for (i=0;i<x.length;i++)
{
alert(x[i].getElementsByTagName("firstname")[0].childNodes[0].nodeValue);
if((x[i].getElementsByTagName("firstname")[0].childNodes[0].nodeValue) == firstname)
{
alert("Smileeee.....:-))");
if((x[i].getElementsByTagName("lastname")[0].childNodes[0].nodeValue) == lastname)
{
alert("login Successful!!!!!");
return true;
break;
}
}
}
return false;
}
</script>
</body>
</html>
we are making a web UI in JSP and using a bit of Javascript .
I need to load the xml file contents in text box and allow to edit it and write the changes to xml file.
In my code i am able to edit it but the changes are not written back to the xml file. I am putting my .jsp file below..
.jsp file
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse:collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
Title: <input type="text" id="title" value=""><br>
Id: <input type="text" id="id" value=""><br>
Updated: <input type="text" id="updated" value=""><br>
<button onclick="myFunction()">Save Changes</button>
<script>
//if (window.XMLHttpRequest)
//{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
//}
//else
//{// code for IE6, IE5
//xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
//}
xmlhttp.open("GET","values.xml",false);
try {
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
}
catch(err) {
alert( err.message);
}
//document.write("<table><tr><th>Title</th><th>Updated</th><th>Id</th></tr>");
var x=xmlDoc.getElementsByTagName("feed");
for (i=0;i<x.length;i++)
{
document.getElementById("title").value=x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
document.getElementById("id").value=x[i].getElementsByTagName("id")[0].childNodes[0].nodeValue;
document.getElementById("updated").value=x[i].getElementsByTagName("updated")[0].childNodes[0].nodeValue;
/*document.write("<tr><td>");
document.write(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("updated")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("id")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
*/
}
//document.write("</table>");
function myFunction() {
try{
//document.getElementById("title").value="Hello";
x[0].getElementsByTagName("title")[0].childNodes[0].nodeValue = document.getElementById("title").value;
x[0].getElementsByTagName("id")[0].childNodes[0].nodeValue = document.getElementById("id").value;
x[0].getElementsByTagName("updated")[0].childNodes[0].nodeValue = document.getElementById("updated").value;
//document.write("<table><tr><th>Title</th><th>Updated</th><th>Id</th></tr>");
document.write("<p>");
document.write(x[0].getElementsByTagName("title")[0].childNodes[0].nodeValue);
document.write("</p><p>");
document.write(x[0].getElementsByTagName("updated")[0].childNodes[0].nodeValue);
document.write("</p><p>");
document.write(x[0].getElementsByTagName("id")[0].childNodes[0].nodeValue);
document.write("</p>");
xmlDoc.save("values.xml");
return(xmlDoc);
}
catch(err) {
alert( err.message);
}
//document.write("</table>");
}
</script>
</body>
</html>
.xml file
<?xml version="1.0" encoding="utf-8"?>
Example Feed
2003-12-13T18:30:02Z
urn:uuid:60a76c80-d399-11d9-b93C-0003939e0af6
Helo work