JQuery: How to check the value of a form field

Question

I have a simple form, with one issue. In explorer, if nothing is inserted, the placeholder is passed as input of the field.

Here is JSbin: http://jsbin.com/EvohEkO/1/

I would like to make a simple comparision, when form is submitted, to check if the value of the field is equal to "First name", and if yes make the value empty ""

Just this i need. Someone can help me please?

Answer 1

This is somewhat easier..

$(document).ready(function(){
    $("#form").submit(function(){
        $('#form input:text, textarea').each(function() {
            if($(this).val()==$(this).attr('placeholder'))
                $(this).val(" ");
        });
    });
});

Answer 2

<form onsubmit="return checkform()">
    <input name="test" placeholder="placeholdertext" id="test" />
    <input type="submit"  value="submitbutton"/>
</form>

in js

you should import jquery latest version this is the link: http://code.jquery.com/jquery-1.10.2.min.js

function checkform(){
 var fieldvalue = $.trim($('#test').val());
 if(!fieldvalue || fieldvalue=="placeholdertext"){
   alert('there is no input');
   return false;
 }else{
   alert('enjoy your form!');
   return true;
 }
}

Answer 3

Just put your field value in hidden type input like this :-

<input id="hdnfield" name="hdnfield" value="<Your Field Value>" />

Answer 4

To check the value of a form field use the val() function on the input element

var input_value = jQuery('Input Element Selector').val();

As I looked to your form, the elements do not have any id attribute, I recommend that you add one to each of them, also change the submit input to button the you have more control on the javascript. so your form will look like :

<form id="form" action="form.php" method="post">
   <input id="fname" type="text" placeholder="First name" name="fname"><br>
   <label for="fname" id="fnamelabel"></label>
   <input id="lname"type="text" placeholder="Last name" name="lname"><br>
   <textarea id="message" placeholder="Contact us!" cols="30" rows="5" name="message"></textarea><br>
   <br>
   <input type="button" value="Submit">

</form>

so your jQuery will look like:

jQuery(document).ready(function(){
    jQuery('input[type="button"]').click(function(){
        var fname = jQuery('#fname').val();
        var lname = jQuery('#lname').val();
        var message = jQuery('#message').val();
        ...... Do whatever you need & then change the input values
        ...... if all validation has passed the use jQuery('#form').submit(); to submit the form otherwise reset the form:
        jQuery('#fname').val("");
        jQuery('#lname').val("");
        jQuery('#message').val("");



    });
});

here is a working version: jsfiddle working link

Answer 5

You can do it like the following!

<form>
   <input type="text" id="first_name" name="first_name"/>
   <input type="submit" id="submit" value="submit"/>
</form>

<script type="type/javascript"/>
jQuery.noConflict();
(function ($) {
    $(function () {
        $("#submit").click(function () {
             if ($("#first_name").val() == "first name") {
                 $(this).val("");
             }
         });
     });
 })(jQuery);
</script>