Develop Reference

Can't get my simple JavaScript Event Handler working

I am trying to get an event handler on an HTML form. I am just trying t get the simplest thing working, but I just cannot see what I am missing.
It is part of a wider project, but since I cannot get this bit working I have reduced it down the most very basic elements 1 text field and a button to try and see what it is I am missing.
All I want to do is get some text entered and flash up message in a different area on the screen.
The user enters text into the input field (id=owner).
The plan is that when the button (id="entry") is pressed the event handler (function "entry") in the entry.js file should cause a message to display.
I don't want the form to take me to a different place it needs to stay where it is
I just want some form of text to go in the: <div id="feedback" section.
When I can get it working: I intend the create the text from the various text fields that get entered.
I Know that this is beginner stuff & I know that I have reduced this down such that it barely worth thought but I would welcome any input please & thank you.
HTML code is:
<form method="post" action="">
<label for="owner">Input Owner: </label>
<input type="text" id="owner" />
<div id="feedback"></div>
<input type="submit" value="enter" id="entry" />
</form>
<script src="entry.js"></script>
Code for entry.js is:
function entry() {
var elOwner = document.getElementById('owner');
var elMsg = document.getElementByID('feedback');
elMsg.textContent = 'hello';
}
var elEntry = document.getElementById('entry');
elEntry.onsubmit=entry;
I have tried:
Adding in a prevent default:
window.event.preventDefault();
doing this through an event Listener:
elEntry.addEventListener('submit',entry,false);
using innerHTML to post the message:
elMsg.innerHTML = "
At present all that happens is that the pushing submit reloads the page - with no indication of any text being posted anywhere.

One issue is that you have a typo, where getElementById capitalized the D at the end.
Another is that preventDefault() should be called on the form element, not the input.
Here's a working example that corrects those two mistakes.
function entry(event) {
var elOwner = document.getElementById('owner');
var elMsg = document.getElementById('feedback');
elMsg.textContent = 'hello';
event.preventDefault();
}
var entryForm = document.getElementById('entry').form;
entryForm.onsubmit = entry;
<form method="post" action="">
<label for="owner">Input Owner: </label>
<input type="text" id="owner" />
<div id="feedback"></div>
<input type="submit" value="enter" id="entry" />
</form>
I also defined a event parameter for the handler. I don't remember is window.event was ever standardized (it probably was), but I'd prefer the parameter.
Be sure to keep your developer console open so that you can get information on errors that may result from typos.

var elEntry = document.getElementById('entry');
elEntry.addEventListener("click", function(e) {
e.preventDefault();
var elMsg = document.getElementById('feedback');
elMsg.textContent = 'hello';
});
<form method="post" action="">
<label for="owner">Input Owner: </label>
<input type="text" id="owner" />
<div id="feedback"></div>
<input type="submit" value="enter" id="entry" />
</form>

How to use information from created function to get added in new <p> tag

I'm currently trying to make a form where people can input information, and the info will then show up in a new div afterwards within a paragraph tag.
<form id="form" onsubmit="return false;">
<input type="text" id="userInput">
<input type="submit" onclick="addParagraphs()"> <!-- button -->
</form>
The way I'm currently trying to make it work is by having a function that looks at what information gets filled out, this is done by;
function othername() {
var input = document.getElementById("userInput").value;
}.
This way I am able to "save" the info, but my issue comes when I have to make it appear I a paragraph later on. I cannot for the life of me, figure out how to recall this stored information. The way I have tried is the following:
function addParagraphs()
{
var para = document.createElement("p");
var node = document.createTextNode(othername());
para.appendChild(node);
var element = document.getElementById("sizeValgt");
element.appendChild(para);
}
The "sizeValgt" is the id for the new div where the paragraph tag, is gonna be created when filling out the information.
This might be a little confusing, but I hope some people are able to understand what I'm trying to do here.

There are some mistakes in your code
First: : you are not returning value from your othername function
Second: you are not adding this value in p tag
function othername() {
var input = document.getElementById("userInput").value;
return input;
}
function addParagraphs(){
var para=document.getElementById("test");
if(para==null){
para = document.createElement("p");
para.id="test";
}
para.innerText=othername();
var element = document.getElementById("sizeValgt");
element.appendChild(para);
}
<form id="form" onsubmit="return false;">
<input type="text" id="userInput">
<input type="submit" onclick="addParagraphs()"> <!-- button -->
</form>
<div id="sizeValgt"></div>

You can do it simply in jquery. Example:
HTML
<input type="text" id="uinput"/>
<input type="submit" id="usubmit"/>
<p id="dis"></p>
Jquery
$(document).ready(function(){
$('#usubmit').click(function(){
var utext= $('#uinput').val();
$('#dis').html(utext);
});
});

How do i add custom code from a user inside the <head> tag

i created a form builder, however, i need to find a way to have the person add their own tracking codes when they publish the forms, these tracking codes go in the code.
<section class="tracking-codes">
<h2> Please enter all tracking codes in here: </h2>
<form>
<input type="text" id="code" placeholder="Facebook Pixel"> </input>
<button type="button" onclick="codes()"> Add Code </button
</form>
</section>
here is my js
function codes ()
{
var trackingCode = document.getElementById('code');
document.head.appendChild(trackingCode);
console.log(trackingCode);
}
at this point, it does append the id of code but only the part of
<input type="text" id="code" placeholder="Facebook Pixel">
and not the user input, how would i go about doing this?
I have also tried the .value at the end of making the var of trackingcodes but it doesnt work.

Instead of adding html to the head section, you should use a hidden field input. Add it like this:
function codes ()
{
var trackingCode = document.getElementById('code').value;
var element = document.createElement('input');
element.type = 'hidden';
element.id = 'tracking';
document.head.appendChild(element);
console.log(trackingCode);
}

I need to dynamically update an iframe using an input from a user

I have been searching for the right information for days and weeks now, and I must just be missing it. I have a simple problem, so it would seem. I have an iframe, which loads with a default URL. I also have a text box, and a submit button. What I want to do now, is to let the user input a URL, and then have the URL displayed in the iframe. Please don't suggest I simply do other things, or ask why I want to do this. It is a ongoing learning process.
I have a java-script function that works when I use the "onclick" function. Here is the java-script:
<script>
function setURL(url){
document.getElementById('myframe').src = url;
}
This works with a set url function such as this:
<input type="button" id="mybutton" value="Home Page" onclick="setURL('includes/guests.php')" />
The function works in that kind of scenario just fine. But, I want to instead, replace "onclick="setURL('includes/guests.php')" with the url entered by the user in this line:
<input type="text" name="sendurl" size="100">
I am unsure exactly how to get this to work right. I want the iframe to be loaded with the url the user inputs. If i use a standard submit, and submit the form to itself, the post info for the url can be checked, and i even verified it works.
if($_POST['sendurl'] != null) {
$tisturl = $_POST['sendurl'];
}
echo $tisturl;
echo $tisturl is simply to show me that it is carrying the url over correctly.
My problem is, how do I now dynamically update the iframe to the new url value?

Here is working code for something that will take what is typed by the user into a text box and use that as the src for the iFrame. Check your console to see if there are further errors (like Mixed Content security warnings, etc.).
<script>
function myFunction() {
url = document.getElementById('newURL').value;
url = url.replace(/^http:\/\//, '');
url = url.replace(/^https:\/\//, '');
url = "https://" + url;
document.getElementById('myframe').src = url;
};
</script>
<input type="button" id="mybutton" value="Home Page" onclick="myFunction()" />
<input type="text" id="newURL" />
<iframe id="myframe" src="">
</iframe>
I've updated the script to remove http:// and https://prefixes before prepending https:// to ensure it tries to fetch secure resources.

This will work. It will show the loaded URL of the iframe n the text box and it will load the URL typed in the text box to the iframe using the button in the page or the enter key on your computer.
NOTE: You do not need to have a URL, you can have anything you want, this is just an example.
JavaScript
<script language="JavaScript">
function handleKeyPress(e)
{
var key=e.keyCode || e.which;
if (key==13){
event.preventDefault();
GoToURL();
}
return false;
}
function GoToURL()
{
var URLis;
URLis = document.URLframe.u.value
test1 = document.URLframe.u1.value
test2 = document.URLframe.u2.value
// just add more of these above the more text boxes you want to use for it, or you can just have one.
{
var location= ("http://" + URLis + test1 + "anything_you_want" + test2 + ".com"); // delete or add the name of the text boxes of above.
window.open(location, 'iframefr');
}
}
</script>
Boby HTML
<form name="URLframe" id="URLframe" method="post">
<iframe name="iframefr" id="test" src="https://www.4shared.com/privacy.jsp" onload="loadurl();" width="100%" height="528px"></iframe>
<input type="text" name="u" size="71" value="" placeholder=" URL " id="SeekBox" onkeypress="handleKeyPress(event)">
<br>
<input type="text" name="u1" size="71" value="" placeholder=" U1 " onkeypress="handleKeyPress(event)">
<br>
<input type="text" name="u2" size="71" value="" placeholder=" U2 " onkeypress="handleKeyPress(event)">
<input type="button" id="SeekButton" onclick="GoToURL(this);" value=" go ">
<script type="text/javascript">
function loadurl() {
document.getElementById('SeekBox').value = document.getElementById('test').src;
}
</script>
</form>
NOTE: It is important that the function loadurl() is last in the <form>code and not in the head code as the rest of the javascript.

simple javascript error - Button click appends query string on form submit

I've got a simple form that when a button is clicked, it calculates a link via concatenation and outputs the link on the same page by overwriting an existing method. The page should not redirect anywhere, even to itself.
The problem is that it appends a query string to the URL (ie /linkgenerator.html becomes /linkgenerator.html?generatelink=Generate+Link#), which actually causes two things to happen :
1) The form submits the first time properly, and then immediately reloads the page again, losing your input. Once you submit it again on the reloaded page, you're okay.
2) The query string causes the script to not work -period- when running on the local file system in IE7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SRP Link Generator</title>
<script language="javascript" type="text/javascript">
function dogeneratelink()
{
var code1= document.getElementById("code1").value;
var brand = document.getElementById("brand").value;
var code2= document.getElementById("code2").value;
var errors = checkerrors(prop, srp);
if (errors)
{
alert(errors);
return;
}
var link = "http://www." + brand + ".com/" + code1 + "/" + code2;
var a = document.getElementById("link");
a.href = link;
a.textContent = link;
}
function doclear()
{
var a = document.getElementById("link");
a.href = '';
a.textContent = '';
}
function checkerrors(code1, code2)
{
var errors;
var propset;
if (code1.length != 5)
{
errors = "You must enter a valid Code 1";
code1set = 1;
}
if ((code2.length < 4) || (code2.length > 5))
{
if (code1set == 1)
{
errors += " and Code 2";
}
else
{
errors = "You must enter a valid Code 2";
}
}
return errors;
}
</script>
</head>
<body>
<form action="#">
<h1>Link Generator</h1>
<div class="row">
<label>Code 1:</label>
<input type="text" id="code1" />
</div>
<div class="row">
<label>Brand:</label>
<select id="brand">
<option value="brand1">Brand 1</option>
<option value="brand2">Brand 2</option>
<option value="brand3">Brand 3</option>
</select>
</div>
<div class="row">
<label>Code 2:</label>
<input type="text" id="code2" />
</div>
<div class="row">
<div class="buttonrow">
<input type="submit" onclick="dogeneratelink()" id="generatelink" name="generatelink" value="Generate Link" class="button"/>
<input type="submit" onclick="doclear()" id="clear" value="Clear" class="button"/>
</div>
</div>
</form>
<div id="generatedlink"><a id="link"></a></div>
</body>
</html>
I've tried taking the action="#" out, but it doesn't seem to do anything.
All I want is the link to be calculated and immediately displayed on the screen.
Looking forward to your feedback! Thanks!
edit The form now behaves properly on submit, thanks to your advice of changing the submit type to a button.
The script works perfectly in Firefox. Unfortunately, I need it to work in IE7, and it doesn't. The validation alerts are being properly called, but the correct link is not being displayed on the page. Can anyone figure out what I did wrong?
I am not getting any Javascript errors or warnings.
edit again The last error was caused because I was using "textContent" and not "innerHTML"
Everything works now!

You don't need a form submission because you don't have to post anything to the server, all works are done by client side.
There are two ways to fix this:
add 'return false' to you onclick handler
<input type="submit" onclick="dogeneratelink(); return false" id="generatelink" name="generatelink" value="Generate Link" class="button"/>
<input type="submit" onclick="doclear(); return false" id="clear" value="Clear" class="button"/>
change the input type to button
<input type="button" onclick="dogeneratelink()" id="generatelink" name="generatelink" value="Generate Link" class="button"/>
<input type="button" onclick="doclear()" id="clear" value="Clear" class="button"/>

<form action="" onsubmit="return false;">

Replace <form action="#"> with <form> to post back to the current page, though this isn't a valid HTML technique, it works in all browsers.

Change the submit type in inputs. You don't need to send info somewhere else, then use a button
<button type="button" onclick="something();">Click Me!</button>
or styled a tag
Click Me!

Check out this working example, much simpler than what you're trying to do. Notice the link and where the link points to both change on clicking the button. You can add stuff to the textbox and it will change the link's href.
http://jsfiddle.net/BpEMA/1/
You've worked yourself into some very complicated code. Firstly, use jQuery (the learning curve is really small and the benefit is huge). Then, simplify what you're trying to do.