I want to make list of all the form elements (including the FORMs inside the nested FRAME or IFRAME) within a HTML document.
The list would look like:
Forms For Page: (1)www.example.com
frmTestNameB
frmTestNameB
Forms For Page: (1)(1)www.example.com/IFramePage.htm
frmFormOfIFrame
Forms For Page: (1)(1)(1)www.example.com/Nested/NestedIFramePage.htm
frmFormOfNestedIFrameA
frmFormOfNestedIFrameB
frmFormOfNestedIFrameC
Forms For Page: (1)(2)www.example.com/IFramePage.htm
frmFormOfIFrame.htm
etc.
CORRECT/MODIFIED JavaScript code to perform this action is needed, please.
I am exploring on this below code but it fails:
var sFormNames = '';
function getFormsNamesForAnyDoc(objDoc) {
var arrForms = objDoc.Forms;
sFormNames += '\n\n List of Forms for WebPage' + objDoc.location.href + '\n';
for (k = 0; k < objForm.length; k++) {
sFormNames += objForm[k].name + '</td>\n';
}
}
function getAllFormsName(objWindow) {
getFormsNamesForAnyDoc(objWindow.document);
if (objWindow.frames.length > 0) {
for (i = 0; i < objWindow.frames.length; i++) {
getAllFormsName(objWindow.frames[i]);
}
}
}
//Calling
getAllFormsName(window);
console.log(sFormNames);
The following code was made available by Chris Pietschmann in the article JavaScript: Loop through all elements in a form
function DisplayFormValues() {
var str = '';
var elem = document.getElementById('frmMain').elements;
for (var i = 0; i < elem.length; i++) {
str += "<b>Type:</b>" + elem[i].type + "  ";
str += "<b>Name:</b>" + elem[i].name + " ";
str += "<b>Value:</b><i>" + elem[i].value + "</i> ";
str += "<BR>";
}
document.getElementById('lblValues').innerHTML = str;
}
<form id="frmMain" name="frmMain">
<input type="hidden" name="ElemHidden" value="some hidden text" />
<input type="text" name="ElemText" value="some text" />
<br />
<textarea name="ElemTextArea">Some text area text</textarea>
<br />
<br />
<input type="button" value="Test" onclick="DisplayFormValues();" />
</form>
<hr />
<div id="lblValues"></div>
This code for the and elements is provided by Jan Pfeifer in the post How to access to iframe element?
var iframes = document.getElementsByTagName('iframe'); //all iframes on page
for(var i=0; i<iframes.length; i++){
alert(iframes[i].parentNode.id); // LI.id
alert(iframes[i].contentWindow.myVar); //iframe's context
}
Related
I'm having a problem I'm using a numeric keypad that I found in codepen this one
https://codepen.io/matthewfortier/pen/ENJjqR
my objective is to store the generated pin in a database but it's a little difficult to do that because I'm taking the generated pin to an input but it looks like this
<input hidden="" id="pin" value="" name="pin">9345</input>
how do i get this generated pin and save it in database
the code is the same as the link
In your html you have this:
<input type="hidden" id="pin" value="9345" name="pin" />
In your Javascript you have this:
let value = document.getElementById('pin').value;
console.log(value);
$(function() {
var container = $(".numpad");
var inputCount = 6;
// Generate the input boxes
// Generates the input container
container.append("<div class='inputBoxes' id='in'></div>");
var inputBoxes = $(".inputBoxes");
inputBoxes.append("<form class='led' class='form-group' action='cadastro.php' method='post'></form>");
var led = $(".led");
// Generates the boxes
for(var i = 1; i < inputCount + 1; i++){
led.append("<input type='password' maxlength=1 class='inp' id='" + i + "' />");
}
led.append("<input type='password' maxlength=12 name='numero' value='93445566' id='numero' />");
led.append("<input type='text' name='te' id='te' placeholder='' />");
led.append("<button id='btn1' type='submit' onclick=''>enviar</button>");
container.append("<div class='numbers' id='inb'><p id='textoo'><span class='bolded'>PIN</span> do serviço MULTICAIXA</p></div>")
var numbers = $(".numbers");
// Generate the numbers
for(var i = 1; i <= 9; i++){
numbers.append("<button class='number' type='button' name='" + i + "' onclick='addNumber(this)'><span class='pin_font'>" + i + "</span></button>");
}
addNumber = function take(field,vall) {
if (!$("#1").val())
{
$("#1").val(field.name).addClass("dot");
}
else if (!$("#2").val())
{
$("#2").val(field.name).addClass("dot");
}
else if (!$("#3").val())
{
$("#3").val(field.name).addClass("dot");
}
else if (!$("#4").val())
{
$("#4").val(field.name).addClass("dot");
}
else if (!$("#5").val())
{
$("#5").val(field.name).addClass("dot");
}
else if (!$("#6").val())
{
$("#6").val(field.name).addClass("dot");
vall = $("#1").val() + $("#2").val() + $("#3").val() + $("#4").val()+ $("#5").val()+ $("#6").val();
document.getElementById("pini").innerHTML = vall;
}
}
As the title suggests, I want each letter enter into the input field to be displayed on a new line using a while loop. For example if someone enters 'cat' in the input box this would be returned:
c
a
t
This is what I have so far, but at the moment its only displaying the first letter.
var input = document.getElementById('userinput').value;
var i = input.length;
while (i--) {
document.getElementById('message').innerHTML = (input[i]);
}
The line:
document.getElementById('message').innerHTML = (input[i]);
Is completely overwriting the HTML of the #message element, so it will only have the value of the last iteration. Instead you will want do:
document.getElementById('message').innerHTML += (input[i]) + "<br />";
With the <br /> moving to a new line. To have it in a top-down fashion you may want to use a normal for-loop instead:
for(var i = 0; i < input.length; i++)
document.getElementById('message').innerHTML += input[i] + "<br />";
Below is a basic snippet example (hitting enter or unfocusing will trigger the event):
document.getElementById('text').addEventListener("change", function(){
document.getElementById('message').innerHTML = "";
input = document.getElementById('text').value;
for(var i = 0; i < input.length; i++)
document.getElementById('message').innerHTML += input[i] + "<br />";
});
<input id="text" type="text" />
<div id="message"></div>
I'm working with the local storage for the first time and going through some JS tutorials online as I'm quite rusty. Making a dictionary where you can add words in 2 idioms then it displays. Everything is working fine with the exception of the second item in the object "dict", is not being shown although it's in the object. it shows in the console output. Might be the indexing in the loop. Cannot see it though. Any light shed will be appreciated.
function getDictionary(){
var dict = {},
dictStr = localStorage.getItem('dictionary');
if(dictStr !== null){
dict = JSON.parse(dictStr);
}
return dict;
}
function show(){
var html = "";
var resultOutput = document.getElementById("resultOutput");
var dict = getDictionary();
for(var i = 0; i < Object.keys(dict).length; i++){
key = Object.keys(dict)[i];
html += "<p class='normal-paragraph'>The english word <span style='color: green'> " + key +
" </span>in portuguese is <span style='color: green'> " + dict[key]+
"</span> <button class='removeBtn' id='"+ i +"' >x</button></p>";
resultOutput.innerHTML = html;
var buttons = document.getElementsByClassName('removeBtn');
for(var i = 0; i < buttons.length; i++){
buttons[i].addEventListener('click',remove);
}
}
console.log("");
console.log("All words: "+ JSON.stringify(dict));
}
HTML
...
<p id="sayHello"></p>
<fieldset id="translateField">
<legend> Translate english to Portuguese</legend>
<input type="text" id="newWordEng" name="newWordEng" value="" placeholder=" write the english word" >
<input type="text" id="newWordPt" name="newWordPt" value="" placeholder=" write the portuguese word">
<input type="button" id="addWordBtn" name="addWordBtn" value="Add New Word">
</form>
</fieldset>
<div id="resultOutput">
</div>
<script src="src/translate.js"></script>
</body>
I think it's because you're using the variable "i" twice. In the inner for loop, try using "j" instead:
for(var j = 0; j < buttons.length; j++){
buttons[j].addEventListener('click',remove);
}
Edit: In fact, you can probably remove the inner loop altogether, and just do:
function show(){
var html = "";
var resultOutput = document.getElementById("resultOutput");
var dict = getDictionary();
for(var i = 0; i < Object.keys(dict).length; i++){
key = Object.keys(dict)[i];
html += "<p class='normal-paragraph'>The english word <span style='color: green'> " + key +
" </span>in portuguese is <span style='color: green'> " + dict[key]+
"</span> <button class='removeBtn' id='"+ i +"' >x</button></p>";
resultOutput.innerHTML = html;
var buttons = document.getElementsByClassName('removeBtn');
buttons[i].addEventListener('click',remove);
}
}
I am dynamically creating elements based on json data that i get from a service. The elements are being created fine but the values are not being bound to the model via ng-model. I tried putting the function in $timeout to force $apply(). Even that did not work. Following is the code :
function InstructionsCtrl($http, ApiCallFactory, $timeout) {
var insCtrl = this;
insCtrl.data = [];
insCtrl.answers = {};
insCtrl.questionGroup = ApiCallFactory.questionGroup;
$timeout(function(){
var html = "";
var questionSet;
for (var tempQuestionSet in insCtrl.questionGroup) {
if (insCtrl.questionGroup.hasOwnProperty(tempQuestionSet)) {
questionSet = insCtrl.questionGroup[tempQuestionSet];
for (var question in questionSet) {
if (questionSet.hasOwnProperty(question)) {
if (questionSet[question].type == 'text') {
html += ' <div class="form-group"> <label for="text">' + questionSet[question].text + '</label> <input type="text" class="hi" id="text" ng-model="insCtrl.answers.';
html += tempQuestionSet + '.' + question + '" value ="text" name="radio1"> </div> '
}
else if (questionSet[question].type == 'select') {
var noOfOptions = questionSet[question].values.length;
html += ' <div class="form-group"> <label for="radio">' + questionSet[question].text;
html += '<select>';
for (var i = 0; i < noOfOptions; i++) {
html += '<option>' + questionSet[question].values[i] + '</option>';
}
html += '</select></div>'
}
}
}
}
}
var formContainer = $('#jsonTest');
formContainer.empty();
formContainer.prepend(html);
});
}
I've currently added ng-model only to the text type fields. Pls let me know what i am doing wrong.
How to show the textboxes.....see. The max value I will assign after onload so following code did not work........
max value is equal to the user selected files count.
I cant assign before onload the page..
<form action="" method="post" onsubmit="store(this); return false">
<p>
<input type="button" name="prev" onclick="goto(this.form, -1)" value="Previous" />
<input type="button" name="next" onclick="goto(this.form, +1)" value="Next" />
</p>
<divs>
<noscript>Please enable JavaScript to see this form correctly</noscript>
</divs>
<div id="filename"></div>
<p>
<input type="submit" name="submit" value="Store in database" />
</p>
</form>
<!-------------user selected file's name in array------------------>
var filelist=new Array();
function insert(filess)
{
filelist[filelist.length]=filess;
var sahan=(filelist.valueOf());
}
max=filelist.length;
window.onload = function() {
var form = document.forms[0];
var container = form.getElementsByTagName('divs')[0];
container.innerHTML = '';
for (var i = 0; i < max; i++)
container.innerHTML += '<fieldset style="width: 250px; height: 80px;"><legend>Files of ' +(i + 1) + ' / ' + max + '</legend><input type="text" name="name' + i + '" /><br /><br /><input type="text" name="topic' + i + '" /></fieldset>';
goto(form, 0);
}
There are too many issues to mention.
you need to get the maximum before you use it, so call insert and from there issue the call to build the list
you need to either pass the maximum around OR make it global in scope
you are using two different ajax methods
you are not using jQuery everywhere and so on.
Here is a working demo when maximum is set before onload.
http://jsfiddle.net/mplungjan/rnJWX/
var maximum=0, current = 0;
$(document).ready(function(){
maximum=10;
var container = $("#sankar");
container.hide();
container.empty();
for (var i = 0; i < maximum; i++) {
container.append('<fieldset style="width: 250px; height: 80px;"><legend>Files of ' +(i + 1) + ' / ' + maximum + '</legend><input type="text" name="name' + i + '" /><br /><br /><input type="text" name="topic' + i + '" /></fieldset>');
}
goto(form, 0);
container.show();
})
function goto(form, pos) {
current += pos;
$('#my_div').html("Hiding all "+maximum+" sets and showing set #"+current+"..."); // sankar[curent];
form.prev.disabled = current <= 0;
form.next.disabled = current >= maximum - 1;
// you can do jQuery here too
var fields = form.getElementsByTagName('fieldset');
for (var i = 0; i < fields.length; i++) fields[i].style.display = 'none';
fields[current].style.display = 'block';
form['name' + current].focus();
}
Well, since you've given your "container" element an ID, you should use document.getElementById('divs') instead of form.getElementsByTagName('divs')[0].
In your current code, container would be undefined.