So I check normalize to add normalize library...
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
I check jQuery and I add the jQuery source after normalize...
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
but if I uncheck normalize, I want it to remove the normalize link, and if I check it again I want to add normalize after jQuery...
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
That's what's suppose to happen but instead when I add say AngularJS, and then normalize, it's suppose to show like this...
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
but instead I get....
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />
So basically what I check I want that library to add after the other libraries I check.
My jQuery is...
// Add/Remove Library from Checkbox
$(".check").on("change", function() {
// Join All Checked Libraries
$(".full-library-code").val(function() {
return $.map($(".check:checked").next().next(), function (el) {
return el.value;
}).join('\n');
});
});
I believe this can happen without Codemirror, and I believe this problem is happening because of how I have my html structured with my jQuery, but I have no idea how to solve it.
$(document).ready(function() {
// Add/Remove Library from Checkbox
$(".check").on("change", function() {
// Join All Checked Libraries
$(".full-library-code").val(function() {
return $.map($(".check:checked").next().next(), function (el) {
return el.value;
}).join('\n');
});
});
});
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<input type="checkbox" class="check" id="norm"> <label for="norm">Normalize</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />' /><br>
<input type="checkbox" class="check" id="jquery"> <label for="jquery">JQuery</label>
<input type="text" class="hide" value='<script src="http://code.jquery.com/jquery-latest.min.js"></script>' /><br>
<input type="checkbox" class="check" id="ang"> <label for="ang">Angular JS</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />' /><br>
<textarea class="full-library-code" placeholder="full library's code"></textarea>
Instead of looping all the checkboxes every time you should look if the clicked checkbox is 'checked' or 'unchecked'. Based on that, add or remove the text.
$(document).ready(function() {
$(".check").on("change", function() {
var textarea = $('.full-library-code');
var value = $(this).nextAll('input:first').val() + '\n';
if( $(this).prop('checked') == true )
textarea.val( textarea.val() + value );
else
textarea.val( textarea.val().replace( value, "") );
});
});
/* only for demo readability */
textarea { width: 500px; height: 200px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="check" id="norm" /> <label for="norm">Normalize</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />' /><br />
<input type="checkbox" class="check" id="jquery" /> <label for="jquery">JQuery</label>
<input type="text" class="hide" value='<script src="http://code.jquery.com/jquery-latest.min.js"></script>' /><br />
<input type="checkbox" class="check" id="ang" /> <label for="ang">Angular JS</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />' /><br />
<textarea class="full-library-code" placeholder="full library's code"></textarea>
Note: please mind A. Wolff's comment, you probably want to add AngularJS as a script... also, in the values I replaced the < and > for < and >
If you're getting the element in reverse order, simply use the reverse() method before the join(), like so:
// Join All Checked Libraries
$(".full-library-code").val(function() {
return $.map($(".check:checked").next().next(), function (el) {
return el.value;
}).reverse().join('\n');
});
What I understand from your question is that you want the later checked libraries to appear later in the textarea. Here is how you can do that
$(".check").on("change", function() {
var $textArea = $(".full-library-code");
var fullLibraryCode = $textArea.val();
var thisValue = $(this).next().next().val() + "\n";
if (this.checked) {
$textArea.val(fullLibraryCode + thisValue);
} else {
$textArea.val(fullLibraryCode.replace(thisValue, ""));
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="check" id="norm">
<label for="norm">Normalize</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />' />
<br>
<input type="checkbox" class="check" id="jquery">
<label for="jquery">JQuery</label>
<input type="text" class="hide" value='<script src="http://code.jquery.com/jquery-latest.min.js"></script>' />
<br>
<input type="checkbox" class="check" id="ang">
<label for="ang">Angular JS</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />' />
<br>
<textarea class="full-library-code" placeholder="full library's code"></textarea>
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 5 years ago.
I got a small problem, I'm trying to save the values of the input field "a1" into localstorage, but for some reason it's not saving. I can't seem to figure out what the problem is...
All help is appreciated!
FIXED: Place the script at the bottom.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
document.getElementById('a1').onkeyup = function() {
var a1 = document.getElementById('a1').value;
localStorage.setItem('a1', a1);
};
</script>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="box">
<div class="title">Kalkulator</div>
<div class="text">Antal kvadratmeter: <input class="input-field" id="a1" type="text" value="0" /> m2</div> <---- HERE
<div class="text">Kantklipp rundt plenen? (+3.00kr per m): <input class="input-field" id="a2" type="text" value="0" /> m</div>
<div class="text">Gjødsel? (+1.00kr per kvm) <input class="input-field2" type="checkbox" name="checkbox" id="checkbox_check2"></div>
<div class="text">Mosefjerning? (+2.00kr per kvm) <input class="input-field2" type="checkbox" name="checkbox" id="checkbox_check3"></div>
<div class="text">Pris (kr) <input class="input-field3" id="a4" type="text" value="0.00" /></div>
<div class="text2">Obs! Minstepris på 300kr.</div>
<div class="tilbud-knapp">Legg til i tilbuds liste</div>
<div class="border"></div>
</div>
Place your code at the bottom of the page. It's running before the elements are rendered, which means the event can't be registered to the element.
Broken:
<script>
document.getElementById('a1').onkeyup = function() {
var a1 = document.getElementById('a1').value;
localStorage.setItem('a1', a1);
};
</script>
<input class="input-field" id="a1" type="text" value="0" />
Fixed (except localStorage ins't usable in snippets):
<input class="input-field" id="a1" type="text" value="0" />
<script>
document.getElementById('a1').onkeyup = function() {
var a1 = document.getElementById('a1').value;
localStorage.setItem('a1', a1);
};
</script>
I have the following problem when adding list items to an ul using javascript code: I'm trying to add a list item to a ul, which is added and displayed for a fraction of a second before disappearing.
This is the code for adding the item to ul in file1.js:
function isValidForm() {
addContentToUl("item1");
}
function addContentToUl(error) {
var ul = document.getElementById("errorList");
var li = document.createElement("li");
li.appendChild(document.createTextNode(error));
ul.appendChild(li);
}
This is the line of code for calling the function in file2.js:
document.getElementById("myForm").onsubmit = isValidForm;
And the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>My first PIU lab</title>
<link rel="stylesheet" type="text/css" href="BaroiuCezar_Lab1.css">
<script type="text/javascript" src="file1.js"></script>
</head>
<body>
<div>
<form id="myForm" action="">
<ul id="errorList"></ul>
<p>Numele</p>
<input id="idLastname" type="text" name="lastName" />
<p>Prenumele</p>
<input id="IdFirstName" type="text" name="firstName" />
<p>Adresa</p>
<input id="idAddress" type="text" name="address" />
<p>Data nasterii</p>
<input id="idBirthday" type="text" name="birthDate" />
<p>Telefon</p>
<input id="idPhone" type="text" name="phoneNumber" />
<p>Email</p>
<input id="idEmail" type="text" name="email" />
<section>
<span>Culoarea favorita</span>
<input id="idColor" type="color" name="color" />
</section>
<br /><br /><br />
<input type="submit" value="Trimite" />
<input type="submit" value="Reseteaza" />
</form>
<script type="text/javascript" src="file2.js"></script>
</div>
The added item should be displayed in the first ul after the form element.
function isValidForm(e) {
e.preventDefault();//disable default form submission by browser.
addContentToUl("item1");
}
function addContentToUl(error) {
var ul = document.getElementById("errorList");
var li = document.createElement("li");
li.appendChild(document.createTextNode(error));
ul.appendChild(li);
}
Your submit function which is isValidForm should return false to prevent the form from submitting. Like below
function isValidForm() {
addContentToUl("item1");
return false;
}
I am trying to implement a script that will enable a submit button once a check-box is checked.
I am following an example found here: http://jsfiddle.net/chriscoyier/BPhZe/76/
I have added the following java-script code to my page but it doesn't seem like the script is executing properly. I do not see any errors in the console however.
<!---JQuery Iniialization --->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$( document ).ready(function() {
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
});
</script>
Form Code:
<FORM ACTION="signature_action.cfm?ticket_id=#url.ticket_id#&device=pc" METHOD=POST NAME="SigForm">
<div align="center">
<h2>STEP 1</h2>
<strong>Select the type of signature that is being captured:</strong><br />
<table><tr><td align="left">
<div id="format">
<input name="equipment_dropped_off" type="checkbox" id="check1" value="equipment_dropped_off" />
<label for="check1"><span class="style1">Equipment Dropped Off </span></label>
<span class="style1">
<input name="work" type="checkbox" id="check2" value="work"/>
<label for="check2">Work performed </label>
<input name="payment" id="check3" type="checkbox" value="payment" />
<label for="check3">Payment Recieved </label>
<input name="equipment_picked_up" id="check4" type="checkbox" value="equipment_picked_up" />
<label for="check4">Equipment Picked Up</label>
</span><br />
<input name="tech_name" type="hidden" value="#url.tech_name#">
</div>
<input name="hidden" type="hidden" value="#url.tech_name#">
<input type="submit" name="submit" value="STEP 4 - SAVE SIGNATURE" disabled>
</form>
I am new to javascript and I am strugling a bit. Doesn't this need to run once the DOM is ready? (I am not sure how to do that!)
Can someone point me in the right direction?
As per this article: How to add onDomReady to my document?, I put my code inside:
window.onload = function() {
//code here
}
The event that must be listened is "change".
$( document ).ready(function() {
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.on('change', function() {
submitButt.attr('disabled', !this.checked);
});
});
There is a version problem of library and JQuery mobile UI
I want to add a value to a radio button group by a click button.
Took the test at : http://jsfiddle.net/BUBtL/4/
Thanks in advance
<link rel="stylesheet" href="themes/theme-brixky.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<fieldset data-role="controlgroup" id="field_radio_amis">
<legend></legend>
<label for="cat">Cat</label>
<input type="radio" name="radio_animal" id="cat" class="custom" value="cat" />
<label for="dog">Dog</label>
<input type="radio" name="radio_animal" id="dog" class="custom" value="dog" />
</fieldset>
<input type="button" name="btn_go" id="btn_go" value="Click to set button radio" />
</div>
$(document).ready(function () {
$("#btn_go").click(function () {
$('input:radio[name="radio_animal"]').filter('[value="cat"]').attr('checked', true);
});
return false;
});
This is a compatibility issue, you're using the wrong versions combination.
You need jQuery Mobile 1.4.0 and it's corresponding CSS file to work with jQuery 1.10.1
Change .attr to .prop
$('input:radio[name="radio_animal"]').filter('[value="cat"]').prop('checked', true);
Check jsfiddle
oups !
See my combinaison :
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
I have below html code
<div id="divTest">
Hello
<input type="text" id="txtID" value="" />
<input type="button" onclick="getForm();" value="Click" />
</div>
And I have below javascript function to get innerHtml value
<script language="javascript" type="text/javascript">
function getForm()
{
var obj = document.getElementById('divTest');
alert(obj.innerHTML);
}
</script>
I am trying to get the complete innerHtml value. When user put some value in "txtId" and when he clicks on button it should show all the innerHtml with txtId value in it. It is working fine in Internet Explorer but failing in Mozilla.
Please suggest what type of changes I need to do in javascript function or I need some Jquery for this.
Thanks.
Best Regards,
I've run across this myself - try using obj.innerHtml (note capitalisation) instead.
I solved my problem by using below jQuery
<script type="text/javascript">
$(document).ready(function()
{
var oldHTML = $.fn.html;
$.fn.formhtml = function() {
if (arguments.length) return oldHTML.apply(this,arguments);
$("input,textarea,button", this).each(function() {
this.setAttribute('value',this.value);
});
$(":radio,:checkbox", this).each(function()
{
if (this.checked) this.setAttribute('checked', 'checked');
else this.removeAttribute('checked');
});
$("option", this).each(function()
{
if (this.selected) this.setAttribute('selected', 'selected');
else this.removeAttribute('selected');
});
return oldHTML.apply(this);
};
$.fn.html = $.fn.formhtml;
});
$(document).ready(function()
{
$('input[type=button]').click(function() {
alert($('#divTest').html());
});
});
</script>
and the html was as below:
<div id="divTest">
Hello
<input type="text" id="txtID" />
<input type="text" id="txtID" />
<input type="text" />
<input type="text" id="Text1" />
<input type="text" id="Text1" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" id="Text5" />
<input type="text" id="Text6" />
</div>
<input type="button" value="Click" />