1

I have HTML file. What ever the details user has entered before submitting I want user to get a pop up message where users will be able to view all the details which he/she has entered in the form. I would like to know what function to be used so that before submitting the form a pop message comes for the confirmation.

katu
  • 21
  • 5

2 Answers2

1

If you don't care much about layout of this pop-Up, just use window.confirm()

You can build this into your HTML form like this:

<html>
  <script>
    function checkForm() {
      var message = "You entered following data:\n" + 
        "Car name: " + document.getElementById('cn').value + "\n" +
        "Car color: " + document.getElementById('cc').value + "\n" + 
        "Is this correct?";
      if (window.confirm(message))
        document.getElementById("carform").submit();
    }

  </script>


  <form id="carform" target="...">
    Car name: <input type="text" name="carname" id="cn"/><br/>
    Car color: <input type="text" name="carcolor" id="cc"/><br/>
    <input type="button" value="submit" onclick="checkForm()"/>
  </form>

</html>

EDIT To compare the entered values to the ones you have stored in your SQL database, you have to use PHP. You could realize it for example like this:

<html>
  <script>
    function checkForm() {
      <?php
        //Query the current databse values and store them for example in $carcolor $carname
        echo 'var currentCarName = "' . $carname . '"';
        echo 'var currentCarColor = "' . $carcolor . '"';

      ?>
      var message = "You entered following data:\n" + 
        "Car name: "    + document.getElementById('cn').value + "\n" +
        "  Old name: "  + currentCarName + "\n" +
        "Car color: "   + document.getElementById('cc').value + "\n" + 
        "  Old color: " + currentCarColor + "\n" +
        "Is this correct?";
      if (window.confirm(message))
        document.getElementById("carform").submit();
    }

  </script>


  <form id="carform" target="...">
    Car name: <input type="text" name="carname" id="cn"/><br/>
    Car color: <input type="text" name="carcolor" id="cc"/><br/>
    <input type="button" value="submit" onclick="checkForm()"/>
  </form>

</html>
lSoleyl
  • 309
  • 1
  • 7
  • Can I fetch car name or Car color from the database?? I have sql query to fetch car name or car color. How to Display the car name or car color in the pop up message or HTML. – katu Nov 06 '14 at 09:59
  • As stated here: http://stackoverflow.com/questions/857670/how-to-connect-to-sql-server-database-from-javascript#answer-857688 you shouldn't use JavaScript to access your Database since everyone will see the database credentials in the HTML-Code. But the linked answer describes, how to do it anyway. The clean approach would be doing this in PHP. – lSoleyl Nov 06 '14 at 10:07
  • Am Connecting Database from PHP itself. Am retrieving few fields and I want to display it for the user with the help of pop up message. – katu Nov 06 '14 at 10:14
  • I edited my answer to give you an example, how this could look like, using PHP. – lSoleyl Nov 06 '14 at 10:22
  • I got the soln for my problem. Sample code was really helpful. Thank you. – katu Nov 06 '14 at 11:15
  • ISoleyl is there any other method other than using popup message. For eg it connects to another HTML file and displays all the fields. – katu Nov 10 '14 at 05:36
  • If you mean that you want to display the entered values in the HTML page, which you see after you press "submit", then yes it is possible. You have to change the form to: `
    ` Then you can access the values in the phpfile, using `$_POST['varname']` where `varname` is the name of the input field. If you just wish to display the dialog better, you should have a look at these dialogs: [JQuery-UI](http://jqueryui.com/dialog/#modal-form). In these dialogs you can display every valid HTML-element.
     – lSoleyl Nov 10 '14 at 08:19
  • That worked. While I was trying to find answer I found one more answer where I can display within the page need not go to the next page by using the method hide and show.http://www.w3schools.com/jquery/jquery_hide_show.asp. – katu Nov 10 '14 at 10:21
  • Problem with this method is from database the value which I have echo backed not able to display. – katu Nov 10 '14 at 10:22
  • I pasted a sample code on Pastebin. If your code looks similar to this, it should work: http://pastebin.com/Gn5YcUFL – lSoleyl Nov 10 '14 at 10:53
  • have pasted my code can you help me out http://pastebin.com/QyjGh8jC – katu Nov 10 '14 at 11:05
  • Okay, 3 things which might cause problems on your side. 1) since I don't have the headers, which you include, I don't know whether you include JQuery correctly (for reference see my pastebin post). 2) You are sending a POST request to manage.php and passing your arguments in the URL (which is typical for the GET method). I don't know how this manage.php works, but I emulated the ajax-call by setting the result to `var res="10000:John:Jay:Rambo"` 3) The text in the tables doesn't change, because `val()` is only for input fields. You have to use `html()`. Then it should work. – lSoleyl Nov 10 '14 at 12:08
0

There's no native function for making a pop up message show up loading HTML. However there is FancyBox which does exactly this.

http://fancybox.net/

Look at this question and this blog for more information on how to do this

Community
  • 1
  • 1
Vanitas
  • 865
  • 1
  • 7
  • 19