I have the following script:
var before = document.getElementById('before');
if (switchElement.value == 'single'){
for (var i=0; i < before.length; i++) {
if (before[i].id == "before_label") {
before[i].innerHTML = 'Image';
break;
}
}
after.style.display = 'none';
}
and the HTML looks like:
<div id="before">
<p id="before_label"> Before Image: </p>
<input type="file" name="before" size="40">
<input type="hidden" name="MAX_FILE_SIZE" value="10000000">
</div>
Was wondering why it didn't work and change the inner html to change?
To access the innerHTML of before_label, just access it directly:
document.getElementById('before_label').innerHTML = 'Image';
getElementById only returns one element. You need to acces the child objects via childNodes.
Try this:
var before = document.getElementById('before').childNodes;
if (switchElement.value == 'single'){
for (var i=0; i < before.length; i++) {
if (before[i].id == "before_label") {
before[i].innerHTML = 'Image';
break;
}
}
after.style.display = 'none';
}
Why the for loop? Just get the element by its id:
var before_label = document.getElementById('before_label');
if (switchElement.value == 'single') {
before_label.innerHTML = 'Image';
after.style.display = 'none';
}
Related
I need to call different iframe once i click on one or more checkbox.
The idea is about getting different charts into one graph.
I tried this into my html file :
function control(){
var checkedValue = null;
var inputElements = document.getElementsByName('check_list[]');
for(var i=0; inputElements[i]; ++i){
if(inputElements[i].checked){
checkedValue = inputElements[i].value;
break;
}
return checkedValue;
}
if checkedValue == 'TotalVoiceTrafficBH2'
{ <iframe src="http://localhost/xampp/www/interactive_php_mysql_charts/chart_trans2.html" width="700" height="500"/> }
}
if checkedValue == 'TotalVoiceTrafficBH1'
{ <iframe src="http://localhost/xampp/www/interactive_php_mysql_charts/chart_trans1.html" width="700" height="500"/> }
}
any help please ?
I need to superpose these iframes whilst my user click on 2 or more checkoboxes !
Bellow an example
function checkValue() {
var checkedValue = null;
var inputElements = document.getElementsByName('check_list[]');
for (var i = 0; inputElements[i]; ++i) {
if (inputElements[i].checked) {
checkedValue = inputElements[i].value;
break;
}
return checkedValue;
}
}
var iframe = document.createElement('iframe');
switch(checkValue()) {
case 'TotalVoiceTrafficBH2':
iframe.src = 'http://localhost/xampp/www/interactive_php_mysql_charts/chart_trans2.html';
break;
case 'TotalVoiceTrafficBH1':
default:
iframe.src = 'http://localhost/xampp/www/interactive_php_mysql_charts/chart_trans1.html';
break;
}
document.body.appendChild(iframe);
I have a javascript which appends a string like 222222222222222 to another field (which will either be blank or already have numbers like 222222222222222 33333333333333) with a click of a button. Actually it's 15 digit IMEI of the phone. User has the option of submitting a single IMEI or bulk IMEI. When more then one IMEI is added to the bulk field by pressing the button from myVar1, the new IMEI gets inserted below the previous IMEI in the bulk field(myVar2).
Currently, I am using the below script to do this and it's working perfectly fine. The problem is that it doesn't check for duplicates before appending.
function append_myVar1_to_myVar2(){
var myVar1 = document.getElementById('myVar1_value').value;
var myVar2 = document.getElementById('myVar2_value').value;
if(document.getElementById('myVar2_value').value == ''){
document.getElementById('myVar2_value').value = myVar1;
}else{
document.getElementById('myVar2_value').value = document.getElementById('myVar2_value').value + "\r\n" + myVar1;
}
}
I have modified the script now as below (updated to include the first response, thanks to Brian) to check for duplicates, but it's not working. Request experts to have a look into it.
function append_myVar1_to_myVar2(){
var myVar1 = document.getElementById('myVar1_value').value;
var myVar2 = document.getElementById('myVar2_value').value;
if(document.getElementById('myVar2_value').value == ''){
document.getElementById('myVar2_value').value = myVar1;
}else{
var flag = 0;
var wordsarr = myVar2.split("\r\n");
for(var i = 0; i < wordsarr.length; i++)
{
if(wordsarr[i].value == myVar1)
{
flag = 1;
}
}
if(flag == 1)
{
alert('Value is duplicate.');
}
else{
document.getElementById('myVar2_value').value = document.getElementById('myVar2_value').value + "\r\n" + myVar1;
}
}}
Here is the html of the page:
<html>
<body>
<input id="myVar1_value" type="text" maxlength="15" name="myVar1_value">
<input id="IMEI_ADD" class="button_gray" type="button" onclick="append_myVar1_to_myVar2()" value="Add this IMEI to bulk entry" name="IMEI_ADD">
<p id="imei_bulk_field" class="form-row notes">
<textarea id="myVar2_value" class="input-text" rows="2" cols="5" placeholder="If you have more than one IMEI, insert them here by pressing the button above." name="myVar2_value"></textarea>
</p>
</body>
</html>
for(var i = 0; i < (myVar2.split("\r\n")).length; i++)
{
//here is wrong
if(myVar2[i].value == myVar1)
{
flag = 1;
}
You should change to
var wordsarr = myVar2.split("\n");
for(var i = 0; i < worsarr.length; i++)
{
if(wordsarr[i] == myVar1)
{
flag = 1;
}
}
if(flag == 1)
{
alert('Value is duplicate.');
}
Store splitted chunks ,and iterate over them:
var chunkArray = myVar2.split("\r\n");
for(var i = 0; i !== chunkArray.length; i++){
if(chunkArray[i] == myVar1){
flag = 1;
break;
}
}
var myVar2 = document.getElementById('myVar2_value').value;
Later...
if(myVar2[i].value == myVar1)
It looks like you are adding .value when you don't need to. Try:
if(myVar2[i] == myVar1)
This could be of assistance
function inArray(needle, haystack) {
var length = haystack.length;
for(var i = 0; i < length; i++) {
if(haystack[i] == needle) return true;
}
return false;
}
you could change the if with:
haystack[i].value == needle
I wanted to know what would be the best method to validate (to ensure that all 4 of the input boxes are not blank)?
<html>
<head></head>
<body>
<input type="text" id="i1">
<input type="text" id="i2">
<input type="text" id="i3">
<input type="text" id="i4">
</body>
</html>
If they are all to be inputs then you can use document.getElementsByTagName
var allinputs = document.getElementsByTagName("input");
console.log(allinputs);
for (var i = 0; i < allinputs.length; i++) {
if(allinputs[i].value.length == 0){
alert('need to have something here');
return;
}
}
here is a working fiddle
JQuery Validate is an really easy way to validate your fields. You can read more about it at their wiki:
http://docs.jquery.com/Plugins/Validation
My custom method, not cross-browser:
NodeList.prototype.every = HTMLCollection.prototype.every = Array.prototype.every;
var allChecked = document.querySelectorAll('input[type=text]').every(function(el) {
return el.value !== '';
});
if (allChecked) alert("All checked!");
The cross-browser (IE8 and above), not funny way:
var inputs = document.querySelectorAll('input[type=text]');
var allChecked = true;
for (var i = 0, len = inputs.length; i < len; i++) {
if (inputs[i].value === '') {
allChecked = false;
}
}
if (allChecked) alert("All checked!");
HTML:
<input type="button" value="submit" onclick="submitForm()">
JavaScript :
function submitForm()
{
if(validate())
{
alert('No blank found!!');
}
else
{ alert('blank found!!'); }
}
function validate()
{
var i1 =document.getElementById('i1').value;
var i2 =document.getElementById('i2').value;
var i3 =document.getElementById('i3').value;
var i4 =document.getElementById('i4').value;
var result = false;
if( i1 && i2 && i3 && i4) {
result = true;
}
return result;
}
I have a div in my page like that,
<div class="errormsg" style="display: none;">Username is empty</div>
i am having an input field like this,
<input type=textbox id="userid" />
Now i need a javascript for showing the error message div if input field was empty. I need to use the div class rather than id. Please help.
P.S : I don't want Jquery as my page has some restriction to use library files.
Try this, assuming only one errormsg div -
Update
I've added a fiddle here. Plus, there was a typo - corrected
<div class="errormsg" style="display: none;">Username is empty</div>
<input type=textbox id="userid" onchange="validate()" />
function validate(){
var userId = document.getElementById('userId'),
errorMsg = document.getElementsByClassName('errormsg').item();
if (userId.value === ''){
errorMsg.style.display = 'block'
} else {
errorMsg.style.display = 'none';
}
}
<div class="errormsg">Username is empty</div>
<input type='textbox' id="userid" onkeyup="javascript:call(this);" />
function getElementsByClassName(className) {
// For IE
if (document.all) {
var allElements = document.all;
} else {
var allElements = document.getElementsByTagName("*");
}
var foundElements = [];
for (var i = 0, ii = allElements.length; i < ii; i++) {
if (allElements[i].className == className) {
foundElements[foundElements.length] = allElements[i];
}
}
return foundElements;
}
function call(control)
{
var userid=document.getElementById('userid');
var errorMsg = getElementsByClassName('errormsg')[0];
if(userid.value == '')
{
errorMsg.style.display = "block";
}
else
{
errorMsg.style.display = "none";
}
}
Removed the JQuery and added the Javascript code as below:
<div class="errormsg">Username is empty</div>
<input type='textbox' id="userid" onkeyup="javascript:call(this);" />
function getElementsByClassName(className) {
// For IE
if (document.all) {
var allElements = document.all;
} else {
var allElements = document.getElementsByTagName("*");
}
var foundElements = [];
for (var i = 0, ii = allElements.length; i < ii; i++) {
if (allElements[i].className == className) {
foundElements[foundElements.length] = allElements[i];
}
}
return foundElements;
}
function call(control)
{
var userid=document.getElementById('userid');
var errorMsg = getElementsByClassName('errormsg')[0];
if(userid.value == '')
{
errorMsg.style.display = "block";
}
else
{
errorMsg.style.display = "none";
}
}
I have text on a page, its in a <h3> tag, which has a class ms-standardheader, but there are other texts on the page with the same class in its own <h3> tag. I also know the text I want to hide is 'Session'.
With this how can I write a javascript function to hide only this text?
Here is an image of the developtools from IE.
I'd suggest, if you're restricted (as your tags suggest) to non-library plain JavaScript, the following:
var h3s = document.getElementsByTagName('h3'),
classedH3 = [];
for (var i = 0, len = h3s.length; i < len; i++) {
if (h3s[i].className.indexOf('ms-standardheader') > -1) {
classedH3.push(h3s[i]);
}
}
for (var i = 0, len = classedH3.length; i < len; i++) {
if (classedH3[i].firstChild.nodeValue == 'the text to hide'){
classedH3[i].style.display = 'none';
}
}
JS Fiddle demo.
References:
push().
document.getElementsByTagName().
element.className.
node.nodeValue.
indexOf().
Can't you give the target element an ID? That would make things much more simple. Otherwise, you have to go through all <h3> elements until you find the one you want to hide:
var headings = document.getElementsByTagName("h3");
for(var i=0; i<headings.length; i++) {
var contentElement = headings[i].getElementsByTagName('nobr');
var content = "";
if(contentElement.length) {
content = contentElement[0].textContent ? contentElement[0].textContent : contentElement[0].innerText;
}
var content = contentElement.length ? contentElement[0].childNodes[0].nodeValue : '';
if(headings[i].className == 'ms-standardheader' && content == 'Session') {
headings[i].style.display = 'none';
}
}
you should try this :
window.onload = function()
{
getElementByClass('ms-standardheader');
}
window.getElementByClass = function(theClass){
var allHTMLTags=document.getElementsByTagName('*');
for (i=0; i<allHTMLTags.length; i++) {
if (allHTMLTags[i].className==theClass) {
var content = allHTMLTags[i].innerHTML;
var search = /session/;
if (search.test(content))
{
alert(search);
allHTMLTags[i].style.display='none';
}
}
}
}
See Demo : http://jsfiddle.net/3ETpf/18/
Always favour a unique Id where possible. If not possible then you have to manually traverse the DOM to find the elements you are looking for. Here's an example using getElementsByTagName().
var i, header, headers = document.getElementsByTagName('h3');
for (i = 0; i < headers.length; i += 1) {
header = headers[i];
if (header.className === 'ms-standardheader' &&
(header.textContent || header.innerText) === 'Session') {
header.style.display = 'none';
}
}
see: http://jsfiddle.net/whP5z/
If you have jquery you may type this :
$("h3.ms-standardheader:contains('Session')").hide();