locked
How to retrieve, use and display data from a form RRS feed

  • Question

  • User-250910258 posted

    Hi, i need to know how to do the following, how to retrieve, use and display data from a form BEFORE the form is submitted.  This is the task:

    1.  while the user is filling out the form, i need to:

         a) ensure that feild "msrp" is filled first

         b) ensure that feild "invoice" is filled next

         c) feild "ask" is filled last

    2. when the user leaves the the last field... i need to do some math (all a function to do math)

    3. then display the results on the form below the last feild

    The remainder of the form is then completed and submitted.

    See example below.  Thanks.

    @{
        double fee = 10.00;
        
            <script type="text/javascript1.5">
                function () {
                    //Do math
                    if (ask > invoice) {
                        spread = ask - invoice
                        required = spread / fee
                    }
                    return required;
                }
            </script>
    }
                    
                 
     
                <form method="post" action="">
                  
                    <div class="row">
                        <label class="label" for="msrp">MSRP:</label>
                        <span><input name="msrp" type="text" onfocus="" value="@Request["msrp"]" /></span>
                        @Html.ValidationMessage("msrp")
                    </div>
                    <div class="row">
                        <label class="label" for="invoice">Invoice Price:</label>
                        <span><input name="invoice" type="text" onblur="" value="@Request["invoice"]" /></span>
                        @Html.ValidationMessage("invoice")
                    </div>
                    <div class="row">
                        <label class="label" for="ask">ASK Price:</label>
                        <span><input name="ask" type="text" onchange="" value="@Request["ask"]" /></span>
                        @Html.ValidationMessage("ask")
                    </div>
                    
                    <div class="row">
                        <!--Note, results must be calulated and displayed BEFORE the form is submitted (i.e., should be displayed as soon as the user leaves the last (ask) field.-->
                        Place "required" HERE!!!
                    </div>
     
                     <!--Other form fileds below -->
                    <div class="row">
                        
                    </div>
     
                    <div class="row">
                        <span class="label">&nbsp;</span>
                        <span><input type="submit" value="Submit" /></span>
                    </div>
                </form>

    Saturday, September 21, 2013 11:11 AM

Answers

  • User-250910258 posted

    I go it, i used javascript for client side validation and computation.  It could be better but it will do for now.  Thanks all.

    **********************************

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function validateForm()
    {
    var x=document.forms["myForm"]["invoivePrice"].value;
    if (x==null || x=="")
      {
      alert("Invoice Price required");
      return false;
      }
     
    var x=document.forms["myForm"]["ASKPrice"].value;
    if (x==null || x=="")
      {
      alert("ASK Price required");
      return false;
      }
    var fee = 20.00;
    var ip=document.forms["myForm"]["invoivePrice"].value;
    var ap=document.forms["myForm"]["ASKPrice"].value;
     
    spread = ap - ip;
    NR = spread / fee;
    NR2 = NR +1;
     
    document.getElementById("display").innerHTML=NR2;
     
    }
    </script>
    </head>
     
    <body>
    <form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
    Invoice Price: <input type="text" name="invoivePrice"><br>
    ASK Price: <input type="text" name="ASKPrice"><br>
    <br>
    No. Required: <button type="button" onclick="validateForm()">Show Number</button>
     
     <h1><div id="display"></div></h1>
     
        Other: <input type="text" name="other"><br>
        Other2: <input type="text" name="other2"><br><br>
     
    <input type="submit" value="Submit">
    </form>
     
    <div id="display"></div>
    </body>
     
     
    </html>

    **********************************

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 23, 2013 1:27 AM

All replies

  • User379720387 posted

    here is all that you need

    Saturday, September 21, 2013 11:45 AM
  • User-250910258 posted

    Wavemaste thanks for the info but, that does not work for what is am trying to do.  

    Basically, i want to enter values into a form (sequencially, 1st. field, 2nd. field & 3rd. field)... upon leaving the 3rd. field i want to Do some math on the mumbers enterd an then display the results ON the form..... THEN, i want to continue filling out the remainder of the form before eventually posting the form.  That is what i need to do.

    Saturday, September 21, 2013 12:58 PM
  • User-1716253493 posted
    Maybe you can use wizard control
    Saturday, September 21, 2013 1:39 PM
  • User-821857111 posted

    You can either spread the form over a number of pages, changing the form action to point to the next page each time, or you can use one of a number of jQuery wizrd plugins: http://www.google.com/search?q=jquery+wizard

    Saturday, September 21, 2013 2:00 PM
  • User-250910258 posted

    I go it, i used javascript for client side validation and computation.  It could be better but it will do for now.  Thanks all.

    **********************************

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function validateForm()
    {
    var x=document.forms["myForm"]["invoivePrice"].value;
    if (x==null || x=="")
      {
      alert("Invoice Price required");
      return false;
      }
     
    var x=document.forms["myForm"]["ASKPrice"].value;
    if (x==null || x=="")
      {
      alert("ASK Price required");
      return false;
      }
    var fee = 20.00;
    var ip=document.forms["myForm"]["invoivePrice"].value;
    var ap=document.forms["myForm"]["ASKPrice"].value;
     
    spread = ap - ip;
    NR = spread / fee;
    NR2 = NR +1;
     
    document.getElementById("display").innerHTML=NR2;
     
    }
    </script>
    </head>
     
    <body>
    <form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
    Invoice Price: <input type="text" name="invoivePrice"><br>
    ASK Price: <input type="text" name="ASKPrice"><br>
    <br>
    No. Required: <button type="button" onclick="validateForm()">Show Number</button>
     
     <h1><div id="display"></div></h1>
     
        Other: <input type="text" name="other"><br>
        Other2: <input type="text" name="other2"><br><br>
     
    <input type="submit" value="Submit">
    </form>
     
    <div id="display"></div>
    </body>
     
     
    </html>

    **********************************

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 23, 2013 1:27 AM