Popup/alert With Textarea/textbox Value When Clicking Button?

popup/alert with textarea/textbox value when clicking button? how to displaya popup/alert with the textbox field value?

#1 XMEGA

D.I.C Head

Group: Members
Posts: 86
Joined: 17-November 08

Dream Kudos: 0

Posted 14 January 2009 - 07:22 PM

So I have a function

<script type="text/javascript">
	
function disp_alert(firstName)
{
alert("firstName");
}
</script>

^ how to I bring the text from the firstName textbox area thro here???

a textbox area field

<input name="firstName" type="text" id="firstName"/>

where you enter first names example "Bob"

and a button

<input type="button" onclick="disp_alert()" value="Calculate Lucky Number" />

What I would like is when I fill out the firstName textbox area say "Bob" and then next click the button...I would like a popup/alert with the firstName text inside saying what the textbox text I just filled in being in this example "Bob"

This post has been edited by XMEGA: 14 January 2009 - 07:34 PM

Was This Post Helpful? 0

Register for Free to Make These Ads Go Away!

#2 Christopher Elison

D.I.C Head

Group: Members
Posts: 230
Joined: 29-December 08

Windows Favorite Browser Favorite Processor Favorite Gaming Platform Your Car
Dream Kudos: 0

Posted 14 January 2009 - 07:37 PM

Morning, buddy!

Try this, is this what you wanted?:

<html>
  <head>
	<script type="text/javascript">
	  function disp_alert(firstname) {
		alert("Hello, " + firstname);
	  }
	</script>
  </head>
  <body>
	<input name="firstName" type="text" id="firstName"/>
	<input type="button" onclick="disp_alert(firstName.value)" value="Calculate Lucky Number" />
  </body>
</html>

Was This Post Helpful? 1

#3 XMEGA

D.I.C Head

Group: Members
Posts: 86
Joined: 17-November 08

Dream Kudos: 0

Posted 14 January 2009 - 08:18 PM

worked great, any chance why I am getting a blank popup box value nothing is shown inside the alert now?

This post has been edited by XMEGA: 14 January 2009 - 09:23 PM

Was This Post Helpful? 0

#4 Christopher Elison

D.I.C Head

Group: Members
Posts: 230
Joined: 29-December 08

Windows Favorite Browser Favorite Processor Favorite Gaming Platform Your Car
Dream Kudos: 0

Posted 14 January 2009 - 08:21 PM

Could you paste me the whole HTML, one thing I have noticed is you need to end statements in Javascript with a semi colon.

Was This Post Helpful? 0

#5 Christopher Elison

D.I.C Head

Group: Members
Posts: 230
Joined: 29-December 08

Windows Favorite Browser Favorite Processor Favorite Gaming Platform Your Car
Dream Kudos: 0

Posted 14 January 2009 - 08:32 PM

Modified it slightly, I tried it, think it works, tried my name 'chris' and size 9 and got 45 in the alert.

  <head>
	<script type="text/javascript">
	  function display(luckyNumber) {
		var firstNameLength = firstName.value.length;
		var shoeSizeValue = shoeSize.value;
		var luckyNumber = firstNameLength * shoeSizeValue;
		alert(luckyNumber);
	  }
	</script>
  </head>

Am I right in thinking you want to replace using the alert and putting the lucky number in that lucky number textfield? If so, you can replace the alert(luckyNumber); line with:

   document.getElementById("luckyNumber").value = luckyNumber;

With that added, you'll be able to calculate the lucky number on the page and it'll appear in the text box.

This post has been edited by Christopher Elison: 14 January 2009 - 08:37 PM

Was This Post Helpful? 0

#6 XMEGA

D.I.C Head

Group: Members
Posts: 86
Joined: 17-November 08

Dream Kudos: 0

Posted 14 January 2009 - 08:50 PM

yes at the end the lucky number will appear there but I am still having problems with the popup with the changes now when I click the button nothing appears no popup/alert even???

is the button correct seems you didn't modify it only the head stuff

<input type="button" onclick="display(luckyNumber.value)" value="Calculate Lucky Number" />

I added the semi colons which I was missing but now nothing lol?

This post has been edited by XMEGA: 14 January 2009 - 08:52 PM

Was This Post Helpful? 0

#7 Christopher Elison

D.I.C Head

Group: Members
Posts: 230
Joined: 29-December 08

Windows Favorite Browser Favorite Processor Favorite Gaming Platform Your Car
Dream Kudos: 0

Posted 14 January 2009 - 08:52 PM

I only changed the head, I'll paste my working example, this works in my Firefox, notice I moved the 'var' lines inside the function:

<html>
  <head>
	<script type="text/javascript">
	  function display(luckyNumber) {
		var firstNameLength = firstName.value.length;
		var shoeSizeValue = shoeSize.value;
		var luckyNumber = firstNameLength * shoeSizeValue;
		alert(luckyNumber);
	  }
	</script>
  </head>
  <body>
  <form action="" method="get" name="myForm" id="myForm">
  <table width="1400" border="1">
	<tr>
	  <td>First Name:</td>
	  <td><input name="firstName" type="text" id="firstName"/></td>
	</tr>
	<tr>
	  <td>Gender:</td>
	  <td><input name="gender" type="text" id="gender"/></td>
	</tr>
	<tr>
	  <td>Shoe Size:</td>
	  <td><input name="shoeSize" type="text" id="shoeSize"/></td>
	</tr>
	<tr>
	  <td><input type="button" onclick="display(luckyNumber.value)" value="Calculate Lucky Number" /></td>
	  <td> </td>
	</tr>
	<tr>
	  <td>Lucky Number:</td>
	  <td><input name="luckyNumber" type="text" id="luckyNumber"/></td>
	</tr>
  </table>
  </form>
  </body>
</html>

This post has been edited by Christopher Elison: 14 January 2009 - 08:54 PM

Was This Post Helpful? 0

#8 Christopher Elison

D.I.C Head

Group: Members
Posts: 230
Joined: 29-December 08

Windows Favorite Browser Favorite Processor Favorite Gaming Platform Your Car
Dream Kudos: 0

Posted 14 January 2009 - 09:04 PM

Oh, hang on, I've just tried it in Internet Explorer and it's giving the error:

Line: 5
'firstName' is undefined.

Fixed it! Here you go, slightly modified code:

  <script type="text/javascript">
	  function display(luckyNumber) {
		var firstNameLength = document.getElementById("firstName").value.length;
		var shoeSizeValue   = document.getElementById("shoeSize").value;
		var luckyNumber = firstNameLength * shoeSizeValue;
		alert(luckyNumber);
	  }
	</script>

This will now work on both IE and Firefox

This post has been edited by Christopher Elison: 14 January 2009 - 09:05 PM

Was This Post Helpful? 1

#9 XMEGA

D.I.C Head

Group: Members
Posts: 86
Joined: 17-November 08

Dream Kudos: 0

Posted 14 January 2009 - 09:13 PM

I am sure it works in firefox fine I have had issues before but for some funny reason I turned on script debuggin on IE and it says line 10 char 9 "firstName" is undefined??? werid I don't see the issue...great thanks for dey help my next steps are to make gender radiobuttons and if male display the lucky number in blue and if female in pink...thanks again

Was This Post Helpful? 0

#10 Christopher Elison

D.I.C Head

Group: Members
Posts: 230
Joined: 29-December 08

Windows Favorite Browser Favorite Processor Favorite Gaming Platform Your Car
Dream Kudos: 0

Posted 14 January 2009 - 09:30 PM

No problem, and thanks for the :^:

By the way, I think we were getting those errors because we should have been using document.getElementById("blah").value to extract a field's value, but we got there in the end

Was This Post Helpful? 0