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.", "[email protected]");

        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: stackoverflow.com/questions/133925/… or api.jquery.com/jQuery.post — Ivan Yonkov
– Ivan Yonkov, Commented Jul 25, 2013 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
– TheLettuceMaster, Commented Jul 25, 2013 at 15:51

Konsole · Accepted Answer · 2013-07-25 16:04:47Z

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 protected]");

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

edited Jul 25, 2013 at 16:04

answered Jul 25, 2013 at 15:49

Konsole

3,4753 gold badges31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TheLettuceMaster Over a year ago

Edit: Ok, the email IS being set, but when I get to php it is a blank value.

TheLettuceMaster Over a year ago

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

Konsole Over a year ago

document.getElementById("email").val = email was changed to document.getElementById("email").value = email

Leprosy · Accepted Answer · 2013-07-25 15:46:22Z

1

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.", "[email protected]");
        if (email!=null) {
             $.post( url_of_the_script, {email: email}, function() { alert('Email sent'); } );
        }
    }

answered Jul 25, 2013 at 15:46

Leprosy

1,1654 gold badges14 silver badges36 bronze badges

Comments

Barmar · Accepted Answer · 2013-07-25 16:49:32Z

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.", "[email protected]");

    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, 2013 at 16:49

answered Jul 25, 2013 at 15:42

Barmar

789k57 gold badges555 silver badges669 bronze badges

3 Comments

TheLettuceMaster Over a year ago

Great catch on readonly. Though the other code still isn't pasting it over.

Barmar Over a year ago

Sorry, it should be .value (I usually use jQuery, which has .val() for the analogous operation).

TheLettuceMaster Over a year ago

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!

Collectives™ on Stack Overflow

Grab Value from Javascript popup - use as php post value

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related