Getting Input Values from Appended Divs - javascript

I am having trouble getting the input values from a div that I appended. It returns as undefined. So basically I am creating the input element and giving it an Id. I have a function that when I clicked a button it is suppose to show the input value..
I am relatively new to JavaScript and I can't seem to find any solution for this. Please help me.. thank you
I am currently doing this in the same JavaScript script so there is no HTML script.
var question1ProjectTitleDiv = document.createElement("div");
var question1ProjectTitle= document.createElement("span")
var question1ProjectTitleName= document.createTextNode("Project Title:")
var question1ProjectTitleInput = document.createElement("input");
question1ProjectTitleInput.type= "text"
question1ProjectTitleInput.maxLength = 256;
question1ProjectTitleInput.id="question1ProjectTitleInputID"
question1ProjectTitleDiv.append(question1ProjectTitle)
question1ProjectTitle.append(question1ProjectTitleName)
question1ProjectTitleDiv.append(question1ProjectTitleInput)
questions.append(question1ProjectTitleDiv) //Add project title
console.log(question1ProjectTitleInput) // Returns <input type="text" maxlength="256" id="question1ProjectTitleInputID">
JS CODE:
let question1ProjectTitleInputID = $("#question1ProjectTitleInputID").val(); //Jquery
let question1ProjectTitleInputID2 = document.getElementById('question1ProjectTitleInputID') //Vanilla JS

You have the following statement:
question1ProjectTitleInput.id="question1ProjectTitleInputID"
So, if you use jquery to read the input, you should
let question1ProjectTitleInputID = $("#question1ProjectTitleInputID").val(); //Jquery

Related

How to get <Label> text without using "id" element

I am trying to fetch text embedded with <Label> tag. I have zero to very basic knowledge of Javascript and JQuery so I need guidance on this. I am trying this code which have copied from another stackoverflow post get-values-from-label-using-jquery
<label year="2010" month="6" id="currentMonth"> June 2010</label>
var label = $('#currentMonth');
var month = label.attr('month');
var year = label.attr('year');
var text = label.text();
The problem with this code is, as soon as I remove ID element it stops working. Please advise me, How can i get this working without ID element?
Use class instead of Id to target the element
var label = $('.currentMonth');
var month = label.attr('month');
var year = label.attr('year');
var text = label.text();
console.log(month,year,text)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<label year="2010" month="6" class="currentMonth"> June 2010</label>
The way of using pure JavaScript:
HTML:
<label year="2010" month="6" class="currentMonth"> June 2010</label>
JavaScript:
let label = document.getElementsByClassName('currentMonth')[0];
let month = label.getAttribute('month');
let year = label.getAttribute('year');
let text = label.textContent;
console.log(month,year,text)
At your disposal, you've got a string of methods to work with DOM. An easy way to get your element is using:
document.getElementsByTagName("add-your-tag-label-in-this-case");
https://www.w3schools.com/jsref/met_document_getelementsbytagname.asp

print or show current value of variable in console.log

With the below; I am attempting to capture form field contents on click of submit button. However when I go to test it and console.log the variable I just get the HTML of the form field. Any pointers. Or I get uncaught reference error, the variable is not defined.
Mark-Up wise: I'm using input type text and input type radios.
$(document).ready(function(){
$('#submitS').click(function(){
var firstName01 = document.getElementById('firstName').value;
var firstName02 = document.getElementById('firstName2').value;
var lastName01 = document.getElementById('lastName').value;
var lastName02 = document.getElementById('lastName2').value;
var iphone01 = document.getElementById('iphone').value;
var android01 = document.getElementById('android').value;
var iphone02 = document.getElementById('iphone2').value;
var android02 = document.getElementById('android2').value;
});
});
Try using .textContent instead of .value

Get the tag name of a form input value

How does one get the .tagName of a value passed in an HTML form input? This is to check whether the value that has been passed is an 'iFrame'. The input is to only accept iframes
For example:
//HTML
<input type="text" id="iFrame">
<button id="butt">Push</button>
//JavaScript
document.getElementById("butt").onclick = function(){
var iframe = document.getElementById("iFrame").value;
console.log(iframe.tagName);
}
I think you are looking for
var iframe = document.getElementsByTagName("iFrame")
I perhaps did not ask the question in the best way, initially.
I wanted to check if the value passed in the input field was an "iframe" (the input is to only accept iFrames). Since .value returns a string and not an HTML tag, getting the tag name through basic methods would not work. I needed another way.
For anybody else who needs a quick solution, this is how I managed to do it:
document.getElementById("submit").onclick = function(){
var iframe = document.getElementById("iFrame").value;
var check1 = iframe.match(/iframe/g);
var check2 = iframe.match(/frameborder/g);
var check3 = iframe.match(/http:/g);
var check = check1.length + check2.length + check3.length;
if (check === 4) {
alert("good!");
}
}

Display Form Input as Stylized String - Javascript

I am trying to take input from a number field and display it somewhere else on the page.
Here is my HTML
<input id="dollar" type="text" name="mytextfield2" onkeyup="updateDollarDisplay();">
<div id="dollarValue"></div>
and my javascript
function convertDigitsToArray(number){
var s = parseInt(number).toString(10).split("").map(Number);
return s;
}
function updateDollarDisplay() {
var amount = $('#dollar').value;
var a = convertDigitsToArray(amount);
console.log(a[0]);
$('#dollarValue').text(a[0]);
}
Running the exact code in a javascript interpreter works fine, it gives me each digit as an element in the array. When I try to do the same through the HTML page it gives me NaN each time. Any ideas?
Fiddle here: http://jsfiddle.net/7mzo8eb5/2/ I'd like it to show to input in the grayed div on each input.
The problem is with var amount = $('#dollar').value;
value is not an attribute, but val is a function. Should be: var amount = $('#dollar').val();

Get inserted data without submitting

Simply can't figure out what I am doing wrong. I want to get the newly inserted data with jQuery when a user leaves the input field.
<textarea rows="3" id="textArea" data-atr="23,mytest,se"></textarea>
It work if I have something predefined text in the box, but not if it's just inserted text.
Here is what i have done so far:
$(document).ready(function() {
$("#textArea").blur(function(){
var atr = $("#textArea").data("atr");
var temp = new Array();
temp = atr.split(",");
var thisText = $("#textArea").html();
console.log(temp[0]+' - '+temp[1]+' - '+temp[2]+' - '+thisText);
});
});
My console log looks like this after I have written something into the field:
23 - mytest - se -
The inputted text is not there? What am I doing wrong?
Any help is appreciated and thanks in advance :-)
Please use val() instead of html().
Your existing code..
var thisText = $("#textArea").html();
You should use..
var thisText = $("#textArea").val();

Categories

Resources