Using dropdown select as javascript function variable

Question

I'm working on a site that has 2 encryption keys used and I'm trying to unwind it. I've been using the address bar to encrypt/de-encrypt data, but want to make a quick web page for people to use where someone can

select the desired key from a dropdown
enter data in a textbox
and get encrypted/de-encrypted output using the chosen key on a button click

So far I have html/php of

                    <h1>Decrypt &amp; Encrypt Data</h1><br />                       
                <form  class="form-horizontal"  method="post" >                     
                    <div class="form-group">
                        <label for="formEncryptionKey" class="col-sm-2 control-label">Encryption Key </label>
                            <div class="col-sm-10">
                                <div class="dropdown">
                                        <?PHP 
                                            echo "<select id='encryptionKeyBox' name='encryptionKeyBox'style='padding:5px' onchange='keySelect(this.value)'>";  
                                            echo "<option value=''> - Select Encryption Key - </option>";
                                        while ($row = mysqli_fetch_array($encryptionResult)) {
                                             echo "<option value='".($row['encryptionKey'])."'>"
                                            .($row['encryptionKey'])."</option>";                                           
                                            }
                                            echo "</select>";                                           
                                        ?>
                                </div><br />
                            </div> 
                            <label for="formEncryptionText" class="col-sm-2 control-label">Text to be translated </label>
                                <div class="col-sm-10">
                                    <input  type="text" class="form-control" id="encryptionText" name="encryptionText" placeholder="Enter text here..."  /><br /><br /> 
                                </div>                                                              
                            <div class="col-sm-offset-2">
                                <button type="button" class="btn btn-custom btn-lg" onclick = "encrypt()" >Encrypt</button>
                                <button type="button" class="btn btn-custom btn-lg pull-right" onclick = "decrypt()" >Decrypt</button>
                            </div><br /><br />
                            <label for="formOutcome" class="col-sm-2 control-label">Outcome </label>
                            <div class="col-sm-10">                     
                                <input  type="text" class="form-control" id="outcome" name="outcome" placeholder="Translated text here..."  readonly /><br /><br />
                            </div>
                    </div>  
                </form>

(This works in so far as the dropdown option are coming correctly from the database)

and the Javascript

<script type="text/javascript">
    function keySelect(keyChoice){;
        if (keyChoice == "") {
            var selectedKey = null;
        }
        else {
            var selectedKey = document.getElementById("encryptionKeyBox").value;
        }                   
            return $selectedKey;    
    }
    function encrypt(){
        if ($selectedKey == null) {
            alert("Please select a key to use!");
        }
        else {
            $data = document.getElementById("ecryptionText").value;
            $encryptedData = base64_encode(mcrypt_encrypt(MCRYPT_RIJNDAEL_256, md5($selectedKey), $data, MCRYPT_MODE_CBC, md5(md5($selectedKey)))); 
            document.getElementById("outcome").innerHTML = $encryptedData;   
            return;
    }
    function decrypt(){
        if ($selectedKey == null) {
            alert("Please Select a Key to Use");
            return; 
        }
        else { 
            $data = document.getElementById("ecryptionText").value;
            $decryptedData = rtrim(mcrypt_decrypt(MCRYPT_RIJNDAEL_256, md5($selectedKey), base64_decode($data), MCRYPT_MODE_CBC, md5(md5($selectedKey))), "\0");    
            document.getElementById("outcome").innerHTML = $decryptedData;   
            return;
        }
    } 
</script>

Can anyone tell me where I'm going wrong? Thanks.

@kittykittybangbang It currently has no action - onclick nothing happens and i created an extra text box to ouput the onchange select and that stayed empty also. The alert donesn't appear either if i click either of the buttons without changing the dropdown. — Conor O Brien, Jul 27 '15 at 14:24
_@Guilherme Silva_ Thanks, I've taken that out now but still no joy — Conor O Brien, Jul 27 '15 at 14:29

score 0 · Accepted Answer · answered Jul 27 '15 at 14:37

0

I believe you are wrongly mixing server side code with client side.

HTML and javascript run on the client browser, PHP runs on the server. Unless you're using some sort of javascript library functions like rtrim, mcrypt_decrypt do not exist in Javascript. What you want is to use AJAX to post your users selections, generate the key on the server side and than send back the response to the browser and display it.

As a side note, you shouldn't keep seeds and encryptions keys on the client side, it's an invitation to disaster

Cheers

answered Jul 27 '15 at 14:37

Claudio Pinto

389
2
9

Please don't answer questions that are duplicates. This splits the relevant information across many posts. If you have something new to contribute, add your answer to the linked question ([this one](http://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) in this case). – Artjom B. Jul 27 '15 at 15:10

Using dropdown select as javascript function variable

1 Answers1