Create Input-box with validation in JavaScript popup box

Question

I'm confuse in this topic what should I do and How.?

I would like to have popup box which ask for the password before delete the user from the list. If Password(as some value eg. ex12345) is correct then delete the user If no then say Password is incorrect.

I have my PHP page with simple popup. I would like to have popup with the inputbox

Any help will be appreciate.

here is my code. as view.php

<html>
<head>
<meta charset="utf-8">
<title>LogIn Information System</title>
<link rel="stylesheet" media="screen" href="stylesS.css" >
<script>
    function confirmDelete(delUrl) 
    {
        if (confirm("Are you sure you want to delete")) 
        {
             document.location = delUrl;
        }
    }
</script>
</head>
<body>
<div class="header-top">
            <a href="//home" class="utopia-logo">
                <img src="//images/logo.png" alt="asd" />
            </a>    
    </div><!-- End header -->

<table class = "button_table">
    <tr>
        <td><button class="submit" type="submit"><a href="home.php">Home</a></button></td>
        <td><button class="submit" type="submit"><a href="find.php">Search</a></button></td>
        <td><button class="submit" type="submit"><a href="view.php">Customer List</a></button></td>
        <?php
            if($_SESSION['valid']=='admin'){

            echo "<td><button class='submit' type='submit'><a href='add.php'>Add User</a></button></td>";
            echo "<td><button class='submit' type='submit'><a href='users.php'>View User</a></button></td>";
            }
        ?>
        <td><button class="submit" type="submit"><a href="logout.php">Logout</a></button></td>

    </tr>
</table>
<form class="contact_form" action="search.php" method="post" name="contact_form">
<ul>
    <li>
         <h2>Search Results</h2>
         <span class="required_notification">Following search matches our   database</span>
    </li>   
</li>
    <?php
        echo "<table border='0' width='100%'>";
        echo "<tr class='head'>";
              echo "<th>Name</th>";
              echo "<th>Last Name</th>";
              echo "<th>Phone</th>";
              echo "<th>Action</th>";
              echo "</tr>";
        while($row = mysql_fetch_array($find)){
              echo "<tr class='t1'>";
              echo "<td>".$row['fname']."</td>";
              echo "<td>".$row['lname']."</td>";
              echo "<td>".$row['phone']."</td>";
        ?>
              <td>
                <a href="edit.php?id=<?php echo $row['id'];?>"    class='action'>Edit</a> | 
                <a href="delete.php?id=<?php echo $row['id'];?>" class='action' onclick="return confirm('Are you sure you want to delete?')">Serve</a>
              </td>
        <?php
              echo "</tr>";

        }
        echo "</table>";
    ?>
</li>
</ul>

</form>
</body>
</html>

Delete.php

if (isset($_GET['id']) && is_numeric($_GET['id']))
{
 // get id value
$id = $_GET['id'];;
 }

$rec = "delete from data where id='$id'";

if(mysql_query($rec)){
echo "<center></h1>Selected Customer serve by DC</h1></center>"."<br />";
echo "<center></h6>Please wait while you are redirected Home in 3 seconds..</h6>      </center>"."<br />";
header('Refresh: 3; url=home.php');
}
else{
die("Data failed to delete in the database");
 }
 ?>

This shouldn't be done in JavaScript because an attacker could skip the confirmation box and head straight to the URL. — Paul S., Dec 18 '12 at 18:21
Sajjan Sarkar @ here is the question " I would like to have popup box which ask for the password before delete the user from the list. If Password(as some value eg. ex12345) is correct then delete the user If no then say Password is incorrect." — krish kim, Dec 18 '12 at 18:30
@user1913710 Your "question" seems more like a requirement than a technical question. You could popup a jQuery dialog which has a textbox into which the user types the password.When the OK Button is pressed you could do either an AJAX call/form submit to verify whether the password is correct and so delete and have the server return the appropriate response to the JS. Please look into the API for jQuery dialog and Jquery UI if u are willing to use Jquery. — Sajjan Sarkar, Dec 18 '12 at 18:40
seriously... no one thinks CSRF is the proper solution to the "attacker" problem described? This code is also vulnerable to SQL injection and exposes "admin only" resources in the html ``... — Alex, Dec 19 '12 at 03:51

ROY Finley · Accepted Answer · 2012-12-18T20:48:42.720

Okay here is an example of what I think you are asking for: I separated the js in the header so you could better understand. first one does the pop up box and second script does the ajax call. Remember this is a very basic example

Test.html

 <!DOCTYPE html>
<html lang="en">
  <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>

$(document).ready(function() {  

    //select all the a tag with name equal to modal
    $('a[name=modal]').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();

        //Get the A tag
        var id = $(this).attr('href');

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect     
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.9);  

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top',  winH/3-$(id).height()/3);
        $(id).css('left', winW/2-$(id).width()/2);

        //transition effect
        $(id).fadeIn(2000); 

    });

    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();

        $('#mask').hide();
        $('.window').hide();
    });     

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });         

    $(window).resize(function () {

        var box = $('#boxes .window');

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        box.css('top',  winH/2 - box.height()/2);
        box.css('left', winW/2 - box.width()/2);

    });

});

</script>

 <script type="text/javascript"> 
function ConfirmDelete()
{
var confirm = document.getElementById('confirm').value;
var dataString = 'password='+ confirm;
if(confirm.length>0)

{

$.ajax({
type: "GET",
url: "delete.php",
data: dataString,
success: function(server_response)
{
 document.getElementById("results").style.display = "block";
$('#results').html(server_response).show();
$('#mask').hide();
$('.window').hide();

}
});

}
return false;
}

</script>
<style type="text/css">
#mask{position:absolute;left:0;top:0;z-index:9000;background-color:#222;display:none}
.window{position:fixed;left:0;top:0;width:450px;height:200px;display:none;z-index:9999;padding:20px}
#dialog1{padding:10px 10px 8px 25px;border:2px solid #a1a1a1;width:450px;height:200px; background-image:url('imgs/bg.jpg');

</style>
  </head>
  <body>
 <a href="#dialog1" name="modal">Delete this Entry</a> 
 <!-- Start of MODAL BOX -->  
<div id="dialog1" class="window" align="center">
<font color="#FFFFFF">If you are sure you wish to delete this please enter your admin password</font><br>
<font color="#FFFFFF"><b>test password ( Admin )</b></font>
<input type="password" id="confirm"/><br><br>
<input type="submit" name="confirm_delete" onclick="ConfirmDelete()"  value="Confirm Delete">
</div><!-- End of MODAL BOX --> 
<div id="mask"></div><!-- Mask to cover the whole screen -->



<div id="results" class="results" style="display:none;"> </div>

  </body>
</html>

the call page this is where you will have your php

delete.php

 <?PHP
if($_GET['password'] === "Admin")
    {
        //sucess do your delete here
        echo " this was the correct password ";

    }
    else
        {
            //failure
            echo " Password incorrect!! ";

    }
?>

Hi, Your way is correct but I did it this validation with the php Thank You any ways..!!!!!!!!!!!!! — krish kim, Dec 19 '12 at 20:08

score -1 · Answer 2 · edited May 23 '17 at 11:43

-1

do JS check on client side and use CRSF on server side - http://en.wikipedia.org/wiki/Cross-site_request_forgery

Here is a good example: CSRF (Cross-site request forgery) attack example and prevention in PHP

edited May 23 '17 at 11:43

Community

1
1

answered Dec 18 '12 at 18:20

Alex

6,441
2
25
26

Create Input-box with validation in JavaScript popup box

2 Answers2