what is the best way to clear bootstrap modal form data without using jquery?
I could use this, but I would like to know the angular way of clearing modal form data.
$('#myModal').on('hidden', function () {
$('#Username').val("");
});
Edit:
I have multiple elements on the form. I found out the easiest way is to create a service to reset the object and updates the ng-models on the form.
To reset the form object, call the shared service to reset: mySharedService.resetObj(); To clear the form in controller:
$scope.myObj = mySharedService.getObj();
$scope.myForm={};
$scope.myForm.myData = angular.copy($scope.myObj);
all the elements is under the 'myData' item.
Use ng-bind to set the value of whatever inside the <div class="modal-body"> equal to a $scope variable, then change the $scope variable on whatever action you want, most likely on the cancel event, like so:
$scope.cancel = function () {
$scope.yourVariable = "";
$modalInstance.dismiss('cancel');
};
the binding is like this:
<div class="modal-body">
<div ng-bind="yourVariable"></div>
</div>
Related
Before I started using Vue I had a simple form that would update 1 value on 1 column # 1 request at a time. Now I am using Vue and my form has a new 'middle' button that is being used to build up an array of items to submit 1 request to update multiple columns dynamically.
Problem is now that prevent default is enabled, my original form submission no longer works and I need to either submit the request with Vue or is there a way to re-enable default action on a button? This would be great.
<form #submit.prevent="newbutton">
// new button
<button #click="newbutton"></button>
// original button
<button #click="submit" :id="{{ $element->id }}></button> // #submit.enableDefault ??
The prevent is just a helper method on the #submit. To allow this variance you will need to move the logic into your newbutton method
// in template remove prevent
<form #submit="newbutton" action="/where-this-should-post">
// in script move logic to your newbutton method
methods {
newbutton(event) {
if (formNotValid) {
event.preventDefault()
}
}
}
I have an embedded Marketo form I am using on my site.
When I click submit I want the form to reset to its original state.
What do I need to add to my code for this, and better yet where can I find this in the Marketo documentation?
Here's my current code
<script src="//app-sjg.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm"></form>
<script>
MktoForms2.loadForm("//app-sjg.marketo.com", "819-OWT-537", 1404);
</script>
<script>
MktoForms2.whenReady(function (form){
form.onSuccess(function(values, followUpUrl){
$('#confirmform').modal('show');
return false;
});
});
</script>
The Marketo Form object does not have the reset functionality, but luckily enough, javascript has such a native .reset() method on the HTML form elements. This .reset() method will restore a form element’s default values.
Having said that, the only thing to do within the .onSuccess() callback is to grab the HTML form. Calling the .getFormElem() method of the Marketo Form object, will give us the jQuery wrapped form element, so with form.getFormElem()[0] finally we get the form node, on which we can call .reset().
Here is the sample code:
<script src="//app-lon06.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm"></form>
<script>
// The fourth argument of the `.loadForm()` can be used as an onReady callback.
MktoForms2.loadForm("//app-sjg.marketo.com", "819-OWT-537", 1404, function(form) {
form.onSuccess(function(values, followUpUrl){
// $('#confirmform').modal('show');
console.log(form);
// .getFormElem() returns the jQuery wrapped form element
var formElement = form.getFormElem()[0];
// .reset() is a native javascript method.
formElement.reset();
// If boolean `false` is returned then the visitor
// will NOT be forwarded to the follow up page!
return false;
});
});
</script>
Note: the good thing is, that all the important hidden fields (e.g.: formid and munchkinId) will remain intact.
I would like to create a dynamic form using polymer, meaning that everytime the user press "add" button,it will add a new field in the form. Or, more specifically, it will add a paper-dropdown-menu, where all of the options come from a dom-repeat fed by an ajax call.
this is what i've done so far:
<div id="filterContainer">
<div class="flex rulesForm" id="filter1">
<paper-dropdown-menu name="rule1A" no-label-float>
<paper-listbox attr-for-selected="value" selected="{{filter1A}}" class="dropdown-content" id="thirdPartyFilter1A">
<template is="dom-repeat" items="{{rule1A}}">
<paper-item value="[[item]]">[[item]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</div>
</div>
<paper-button raised on-tap="addFilterField">Add</paper-button>
<div>
and in the JS:
addFilterField: function () {
let dropdown = document.createElement('paper-dropdown-menu');
dropdown.name = "";
dropdown.noLabelFloat = true;
let listbox = document.createElement('paper-listbox');
listbox.class = "dropdown-content";
listbox.attrForSelected = "value";
listbox.selected = "{{filter1A}}";
let paperItem = document.createElement('paper-item');
paperItem.value = "[[item]]";
var itemNode = document.createTextNode('[[item]]');
paperItem.appendChild(itemNode);
listbox.appendChild(paperItem);
dropdown.appendChild(listbox);
console.log(dropdown);
filterContainer.appendChild(dropdown);
my problem is about the data-binding... If I use createTextNode with [[item]], it will simply write it as a string in the document. Is there a way to fix this? (or a way easier solution to add field in a form?)
first of all you cannot use binding notation in javascript. it is markup
2nd, polymer doesn't yet support creating data bindings dynamically. however I'm sure you can accomplish what you are trying to do.
3rd,
you have to use the Polymer Dom API. https://www.polymer-project.org/1.0/docs/devguide/local-dom#dom-api
instead of paperItem.appendChild(itemNode)
you would use
Polymer.dom(listbox).appendChild(itemNode);
I am trying to build a small, 3 step form. It would be something similar to this:
The way I did this in react was by using redux to track form completion and rendering the form body markup based on the step number (0, 1, 2).
In angular 2, what would be a good way to do this? Here's what I am attempting at the moment, and I'm still working on it. Is my approach fine? Is there a better way to do it?
I have a parent component <app-form> and I will be nesting inside it <app-form-header> and <app-form-body>.
<app-form>
<app-header [step]="step"></app-header>
<app-body [formData]="formData"></app-body>
</app-form>
In <app-form> component I have a step: number and formData: Array<FormData>. The step is just a index for each object in formData. This will be passed down to the header. formData will be responsible the form data from user. Each time the form input is valid, user can click Next to execute nextStep() to increment the index. Each step has an associated template markup.
Is there a better way to do something like this?
don't overdo it, if it is a simple form you don't need to use the router or a service to pass data between the steps.
something like this will do:
<div class="nav">
</div>
<div id="step1" *ngIf="step === 1">
<form></form>
</div>
<div id="step2" *ngIf="step === 2">
<form></form>
</div>
<div id="step3" *ngIf="step === 3">
<form></form>
</div>
It's still a small template, and you kan keep all of the form and all the data in one component, and if you want to you can replace the ngIf with something that switches css-classes on the step1,2,3 -divs and animate them as the user moves to the next step
If you want to keep things extensible, you could try something like this:
<sign-up>
<create-account
[model]="model"
[hidden]="model.createAccount.finished">
</create-account>
<social-profiles
[model]="model"
[hidden]="model.socialProfiles.finished">
</social-profiles>
<personal-details
[model]="model"
[hidden]="model.personalDetails.finished">
</personal-details>
</sign-up>
export class SignUpVm {
createAccount: CreateAccountVm; //Contains your fields & finished bool
socialProfiles: SocialProfilesVm; //Contains your fields & finished bool
personalDetails: PersonalDetailsVm; //Contains your fields & finished bool
//Store index here if you want, although I don't think you need it
}
#Component({})
export class SignUp {
model = new SignUpVm(); //from sign_up_vm.ts (e.g)
}
//Copy this for personalDetails & createAccount
#Component({})
export class SocialProfiles {
#Input() model: SignUpVm;
}
In my Polymer 1.0 app, I have an on-tap function which dynamically adds another button into the page based on a few parameters in the form. The problem is that after adding the element and its event listener to the page, the new button won't actually fire the on-tap event.
JSFiddle for testing: https://jsfiddle.net/dme6tb7z/
index.html
<template is="dom-bind" id="app">
<div id="output"></div>
<paper-button id="myButton" on-tap="_addButton">Add Button</paper-button>
</template>
<script src="app.js"></script>
Here is where I create the new button and give it a listener in JS. Is there some kind of extra step I need to take so that Polymer can "see" the new on-tap event listener?
app.js
app._addButton = function(e) {
var el = document.createElement('paper-button');
el.innerHTML = "New Button";
el.id = "newbutton";
el.addEventListener('on-tap', '_testEvent');
this.$.output.appendChild(el);
// I also tried adding the event listener after appending
// the element to the page, like so...
// this.$.newButton.addEventListener('on-tap', '_testEvent');
};
app._testEvent = function(e) {
console.log(e);
};
EDIT
I'm thinking maybe I need to use something like Polymer.dom(parent).appendChild(node) to keep the two DOMs in sync. I did this in my app.js like so, but the event still doesn't fire.
app.js scope
(function(document) {
'use strict';
var app = document.querySelector('#app');
...
app._addButton = function(e) {
var el = document.createElement('paper-button');
el.innerHTML = "New Button";
el.id = "newbutton";
el.addEventListener('on-tap', '_testEvent');
var parentNode = document.getElementById('output');
Polymer.dom(parentNode).appendChild(el);
};
...
})(document);
Surely, there must be some way to add event listeners after initial page load? I've done this same thing countless times in other setups, but there's something weird going on with Polymer... I understand there are two DOMs to update, but I'm using the Polymer.dom method, so what in the world is preventing this from happening?
More Info
I noticed that after appending the new button to the page, I can successfully run this:
document.getElementById('newbutton').innerHTML = 'Hello World';
whereas this:
document.getElementById('newbutton').addEventListener('on-tap', '_testEvent');
has no effect (and no errors). Isn't that bizarre? Is there some sort of reinvented registration process in Polymer to add event listeners?
Okay, I think I figured it out.
First of all, on-tap in this context should be tap.
Second, the function name from JS should be formatted like this: this.functionName, or app.functionName if your template has an id of "app" and app is defined as var app = document.querySelector('#app');
All together, it looks like this:
var newElement = document.getElementById('newbutton');
newElement.addEventListener('tap', this._testEvent );
This doesn't work in the JS Fiddle for some reason, but does work in a real Polymer environment.