Develop Reference

How to constantly store input value without submitting

I’m trying to make something where you can input numbers into an input (or would a contenteditable div be better?) and it does some calculations to them and sets the content of another div as the answer. How can I make it so that the other div will update whenever the number changes? I would prefer to make it so that there isn’t a submit button so the number instantly changes as you type it. I could probably achieve this by updating it every time there is a keystroke but the problem is storing the input data without pressing a submit button

First, please take some time to format your questions in the future. This is a difficult read.
Second please try and include all the information to show how far you have gotten.
Also I wasn't really clear what you are trying to do.
What you are looking for is called two way data binding, there are many different options for it, but it doesn't mean that's what you need. It seems like the following would be a good solution for you.
function doSomeCalculationsAndDisplay(event){
const elem = document.getElementById('input');
console.log(elem.value);
document.getElementById('result').innerText = 'Double value: ' + parseFloat(elem.value) * 2;
}
<input id="input" type="number" onKeyUp="doSomeCalculationsAndDisplay()" onChange="doSomeCalculationsAndDisplay()">
<div id="result"></div>

I always seem to figure it out on my own as soon as I make a post about it. It's not very complicated, the problem I had is that I was trying to get the innerHTML of an input which isn't possible, I needed to get its value instead.
To accomplish this all you need to do is make an input, div, and function that sets the div as the input document.getElementById('test1').innerHTML = document.getElementById('input1').value; and call this function onkeyup in the input.

how to insert value in input, with javascript

So I tried to do something like this -
$('#price').val(price);
price is 300, and it shows good on browser, in input field, but when I want to take it out and mail it with PHP, in $_POST['price'] it doesn't show up, How can I insert something in inputs value with JavaScript, so I can mail it? It seems this is not an insertion in value, but just a feature to display something, correct?

Maybe this code can help you
document.getElementById('yorInputID').value = "Your Value";

There are a few possible reasons:
1) Your input field is not inside the form.
2) You are actually using a GET and not a POST.
Assuming that you can see the value updated in Firebug or Chrome's equivalent, it's gotta be one of those. Switch over to using $_REQUEST and see if that changes anything.

Your input for #price needs to also have a name "price"
<input id="price" value="price" />
From your question I'm assuming that this input is hidden -- and if that's the case I want to advise you not to rely on hidden fields + Javascript to provide you with security. It's so easily hackable I wouldn't even call it hacking.

Make sure the input is not "disabled" when the form submits.
if it's disabled the form don't send it.

really simple javascript to remove value in text box

iv got a really simple javascript question. Ill be using query for parts of it here but there are akin ways of doing it via javascript. basically, I'm writing a little script that makes it so when you click a text box with a value in it, it will take out the value so your can type (ex for most username boxes they have a little note in there). there are probably much better ways of doing this (i can already think of some) so feel free to suggest them as well. anyways I got that part running easily, the problem is that whenever a user clicks again all the data is removed, so if they just want to adjust something they can't. to solve this (ill show code in sec) i put a check variable and an if. this is what it looks like. (it doesn't work, btw)
var unumber = 0;
var pnumber = 0;
if(unumber<1){
$('#username').click(function(){
unumber = 1;
$('#username').val('');
});
};
if(pnumber<1){
$('#password').click(function(){
$('#password').val('');
pnumber = 1;
});
};
what I'm assuming happens is that every time some one clicks the variables are reset, and this leads to a more general question if this is this case, why would the whole script, not just the event handler, run? Im new to javascript so forgive me if this is a stupid question. Anyways, this is a really simple script and there are better and more efficient ways to do it, but how can it be done this way?

Your check for number less than 1, should be within the click handler
var unumber = 0;
var pnumber = 0;
$('#username').click(function(){
if(unumber<1){
unumber = 1;
$('#username').val('');
}
});
$('#password').click(function(){
if(pnumber<1){
pnumber = 1;
$('#password').val('');
}
});
Note that this is not very robust, it doesn't handle tabbing into the fields. To fix that, handle the focus event.
Another problem is that you don't get the message back if you don't type anything and leave the field. A better approach is to compare against the initial value when the field receives focus. If there's nothing in there when you leave the field, restore to the original value.
Here's a jQuery plugin for creating these placeholders: https://github.com/mathiasbynens/Placeholder-jQuery-Plugin
Also, newer browsers support a placeholder attribute that does exactly that http://www.paciellogroup.com/blog/2011/02/html5-accessibility-chops-the-placeholder-attribute/

I'd say the best way of doing this is to have a clear button inside the text input. See here for an example : How do I put a clear button inside my HTML text input box like the iPhone does?

No need for the messy number checking, use data on the element in question
This should work for you.
$('#username,#password').focus(function(){
if(!$(this).data('seen')) {
$(this).data('seen',true);
$(this).val('');
}
});
http://jsfiddle.net/DeZ7D/
You could store the placeholder and replace back on blur if the user hasn't entered anything.
more detailed implementation here:
http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

Grab text input as the user types

I'm trying to update a span tag on the fly with data from an input text field. Basically I have a text field and I'd like to be able to grab the user's input as they type it and show it to them in a span tag below the field.
Code:
<input id="profileurl" type="text">
<p class="url">http://www.randomsite.com/<span id="url-displayname">username</span></p>
JQuery:
var username;
$('#profileurl').keyup(function(username);
$("#url-displayname").html(username);
See it in JS Fiddle: http://jsfiddle.net/pQ3j9/
I'm guessing the keyup function is not the best way to do this. Since checking the key wouldn't be able to grab prefilled or pasted form input.
Ideally there is some magical jQuery function that can just output whatever info is in the box whenever it detects a key up but if that method exists I haven't found it yet.
EDIT: You guys are fricken amazing. It looks like .val() is that magic method.
Second question: How would you restrict input? Looking at the modified jsfiddle's, when a user inputs an html tag like < hr > the browser interprets it and breaks the form. Do you specify an array and then check against that? Does jquery have anything like PHP's strip_tags function?

$('#profileurl').keyup(function(e) {
$("#url-displayname").html($(this).val());
}).keypress(function(e) {
return /[a-z0-9.-]/i.test(String.fromCharCode(e.which));
});
check out the modified jsfiddle:
http://jsfiddle.net/roberkules/pQ3j9/5/
Update: As #GregL points out, keyup indeed is better, (otherwise e.g. backspaces are not handled at all).

Similar to roberkules' answer, but using keyup() like you proposed seems to work better for me in a Chrome-based browser:
$('#profileurl').keyup(function(e) {
$("#url-displayname").html($(this).val());
});
Updated jsFiddle: http://jsfiddle.net/pQ3j9/3/

For the second question, if you wish to maintain characters and not have them parsed as html entities then you should do this instead :
$('#profileurl').keyup(function(key) {
$("#url-displayname").text($(this).val());
});
Check it out at - http://jsfiddle.net/dhruvasagar/pQ3j9/6/

You can bind multiple events with bind
http://jsfiddle.net/dwick/DszV9/

How do I implement that "help text" thing like the stackoverflow quick search has?

this is going to be a total newbie question but I can't really do a google search cos I'm not sure what it's called.
You know that the quick search bar on the top right hand corner in StackOverFlow?
You know how it's got "search" written there, and when you click on it, it goes blank, what's the best way to implement this?
I see the javascript has this in stackoverflow.
onfocus="if (this.value=='search') this.value = ''" value="search"
But if I have a seperate search button, and the user doesn't focus on that search criteria (it's got multiple search criterias), I would need to take the "search" into account.
I would need to do something like
if(textbox1.Text == "search")
{
textbox1.Text = "";
}
That just seems a bit annoying having to put the text ("search") in 3 places. Twice in the markup and once in the code behind.
Is there another way of doing this?

The term you're looking for is "placeholder". Other than doing it manually, there's the HTML5 placeholder attribute which is being supported by more browsers as time goes by.

Looks like the SO search does what you did where the onFocus clears the text if the text is search. You can prove this by typing search into that box, click somewhere, then click back in the text box and it is removed. Do the same thing using "test" and it is not removed.
If you do end up implementing it manually make sure you use a constant instead of using "search" in multiple places. Using a constant is less error prone because you won't mis-type and if you change what you want it to say you will only have to change it in one place.

Yes, there are other ways to do it, but all of them will require typing more than just "search" 3 times.
For example, you could put a constant string in your class like this:
const string SearchText = "search";
Then, in your class you would say something like this:
if(textbox1.Text == SearchText)
{
textbox1.Text = "";
}
And in your aspx page you would say:
onfocus="if (this.value=='<%= SearchText %>') this.value = ''" value="<%= SearchText %>"
Now, doesn't it seem a lot simpler to just write the word "Search" 3 times?

If you have a button written "search" on it, you don't need the text on the input field, because it's obviously a search input. Here in sof there's no search button or label, so if there's no text on the input, you don't know what it's for.
In your case, there's 3 boxes for 3 search criterias. So instead of putting "search" on all of then, you should put the search criteria description. This is just to save the space a label would take. If you use labels, you don't need the text inside the input.
Finally, if on the back end you receive the input value as the description text, just ignore it.

Well the real answer is to use a javascript framework like jQuery where binding this stuff becomes much less repetitive than inline event stuff.
Otherwise, what you do is you add an onsubmit handler in the form which indeed does what you describe.
Alternatively, if localization is not an issue, you don't use "real text". You use a background image that looks like text. Then you can have css
<style>
.watermark {
background-image: url(xxxxx.png)
}
.nowatermark {
}
</style>
(I'm guessing at the syntax)
Then you can have
<input type="text" name="search" class="watermark" onfocus="this.className='nowatermark'" onblur="if (this.value=='') this.className='watermark'" value="">

Not sure if it's overkill, but I ended up using the telerik rad textbox instead.
<telerik:RadTextBox ID="txtPublishedPapers" runat="server" EmptyMessage="Enter name of Published Papers/Journal here">
</telerik:RadTextBox>
And it worked okay.

it's called a placeholder or watermark
in HTML5 it's really easy, you just have to write placeholder="your placeholder"
http://diveintohtml5.info/forms.html
otherwise in JavaScript you can do something like this:
http://lab.dotjay.co.uk/experiments/forms/input-placeholder-text/