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>

Answer 1

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