Develop Reference

Better way to prevent Page reloading when submitting multiple forms at once?

I'm currently working on a making a reference UI using vue.js. To dynamically generate the forms to change the settings by reading from a settings.js, I iterate over it like this:
template: `
<div class="card shadow p-3 mb-3 bg-white rounded ">
<h2>{{settings.title}}</h2>
<form v-bind:id="settings.formName">
<div class="form-group" v-for="input in settings.inputs" v-bind:key="input.name">
<label v-bind:for="input.name" v-if="input.label !== ''">{{input.label}}</label>
<textarea class="form-control" v-if="input.type == 'textarea'" v-bind:required="input.required" v-bind:maxlength="input.maxlength" v-bind:rows="input.rows" v-bind:cols="input.cols"></textarea>
<input class="form-control" v-else v-bind:required="input.required" v-bind:maxlength="input.maxlength" v-bind:placeholder="input.placeholder" v-bind:type="input.type" v-bind:name="input.name" v-bind:id="input.name" >
</div>
</form>
</div>
</div>
`,
I want to submit all changes in all forms with one button click (tbh I'd prefer being able to just submit it by pressing Enter without an actual button, but the keyboard events in vue are deprecated) without the page reloading. (I am not using jQuery) Thus, in my index.html, I do this:
<div id="app" class="container-fluid bg-light">
<div class="row">
<div class="col-12 text-center mt-3">
<h1 class="border border-secondary">Dash Test</h1>
</div>
<div id="settings" class="col col-12 col-md-12 col-xl-2">
<card v-for="item in Settings.settings" v-bind:key="item.title" v-bind:settings="item">
</card>
</div>
<input type="button" value="Test" onclick="submitForms()"/>
</div>
</div>
<script type="text/javascript">
var submittableForms = [];
window.onload = function(){
for(item in document.forms){
if(typeof document.forms[item].id !== 'undefined'){
submittableForms.push(document.forms[item].id)
}
}
}
function submitForms(){
for(item in submittableForms){
var form = document.getElementById(submittableForms[item]);
form.addEventListener('submit', handleForm)
console.log(submittableForms[item]);
}
}
function handleForm(event){
event.preventDefault();
event.submit();
}
</script>
which I came up with after a couple of hours of trying different methods I found, and it works fine. However, I do know that adding an EventListener in a for loop - especially when it is going to be called multiple times - is NOT a good practice. However I have not managed to find another way around the problem.
What I've tried so far:
Use #submit.prevent="myFunction" with vue, and handle the passing of values in the method section.
Use "form.submit().preventDefault(); which someone said works, but it just gives me "this is not a
function"
use return=false; after calling sumbit(); as specified in other solutions on this site, which does not
work either.
One last thing I could do is try and make it one form in split "Cards", which should circumvent this issue, but I'd still be interested in how one would do it the current way.

Switching between partial forms using radio inputs

I have this template that depending on which radio input is clicked the form changes. The teacher-signup-form is checked by default.
<!-- when user clicks either teacher or student a different partial will render in view
each partial is wrapped in its own form element -->
<div class="container">
<div class="d-flex flex-row mt-5 mb-5">
<h2 style="font-family: 'champagne-limo';" class="">General Information:</h2>
</div> <!--teacher-student checkboxes -->
<div class="row">
<div class="col-4">
<h5>You are:</h5>
</div>
<div class="col-2">
<input checked name="teacher-student" type="radio" id="teacher-signup">
<label for="teacher-signup">Teacher</label>
</div>
<div class="col-2">
<input type="radio" name="teacher-student" id="student-signup">
<label for="student-signup">Student</label>
</div>
</div>
</div>
<!--this partial would have the id of 'teacher-signup-form' -->
<%-include("./partials/teacher-signup.ejs")%>
<!--this partial would have the id of 'student-signup-form' -->
<%-include("./partials/student-signup.ejs")%>
In my jQuery, I created a simple function that should switch the forms
$('#student-signup-form').hide();
$('#input[name="teacher-student"]:radio').on('change', function(){
$('#teacher-signup-form').hide();
$('#student-signup-form').show();
})
});
Unfortunately this does not work and shows both forms for a few seconds then hides the student-signup-form.
Is there a more cleaner efficient way to do this? My jQuery seems like it isn't the best solution.

I would suggest a few changes. First to hide the student-signup-form on page load you could add the css to do so.
#student-signup-form { display: none; }
Then in order to allow the toggle back and forth from student and teacher, what I would suggest is you give each form a class of signup-form in addition to the ids they have. Then your radio buttons could be changed to something like the following.
<input type="radio" name="teacher-student" class="signup-radio" id="teacher-signup" data-target="#teacher-signup-form" checked>
<input type="radio" name="teacher-student" class="signup-radio" id="student-signup" data-target="#student-signup-form">
Then you can generalize the change handler for the form class and the data element on the radios.
//cache the forms lookup
var $signupForms = $('.signup-form');
$('.signup-radio').on('change', function(e){
var $this = $(e.target);
//hide the forms that do not match the target selector
$signupForms.not($this.data('target')).hide();
//show the form that matches the target selector
$signupForms.filter($this.data('target')).show();
});

Set the initial state based on static CSS. Otherwise while the page is loading you will see both.
So set style display:none on the student partial.
Then your JS would just become
$('#input[name="teacher-student"]:radio').on('change', function(){
$('#teacher-signup-form').toggle();
$('#student-signup-form').toggle();
})
});

RemoveClass not responding to two part form

I have a form that I am controlling visually with jQuery. I am using removeClass to remove a few classes on the first part of the form, which works fine. However when the button is clicked to go to the second part of the form, the form is not responding to the removeClass and I can't figure out why this is happening. I have tried adding an event (below) to see if I am able to target the class/id within the div, but no luck either. Any suggestions would be greatly appreciated.
$(document).ready(function(){
$('input#createMember').click(function(){
$.find('account-edit-engagement-block').removeClass('col-md-6');
});
});
Ok Here is the code for the form. I am trying to remove the classes associated to this segment ""
<div class="form-container promo-carousel-lp__form">
<h4>Get $150 for signing up</h4>
<div class="account-edit-engagement-block"><script
src="/bundles/ActivationFormBlock?
v=FmZitrV3y_UtI4ysqjWZ2dKUPIGjPegx-dWRIDqgcrI1"></script>
<div id="activateAccount">
<div class="">
<div id="activationview"></div>
<div id="editview">
<script src="/bundles/AccountEdit?
v=V6iouLyL7iEfMRGYC4DTKQc8Yv95VNfdF_08-ZAgeRU1"></script>
<div id="editAccount">
<div class="row">
<div class="col-md-offset-3 col-md-6 col-xs-12">
<form action="/api/UserApi/EditUserAsync"

EDIT Try this again, iterate:
$(document).ready(function(){
$('input#createMember').click(function(){
$('.account-edit-engagement-block').each(function(ix,ex){
$(ex).find('.col-md-6').removeClass('col-md-6');
});
});
});
Fiddle HERE: https://jsfiddle.net/u5bLfrks/1/

jQuery in Meteor having trouble finding DOM selectors

Here is the template whose DOM elements I am trying to control:
<template name='libraryTemplate'>
<div class="container-fluid library_container">
<div class="row">
<div class="col-sm-6">
<h1 id='maglens_library_header'>MY LIBRARY</h1>
<div id='library_page_break'></div>
<div id='folders_text'>
Folders:
</div>
</div>
<div class="col-sm-6">
<a class='button-text btn' id='add_new_button'>ADD NEW</a>
</div>
</div>
<div class="row">
<div class="col-sm-3 folders" id='google_drive_thumbnail'></div>
</div>
</div>
</template>
And here is the jQuery Im using to do so. My $('body') selector works fine, and my log statement just inside $(document).ready() behaves correctly, but why can't I target the selector $('.folders')? Upon inspection of the DOM, I can see exactly where the code is, but it's like jQuery thinks it doesnt exist?
$(document).ready(function(){
console.log('document ready');
$('.folders').on('click', function(){
console.log('folders clicked');
})
// $('body').on('click', function(){
// console.log('body clicked');
// })
});

I don't see any selectors named folders.
I do see <div id='folders_text'>.
That's why your body event fires but your other one doesn't.
Secondly, you should be using template events, you're working with Meteor now.
Template.libraryTemplate.events({
'click .folders': function() { console.log('clicked') }
})

I'd definitely recommend using the meteor events as everyone else suggested.
What you had actually works, it is just since the div with the "folders" class has no content, the div is very small (unless you have a height attribute on ".folders" or "#google_drive_thumbnail") and thus very hard to click on. Inspect element on the div and you'll see the size

Jquery class is not responding to .click() despite being listed within selectors

I have some several labels on a webpage, that can be clicked, and all share the class 'btn'. In the console, if I use the selector $('.btn'); among others the following elements DO appear:
<label id=​"skillstable_Certification" class=​"row btn">​Certification​</label>​,
<label id=​"skillstable_Compliance" class=​"row btn">​Compliance​</label>​,
<label id=​"skillstable_Technology" class=​"row btn">​Technology​</label>​,
<label id=​"skillstable_version(s)​" class=​"column btn">​Version(s)​</label>,​
<label id=​"skillstable_startdate" class=​"column btn">​StartDate​</label>​,
<label id=​"skillstable_enddate" class=​"column btn">​EndDate​</label>​,
<label id=​"skillstable_elapsedtime" class=​"column btn">​ElapsedTime​</label>,​
<label id=​"skillstable_expertiserating" class=​"column btn">​ExpertiseRating​</label>,​
which matches the HTML:
</fieldset>
<label id="fs_skillstable_heading" class="fs btn heading skillstable">Skills Table</label><br class="">
<label id="skillstable_Certification" class="row btn">Certification</label>
<label id="skillstable_Compliance" class="row btn">Compliance</label>
<label id="skillstable_Technology" class="row btn">Technology</label><br class="">
<label id="skillstable_version(s)" class="column btn">Version(s)</label><br class="">
<label id="skillstable_startdate" class="column btn">StartDate</label><br class="">
<label id="skillstable_enddate" class="column btn">EndDate</label><br class="">
<label id="skillstable_elapsedtime" class="column btn">ElapsedTime</label><br class="">
<label id="skillstable_expertiserating" class="column btn">ExpertiseRating</label><br class="">
</fieldset>
however, these elements only are not registering with the $('.btn').on('click', function() {...}) function, which has a console.log() section to show that it has been clicked. They all have the .btn class, so I am totally lost here. I am trying to make an array to use for persistence, and made a quick variable with .push() to show all the elements I have clicked on so i can use that string to make a persistent URL, but noticed that these sections only are not registering.
The generation for the elements are scoped within a self calling function (function TCC() {...})();, so I tried pulling them out of that function and calling them individually, but that did not work either. I also switched the functions from .click() to .on('click', function(){}) to no avail.
Here is the webpage.

Try this; on() usage :
Edit: #David Thomas mentioned this.id; will be better than $(this).attr('id'); :
$(document).on('click','.btn',function() {
var whichPart = this.id;
console.log(whichPart);
});
Here is jsFiddle.

The issue occurs because you bind the click event, before the "column button generator" loop. Easiest fix would be to use a "live" event
$('.btn').live('click',function(){...})
Or alternatively, create a callback for the loop and bind the click event then.

You can test the sample code on following link:
http://jsfiddle.net/shivkant/ueHNg/4/

your page works in chrome for me, i clicked on Expertise/skills/tools etc in the left section and it shows the links i clicked in the orange section on the right if that is what you wanted.
It works in IE if console/developer tools is opened already, it might be because you used console.log statements in your code
Refer to this
What happened to console.log in IE8?