How to change the value of textbox when form is submitted?_问答_开发者

How to change the value of textbox when form is submitted?

开发者 https://www.devze.com 2023-02-07 08:44 出处：网络

I have a form which has fields pre-filled with a default value, like this: <input type=text name=first value=\"First Name\" class=\"unfilled\" />

I have a form which has fields pre-filled with a default value, like this:

<input type=text name=first value="First Name" class="unfilled" />

When the textbox is clicked, the class unfilled is removed from the textbox, and the textbox is made blank so the user can type in his/her own info.

The problem is that when the form is submitted, its getting submitted with these default values, which is messing up the server side validation. How can I do it so that 开发者_高级运维when the form is submitted, all the fields which have a default value are made blank, so the server side validation would throw the error: 'Please fill in this field'?

I'm trying the following code which isn't working:

$("#myForm").submit(function()
        {
            $(".unfilled").val('');
        }
);

This does make the fields blank, but the server still receives them with their previous default values.

I think you simply have a syntax error. You're missing the closing parenthesis on your submit method.

I just whipped this up and it works fine

<!DOCTYPE html>
<html>
    <body>
        <?php
        var_dump($_POST);
        ?>
        <form action="test.php" method="post">
            <input type="text" name="first" value="First Name" class="unfilled">
            <input type="submit">
        </form>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            jQuery(function($) {
                $('form').submit(function() {
                    $('.unfilled').val('');
                });
            });
        </script>
    </body>
</html>

You need to stop the form execution first, change the values, and then manually submit the form.

$("#myForm").submit(function(e)
{
    // Stop the form submit
    e.preventDefault();

    $(".unfilled").val('');
    $(this).submit();
}

You have to return true; if you want the form to submit, or false, if you don't. The problem with this approach is that the fields will 'blink' before posting the values, thus creating a bit of unprofessional feel. It is better to use hidden values and set them in submit() event.

I think you need the .click() function of JQuery.

Example:

   $(function () { // shorthand for document.ready
      $('.unfilled').click(function () {
         $(this)
            .val('')
            .removeClass('unfilled');
      })
   });

UPDATE

Sorry, i missunderstand you, thought you need a feature like a placeholder.

Of couse you can do it with return false;, but this cancel the submitting. Or like GreenWebDev says to use e.preventDefault();.