We Keep Coding

How to get text from input form?

Input form: I can type random text and get the output in the console, like so: "getWeather.html?city=London:76"
This is the code:
HTML:
<form>
<input type="text" name="city" placeholder="Enter City here..">
<input type="submit" value="Submit">
</form>
javaScript:
var input = $('input')[0].form.city.value;
console.log(input);
However, I would like to get the input directly into a variable. In this case 'London'.

From what i understand, the way you are getting the city value is wrong.
Here I'm using a JQuery selector with an attribute value lookup. The selector basicly says: Look for every input with the attribute name equals to city.
Then i'm using the val() function to get the value. I've added a ev paremeters which is the Javacript event and i have stopped it using ev.preventDefault();. This prevent the page from reloading.
To conclude, I've simply console.log the value.
$('form').on('submit', function(ev) {
ev.preventDefault();
var value = $('input[name=city]').val();
console.log(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="city" placeholder="Enter City here..">
<input type="submit" value="Submit">
</form>

Javascript - How to add form's input into the dom properly?

I'm just trying to make a simple javascript form where everytime you type and submit something, it shows up in the page.
<form id="myForm">
<input id="text" type="text" name="name" value="">
<input id="submit" type="submit">
</form>
javascript:
document.getElementById("myForm").addEventListener('submit', function(){
var input = document.getElementById("text")
var output = input.value;
var printOutput = document.createElement('h1');
printOutput.innerHTML = output;
document.body.appendChild(printOutput);
});
This shows up for a second then disappears. I understand it's happening because the dom manipulation is happening inside the submit event. But I'm not sure how to go around that.
My first instinct was to use
return output;
then reference the whole function once I appendChild from outside it. But that didn't work either. I'm guessing cause It's an Eventlistener and not a normal function... any ideas on how to go with this?

You are ignoring the form primordial sense that is to send data over a server.
You don't need aform for what you intend. you need only input elements and a handler on the button.
function handler (){
var input = document.getElementById("text")
var output = input.value;
var printOutput = document.createElement('h1');
printOutput.innerHTML = output;
document.body.appendChild(printOutput);
document.getElementById("text").value='';
}
document.getElementById("submit").addEventListener('click', handler);
document.getElementById("text").addEventListener('keypress', function(e){ (e.charCode == 13) && handler();});
<div id="myForm">
<input id="text" type="text" name="name" value="">
<input id="submit" type="submit">
</div>

Add return false; at the end of the event listener. This stops the submit from actually happening which refreshes the page

Try this instead:
document.getElementById("myForm").addEventListener('submit', function(event){
event.preventDefault();
var input = document.getElementById("text")
var output = input.value;
var printOutput = document.createElement('h1');
printOutput.innerHTML = output;
document.body.appendChild(printOutput);
});

the simplest way of getting input and display on the same page is
function display()
{
var input=document.getElementById("text").value;
document.getElementById("display").innerHTML=input;
}
<form id="myForm">
<input id="text" type="text" name="name" value="">
<input id="submit" type="button" onclick=display() value="submit">
<div id="display"></div>
</form>
if you want to display multiple inputs i.e. each input entered by the user.
document.getElementById("display").innerHTML += input+"<br>";
Note: Always try to write easiest and shortest code for the optimized result.

yes it behaves how it should. it's form and what it does it submits all information to new page. you didn't provide action='' parameter and means it sends information on same page. when you click submit what happens is first you append h1 element and then it reloads, that's why it disappears. if you don't have other page to submit information get rid of forms.
<input id="text" type="text" name="name" value="">
<input id="submit" onclick='return getoutup();' type="submit">
<h1 id='output'></h1>
<script type="text/javascript">
function getoutup(){
document.getElementById('output').innerText=document.getElementById('text').value;
return false;
}
</script>
so you see that i have pre-created h1 tag, so you don't need much coding to append as function goes. just pre create with value of none and then change with one line of code. hope it helps. maybe it's not correct answer kind of changed your way.

Very Basic Math Script Using AJAX?

I wanna ask if is it possible to do very basic math inside form's input text field using AJAX? I know its possible with javascript/jquery but I don't want to having to clicking submit button and reload the page to see the result. I want the math calculation with instant result inside the input text field.
example:
Input Text Field 1 + Input Text Field 2 = (Shows Instant Result in Input Text Field 3)

You may do the following
http://jsfiddle.net/dharam1987/L9evdhkk/
Val 1 <input type="text" name="f1" id="f1" /> <br />
Val 2 <input type="text" name="f2" id="f2" /> <br />
Result <input type="text" name="res" id="res" /> <br />
<input type="button" value="Add" onclick="calculate();" />
<script>
function calculate() {
var f1 = parseInt(document.getElementById('f1').value);
var f2 = parseInt(document.getElementById('f2').value);
var res = f1 + f2;
document.getElementById('res').value = res;
}
</script>

You can do that using javascript/jQuery. Ajax has nothing to do with it. Use a change or keypress event.
This should give you the idea:
$("myInputSelector").on("keyup", function () {
var theTwoSelectors = $("myInputSelector"),
total = 0;
theTwoSelectors.each(function () {
var value = $(this).val();
if(value)
total += parseInt(value);
});
$("myResultSelector").val(result);
});

You can use this simple HTML
Lets try an Example for the above requirement
example:
We can simply use the tag
here the below output tag will show the result of input tag "a" value multiply by 5...
<form oninput="o.value = parseInt(a.value) *5">
<input type="number" id="a" name="a">
<output name="o" id="o"></></output>
</form>
more information please refer this link http://www.w3schools.com/tags/tag_output.asp

Pass a javascript variable through a hidden input

Okay, I have javascript to calculate a dynamic price for an HTML form. The code is as follows:
jQuery("input[name='Amount']").change(function() {
if (isNaN(parseFloat(this.value)) || !isFinite(this.value)) {
jQuery(this).val('');
return false;
}
var calc = parseFloat(this.value) * 0.95;
jQuery(this).parents("form").find("input[name='price']").val(calc);
});
This, with this input:
<input class="irrelevant typeahead" type="text" placeholder="Amount" name="Amount"/>
The javascript takes that value, calculates the price, and I want it to fill this:
<input type="hidden" name="price" value=""/>
I believe my javascript is correct. What do I need to do to the price to make it work?

Make sure you have these items wrapped in a <form> tag.
<form>
<input class="irrelevant typeahead" type="text" placeholder="Amount" name="Amount"/>
<br />
<input type="hidden" name="price" value=""/>
</form>
jQuery("input[name='Amount']").change(function() {
if (isNaN(parseFloat(this.value)) || !isFinite(this.value)) {
jQuery(this).val('');
return false;
}
var calc = parseFloat(this.value) * 0.95;
jQuery(this).parents("form").find("input[name='price']").val(calc);
});
I have a working demo here: http://jsfiddle.net/P55ge/
In the demo I have made the price input a text field instead of a hidden field for ease of seeing the value being set.
Also note, that the field is only updated when you enter a valid number and then click off the field input. The following quote is from the jquery documentation for .change() http://api.jquery.com/change/
Now when the second option is selected from the dropdown, the alert is
displayed. It is also displayed if you change the text in the field
and then click away. If the field loses focus without the contents
having changed, though, the event is not triggered.

Javascript needed for finding a box in a html page then setting contents

Can anyone show me how to get to a text edit box in a html page and set its value using Java script please?

Given a text box
<input type="text" id="MyInput">
You Javascript would look like:
document.getElementById("MyInput").value = "some value";
There will be other ways of doing this if you are using a JavaScript framework, for example in jquery, the following will suffice:
$("#MyInput").val("some value");

<input type="text" id="ExampleTextBox" />
If you know the id of it:
document.getElementById(TEXTBOX_ID).value = YOUR_VALUE;
or in a function:
function chanageTextBoxValue(newValue)
{
document.getElementById('ExampleTextBox').value = newValue;
}

You can access it through your form:
document.myForm.firstName.value = "Hello World";
--
<form name="myForm">
<input type="text" name="firstName" />
</form>