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

Question

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.

You don't need to make it array as using makeArray, it's already gives you an array! — Dhaval Marthak
– Dhaval Marthak, Commented Aug 21, 2015 at 13:02

Dhaval Marthak · Accepted Answer · 2015-08-21 13:14:59Z

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.

Raf Zeres · Accepted Answer · 2015-08-21 13:01:10Z

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); }

DFayet · Accepted Answer · 2015-08-21 13:02:17Z

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.

VIDesignz · Accepted Answer · 2015-08-21 13:21:52Z

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/>'); } }); }); });

Collectives™ on Stack Overflow

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

4 Answers 4

jsFiddle Example

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related