I am new to Backbone JS and Question could be duplicate but I am not able to figure out the Problem. I need to handle form submit event in my application to use the default HTML5 validation. but unfortunately it's not working for me. below In securityTokenTmpl and securityQATmpl, i have form with submit button which is not firing submit event but click working fine.
view---------
var securityInfoView = Backbone.View.extend({
tagName : 'div',
className : 'security-info-wrap',
initialize : function() {
var self = this;
$('.application-content-wrap').append(self.$el);
this.$el.append(securityInfoTmpl(self.options.result.bankInfo.siteModel));
if (typeName === "TOKEN_ID" || typeName === "MULTI_LEVEL") {
self.$el.find('.security-info-wrap .content-wrap').html(securityTokenTmpl({
results : data
}));
}
if (typeName === "SECURITY_QUESTION") {
self.$el.find('.security-info-wrap .content-wrap').html(securityQATmpl({
results : data
}));
}
},
events : {
'submit' : 'submit'
},
submit : function(e) {
console.log("form submit");
e.preventDefault();
// there after HTML5 validation i want to make Rest call
}
});
securityQATmpl Template
{{#results}}
<div>
<form id="securityQA" method="POST">
<div class="row">
{{#fieldInfo}}
{{#questionAndAnswerValues}}
<div class="small-12 columns"><label class="addAccountLabel">{{question}}</label>
<input required type='{{responseFieldType}}' name='{{metaData}}'/>
</div>
{{/questionAndAnswerValues}}
{{/fieldInfo}}
</div>
</div>
<div class="row">
<div class="small-9 columns"></div>
<div class="small-3 columns"><input type="submit" class="button" value="Next"/>
</div>
</div>
</form>
<div class="clear"></div>
{{/results}}
securityTokenTmpl Template
{{#results}}
<div>
<form id="securityToken" method="POST">
{{#fieldInfo}}
<div class="row">
<div class="small-12 columns"><label class="addAccountLabel">{{displayString}}</label>
<input required type='{{responseFieldType}}' size='{{maximumLength}}' name="securityToken"/>
</div>
{{/fieldInfo}}
</div>
</div>
<div class="row">
<div class="small-9 columns"></div>
<div class="small-3 columns"><input type="submit" class="button" value="Next" /></div>
</form>
{{/results}}
There was an error in Templates i had a div in template which i was opening before form opening tag and closing before form closing tag it should be closed after form closing tag.
{{#results}}
<div>
<form id="securityToken" method="POST">
{{#fieldInfo}}
<div class="row">
<div class="small-12 columns"><label class="addAccountLabel">{{displayString}}</label>
<input required type='{{responseFieldType}}' size='{{maximumLength}}' name="securityToken"/>
</div>
</div>
{{/fieldInfo}}
<div class="row">
<div class="small-9 columns"></div>
<div class="small-3 columns"><input type="submit" class="button" value="Next" /></div>
</div>
</form>
</div>
{{results}}
Related
I want to show an section when the checkbox is checked on another section, and show it with an animation from the top. I have the following code for the input that is in another section .
<div className="continue" id="first">
<button className="btn-continue">
Contratar Plano
<input type="checkbox" id="reveal-email" role="button"/>
</button>
</div>
<section className="plan-section" id="plan-section">
<div className="next">
<i class="arrow down"></i>
</div>
<div className="form-block">
<form className="form">
<div className="plan-form">
<div className="input-block">
<label htmlFor="name">Nome</label>
<input type="text" name="name" id="name" onChange={props.handleChange} required className="input" />
</div>
<div className="continue">
<button className="btn-continue" id="plan-continue" disabled={props.step.isLast()} onClick={props.next}>
<span className="btn-text">Contratar Plano</span>
<img className="check-btn" src={check} />
</button>
</div>
</div>
</form>
</div>
</section>
Also showing the section I need to show; this section has a default display:none.
Its a classic JS task. Use an onclick event to check if the checkbox is checked and then to change the section from display: none to display: block . Also Add an onclick event so that JS is triggered.
function showSection() {
var showSection = document.getElementById("reveal-email"),
planSection = document.getElementById("plan-section");
if (showSection.checked == true) {
planSection.style.display = "block";
} else {
planSection.style.display = "none";
}
}
#plan-section {
display: none;
}
<div className="continue" id="first">
<button className="btn-continue">Contratar Plano
<input type="checkbox" id="reveal-email" onclick="showSection()">
</button>
</div>
<section className="plan-section" id="plan-section">
<div className="next">
<i class="arrow down"></i>
</div>
<div className="form-block">
<form className="form">
<div className="plan-form">
<div className="input-block">
<label htmlFor="name">Nome</label>
<input type="text" name="name" id="name" onChange={props.handleChange} required className="input" />
</div>
<div className="continue">
<button className="btn-continue" id="plan-continue" disabled={props.step.isLast()} onClick={props.next}>
<span className="btn-text">Contratar Plano</span>
<img className="check-btn" src={check} />
</button>
</div>
</div>
</form>
</div>
</section>
One recommendation regarding your code:
<button className="btn-continue">
Contratar Plano
<input type="checkbox" id="reveal-email" role="button"></input>
</button>
It's not a good practice to group checkbox and some text into button, in HTML you can use label for that.
If JS solution is acceptable, you need to follow these steps:
Find your checkbox button and section in the DOM
Add event listener which will trigger callback function after each change of the checkbox state
In the callback function you need to trigger style for your section.
The full code is below:
var checkbox = document.getElementById('reveal-email');
var section = document.getElementById('plan-section');
checkbox.addEventListener('change', onChange)
function onChange() {
if (this.checked) {
section.style.display = "block";
} else {
section.style.display = "none";
}
}
<div className="continue" id="first">
<button className="btn-continue">
Contratar Plano
<input type="checkbox" id="reveal-email" role="button"/>
</button>
</div>
<section className="plan-section" id="plan-section" style="display:none">
<div className="next">
<i class="arrow down"></i>
</div>
<div className="form-block">
<form className="form">
<div className="plan-form">
<div className="input-block">
<label htmlFor="name">Nome</label>
<input type="text" name="name" id="name" onChange={props.handleChange} required className="input" />
</div>
<div className="continue">
<button className="btn-continue" id="plan-continue" disabled={props.step.isLast()} onClick={props.next}>
<span className="btn-text">Contratar Plano</span>
<img className="check-btn" src={check} />
</button>
</div>
</div>
</form>
</div>
</section>
Using JQuery I would like to check the value of an input, if it equals Complete I would like to add the Bootstrap class is-valid to that input, and all the other inputs on the same row.
Something like this (pseudo code);
if wb_status_reg = Complete {
// add is-valid to all row inputs / select boxes
}
I should note that sometimes the row will contain a select box, not just text inputs. Also, I'm unable to edit the html as it's being generated by a form builder component (in a CMS).
My code is currently working but I know it's too long and could be improved. In my code i'm showing one form-row but I actually have many more, so I need to duplicate this a few more times.
How can I achieve this in a more efficient way?
jQuery(document).ready(function($) {
var wb_stage_reg = $('#wb_stage_reg');
var wb_status_reg = $('#wb_status_reg');
var wb_date_reg = $('#wb_date_reg');
setIsValid($);
});
function setIsValid($) {
wb_stage_reg = ($(wb_status_reg).val().trim() == "Complete") ? $(wb_stage_reg).addClass("is-valid") : "";
wb_status_reg = ($(wb_status_reg).val().trim() == "Complete") ? $(wb_status_reg).addClass("is-valid") : "";
wb_date_reg = ($(wb_status_reg).val().trim() == "Complete") ? $(wb_date_reg).addClass("is-valid") : "";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
<div class="col-3">
<div class="form-group rsform-block-wb-stage-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control" id="wb_stage_reg" name="form[wb_stage_reg]" type="text" value="Registration"><span></span>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="form-group rsform-block-wb-status-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control" id="wb_status_reg" name="form[wb_status_reg]" type="text" value="Complete"><span></span>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="form-group rsform-block-wb-date-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control" id="wb_date_reg" name="form[wb_date_reg]" type="text" value="2020-06-08 09:41:40"><span></span>
</div>
</div>
</div>
</div>
</div>
Something like this:
You need to change ID to class on all fields
Since you cannot, I use the name instead:
$(function() {
$("[name='form[wb_status_reg]']").each(function() {
const $parent = $(this).closest(".form-row");
const complete = this.value === "Complete";
$parent.find("[name='form[wb_date_reg]'], [name='form[wb_stage_reg]']").toggleClass("is-valid",complete)
})
});
.is-valid { color:green}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
<div class="col-3">
<div class="form-group rsform-block-wb-stage-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control wb_stage_reg" name="form[wb_stage_reg]" type="text" value="Registration"><span></span>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="form-group rsform-block-wb-status-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control wb_status_reg" name="form[wb_status_reg]" type="text" value="Complete"><span></span>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="form-group rsform-block-wb-date-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control wb_date_reg" name="form[wb_date_reg]" type="text" value="2020-06-08 09:41:40"><span></span>
</div>
</div>
</div>
</div>
</div>
I have to add element as per the data coming from mssql server in the following area :
<div id="ApplicationForm" class="tabcontent" style="display:none;">
<div class="tab_section">
<div class="container">
<div class="row">
<div class="col-lg-12" style="font-size:16px;">Application Form</div>
<div class="col-lg-12">
<div class="" style="width:100%;border-bottom:1px solid #ddd;padding-top:5px;margin-bottom:10px;"></div>
</div>
</div>
<div ng-bind-html="applnformdata"> //from here on the data should be dynamic
</div>
</div>
</div>
</div>
</div>
</div>
(Sorry if I left any ending div tag).
On click of a button I'm calling a function in angularJs
$scope.dynamicdata=function(){
Method.getbyId("xxxxxxxxxxxx", Id).then(function (response) {
var newEle = '';
for ( i = 0; i < response.data.length;i++){
newEle += "<div class='form-group col-lg-6'>< label class='form_lable' >" + response.data[i].fieldName + "</label ><div class='m_settings_cell'><input type='checkbox' class='m_switch_check' value='1' entity='Test 1'></div></div>"; //when I try to do this it doesnot loads the <label> tag at all
}
$scope.applnformdata = newEle;
}).catch(function (data) {
console.log("access not allowed");
});
}
and I have some entries coming from mssql which have "label name" and checkbox values . How can I make this part to generate dynamically ? Like if 10 entried come then 10 data will be shown , if 5 then 5 and so on ? Please help.
Rather than appending the "div" and using default jquery checkbox, made own switch and used it.
<div class="row">
<div class="form-group col-lg-6" ng-repeat="x in apform">
<div class="col-lg-6">
<label class="form_lable">{{x.fieldName}}</label>
</div>
<div class="col-lg-6" align="right">
<label class="switch">
<input id="{{x.id}}" class="switch-input" type="checkbox" ng-model="x.fieldOption" ng-click="check(x.id)" />
<span id="data_{{x.id}}" class="switch-label" data-on="" data-off=""></span>
<span class="switch-handle"></span>
</label>
</div>
</div>
</div>
I got the problem that i got 2 ng-clicks but only one works. when I reload the page always only one button works the other not. for this i use angularjs, HTML and Css.
the first click:
<img class="cClickable" ng-click="addPassword()" src="plus.svg">
AngularJS:
$scope.addPassword = function() {
var newPassword = {
Id: null,
Name: '',
Passwort: '',
Beschreibung: '',
Category: []
}
$scope.editPassword(newPassword);
$scope.titlePopup = "Neues Passwort hinzufügen";
}
$scope.editPassword = function(password) {
$scope.currentPassword = angular.copy(password);
$scope.isShownEdit = true;
$scope.titlePopup = "Passwort bearbeiten";
}
the second button:
<img class="cClickable cTableImgedit" ng-click="editPassword(item)" src="pencil.svg">
when i click the button a popup is in the front.
the images are existing.
this is the popup.
<div class="backgroundOverlay cShow" ng-show="isShownEdit">
<div class="dropDown positionPopUp inpuBlock" id="add">
<div class="inputBlock">
<h1 class="popupTitle">{{titlePopup}}</h1>
<div>
<div class="cClearFloat cInputSpace">
<input placeholder="Name" ng-model="currentPassword.Name">
</div>
<div class="cClearFloat cInputSpace">
<input placeholder="Passwort" ng-model="currentPassword.Passwort">
</div>
<div class="cClearFloat cInputSpace">
<input placeholder="Beschreibung" ng-model="currentPassword.Beschreibung">
</div>
<div class="cClearFloat cInputSpace">
<div class="divSmall">
<label class="inputDropdownPlaceholder">Kategorien</label>
<div class="divOptions" ng-repeat="item in categories">
<label class="labelDropDown"><input type="checkbox" class="inputDropDown" ng-model="item.isChecked" ng-checked="checkedCategory(item)" ng-init="item.isChecked = checkedCategory(item)" ng-change="changedCategory(item)">{{item.Label}}</label><br>
</div>
</div>
<div class="cClearFloat cButtons">
<button class="cButtonSpeichern" ng-click="showAlertPassword()">Speichern</button>
<button class="cButtonAbbrechen" ng-click="isShownEdit= false">Abbrechen</button>
</div>
</div>
</div>
</div>
</div>
</div>
when i click on the images the popup comes into the front.
I have a form from a model where I am trying to update multiple records with one submit. I couldn't get it working
Here is the haml code with slight ruby in it.
.container#questions
.col-md-8
- #questions.each do |q|
- ans = #user.answers.where(question_id:q.id).first.try(:content)
.edit-input
%input.form-control.edit-answer{data: {question_id: q.id, url: api_v1_answers_path(), user_id: #user.id}, placeholder: "#{q.description}", value: "#{ans}"}
%button#update-answers{:type =>'submit', :class=> 'btn btn-primary'} Update
Here is the html that gets generated
<div class="container" id="questions">
<div class="col-md-8">
<div class="info">
<div class="question"> Question1 </div>
<div class="edit-input">
<input class="form-control edit-answer" data-question-id="2" data-url="/api/v1/answers" data-user-id="46" placeholder="" value="example1">
</div>
</div>
<div class="info">
<div class="question"> Question2 </div>
<div class="edit-input">
<input class="form-control edit-answer" data-question-id="3" data-url="/api/v1/answers" data-user-id="46" placeholder="" value="example2">
</div>
</div>
<button class="btn btn-primary" id="update-answers" type="submit">Update</button>
</div>
</div>
When I click on update button, I don't see any action or post happening