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>

JavaScript function return not staying in browser

I am trying to create a very simple HTML site for my co-workers to use for calculating cellular phone pricing based on a formula. I have a form with user inputs to declare the full price of the phone, amount of down payment, etc. Basically everything seems to be working, however the returned answer from my formula in my JavaScript function only displays on the screen for a fraction of a second and the JavaScript seems to reload. Have I unintentionally caused a loop?
I am very new to JavaScript please let me know if I am leaving out any pertinent information to helping to solve this issue. I will include my code below.
<body>
<div id="container">
<form id ="formula">
<fieldset>
<legend> Finance Formula</legend>
<div id="label">
<label for="fullPrice">Full Price:</label>
<br />
<br />
<label for="downPay">Down Payment:</label>
<br />
<br />
<label for="discount">Discount:</label>
</div>
<div id="input">
<input type="text" id="fullPrice" name="fullPrice" />
<br />
<br />
<input type="text" id="downPay" name="downPay" />
<br />
<br />
<input type="text" id="discount" name="discount" />
</div>
</fieldset>
<input type="submit" id="submit" name="submit" onclick="financed();"/>
</form>
</div>
<div class="resultsBox">
<p id="result"></p>
</div>
<script type="text/javascript" language="javascript" charset="utf-8">
function financed(){
var fullPrice = document.getElementById('fullPrice').value;
var downPay = document.getElementById('downPay').value;
var discount = document.getElementById('discount').value;
console.log("The Total Amount Paid for Phone is:" +(((parseInt(fullPrice) - parseInt(downPay)) / 24) - parseInt(discount)) * 24);
};
</script>
</body>
</html>
I have also tried this script instead which is what I found when researching online.
<script type="text/javascript" language="javascript" charset="utf-8">
function financed(){
var fullPrice = document.getElementById('fullPrice').value;
var downPay = document.getElementById('downPay').value;
var discount = document.getElementById('discount').value;
document.getElementById('result').innerHTML = (((parseInt(fullPrice) - parseInt(downPay)) / 24) - parseInt(discount)) * 24;
};
</script>
Basically the end result I am looking for is the answer for the equation within the function to "print" onto the browser and stay there.

HTML elements have default behaviors when they're used-- forms, for instance, will refresh the page on submit. Fortunately, there is a preventDefault method that will stop this behavior. You can read more about it here and here.
You just need to add an event listener to your submit tag, like this:
document.getElementById("submit").addEventListener("submit", function(event){
event.preventDefault();
}

Normally form submit will navigate to the action attribute url, if there is no action attribute, navigate to same page. if you want to avoid this default behaviour you have to modify the tag or submit button like mentioned below.
<form id ="formula" action="javascript:void(0)">
or
<input type="button" id="submit" name="submit" value="clickme" onclick="financed();"/>

It is because your submit input reloads the page by default. Try removing the onClick from submit and calling this instead:
document.getElementById("submit").addEventListener("click", function(event){
event.preventDefault(); // preventing the default submit action
financed();
});

Populate Text Input With Form Buttons

I have a simple html form where I input a title and description and hit submit. At the top of the page are some paragraphs of text that I often copy and paste into these fields. It's a repetitive task, and the paragraphs are generated dynamically with php.
Can I put a button or link at the end of each paragraph or div that would fill in my form input fields with a script? Then all I would have to do is hit submit. I'm already using jquery on the page too.
EDIT:
<p>Sentence one. Longer than this</p><!--would like a button here to populate field in form below-->
<p>Sentence two. Longer than this</p>
<p>Sentence three. Longer than this</p>
<form id="sampleform" action="actionpage.php" method="post">
Title<input type="text" name="title>
Desc<input type="text" name="title>
<input type="submit" value="Submit"></form>

If you have some selector that can select all of the <p> tags that contain those paragraphs, you can do something like the following:
$(function() {
var $descInput = $('input[name=desc]');
// wrap the text of each paragraph in a span so we can target it easily.
// Then add a button inside each <p> at the end that will prepopulate that text.
$('p.prefill').wrapInner('<span class="text"></span>').append('<button class="prefill-sentence">Prefill</button>');
// Add a click handler for all the newly added buttons
$('button.prefill-sentence').click(function() {
// get the contents of the span we used to wrap the sentence with
var sentence = $(this).prev('.text').text();
// add that sentence to the current value of the description input
$descInput.val($descInput.val() + sentence);
});
});
.prefill-sentence {
margin-left: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="prefill">Sentence one. Longer than this</p>
<p class="prefill">Sentence two. Longer than this</p>
<p class="prefill">Sentence three. Longer than this</p>
<form id="sampleform" action="actionpage.php" method="post">
Title
<input type="text" name="title" />Desc
<input type="text" name="desc" />
<input type="submit" value="Submit" />
</form>
(Note I assumed you had a name of "desc" for your description input. Ideally, you can use a class or id to target it easier in the real code).

Is this what you are looking for?
http://plnkr.co/edit/S3OegSh80UH6oQJPDatr?p=preview
$(function(){
$('p').each(function(){
$(this).after('<button>Click<\/button>');
});
$('button').on('click', function(){
var txt = $(this).prev().text();
$('input').eq(0).val(txt);
})
});

You'll probably want to add something more specific to those php-generated paragraphs/divs, so they can safely be selected and manipulated by JS.
CodePen: http://codepen.io/anon/pen/PwJwmO
HTML
<div class="text-section">
Sentence one. Longer than this
</div>
<div class="text-section">
Sentence two. Longer than this
</div>
<div class="text-section">
Sentence three. Longer than this
</div>
<form id="sampleform" action="actionpage.php" method="post">
Title<input type="text" name="title">
Desc<input type="text" name="desc">
<input type="submit" value="Submit">
</form>
JS
var $text_section = $('.text-section');
var $description_field = $('input[name="desc"]');
$text_section.each(function(){
var section_text = $(this).text();
var $autofill_button = $('<button>Autofill</button>');
$autofill_button.click(function(){
$description_field.val(section_text);
});
$(this).append($autofill_button);
});

Get value of form text field with without submitting the form

I have a form on my page and want to be able to submit the text box value (partnumber) as a query string in a hyperlink without submitting the form itself ? Is this possible ?
I have done some research and have tried document.getElementById("partnumber").value but am getting the error "Object Required". Code Below.
<form id="form3" name="form3" method="post" action="formpost?rmaid=<%=rmaid%>">
<input name="partnumber" type="text" id="partnumber" size="10" />
<span class="style11">Suggest Link</span>
<input name="invoice" type="text" id="invoice" size="15" />
</form>
I'll set the new page to open in a pop up window and list a series of values in the database but then I need the value selected to come back into the invoice field on the original page. I believe this can be done with JavaScript but I am new to this, can anyone help ?
For those Looking to pass values back I have found this snippet that works...
Put this in the child window
<script language="javascript">
function changeParent() {
window.opener.document.getElementById('Invoice').value="Value changed..";
window.close();
}
</script>
<form>
<input type=button onclick="javascript:changeParent()" value="Change opener's textbox's value..">
</form>

For the input field you should add an OnChange to it. This event should call a function which will then set your link's value.
You can see an example of this here (it uses a button press though and not an input OnChange Event): http://www.java2s.com/Code/JavaScript/HTML/ChangeURLandtextofahyperlink.htm
Edit: Added a Stack Snippet illustrating the solution.
function SetSuggestLink() {
var suggest = document.getElementById('partnumber').value;
document.getElementById('innerSpan').innerHTML =
"Suggest Link: suggest.asp?partnumber=" + suggest;
document.getElementById('QueryLink').href =
"suggest.asp?partnumber=" + suggest;
}
.style11 {
color:black;
}
.style2 {
text-decoration:none;
}
<form id="form3" name="form3" method="post" action="formpost?rmaid=SomeValue">
<input name="partnumber" type="text" id="partnumber" size="10"
OnChange="SetSuggestLink()" /> </br>
<a id="QueryLink" class="style2" href="#">
<span id="innerSpan" class="style11">Suggest Link</span>
</a></br>
<input name="invoice" type="text" id="invoice" size="15" />
</form>