hidden inputs

[Lednerb]

Hello elclanrs,

jq-idealforms is such a great plugin!

But I have a question: Is there a possibility to create a hidden field with the add Fields function ?

[elclanrs]

Hi, just committed a patch to be able to add hidden fields.

$idealform.addFields([
  {
    name: 'my-hidden-field',
    type: 'hidden',
    appendToTab: 'Section'
  }
])

When you add the hidden field it won't show up in the form but it's there. In any case, if you're using hidden fields to pass "invisible" data to the server why not use AJAX, and avoid hacky hidden fields?

[Lednerb]

Hey, cool thank you for the fast support!

[Lednerb]

I think theres one bug still left... If you add some fields and you set them as required they are not registred as required till you focus them?

[elclanrs]

Yup, nice catch, I found the bug I'm fixing it I'll upload a fix in a bit.

[Lednerb]

Cool, thx for this great job!

[Lednerb]

AHH! One still more :-D

Same thing with removeFields. There should also be a refresh.

[elclanrs]

What do you mean with removeFields? I mean if you remove it then it's gone right?

[Lednerb]

Ahh. Okay the problem was, that the counter in the tab didn't switched to zero, but i think it was my wrong code. Now it works fine.

[elclanrs]

I found another bug in the addFields method, I'll let you know when I fix these things, shouldn't take long.

[Lednerb]

Okay. Good luck.

[elclanrs]

I think I got it fixed! Try it out, see if it works now.

[Lednerb]

Mh... if i add some fields and want to remove them in a next step the hole form-div will be removed... strange. My fault ?

[elclanrs]

Can't seem to reproduce that...works fine for me, check out this video. Btw, I just committed a fix for the counter not updating when removing fields, it should work now. The video is previous to the fix so it won't update.

[Lednerb]

I would give you the link to my development-page if you want to have a short view?

[elclanrs]

Yah, why not, gimme the link

[Lednerb]

If you change to the 3rd tab and click on "Nein" an than on "Ja" you will see the error.

[Lednerb]

If you reload the page, the code is a lot shorter. Removed some unimportant lines.

[elclanrs]

Ok, let me take a look at it, I'm not so good with German (or Dutch?)...

[Lednerb]

German ;-)

[Lednerb]

The 3rd tab is for the information if the user is a pupil or not. ("Ja" and "Nein"). If he or she is a pupil than he / she should choose their class ("Jahrgang") and the school. And if he / she is a pupil, the other fields should be requiered.

But it's very strange that the hole div container got removed...

[elclanrs]

I couldn't reproduce your problem, it's very weird and don't get any console error. I would always specify the tab you want to append to. I made this little video showing that it does work with your config, at least on my testing environment.

Try doing it with the change event using the name attribute and specifying the tab:

var weitere_felder = [
  {
    name: 'Schule',
    label : 'Meine Schule',
    filters: 'required min',
    data: { min: 5 },
    errors: { 
      required: "Bitte deine Schule auswählen",
      min: "Bitte deine Schule auswählen" 
    },
    type: "text",
    appendToTab: 'Schulinformationen' // Don't forget!
  },
  {
    name: 'Jahrgang',
    label: 'Jahrgang',
    filters: 'exclude required',
    data: { exclude: ['Bitte auswählen'] },
    errors: { exclude: 'Bitte deinen Jahrgang auswählen' },
    type: 'select',
    list: [ 'Bitte auswählen', '7', '8', '9', '10', '11', '12', '13' ],
    appendToTab: 'Schulinformationen' // Don't forget!
  }
]

$('[name=Schueler]').change(function () {
  var val = $(this).val()
  if (val === 'ja')
    $myform.addFields(newFields)
  else
    $myform.removeFields(['Schule', 'Jahrgang'])
})

I also committed a fix for addFields not working properly in responsive mode.

[elclanrs]

Instead of appendToTab which appends the new fields at the end of that section, you can use addAfter to add the fields just after the Schueler field.

addAfter: 'Schueler'

I think this will be better in case you add more fields later.

[Lednerb]

Thx for your great support and your time! I added the ´add:After' option and the change-Event. But removeFields still deletes the hole div around my form.

[elclanrs]

I got an idea. If this is a bug in the removeFields method, which is only around 10 lines of code, it should be easy to fix. Try with this modified jquery.idealforms.min.js where I added a console.log that should output something like this screenshot when you run removefields.

Run it with your code to see what it says. It should just give you the two inputs you're removing plus the form which is returned by the method to maintain chainability.

[Lednerb]

Okay, i have another output. I will do a screenshot... one moment.

[Lednerb]

[Lednerb]

The first command line is missing...

[elclanrs]

That is correct, I just run removeFields with the console. Your problem is very very weird, I can't tell what's wrong.

Here's how I would try to solve it:

• Isolate the form and the scripts
• Build the form from scratch without the custom divs (extra tabs and tab container)
• Try to add or remove fields with a basic form and build up from there

As I showed in the previous video, it works in my environment and I've done some more tests and I just can't reproduce that behavior you're experiencing, so it's very hard to tell why this is happening. It has to be either the removeFields method which I investigated many times and didn't find anything, or some other bug in your code.

[Lednerb]

I HAVE FOUND THE ERROR!

The problem was caused by an hand-writed hidden imput field: (how can i write some code here in guthub?)

[Lednerb]

I removed the hidden field and now it runs as it should. Maybe it's caused by the update for addFields with hidden input fields?

[elclanrs]

Great, finally! I'll look into it, still seems like a very unusual error, but it is possible that the hidden field was the culprit.

[Lednerb]

Ah. I had the same error one minute ago. The problem will occur if you write an input type = "hidden" without the div and label tag. Here is a screenshot:

[Lednerb]

[Lednerb]

Maybe it helps you to improve your plugin further :-)

BIG THX for your great support!

[elclanrs]

Oh, yeah that's gonna give problems. Do it like above, you always need the div, I'm pretty sure the label can be omitted.

<div>
  <input type="hidden" name="SeminarID" value="...">
</div>