I have 5 input box in my page. I want to check if any field is blank, i will show the error message using a span tag appending to that input field.
Here is my code:
function validateForm() {
// Declare all the local variable
var inputElements, inputId, inputType, i, inputLength, inputNode;
// Get all the input tags
inputElements = document.getElementsByTagName("input");
for(i = 0, inputLength = inputElements.length; i < inputLength; i++) {
inputId = inputElements[i].id; // Get the input field ID
inputType = inputElements[i].type; // Get the input field type
// We will ONLY look for input[type=text]
if(inputType === "text") {
inputNode = document.getElementById(inputId);
if(inputNode.value === "") {
var spanTag = document.createElement("span");
spanTag.innerHTML = inputFieldBlankErrorMessage;
console.log(inputNode.appendChild(spanTag));
}
}
}
return false; // Do Nothing
}
This is what i am getting
It should append after the input tag. I am getting a weird tag which i don't need. Please help!!!
You can't .appendChild() anything to an input node, since an input can have no descendants.
Instead, you should insert the new node after it, or something similar.
inputNode.parentNode.insertBefore(spanTag, inputNode.nextSibling);
DEMO: http://jsfiddle.net/hMBHT/
Simply put you are not supposed to append any elements to input elements.
What you probably want is something like this:
<div class="field">
<input type="text" name="bla"/>
<span class="error">This field can't be blank!</span>
</div>
So you need to insert the span before or after the input element.
Here is an answer that shows you how.
I believe that your issue is that you are trying to append the span as a child of the input, not a sibling (which, I believe, is what you really want).
I can't to be sure without seeing your actual HTML, because I don't know how your inputs are situated in the DOM, but if they have separate parent elements, then you would replace:
inputNode.appendChild(spanTag);
. . . with
inputNode.parentNode.appendChild(spanTag);
Edit: FYI, the code that squint gave below (inputNode.parentNode.insertBefore(spanTag, inputNode.nextSibling);) would be how you could do it if all of the inputs are under the same parent element. It all depends on how the DOM structure is set up.
Related
I want the user after clicking the input field, have the anchor options. Thus, I capture the click of these anchors and add the contents of that anchor into the input which was empty, white. But, the script does not work. So, where is the error? Is the logic wrong? At where? I followed the examples from the Jquery library documentation, I do not understand the error. Can you tell me where the error is?
Translation
pt-br 'Colegios' to en-us 'schools'
pt-br 'Unidades' to en-us 'locations'
pt-br 'Inscrição' to en-us 'subscription'
Actions of my script
1. If the user clicks the input type="text", anchor will be added.
2. If it clicks on that anchor, add the value of the content inside the input.
HTML
<input id="incricao" type="text" class="inscricao"/>
<input id="colegios" type="text" class="colegios"/>
<input id="unidades" type="text" class="unidades" />
Javascript/Jquery
$().ready(function(e) {
$('#input').click(function(){
$('.inscricao').append('PresencialOnline');
})
$('#colegios').click(function(){
$('.colegios').prepend('CDF MasterMenino JesusEthos');
})
$('#unidades').click(function(){
$('.unidades').prepend('RecifeJabatão');
})
$("#presencial").click(function() {
var valorDoInput0 = $(".inscricao").text();
$("#inscricao").val(valorDoInput0);
});
$("#online").click(function() {
var valorDoInput1 = $(".inscricao").text();
$("#inscricao").val(valorDoInput1);
});
$("#cdfmaster").click(function() {
var valorDoInput2 = $(".colegios").text();
$("#colegios").val(valorDoInput2);
});
$("#meninojesus").click(function() {
var valorDoInput3 = $(".colegios").text();
$("#colegios").val(valorDoInput3);
});
$("#ethos").click(function() {
var valorDoInput4 = $(".colegios").text();
$("#colegios").val(valorDoInput4);
});
$("#recife").click(function() {
var valorDoInput5 = $(".unidades").text();
$("#unidades").val(valorDoInput5);
});
$("#jabatao").click(function() {
var valorDoInput6 = $(".unidades").text();
$("#unidades").val(valorDoInput6);
});
});
First of all, you can't append anything inside an input tag, try using after instead of append.
Also $('#input') is wrong and you don't have any input id! try changing it to $('#incricao').
And finally, why you use both class and id to select your inputs? remove those classes and just use ids and select your inputs like $('#ID')
I need to get the HTML of the whole page, with the current values of all inputs in their value="...".
I've tried this:
document.getElementById("htmlId").innerHTML;
and this:
$('html').html();
but the both return the HTML page but without the input values.
I know that this looks like this other question, but it is not the same. I really need get the HTML with the value attributes.
An input has a value attribute that determines the initial value of the input. It also has a value property that holds the current value of the input.
It appears that you want to export the HTML markup of the page, where the value attributes of all inputs are set to the value of the value property.
You can do so as follows:
// first, set `value` attribute to value of property for all inputs
$('input').attr('value', function() {
return $(this).val();
});
// export HTML with correct `value` attributes
$('html').html();
And here is a little demo of that in action.
$('#export').on('click', () => {
$('input').attr('value', function() {
return $(this).val();
});
console.log($('html').html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Some paragraph.</p>
<input type="text" value="initial value" />
<h1>Header</h1>
<p>Another paragraph</p>
<button id="export">Export page</button>
for input value inside html use this code may got some help
$("#html input[type=text]").each(function(index,value) {
val = $("#"+value.id).val();
alert(val)
});
Assuming "html" itself is an id of an element, you can try cloneNode.
var clonedElem = document.getElementById("html").cloneNode(true);
This clonedElem is a DOM object which contains both html as well as values ( and all other attributes). You can now use this DOM for all your purposes.
For Eg. If you wish to insert it into another element, you can do like
document.getElementById('newElement').appendChild(clonedElem)
This will put the entire node with its values
As commented before,
.html() or innerHTML will return the markup. value is a property associated with input elements. Yes you have a tag, but eventually you end you initiating this property. So when you change value dynamically, it updates property and not attribute
You will have to loop over all the inputs and set value attribute.
function updateAttribute() {
var parent = document.querySelector(".content");
var inputs = parent.querySelectorAll("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].setAttribute("value", inputs[i].value);
}
}
Working Demo
If you want to get input values I will do with .attr to change dynamically element value !
$("ButtonToCatchInputValue").click(function(){
$("input").each(function(){
$(this).attr("value",this.value);
});
console.log($("html").html());
});
Use document.cloneNode to clone the whole document with retaining the state of the html.
cloneNode has a boolean parameter that denotes the following
true - Clone the node, its attributes, and its descendants
false - Default. Clone only the node and its attributes
For more details check this document
function cloneMe() {
var newelement = document.cloneNode(true);
console.log(newelement.getElementsByTagName("input")[0].value)
}
<input type="text" value="Change My Value" style="width:100%" />
<input type="submit" onclick="cloneMe()" value="Clone Now" />
I have a text input, and I want to hide the text inside, on a given event(I disable the input, when it is not needed). I would like to display the hidden text, when the given event is reversed.
I know I can store the value and retrieve as needed. I'd like to avoid moving data, since this is a purely cosmetic operation.
Can the input text be hidden, or is manipulating the data in the input the only way? I would like the simplest solution.y?
I can use pure JS and jQuery.
I would use "value" attribute of the same input object, since the attribute is the default value. In this case you don't even need any additional variables. The idea of this approach comes from the difference between properties and attributes. It means that if you change value property of the object, the attribute value remains the same as it was before.
var input = document.querySelector('input');
function hide() {
input.value = "";
}
function show() {
input.value = input.getAttribute('value');
}
<input type="text" value="Some text">
<button onclick="hide()">Hide</button>
<button onclick="show()">Show</button>
An example on how to store the value of an input element inside the dataset of the element.
and show/hide it on hover.
var hello = document.getElementById('hello');
hello.dataset.value = hello.value;
hello.value = '';
hello.addEventListener('mouseover', function() {
hello.value = hello.dataset.value;
});
hello.addEventListener('mouseout', function() {
hello.value = '';
});
<input id="hello" value="Hello World" />
I am trying to select a radio button on a webpage using Javascript inside an Applescript. For this particular button, there is no element ID, so I'm no really sure how to select this radio button.
There's really no other identifying elements for this form (or that I see, at least).
Note: There's several radio buttons on this page, and the only unique identifier between them is the "value."
HTML:
<input type="radio" size="4" name="Level" value="p;29">
Javascript/Applescript:
do JavaScript "document.getElementById('p;29').checked = true;" in doc
If you have no other input elements, you can safely use
document.getElementsByTagName("input")[0]
Otherwise, you can do:
for (i=0; i<document.getElementsByTagName('input').length; i++) {
var myInput = document.getElementsByTagName('input')[i];
if (myInput.type == 'radio')
{
//myInput is the radio element. Do something with it
}
}
I ended up using the value and name fields to target the element and check it. Here is the working script:
do JavaScript "var elements = document.getElementsByName('Level');
for (i=0;i<elements.length;i++) {
if(elements[i].value == 'p;29') {
elements[i].checked = true;
}
}" in doc
I need to find the element clicked which causes a text input to blur and store it as a variable. how can I determine the id of the element that was clicked to cause the input 'textBox' to lose focus? I don't know if I am approaching this the right way, but this code below is what I have so far. I tried document.activeElement, but it only worked on inputs and not elements such as li's and anchor tags Thanks
javascript:
var elClicked;
$('textBox').blur(function(){
elClicked = // what is the id of the element that caused blur?
alert(elClicked);
});
html:
<input type = "text" id = "textBox">
<!-- example elements -->
<input type = button id = "element1" />
text
<ul><li id = "element3">list</li></ul>
By accessing the id property of the target.
$('textBox').blur(function(){
var target = event.explicitOriginalTarget || document.activeElement;
elClicked = target ;
alert(elClicked);
});
alternatively you could try an approach along these lines
var elClicked;
$(document).mousedown(function(e) {
elClicked = $(e.target);
});
$('textBox').blur(function(){
alert(elClicked);
});
You can store the id of anchor tag in a hidden field ,When it is clicked.And takeing that value you can find which element is clicked