Little bit of JavaScript help please

punky_munky

punky_munky

punky_munky

Soldato
Joined
17 Oct 2002
Posts
3,101
Basically, I want to take the input from 3 different form fields (text boxes) and dynamically put the all of the text together into one read only text box seperated by full stops.

I can do it with one text box but I don't know how to take multiple inputs.

Any help would be most appreciated, thanks. :)
 
It's not much harder with more than one:

var joined = value1 + "." + value2 + "." + value3;

Where each value is the value obtained from your form fields. You then just set value of the new read-only field to the 'joined' variable.
 
does it need to be a text box that the information goes into?

you could create a div for the text to go into and then use the below which would be put in a function and then called when the user clicks submit (do you know how to do that?).

var fieldOne = document.getElementById('replaceWithFieldOne');
var fieldTwo = document.getElementById('replaceWithFieldTwo');
var fieldThree = document.getElementById('replaceWithFieldThree');

document.getElementById('replaceWithAreaForTextName').innerHTML = fieldOne + ". " + fieldTwo + ". " + fieldThree + ".";

the last part might work with the text field not sure as never tried it. Just to be sure, when you say text field you mean like on a table?
 
I'm completely lost with this one, sorry. My Javascript skills are embarassingly weak. I really should go on a course.

The output could be in a div, it doesn't really matter.

I don't suppose I could be really cheeky and get a working examlple which I could disect pretty please?
 
Try this:

Code: 
<html>
<head>
<script type="text/javascript">
function showResult() {
	var fieldOne = document.getElementById('one').value;
	var fieldTwo = document.getElementById('two').value;
	var fieldThree = document.getElementById('three').value;
	document.getElementById('result').value = fieldOne+"."+fieldTwo+"."+fieldThree;
}
</script>
</head>
<body>
</body>
<form name="myform">
	<p>
		<b>Value 1</b>
		<input type="text" name="one" />
	</p>
	<p>
		<b>Value 2</b>
		<input type="text" name="two" />
	</p>
		<p>
		<b>Value 3</b>
		<input type="text" name="three" />
	</p>
        <p>
		<b>Result:</b>
		<input type="text" name="result" readonly="readonly" />
	</p>
	<p>
		<input type="button" name="done" value="Done" onclick="showResult();"/>
	</p>
</form>
</html>

They may be a easier way of doing this, I don't use JavaScript normally so if anyone has a better solution please post it.
 
RobH's won't work, getElementById needs IDs to determine objects rather than names. Try the following, the result is put into a span.

Code: 
<html>
<head>
<script type="text/javascript">
function showResult() {
	var fieldOne = document.getElementById('one').value;
	var fieldTwo = document.getElementById('two').value;
	var fieldThree = document.getElementById('three').value;
	document.getElementById('resultSpan').innerHTML = "Result<br>" + fieldOne + "." + fieldTwo + "." + fieldThree;
}
</script>
</head>
<body>
</body>
<form name="myform">
	<p>
		<b>Value 1</b>
		<input type="text" name="one" id="one" />
	</p>
	<p>
		<b>Value 2</b>
		<input type="text" name="two" id="two" />
	</p>
		<p>
		<b>Value 3</b>
		<input type="text" name="three" id="three" />
	</p>
	<p>
		<input type="button" name="done" value="Done" onclick="showResult();"/>
	</p>
	<br />
	<span id="resultSpan">Enter values and click Done</span>
</form>
</html>

Jon
 
Thanks guys, really appreciate the effort. I was thinking more along the lines of the result appearing as you typed into each box - is that easy enough or not worth the effort?
 
Easy enough, just added onchange="showResult()" to each text box. You could probably also use onkeypress too.

Code: 
<html>
<head>
<script type="text/javascript">
function showResult() {
	var fieldOne = document.getElementById('one').value;
	var fieldTwo = document.getElementById('two').value;
	var fieldThree = document.getElementById('three').value;
	document.getElementById('resultSpan').innerHTML = "Result<br>" + fieldOne + "." + fieldTwo + "." + fieldThree;
}
</script>
</head>
<body>
</body>
<form name="myform">
	<p>
		<b>Value 1</b>
		<input type="text" name="one" id="one" onchange="showResult()" />
	</p>
	<p>
		<b>Value 2</b>
		<input type="text" name="two" id="two" onchange="showResult()"/>
	</p>
		<p>
		<b>Value 3</b>
		<input type="text" name="three" id="three" onchange="showResult()"/>
	</p>
	<br />
	<span id="resultSpan"></span>
</form>
</html>
 
You must log in or register to reply here.
Back
Top Bottom