Develop Reference

Javascript / HTML Question: Taking an input value from a form, and using this to send user to a URL

Thanks for reading. I'm a novice with Javscript, and have done a lot of searches to try and figure this out... (to no avail)
I'm trying to create a situation where the user inputs a single word on a form. And then when they click a submit button, the website takes the word from the input, appends it on the end of an incomplete URL, and sends them to that completed URL.
It's easy probably easy to see why this doesn't work to some of you. And also, embarassingly, I imagine a completely different approach would be best.
Your advice is appreciated.
<form action="https://vrnaut.neocities.org/" method="get">
<label for="MyForm">Enter One Word:</label>
<input type="text" id= "OneWord" name="OneWord" required>
</form>
<button onclick="myFunction()">Submit</button>
<script>
function myFunction(form) {
var GoHere = form.OneWord.value;
location.replace("https://vrnaut.neocities.org/" + GoHere);
}
</script>

Place the button inside you form
Never listen for buttons click - rather use the FORM's "submit" Event:
const EL_form = document.querySelector("#myForm");
const EL_word = document.querySelector("#OneWord");
EL_form.addEventListener("submit", (ev) => {
ev.preventDefault();
location.replace(EL_form.action + EL_word.value);
});
<form id="myForm" action="https://vrnaut.neocities.org/" method="get">
<label for="MyForm">Enter One Word:</label>
<input type="text" id="OneWord" name="OneWord" required>
<button type="submit">Submit</button>
</form>

Your approach is perfectly fine. All that's needed is a little tweaking.
<form action="https://vrnaut.neocities.org/" method="get">
<label for="MyForm">Enter One Word:</label>
<input type="text" id= "OneWord" name="OneWord" required>
<button onclick="myFunction(this.parentElement)">Submit</button>
</form>
<script>
function myFunction(form) {
var GoHere = form.getElementsByTagName("input")[0];
location.replace("https://vrnaut.neocities.org/" + GoHere.value);
}
</script>

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>

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.

Help - Post Dynamic Data

Overview:
I got a website that has sentences that people can post to facebook, but in each sentence there are input boxes, which people can change the default value. Kinda like an digital "Mad Lib".
EXAMPLE
I like __ and I think he is __.
the underscores would be a text-field with a default value that would disappear once someone focuses on it.
Final string: I like JEN and I think she is HOT.
GOAL
Save final String and Post to Facebook (not worried about the facebook yet)
HTML
<span>I like</span>
<input name="post1_1" value="Tom" type="text" id="post1_1" />
<span>I think she is</span><input name="post1_2" value="Nice" type="text" id="post1_2" />
POST NOW
<span>My website is</span>
<input name="post2_1" value="Great" type="text" id="post2_1" />
POST NOW
SCRIPT
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script>
var post1_1 = null;
var post1_2 = null;
var post2_1 = null;
function Post1(){
var post1_1 = $('#post1_1').val();
var post1_2 = $('#post1_2').val();
var post1 = 'I like ' + post1_1 + ' I think she is ' + post1_2;
alert(post1);
}
function Post2(){
var post2_1 = $('#post2_1').val();
var post2 = 'My website is ' + post2_1;
alert(post2);
}
</script>
I am very new to web any help would be appreciated.

At a quick glance, there are a few things wrong with your script.
post1_1 = ('#post1_1').val();
post2_1 = ('#post2_1').val();
post2_2 = ('#post2_2').val();
I'm assuming you're using jQuery here. You need the $ in front of the ().
post1_1 = $('#post1_1').val();
post2_1 = $('#post2_1').val();
post2_2 = $('#post2_2').val();
Second, you set these after you set the post variables.
var post1 = 'Your are' + post1_1;
var post2 = 'You smell like' + post2_1 + 'and' + post2_2;
This will be "Your are null" (which, i'm assuming should be "You are"). You should set the variables to the input values before you use them.
var post1_1 = $('#post1_1').val();
var post2_1 = $('#post2_1').val();
var post2_2 = $('#post2_2').val();
var post1 = 'Your are' + post1_1;
var post2 = 'You smell like' + post2_1 + 'and' + post2_2;
alert(post1);
alert(post2);
I know this is just an example, but there is no post2_2 in your HTML, and the sentences in the HTML don't match those in the JavaScript.

I think you should consider only the two text fields and an ID of the current sentence. Like sentence_id[], field1[], field2[]. You can treat it as array:
<form action="javascript:;">
<div id="sentence-0">
<input type="hidden" name="sentence_id[0]" value="1" />
John is at <input type="text" name="field1[0]" /> with <input type="text" name="field2[0]" />
<button id="submit-sentence-0" class="submit">Send</button>
</div>
<div id="sentence-1">
<input type="hidden" name="sentence_id[1]" value="2" />
Mary is at <input type="text" name="field1[1]" /> working with <input type="text" name="field2[1]" />
<button id="submit-sentence-1" class="submit">Send</button>
</div>
</form>
Just an idea, hope it helps you.

I can think of many ways as to how this could be implemented, but the way this question is worded leaves a lot of ambiguity to what one exactly wants.
Consider the following:
Pre-generated statements such as: I like X and I think he is Y.
Where X and Y could be a dropdown or textbox control of choices.
I believe one said something like a textbox, so an html form would be appropriate.
Static example (to be handled by php/django/rails/etc):
<form action="/status/" method="post">
I like <input type="text" name="noun" />
and I think he is <input type="text" name="verb" />
<input type="submit" value="Update" />
</form>
Now modify this to fit the server side language to handle the request.
Now for a Javascript example (I'm not very good with js):
<form name="status" action="handle-data.js">
I like <input type="text" name="noun" />
and I think he is <input type="text" name="verb" />
Update
</form>
<script type="text/javascript">
function submitform(){
document.status.submit();
}
</script>
In the handle-data.js one would likely manipulate the data or whatnot.
See http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml
for more Javascript examples.

Javascript Logic Problem

I know only what I need but I do not know how to get that done.
This is the logic of the code, I really hope some of you has the solution.
How can I create in javascript or jQuery a function that will do the following?
If that checkbox is selected, when the button is clicked redirect the user to another page by passing the value of the textarea in the URL.
So that is the logic.
We have three elements.
1)The checkbox
2)The input type button
3) The textarea.
The checkbox is selected, the user clicks on the button and the user goes to another page , and the URL will include the value found in the textarea.
i.e.
http://mydomainname/page.php?ValueThatWasinTextArea=Hello World
Can you help me.
I think it is something simple for a javascript coder.
Thank you so much

$(function(){
$(':button').click(function(){
if($('input[type="checkbox"]').is(":checked")){
window.location.href = "http://mydomainname/page.php?ValueThatWasinTextArea="+ $('textarea').val();
}
});
});
**Of course if there's more than these three elements on the page, you're going to want some more specific selectors

You could subscribe to the submit event of the form and inside test if the checkbox was checked and if yes use window.location.href to redirect to the desired url:
$('#id_of_the_form').submit(function() {
var value = encodeURIComponent($('#id_of_textarea').val());
if ($('#id_of_checkbox').is(':checked')) {
window.location.href = '/page.php?ValueThatWasinTextArea=' + value;
return false;
}
});
If the button is not a submit button you can subscribe for the click event of this button and perform the same logic.

Might be some syntax problem because I code this on top of my head
<input id="myCheckbox" type="checkbox" />
<button id="myButton" onClick="buttonClick" />
<input id="myTextArea" type="textarea" />
<script>
function buttonClick()
{
var checkBox = document.getElementById('myCheckbox');
var textArea = document.getElementById('myTextArea');
if(checkBox.checked)
{
window.location = 'http://mydomainname/page.php?ValueThatWasinTextArea=' + textArea.value;
}
}
</script>

$(document).ready(function() {
$('#btnSubmit').click(function() {
if($('#chkBox').is(':checked')) {
window.location = '/page.php?passedValue=' + $('#txtField').val();
}
});
};
...
<form>
<p>
<input type="checkbox" id="chkBox"> Checkbox</input>
</p>
<p>
<input type="text" id="txtField" value="" />
</p>
<p>
<input type="submit" id="btnSubmit" value="Submit" />
</p>
</form>