Grab Value from Javascript popup - use as php post value

Question

First off, if there is a completely better way of doing this? let me know... This way seems kind of "hackish". Here is what I am trying to do: As you see in the below input, I have a text field that I simple want to appear like an <a> link. If the user clicks it, I want JavaScript pop up box to appear with user entering the email. I want them to hit ok, and I send that email value back to the form and the form then submits via a php post.

I do not know how to grab the value from the box and insert it in the form (if possible) so it can submit to php.

Here is the code:

    <form id="frm1" action="login.php" method = "post">
        <input onclick="resetPassword()" type="text" name="email" value="Reset Password" style="cursor: pointer; background:none; text-decoration: underline; border: none;"  />
    </form>


    <script>
        function resetPassword() {
        var x;

        var email=prompt("Enter email to reset password.", "example@email.com");

        if (email!=null)
          {
          document.getElementById("frm1").submit();
          }
        }
   </script>


  <?php 
     if (isset($_POST['email'])) {
         $email = $database -> escape_value(trim($_POST['email']));
        //  reset password    
      }
  ?>

You can use either jquery event post() or javascript post method: http://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit or http://api.jquery.com/jQuery.post/ — Royal Bg, Jul 25 '13 at 15:41
In the php part I email the new password to the user; I cut that out because that is after the fact. I simple need to send the users current email address TO php first. — TheLettuceMaster, Jul 25 '13 at 15:51

Barmar · Answer 1 · 2013-07-25T16:49:32.773

1

Add an ID to the input field:

<form id="frm1" action="login.php">
    <input id="email" onclick="resetPassword()" type="text" name="email" value="Reset Password" style="cursor: pointer; background:none; text-decoration: underline; border: none;"  />
</form>

    function resetPassword() {

    var email=prompt("Enter email to reset password.", "example@email.com");

    if (email!=null)
      {
      document.getElementById("email").value = email; // Put value into form field
      document.getElementById("frm1").submit();
      }
    }

If you don't want the user to be able to type directly into the form field, you should give it the readonly attribute. onclick prevents them from clicking on it, but they could still get there with Tab.

edited Jul 25 '13 at 16:49

answered Jul 25 '13 at 15:42

Barmar

741,623
53
500
612

Great catch on `readonly`. Though the other code still isn't pasting it over. – TheLettuceMaster Jul 25 '13 at 15:59
Sorry, it should be `.value` (I usually use jQuery, which has `.val()` for the analogous operation). – Barmar Jul 25 '13 at 16:49
Yup, the other guy figured that one out too. I could have marked you both correct, but had to pick one... thanks for your incite on this. The least I can do it upvote the answer! – TheLettuceMaster Jul 25 '13 at 17:00

score 1 · Answer 2 · answered Jul 25 '13 at 15:46

A better aproach would be the use of jQuery and send the info of the text field via AJAX to the script which is expecting the $_POST variable. This way, the <form> element would be unnecessary.

    function resetPassword() {
        var x;
        var email=prompt("Enter email to reset password.", "example@email.com");
        if (email!=null) {
             $.post( url_of_the_script, {email: email}, function() { alert('Email sent'); } );
        }
    }

Konsole · Accepted Answer · 2013-07-25T16:04:47.363

1

Grab the email from promt, paste it to input field and submit the form.

<form id="frm1" action="login.php" method='post'>
    <input id="email" onclick="resetPassword()" type="text" name="email" placeholder="Reset Password" />
</form>

<script type="text/javascript">
  function resetPassword() {    
    var email = prompt("Enter email to reset password.", "email@example.com");

    if (email != null) {
      document.getElementById("email").value = email; 
      document.getElementById("frm1").submit();
    }
  }
</script>

edited Jul 25 '13 at 16:04

answered Jul 25 '13 at 15:49

Konsole

3,447
3
29
39

Edit: Ok, the email IS being set, but when I get to php it is a blank value. – TheLettuceMaster Jul 25 '13 at 15:58
I assume the edit only was `method='post'`? I already had that actually cause I noticed earlier it was missing. everything else looks identical... exept I have inline CSS and a `readonly` in the form – TheLettuceMaster Jul 25 '13 at 16:13
`document.getElementById("email").val = email` was changed to `document.getElementById("email").value = email` – Konsole Jul 25 '13 at 16:14

Grab Value from Javascript popup - use as php post value

3 Answers3