ansaurus

Question

JavaScript: Confirm dialog box that shows value from a text box

Answer 1

A:

Yes:

var amount = document.getElementById("textbox").value;
confirm("Confirm Amount. Click OK if $" + amount + " is the correct amount.")

EDIT: Here is a working example: http://jsbin.com/inoru/edit

spinon 2010-07-27 16:19:34

Thanks for the reply. I must be missing something. The form submits without popping up the confirm dialog box. Here is what I have for the submit button:<input type="submit" value="Continue" onclick="confirm_amount();" />Here is what I have for the script:<script type='text/javascript'> </script>

Spockrates 2010-07-27 16:46:35

I added an example.

spinon 2010-07-27 17:24:47

Thanks, but I already have validation code running on submit. If I use onsubmit for the form, it prevents the form from validating. It looks like I need an onclick event for the submit button.

Spockrates 2010-07-27 20:08:21

Ok well you can just modify to make it for the button then. I just used the form as an example. Just move the onsubmit in the form to the submit button and change it to onclick. It will work the same.

spinon 2010-07-27 20:12:42

Thanks again. The confirm message works, but when I click Cancel, the form still submits. Here's what I have for the submit button: <input type="submit" value="Continue" alt="Save scheduled payment" title="Save scheduled payment" onclick="ConfirmAmount();" />And here's what I have for the script:<script type='text/javascript'> </script>

Spockrates 2010-07-27 20:24:37

The form is using the post method: <form action="/PP?PAGE=ADDSCHEDULEDPAYMENT" method="post" name="paymentform" id="paymentform">

Spockrates 2010-07-27 20:25:38

you need to have onclick="return ConfirmAmount();"

spinon 2010-07-27 20:31:20

U TH' MAN! Thanks, Spinon. You and Justin have been a great help. :)

Spockrates 2010-07-27 20:36:17

Glad we got that figured out.

spinon 2010-07-27 20:41:18

I'd give you a vote up, but I'm not up to 15, yet. (Just roll your eyes and call me noobie!);D

Spockrates 2010-07-27 20:46:04

Don't worry about it.

spinon 2010-07-27 22:11:47

Answer 2

+1 A:

Sure, you can just pass a string value to the dialog:

var str = "my msg";
confirm(str);

So to display your custom message, just get the value of the text box and append it to your message. For example:

var amount = jQuery("#myTextBox").val();
confirm("Click OK if " + amount + " is the correct amount");

Justin Ethier 2010-07-27 16:20:12

i gave a normal javascript approach, but i recommend use this one using jQuery +1

jgemedina 2010-07-27 16:22:01

Thanks for replying. I must be doing something wrong, as the dialog box does not pop up. Here is the script:<script type='text/javascript'> </script>Here is the button:<input type="submit" value="Continue" onclick="confirm_amount();" />

Spockrates 2010-07-27 16:58:30

You have your code commented out via `<!--`. Have you verified you are including the jQuery `.js` file? You may also want to double-check that `val` is the appropriate function to call, although off the top of my head I believe that is the one you want.

Justin Ethier 2010-07-27 17:02:25

Thanks. A jQuery datepicker on the page is working OK. I'm pointing to this file: <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>The comment out is to prevent the js code from displaying on the page in older browsers; it does not prevent the code from running.

Spockrates 2010-07-27 17:07:11

Hmm...perhaps you should update your question to include the code you are using. That way we can all see the marked-up code clearly, and can suggest what might be the problem.

Justin Ethier 2010-07-27 18:20:15

OK, this code does the trick:<input type="submit" value="Continue" onclick="pay_amount = document.paymentform.amount.value; confirm('Click OK to confirm the amount should be $' + pay_amount + ', or click Cancel to change the amount.');" /> The confirm dialog now shows the value from the amount textbox. However, the form still submits even when I click Cancel. Let me know if you have any ideas.

Spockrates 2010-07-27 18:28:21

You need to take the return value of `confirm` and only submit the form if they click 'OK'...

Justin Ethier 2010-07-27 18:45:54

Thanks, Justin. I'm feeling a little slow, today (didn't get much sleep). Can you spell it out for me and type out an example code?

Spockrates 2010-07-27 18:55:19

Here's a nice example: http://www.htmlite.com/JS006.php

Justin Ethier 2010-07-27 19:03:39

Thanks, but I'm looking for a way to prevent a form from submitting when the user clicks cancel.

Spockrates 2010-07-27 20:02:02

Thanks for your help, Justin.

Spockrates 2010-07-27 20:47:08

Answer 3

A:

You should check the onblur event from the textbox, if the textbox is not empty then show the message, sth like this:

document.getElementById('textboxid').onblur = function(){
    if(this.value.length > 0 )
        showApplicationMessage()
}

jgemedina 2010-07-27 16:21:01

Thanks. But I'm not trying to validate the text field. I'm trying to get a dialog box to display the value the user entered in the text field.

Spockrates 2010-07-27 17:12:20

You see, I'm trying to idiot-proof the web form. I'd like to ask the user if she is sure she entered the correct amount in the text box by having her click OK, or abort the submission of the form if she clicks Cancel.

Spockrates 2010-07-27 17:19:26

ansaurus

tags:

views:

answers:

JavaScript: Confirm dialog box that shows value from a text box

related questions