6

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>
bj4947
  • 880
  • 11
  • 32

1 Answers1

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;
})
Milind Anantwar
  • 81,290
  • 25
  • 94
  • 125
  • 1
    Good answer. Nice use of double not to convert the value to a boolean. – John May 21 '15 at 04:28
  • @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? – bj4947 May 21 '15 at 05:03
  • That is what it does. it gets the filtered dom object for non empty URLs. what exactly you want?? – Milind Anantwar May 21 '15 at 05:04
  • 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? – bj4947 May 21 '15 at 05:11