balthazarwulf Posted April 10, 2010 Share Posted April 10, 2010 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 More sharing options...
jeffman Posted April 10, 2010 Share Posted April 10, 2010 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. Link to comment Share on other sites More sharing options...
balthazarwulf Posted April 11, 2010 Author Share Posted April 11, 2010 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 More sharing options...
ShadowMage Posted April 12, 2010 Share Posted April 12, 2010 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();' Link to comment Share on other sites More sharing options...
jeffman Posted April 12, 2010 Share Posted April 12, 2010 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 More sharing options...
balthazarwulf Posted April 13, 2010 Author Share Posted April 13, 2010 i did as jkloth instructed and its working now.thanks for the replies, learned a lot. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.