JQuery for reading non-empty and visible text fields

Question

I am compiling a multi-stage questionnaire. I have 3 questions (3 divs), the DOM looks like this (Pseudocode). My question is:

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

2. What only non-empty text / textarea / url fields read? Value I only want to read text fields when a user types something into it.

I thought a stupid way to read all fields, regardless of whether it is empty. then I have isset / empty php command to see if it is empty, if so then I will not accept the value. But is there a 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> 

Answer 1

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

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

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

2. What only non-empty text / textarea / url fields read? Value I only want to read text fields when a user types something into it.

You can use the filter function to filter out an element that does not matter in them:

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