jQuery to read non-empty and visible text fields

Question

I am building up a multi-step questionnaire. I have 3 questions (3 divs), the DOM looks like this(Pseudo-code). My question are

1.How can I read the value from the field which type is url ( type='url') in q3?

2.What do read only the non-empty text/textarea/url fields? Meaning I only want to read the text fields when user typed something into it.

I was thinking a stupid way to read each fields no matter if it empty. then i have isset/empty php command to see if this is empty, if so, then i will not take a value. But is there any better way to achieve this?

 <div id=q1>
   <input type='text' id='q1text'>
   <input type='button'>   // this btn will hide q1 and show q2.
 </div>

 <div id=q2 style="display:none">
   <input type='textarea' id='q2textarea'>
   <input type='button'>  // this btn will hide q2 and show q3
 </div> 

 <div id=q3 style="display:none">
   <input type='url' id='q3url'>    // this btn will submit the form data.
   <input type='submit'>
 </div>

Milind Anantwar · Accepted Answer · 2015-05-21 04:26:25Z

6

1.How can I read the value from the field which type is url ( type='url') in q3?

It has id attribute. You can use id selector along with .val()

$('#q3url').val();

2.What do read only the non-empty text/textarea/url fields? Meaning I only want to read the text fields when user typed something into it.

You can use filter function to filter out the element that do not have value in them:

var allnonemptyurls = $('input[type="url"]').filter(function () {
  return !!this.value;
})

answered May 21, 2015 at 4:26

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

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

4 Comments

John Over a year ago

Good answer. Nice use of double not to convert the value to a boolean.

bj4947 Over a year ago

@MilindAnantwar Thanks for the quick reply. I just try your method. I found out this.. the var allnonemptyurls is not a boolean when I try look it up on console. However i put a break point inside the filter callback. !!this.value did return me a boolean, I dont know for some reason when we return the !!this.value back to allnonemptyurls, it actually becomes a DOM object for that url element. Any idea?

Milind Anantwar Over a year ago

That is what it does. it gets the filtered dom object for non empty URLs. what exactly you want??

bj4947 Over a year ago

I guess i understand what you are saying now. I will take the filtered DOM object and if the DOM is empty that means users did not type in anything in that DOM right?

Collectives™ on Stack Overflow

jQuery to read non-empty and visible text fields

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related