We Keep Coding

Javascript input field should append in div whille Typing

I am building an Url-Generator for google analytics. Currently, the Url is appending if I press the submit button. But I want the URL to append while typing in the input. How can I do that with Javascript to get rid of the submit button?
PS: I also want that if I make changes for example in the third input field that the sequence isn't changing (that the content of the third input field isn't appending at last, after I have changed the input value).
HERE'S MY CURRENT CODE THAT LET'S THE URL APPEND AFTER PRESSING THE SUBMIT BUTTON:
//create URL
submit.addEventListener("click", function() {
outputField.value = "";
output = "";
//lowercases all field inputs
if(input01.value !== "" && input02.value !== "") {
output += input01.value + "?utm_source=" + input02.value;
if(createClicked === false) {
$("#outputWrapper").slideToggle(550);
createClicked = true;
}
} else {
alert("Website Url and Campaign Source can't be empty");
}
if(input03.value !== "") {
output += "&utm_medium=" + input03.value;
}
if(input04.value !== "") {
output += "&utm_campaign=" + input04.value;
}
if(input05.value !== "") {
output += "&utm_term=" + input05.value;
}
if(input06.value !== "") {
output += "&utm_content=" + input06.value;
}
//output.toLowerCase();
//removes space through %20 in output
output = output.replace(/\s/g,'%20');
outputField.textContent = output;
})

attach an eventListener to your input and listen for the input event
let myText = document.querySelector('#myText');
document.querySelector('#myInput').addEventListener('input', function(){
myText.innerText = this.value;
});
span{
display : block;
}
<input type="text" id="myInput" />
<span id="myText"></span>

My validation and the push() is not working

The user has to type the information in a text box and then click on the button to add the names. If the format is correct the name will appear below the text box. If the format is incorrect a message will be generated that reads "Incorrect Format".
The users inputs will create a list of names that will appear underneath the text box.
function validate(name){
var str = [];
var name = document.getElementById("letters");
var check = /^[A-Za-z]+$/;
if(name.value.match(check)){
str.push(document.getElementById("letters"));
document.write("Name: " + name);
}
else{
document.write("Incorrect Format");
}
}
validate();

I think this is what you're trying to achieve:
function validate() {
console.clear();
var check = /^[A-Za-z]+$/;
var inputVal = document.getElementById('letters').value;
if (inputVal.match(check)) {
console.log("Name: " + inputVal);
document.getElementById('container').innerHTML += inputVal + "<br/>";
} else {
console.log("Incorrect Format");
}
}
document.getElementById('btnValidate').addEventListener('click', validate);
<input type="text" id="letters" />
<input type="button" id="btnValidate" value="Validate" />
<div id="container"></div>

How to put required validation in javascript innerhtml input box

function edit_row(id)
{
document.getElementById("monthly_val"+id).innerHTML="<input type='text' id='monthly_text"+id+"' value='"+monthly+"' onkeyup='this.value=Comma(this.value)' 'required'>";
}
The above code is an example of my input field and i want to put required validation so that the data will not be saved when the field is empty.

Try this...
var a = document.getElementById("monthly"+id),
b = document.createElement("INPUT");
b.setAttribute("pattern", "regexp string");
b.setAttribute("formnovalidate", " false");
b.setAttribute("type", "text");
//add other attributes
a.appendChild(b);
/*
Just replace the regexp string*/

if you have textbox id then you can easily find and then you can check input empty or not. you need use this process before saving data.
document.getElementById("monthly_val" + id).innerHTML = "<input type='text' id='monthly_text" + id + "' value='" + monthly + "' onkeyup='this.value=Comma(this.value)'>";
if ($('#monthly_text' + id + '').val() == '') { alert('wala'); }
use this. it helps you

If value is empty

I have some code that saves the users input into local storage and then prints the value into the selected ID.
function saveData() {
var input = document.getElementById("saveServer");
localStorage.setItem("server", input.value);
console.log(localStorage.getItem("server"));
document.getElementById("yourname").innerHTML ="Okay " + (localStorage.getItem("server")) + " Let's get started! Push the button on the right to begin the story!" ;
}
How do I make it so if the input field is empty a statement is produced informing the user to input their name.
I've had a look at if and else statements but anything I try doesn't seem to work.
Edit:
Figured it out!
if (saveServer.value == "") {
document.getElementById("yourname").innerHTML = "Please input your name";
}
else {
document.getElementById("yourname").innerHTML ="Okay " + (localStorage.getItem("server")) + " Let's get started! Push the button on the right to begin the story!" ;
}

Add a condition to check if input not empty.
function saveData() {
var input = document.getElementById("saveServer").value;
if(input ==="") alert("Enter saveServer");
else{
localStorage.setItem("server", input.value);
console.log(localStorage.getItem("server"));
document.getElementById("yourname").innerHTML ="Okay " + (localStorage.getItem("server")) + " Let's get started! Push the button on the right to begin the story!" ;
}
}

Like this:
function saveData() {
var input = document.getElementById("saveServer");
localStorage.setItem("server", input.value);
var serverValue = localStorage.getItem("server");
if (!serverValue) {
document.getElementById("error").innerHTML = "Oh dear! Nothing was found";
}
document.getElementById("yourname").innerHTML = "Okay " + (localStorage.getItem("server")) + " Let's get started! Push the button on the right to begin the story!";
}
Fiddle: http://jsfiddle.net/KyleMuir/LhyXr/

Check if placeholder text already exists within a string

I have an #error paragraph. Everytime there is an error within the form on submit. The inputs placeholder text gets added to the #error paragraph.
My problem:
It happens everytime a user clicks submit. So the #error message returns:
Please fill in yourfirst name, last name, company, position, first
name, last name, company, position, first name, last name, company,
position, first name, last name, company, position, first name, last
name, company, position, first name, last name, company, position,
I've looked for other solutions and tried this:
if (input.attr('placeholder').indexOf($('#error')) >= 0){
} else{
$('#error').append(input.attr('placeholder').toLowerCase() + ', ');
}
Is there any way to check if the placeholder text already exists in the #error message? Here's a fiddle. I'm sorry it's so convoluted. But its what i've been working on and had it handy.
Thanks for your help in advance!

http://jsfiddle.net/8YgNT/20/
var errorText = '';
//Validate required fields
for (i = 0; i < required.length; i++) {
var input = $('#' + required[i]);
if ((input.val() == "") || (input.val() == emptyerror)) {
input.addClass("tobefixed");
errornotice.fadeIn(750);
if (input.attr('placeholder').indexOf($('#error')) >= 0) {
// do nothing
} else {
errorText = errorText + $(input).attr('placeholder').toLowerCase() + ', ';
}
input.val(emptyerror);
errornotice.fadeIn(750);
} else {
input.removeClass("tobefixed");
}
}
$('#error').html('').append('Please fill in your ' + errorText);

I simple add one line in your fiddle and it's working now:
required = ["id_first_name", "id_last_name", "id_firmbox", "id_job_title"];
errornotice = $("#error");
emptyerror = "Please fill out this field.";
$("#startform").submit(function(){
//Validate required fields
$("#error").html("Please fill in your");
for (i=0;i<required.length;i++) {
var input = $('#'+required[i]);
if ((input.val() == "") || (input.val() == emptyerror)) {
input.addClass("tobefixed");
errornotice.fadeIn(750);
// =====Here===== //
if (input.attr('placeholder').indexOf($('#error')) >= 0){
} else{
$('#error').append(input.attr('placeholder').toLowerCase() + ', ');
}
// ============== //
input.val(emptyerror);
errornotice.fadeIn(750);
} else {
input.removeClass("tobefixed");
}
}
if ($(":input").hasClass("tobefixed")) {
return false;
} else {
errornotice.hide();
return true;
}
});
$(":input").focus(function(){
if ($(this).hasClass("tobefixed") ) {
$(this).val("");
$(this).removeClass("tobefixed");
}
});
This line do the all trick:
$("#error").html("Please fill in your");
Saludos ;)

If you want to check whether #error contains the string you're wondering about, you can use
($('#error').text().indexOf(a_string)) != -1
This will return true if #error contains a_string.
There's a longer discussion on searching strings for other strings in this question.

It seems you're doing it the wrong way round (and forgetting to get the text out of the #error element):
if ( $('#error').text().indexOf( input.attr('placeholder') ) >= 0)