-2

Somehow I keep getting undefined values out of my code. I probably missed something, but can't really figure out what.

Jade:

.orderform
 a(class="nav-button closebutton black", id="order")
  i(class="fa fa-times" aria-hidden="true")
 form(method="post")
  h1 Order Form
  p [...]
  .inputfield
   input(type="text", name="fname", autofocus) 
   label First Name
  .inputfield
   input(type="text", name="fname") 
   label Last Name
  .inputfield
   input(type="email", name="email") 
   label Email
  .inputfield
   input(type="text", name="subject") 
   label Subject
  .inputfield
   textarea(type="email", name="email")
   label Comment
  input(type="submit", value="order")

I can add html code if needed

Javascript/Jquery:

function toggleOrder(){
 $('a#order').click(function(){
  $(".orderform").delay(200).toggle("slide", {
   direction: "right",
   duration: 1000,
   easing: 'easeInOutQuint',
  });

Code that puts out the undefined value:

  $("form").children().each(function(){
   alert(this.value);
   //setTimeout(function(){
    //$(this).eq(i).addClass('shown');
   //}, 500 * (i+1) + 600);
  });
 });
}

So, when I press the dedicated button it alerts a undefined value. Did I miss something or do I need to rewrite the code?

Sven Westerlaken
  • 37
  • 7
  • 1
    well if your indentation is the same as it is here then your form has no elements. Whitespace matters in jade – Craicerjack Jun 02 '16 at 11:29
  • 1
    Also, `$("form").children()` returns all immediate elements in the form, which are `h1` and `p`, and they don't have values. You probably want `$("form").find(":input")` instead. – JJJ Jun 02 '16 at 11:32
  • `children()` only searches one level down, so you are looping through the `h1`, `p`, `.inputfield` and 1 `input`. All but the last one do not have a `value` property – Rhumborl Jun 02 '16 at 11:35
  • @Juhana No I want to select all the children and want to apply the `setTimeout()` function to those elements. This didn't work so wanted to test with alert to check if there was any value put out. But as I read the comments I should put something else? – Sven Westerlaken Jun 02 '16 at 11:36
  • Then I don't get what you want; if you *want* to select the h1 and paragraph elements, why are you surprised that `this.value` is undefined? What did you expect it to show? – JJJ Jun 02 '16 at 11:38
  • Well I expected to get the h1 and p element, but I now realised that the problem is with the .value. I now used `alert(this)` and the right things showed up, but somehow they still don't have the classes added when I apply the code. – Sven Westerlaken Jun 02 '16 at 11:51
  • That's because `this` inside the timeout is no longer the same `this` outside it, see http://stackoverflow.com/questions/5911211/settimeout-inside-javascript-class-using-this (Tip: try to use the [JS console](https://developer.chrome.com/devtools/docs/console) for debugging, instead of alert. It's a lot easier.) – JJJ Jun 02 '16 at 12:02

1 Answers1

0

$("form").children() returns these elements:

h1
p
div.inputfield (5 items)
input[type="submit"]

So you are trying to get values from this elements.

If you need to add classes to all inputfields, you can use:

$(".orderform form .inputfield").each(function(i){
    var _this = $(this);
    setTimeout(function(i){
        _this.addClass('shown');
    }, 500 * (i+1) + 600);
});
Bogdan Dukhevych
  • 44
  • 2
  • 7