Jump to content

textfield value


balthazarwulf
 Share

Recommended Posts

hi, i'm just beginning to learn javascript and i would like to ask some help with this.what i want to do is put the value of 1 through 10 in a textfield using the while loop after clicking the submit button.i got it to work but the value in the textfield disappears immediately after the button is clicked. i hope any one can enlighten me on this. thanks in advance.here's my code:

function buttonClick(){			var i=1;		while (i<10){			document.getElementById("textfield").value +=  i + ",";			i++;		}		if (i=10){			document.getElementById("textfield").value += i;		}	}

Link to comment
Share on other sites

1. You should change this line:

if (i=10){

to this:

if (i==10){

That is not your problem, but if you don't learn the difference, it may become a problem in a later project.2. You don't post any HTML, but I'm guessing your button is inside a form? Is it a submit button? If so, your form is submitting and the page is coming back refreshed. The process probably happens so quickly you're unaware of it. There are a variety of ways to solve that, but they depend on exactly what you are trying to accomplish. A VERY clear explanation would help.

Edited by Deirdre's Dad
Link to comment
Share on other sites

1. You should change this line:
if (i=10){

to this:

if (i==10){

That is not your problem, but if you don't learn the difference, it may become a problem in a later project.2. You don't post any HTML, but I'm guessing your button is inside a form? Is it a submit button? If so, your form is submitting and the page is coming back refreshed. The process probably happens so quickly you're unaware of it. There are a variety of ways to solve that, but they depend on exactly what you are trying to accomplish. A VERY clear explanation would help.

Thanks for pointing that out.and yes i'm using a submit button inside a form.this is actually an exercise i picked up from an old site but it doesn't have any answer.as i've said on my post this exercise aims to put the numbers 1 - 10 inside the textfield after the submit button is clicked but the problem is (as you have pointed out) after the submit button is clicked the form is refreshed. i guess what i want to do is place the value inside the textfield without having the submit button refresh the form after being clicked.here's the code:
<html><head><title>Javascript Exercise</title><style type="text/css">	div#form{		background-color:#069;		padding:10px 5px;		width:250px;		margin:auto;}	div#newDiv{		padding:10px 5px;		width:100px;		margin:auto;}	</style><script type="text/javascript">		function buttonClick(){			var i=1;		while (i<10){			document.getElementById("textfield").value +=  i + ",";			i++;		}		if (i==10){			document.getElementById("textfield").value += i;		}	}	function buttClick(){		for (i=1;i<10;i++){			document.getElementById("textfield2").value +=  i + ",";		}		if (i==10){			document.getElementById("textfield2").value += i;		}	}	</script></head><body>	<div id="form">		<form id="form1" method="post" action="">			  <input id="textfield" type="text" name="textfield" size="20"/>			  <input id="submit" type="submit" name="Submit" value="Click Me"  onclick="buttonClick()"/>			  <br/>			  <br/>				<input id="textfield2" type="text" name="textfield" size="20"/>			  <input id="submit2" type="submit" name="Submit" value="Me Too"  onclick="buttClick()"/>		</form>	</div></body></html>

Link to comment
Share on other sites

function buttClick(){
:) Well, you have two options. You can change your buttons to type='button' instead of submit or make your button click functions return false. If your functions return false it will cancel the submit action.Personally I think the first suggestion would be easier but here's how you'd do the second.Add this line to both functions as the very last thing that they do:return false;Then when you call your functions through the onclick it should look like this:onclick='return buttonClick();' Edited by jkloth
Link to comment
Share on other sites

A small detail, but you want to get straight on this. When the form is submitted, it doesn't just refresh the form. It reloads the entire document.If you have no intention of submitting the form anywhere, it is completely valid to have form elements without an actual form. And as jkloth says, you can change those submit buttons to type="button". Submit buttons should only ever be used if you really want to send form information to your server.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...