CODEWITHSUNDEEP
jquery
user2656997
user2656997

Reputation: 113

I can't get the value of an object htmlinputelement jquery

I am developing a web page with html and jquery. Many pages have forms with several input type text. I am trying to develop a jquery function to control if some inputs are empty or wrong.

I want to put all inputs values in an array. I have troubles when I try to read the text values, I get an object htmlinputelement:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {

        $(':button').click(function () {

            var elems = document.querySelectorAll('input[type=text]');
            var array = jQuery.makeArray(elems);

            jQuery.each(array.valueOf(), function (i, valor) {
                if (valor == "")
                     $('div:last').append("Error " + valor + '<br/>');
            });

        });

    });
</script>

<form action="page.html" method="post">
    <input type="text" name="name" id="name" /><br />
    <input type="text" name="surname" id="surname" /><br />
    <input type="text" name="mail" id="mail" /><br />
    <input type="text" name="number" id="number" /><br />
    <input type="text" name="date" id="date" /><br />
    <input type="text" name="place" id="place" /><br />
    <div class="linea">
        <input type="submit" name="send" value="SEND" />
        <input type="reset" name="clear" value="CLEAR" />
        <input type="button" name="check" value="CHECK" />
    </div>
</form>
<div style="border: solid red; width: 250px; height: 450px;"></div>

I have also used valor[0].value and valor.eq(0).val(), but I can´t get success.

How can I fix it?

Thanks.

Upvotes: 3

Views: 16548

Answers (4)

VIDesignz
VIDesignz

Reputation: 4783

Here is a decent solution

http://jsfiddle.net/cceg9Ldp/2/

HTML

<form action="page.html" method="post">
    <input type="text" name="name" id="name" data-error='Please Add Name'/><br />
    <input type="text" name="mail" id="mail" data-error='Please Add Email'/><br />
    <div>
        <input type="submit" name="send" value="SEND" />
        <input type="reset" name="clear" value="CLEAR" />
        <input type="button" name="check" value="CHECK" />
    </div>
</form>

<div id="errorMsg"></div>

CSS

input[type=text].error {border:1px solid red;}

jQuery

$(document).ready(function () {
    $(':button').click(function () {
        //Clear Errors
        $('#errorMsg').empty();
        // Remove Input Error
        $('input[type=text]').removeClass('error');
        // Loop through inputs
        $('input[type=text]').each(function() {
            // Get Error Message
            var errorMsg = $(this).attr('data-error');
            // If Empty
            if($(this).val() == "") {
                // Add Error Class
                $(this).addClass('error');
                // Append Error Message
                $('#errorMsg').append(errorMsg+'<br/>');  
            }
       });

    });
});

Upvotes: 1

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

I guess you are about to create validation summary, but there are so many mistakes in your code!

1) You don't need to use makeArray as document.querySelectorAll() gives a list of array

2) You need to check .value instead of having element itself, see following

if (valor.value == "")
   $('div:last').append("Error " + valor+ '<br/>'); //gives you control validated

So your whole code will look like

 $(':button').click(function () {
     var elems = document.querySelectorAll('input[type=text]') //input elements
     jQuery.each(elems, function (i, valor) { //i --> index and valor --> HTMLInputElement
         if (valor.value == "") // check value is blank
             $('div:last').append("Error " + valor.value + '<br/>'); // log that control  
                                                                        or it's value
     });
});

jsFiddle Example

Note: Fiddle will append input elements to the div which are not having values.

Update

you just need to serialize it using serialize() if you want to post it.

Just use 

$(form).serialize()

And to validate that form fields you might have to use jQuery validate plugin.

Upvotes: 2

DFayet
DFayet

Reputation: 881

As you're using jQuery you can do something like this

$(document).ready(function () {
    $(':button').click(function () {

        // Get the form
        var $form = $(this).closest('form');

        // Loop each input (type=text)
        $form.find('input[type=text]').each(function() {

            // Check the value
            if($(this).val() == "") {
                $('div:last').append("Error " + $(this).val() + "<br/>");
            }// if

       });

    });
});

Fiddle example

Hope it may helps you.

Upvotes: 1

Raf Zeres
Raf Zeres

Reputation: 71

Do that, instead:

var elems = $('input[type=text]');

To get each value, just make a loop:

for(var i=0;i<elems.lenght;i++) {
    console.log(elems[i].value);
}

Upvotes: 2

Related Questions