Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question HTML forms jazzed up with JS

    hi guys can anyone help me; i want to jazz up a html form so that a customer can fill in their details and js will feedback with a confirm box
    ie: are these details correct?
    Customer Name: Whatevers been entered
    Email Address: whatever@yahoo.co.uk
    OK Cancel

    if OK is clicked the html form will clear and it would print to screen "Your details have been submitted"
    if Cancel is clicked the html form will clear and it would print to screen "please check your details"

    i have done part of this but im struggling please can someone talk me through it?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,316
    Thanks
    23
    Thanked 613 Times in 612 Posts
    Here. Finish the styling yourself.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>New document</title>
    <script type="text/javascript">
    function DisplayConfirmMessage(msg)
    {
    c_name = 'Whatevers been entered';  /*Get these your self from the form*/
    c_addrs = 'whatever@yahoo.co.uk';
    
      var divLayer = document.getElementById('divConfMessage');
      divLayer.style.display = 'block';
      divLayer.style.height = '100px';
      divLayer.style.width = '300px';
      document.getElementById('confirmText').innerHTML = 'Customer Name:'+c_name+ 'Email Address:'+c_addrs;
    }
    </script>
    
    <style type="text/css">
    #divConfMessage
    {
    	border:black thin solid;
    	display:none;
    }
    #confirmText
    {
    	background-color: #6699cc;
    	text-align: left;
    }
    </style>
    </head>
    
    <body>
    <div id="divConfMessage">
    	<div id="confirmText"></div>
    	<button id="btnConfOK">OK</button>
    	<button id="btnConfCancel">Cancel</button>
    </div>
    <button onclick="DisplayConfirmMessage('Hello World');">Push Me</button>
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    thats really different im not sure i could get it to work how i wanted?

    the code ive got so far;

    CSS
    form {
    background-color:#F8F8F8;
    border: 1px solid #666699;
    padding: 8px;
    line-height:20px;
    text-align:left;
    }

    HTML
    <form id="detailDisplay" action="#" onsubmit="return false">
    Full Name <input type="text" name="customername" value="" size="20" />
    <br />
    Email Address <input type="text" name="emailaddress" value="" size="20" />
    <br />
    <input type="button" value="Submit" onClick="confirmDetails('detailDisplay')" />
    <br />
    </form>


    JS
    function confirmDetails(formID) {

    if (document.getElementById(formID)) {
    var form = document.getElementById(formID);
    } else {
    return;
    }

    // CONFIRM REQUIRES ONE ARGUMENT
    var message = "Please confirm your details are correct;"+ form.customername.value + form.emailaddress.value;

    // CONFIRM IS BOOLEAN. THAT MEANS THAT
    // IT RETURNS TRUE IF 'OK' IS CLICKED
    // OTHERWISE IT RETURN FALSE
    var customername = confirm(message);

    // DISPLAY THE RETURNED VALUE IN THE
    // CONFIRM POPUP DEMO TEXT INPUT BOX
    form.customername.value = customername;

    // TEST TO SEE IF TRUE|FALSE RETURNED
    if ( customername === true ) {
    // YOUR 'OK' SCRIPT GOES HERE
    yourOkFunction("details submitted");
    }
    else
    {
    // YOUR 'CANCEL' SCRIPT GOES HERE
    yourCancelFunction();
    }
    }



    basically it works but i cant get the text to align left to the text boxes,

    when the pop up window appears whatevers been entered in the text boxes appear squished at the side (i tried \ to put it on a new line but that doesnt work maybe something like console.Writeline.form.confirmDetails.customername ?)

    when ok pressed true appears in text box cancel false appears in text box. instead i want ok pressed- details submitted printed to screen in someway cancel pressed - form just clears

    any ideas?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •