Sweet Alert with form JS (3 input)

Sweet Alert with form JS (3 input) - javascript

I would like to implement a form inside of the sweet alert. I can put just one input inside, with title and body.
There is a way to customize the alert, docs says it, but is not allowed to load class css3 from my framework (customizecss.com) or from my style.css.
I'm trying to include a input inside of the alert, this way:
swal({
title: "HTML <small>Title</small>!",
text: "<input type='text'><label class='my-label'>Name</label>",
html: true
});
And it doesn't work, only show the label... why?
I wonder if there is some way to do it...
Thanks!
Sweet Alert -> https://github.com/t4t5/sweetalert

You can use this plugin in order to achive what you want:
https://github.com/taromero/swal-forms
It creates forms inside the modal in a syntax-fiendly manner:
swal.withForm({
title: 'More complex Swal-Forms example',
text: 'This has different types of inputs',
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Get form data!',
closeOnConfirm: true,
formFields: [
{ id: 'name', placeholder: 'Name Field' },
{ id: 'nickname', placeholder: 'Add a cool nickname' },
{ id: 'password', type: 'password' },
{ name: 'sex', value: 'Male', type: 'radio' },
{ name: 'sex', value: 'Female', type: 'radio' },
{ name: 'skills', value: 'JS', type: 'checkbox' },
{ name: 'skills', value: 'Ruby', type: 'checkbox' },
{ name: 'skills', value: 'Java', type: 'checkbox' },
{ id: 'select',
type: 'select',
options: [
{value: 'test1', text: 'test1'},
{value: 'test2', text: 'test2'},
{value: 'test3', text: 'test3'},
{value: 'test4', text: 'test4'},
{value: 'test5', text: 'test5'}
]}
]
}, function (isConfirm) {
// do whatever you want with the form data
console.log(this.swalForm) // { name: 'user name', nickname: 'what the user sends' }
})

I know this is old, but I'll answer the question for all the web searchers out there:
You need to give an array as an argument, using an html property:
swal({
html: "<form action='verify.php' method='post'>
<input id='user' type='email'>
<input id='pass' type='password'>
<input id='idno' type='number'>
<submit>
</form>"});
Replace verify.php with whatever page you need the data in, and replace the string after html: with whatever HTML code you need.
The only downside is that people need to hit the submit-button on the form, and not SweetAlert's own button, although there might be a way to remove SweetAlert's own button too.

It looks like you can use a Sweet Alert with a type of 'input' (as opposed to 'error' or 'warning').
$window.swal({title: 'Text Entry', text: 'Put some text here, please.', type: 'input'});
From the Github README:
A prompt modal where the user's input is logged:
sweetAlert({
title: "An input!",
text: 'Write something interesting:',
type: 'input',
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top"
}, function(inputValue){
console.log("You wrote", inputValue);
});

Related

How to access to nested objects keys

I am trying to get the value from a data file with nested objects.
I want to create a label for each entry that i have under the EN object. So I would like to end up having a "mail" label a "quote" label and a "phone" label.
In the label I want to put the content of tabLabel and tabIcon by accessing it.
With Object.Keys() i can see the strings but when I try to console.log them I get undefined.
I did this function but is not working:
function generateLabel() {
const keys = Object.keys(TabFormData.EN);
for (let i = 0; i < keys; i += 1) {
return `
<div class="${ID}_tab-form__headerItemWrap">
<label for="taLabel-here"><i class="tabIcon-here"></i></label>
</div>
`;
}
}
This is the data:
const TabFormData = {
EN: {
mail: [
{
tabLabel: 'Email Our Team',
tabIcon: 'fa fa-envelope',
},
{
label: 'First Name',
type: 'text',
name: 'name',
required: true,
hint: 'Please, provide your Name.',
},
{
label: 'Last Name',
type: 'text',
name: 'surname',
required: true,
hint: 'Please, provide your Last Name.',
},
{
label: 'Email Address',
type: 'email',
name: 'email',
required: true,
hint: 'Please, provide a valid email.',
},
{
label: 'Your Message',
type: 'textarea',
required: true,
name: 'message',
hint: 'Write us a message.',
rows: 20,
cols: 50,
},
{
label: 'About You',
required: true,
select: [
'Home use',
'Business use',
'Freelance, professional',
],
},
],
quote: [
{
tabLabel: 'Request a Quote',
tabIcon: 'fa fa-file-invoice-dollar',
},
{
label: 'First Name',
type: 'text',
name: 'name',
required: true,
hint: 'Please, provide your Name.',
},
{
label: 'Last Name',
type: 'text',
name: 'surname',
required: true,
hint: 'Please, provide your Last Name.',
},
{
label: 'Phone Number',
type: 'number',
name: 'telephone',
required: true,
hint: 'Please, provide a valid number',
},
{
label: 'Email Address',
type: 'email',
name: 'email',
required: false,
hint: 'Please, provide a valid email.',
},
{
label: 'Your Message',
type: 'textarea',
required: false,
name: 'message',
hint: 'Write us a message.',
rows: 20,
cols: 50,
},
{
label: 'About You',
required: true,
select: [
'Home use',
'Business use',
'Freelance, professional',
],
},
],
call: [
{
tabLabel: 'Call Me Back',
tabIcon: 'fa fa-phone',
},
{
label: 'First Name',
type: 'text',
name: 'name',
required: true,
hint: 'Please, provide your Name.',
},
{
label: 'Last Name',
type: 'text',
name: 'surname',
required: true,
hint: 'Please, provide your Last Name.',
},
{
label: 'Phone Number',
type: 'number',
name: 'telephone',
required: true,
hint: 'Please, provide a valid number',
},
{
label: 'About You',
required: true,
select: [
'Home use',
'Business use',
'Freelance, professional',
],
},
],
},
IT: {
},
};

Your problem is in the loop.
for (let i = 0; i < keys; i += 1)
In here you're checking if i is less than an array object, which is not what you want.
You want to compare i against the number of items in the array.
So that would become this:
for (let i = 0; i < keys.length; i += 1)
Your string literal is also wrong, ID in this case is an undefined variable. I assume you want the name of the key. For this issue it should become:
<div class="${keys[i]}_tab-form__headerItemWrap">
Also, once you return from the for loop, it'll automatically break on the first iteration (meaning you'll always get only one item). What you could do is build your whole string first then return it.
That would make your function become:
function generateLabel() {
const keys = Object.keys(TabFormData.EN);
var str = "";
for (let i = 0; i < keys.length; i += 1) {
str +=
`<div class="${keys[i]}_tab-form__headerItemWrap">
<label for="taLabel-here"><i class="tabIcon-here"></i></label>
</div>
`;
}
return str;
}
Here's a Fiddle.

If I understand correctly, you are looking something like this:
let cb = (v) => `<div class="${v[0]}"><label for="${v[1][0]['tabLabel']}"><i class="${v[1][0]['tabIcon']}"></i></label></div>`
Object.entries(TabFormData['EN']).map(cb);
Object.keys() returns the only the keys of the object, however it seems that you want to access the values as well. So, in your case Object.entries() is preferred.
I recommend to read the link below:
https://javascript.info/keys-values-entries

As reported by #Adriani6, you have issues in the loop, but to actually answer your question, here's how to access the nested objects:
function generateLabel() {
const keys = Object.keys(TabFormData.EN);
for (let i = 0; i < keys.length; i += 1) {
let currentTabObject = TabFormData.EN[keys[i]];
console.log(currentTabObject[0].tabLabel);
console.log(currentTabObject[0].tabIcon);
}
}

Assuming you assign TabFormData.EN to a variable called data and the Object.keys result of TabFormData.EN to a variable called keys, you can use:
${keys[i]} to retrieve the name and append it to your div classname,
${data[keys[i]][0].tabLabel} to retrieve the tabLabel property value and append it to your <label> tag, and
${data[keys[i]][0].tabIcon} to retrieve the tabIcon property value and append it to your <i> tag.
You can ignore the <hr> tags, the <button> tag and the rendered <div> tags and just check the object property references in the code snippet below if you want. They are just there for illustrating the code results in the jsFiddle and the code snippet below:
/* JavaScript */
var x = document.getElementById('abc');
var btn = document.getElementById('btn');
function generateLabel() {
const data = TabFormData.EN;
const keys = Object.keys(data);
for (let i = 0; i < keys.length; i += 1) {
x.innerHTML += `
<hr>
<div class="${keys[i]}_tab-form__headerItemWrap">
<label for="${data[keys[i]][0].tabLabel}">
<i class="${data[keys[i]][0].tabIcon}-here">
class of this div is ${keys[i]}_tab-form__headerItemWrap, label for this is ${data[keys[i]][0].tabLabel} and icon is ${data[keys[i]][0].tabIcon}
</i>
</label>
</div>
<hr>`
}
}
btn.addEventListener('click', generateLabel);
const TabFormData = {
EN: {
mail: [
{
tabLabel: 'Email Our Team',
tabIcon: 'fa fa-envelope',
},
{
label: 'First Name',
type: 'text',
name: 'name',
required: true,
hint: 'Please, provide your Name.',
},
{
label: 'Last Name',
type: 'text',
name: 'surname',
required: true,
hint: 'Please, provide your Last Name.',
},
{
label: 'Email Address',
type: 'email',
name: 'email',
required: true,
hint: 'Please, provide a valid email.',
},
{
label: 'Your Message',
type: 'textarea',
required: true,
name: 'message',
hint: 'Write us a message.',
rows: 20,
cols: 50,
},
{
label: 'About You',
required: true,
select: [
'Home use',
'Business use',
'Freelance, professional',
],
},
],
quote: [
{
tabLabel: 'Request a Quote',
tabIcon: 'fa fa-file-invoice-dollar',
},
{
label: 'First Name',
type: 'text',
name: 'name',
required: true,
hint: 'Please, provide your Name.',
},
{
label: 'Last Name',
type: 'text',
name: 'surname',
required: true,
hint: 'Please, provide your Last Name.',
},
{
label: 'Phone Number',
type: 'number',
name: 'telephone',
required: true,
hint: 'Please, provide a valid number',
},
{
label: 'Email Address',
type: 'email',
name: 'email',
required: false,
hint: 'Please, provide a valid email.',
},
{
label: 'Your Message',
type: 'textarea',
required: false,
name: 'message',
hint: 'Write us a message.',
rows: 20,
cols: 50,
},
{
label: 'About You',
required: true,
select: [
'Home use',
'Business use',
'Freelance, professional',
],
},
],
call: [
{
tabLabel: 'Call Me Back',
tabIcon: 'fa fa-phone',
},
{
label: 'First Name',
type: 'text',
name: 'name',
required: true,
hint: 'Please, provide your Name.',
},
{
label: 'Last Name',
type: 'text',
name: 'surname',
required: true,
hint: 'Please, provide your Last Name.',
},
{
label: 'Phone Number',
type: 'number',
name: 'telephone',
required: true,
hint: 'Please, provide a valid number',
},
{
label: 'About You',
required: true,
select: [
'Home use',
'Business use',
'Freelance, professional',
],
},
],
},
IT: {
},
};
/* CSS */
<!-- HTML -->
<button id="btn">
Click Me
</button>
<div id="abc"></div>

JSGrid add icon instead of text based on true or false value

I am trying to add an icon(a lock) based on whether a value is true or false in a JSGrid.
I have a variable called SoftLock, and if this is true I want to insert a lock icon on the grid.
I have the following fields but am unsure about how to continue:
var fields = [
{ name: 'ID', type: 'text', visible: false },
//THIS FIELD BELOW
{ name: 'SoftLock', type: 'text', title: 'Locked', formatter : function () {return "<span class='fa fa-lock'><i class='fa fa-lock' aria-hidden='true'></i></span>"} },
//THIS FIELD ABOVE
{ name: 'Status', type: 'select', items: MatterStatusEnum.List, valueField: 'Id', textField: 'Name', width: 70, title: 'Account Status' },
{ name: 'AttorneyRef', type: 'text', title: 'Reference' },
{ name: 'Investors', type: 'text', title: 'Investor/s' },
{ name: 'AccountNumber', type: 'text', width: 70, title: 'Account Number' },
{ name: 'IntermediaryName', type: 'text', title: 'Intermediary Name' },
{ name: 'CreatedBy', type: 'text', title: 'Captured By' },
{ name: 'RequestedDate', type: 'date', title: 'Requested Date'}
];
I have used the formatter with no luck. Also, how can I show an icon if true, and nothing if false.
Any help would be appreciated.

I solved this by using the itemTemplate as follows:
{
name: 'SoftLock', type: 'text', title: 'Locked', width: 30,
itemTemplate : function (value, item) {
var iconClass = "";
if (value == true) {
iconClass = "fa fa-lock"; //this is my class with an icon
}
return $("<span>").attr("class", iconClass);
}
Simple as that :)

Much later but try the following
{
type: "control",
editButton: true
}
Also the answer is better described in the formal documentation.
http://js-grid.com/docs/#control

How to add a 'tabindex' for radio buttons in angular formly

I have a requirement to add a specific tabindex to radio button in my formly form.
I can do it for text field but not for radio buttons, below is the sample code, any help is appreciated -
Tried adding the tabindex=1 at three places, above templateOptions, inside templateOptions and inside options, none of them works to get the focus.
{
name: 'feedbackType',
key: 'feedbackType',
type: 'radio',
id: 'feedbackType',
//tabindex:'1',
templateOptions: {
label: Constant.feedbackForm.typeField,
for:'feedbackType',
required: true,
focus: true,
//tabindex:'1',
options: [{
name: 'Idea1',
value: 'Idea1',
//tabindex:'1'
}, {
name: 'Idea2',
value: 'Idea2'
}, {
name: 'Idea3',
value: 'Idea3'
}]
}
},

Here you go. You'll want to use ngModelElAttrs. Like this
{
name: 'feedbackType',
key: 'feedbackType',
type: 'radio',
id: 'feedbackType',
ngModelElAttrs: {
tabindex: '1'
},
templateOptions: {
label: EaseConstant.feedbackForm.typeField,
for:'feedbackType',
required: true,
focus: true,
options: [{
name: 'Idea1',
value: 'Idea1',
}, {
name: 'Idea2',
value: 'Idea2'
}, {
name: 'Idea3',
value: 'Idea3'
}]
}
},
If you want it to be dynamic, then you can do:
ngModelElAttrs: {
tabindex: '{{to.tabindex}}' // to is a shortcut for `options.templateOptions`
},
expressionProperties: {
'templateOptions.tabindex': 'someFormlyExpression' // http://docs.angular-formly.com/docs/formly-expressions
}
Good luck!

javascript - How to just add text to a form input

I already have a full-fledged form in javascript. All I need is a simple label Lol.
It is using prior code, but hopefully this snipet will help to see what's happening:
export default class NewEvent extends FormStep {
get inputs() {
return [{
name: 'department',
label: 'Department / Specific Ministry'
}, {
name: 'title'
}, {
name: 'description',
type: 'textarea'
}, {
name: 'checkboxApproved',
type: 'checkbox',
label: 'This copy is approved and is to be used as written.'
}, {
name: 'checkboxDetails',
type: 'checkbox',
label: 'These are the details! Please help me write a catchy description.'
}, {
name: 'location'
}, {
name: 'contactName',
label: 'Event Contact Name'
}, {
name: 'contactEmail',
label: 'Event Contact Email (required)'
}, {
name: 'contactPhone',
label: 'Event Contact Phone (optional)'
}, {
name: 'eventURL'
}, {
name: 'isNewHRock',
type: 'checkbox',
label: 'This event is a new event we\'ve never done at HRock.'
}, {
name: 'hasOccurred',
type: 'checkbox',
label: 'We\'ve had this event before, but it is not on a recurring schedule.'
}, {
name: 'needsRegistration',
type: 'checkbox',
label: 'We need to set up registration for this event.'
}, <EventPrice key = 'eventPrice' /> , <EventClassInfo key = 'eventClassInfo' /> , <EventDateTimeInfo key = 'eventDateTimeInfo' /> ]
}
}
Anyways, all these items show up as a form. AS they should. But I'd like to simply add a label in between the check boxes. I've created the following screenshot of what I'd like to add.
However, whenever I add text in there so far, it breaks the code, or it shows up in a textfield...
Help?

This is an object of "inputs". What ever function is parsing this object is creating all inputs with it, which is why you get a textbox. I don't think this is the correct place in the code to do this.

Using ian:accounts-ui-bootstrap-3 profile.first-name returns NaN though it shows to be populated in console

I am using ian:accounts-ui-bootstrap-3 for creating additional fields in my signin form in Meteor. The fields are getting populated. When I check the fields in JS console I see my first-name and last-name populated but when I try to retrieve them they return NaN.
My registration.js
Accounts.ui.config({
requestPermissions: {},
extraSignupFields: [{
fieldName: 'first-name',
fieldLabel: 'First name',
inputType: 'text',
visible: true,
validate: function(value, errorFunction) {
if (!value) {
errorFunction("Please write your first name");
return false;
} else {
return true;
}
}
}, {
fieldName: 'last-name',
fieldLabel: 'Last name',
inputType: 'text',
visible: true,
}, {
fieldName: 'gender',
showFieldLabel: false, // If true, fieldLabel will be shown before radio group
fieldLabel: 'Gender',
inputType: 'radio',
radioLayout: 'vertical', // It can be 'inline' or 'vertical'
data: [{ // Array of radio options, all properties are required
id: 1, // id suffix of the radio element
label: 'Male', // label for the radio element
value: 'm' // value of the radio element, this will be saved.
}, {
id: 2,
label: 'Female',
value: 'f',
checked: 'checked'
}],
visible: true
}]
});
onlineUsers.js
Meteor.publish("online", function(){
return Meteor.users.find({"status.online" : true});
});
output
Meteor.users.findOne({"status.online": true}).profile
Object {first-name: "tarun", last-name: "", gender: "m"}
Meteor.users.findOne({"status.online": true}).profile.gender
"m"
Meteor.users.findOne({"status.online": true}).profile.first-name
NaN
can anyone help please?

Develop Reference

JavaScript is the programming language of the Web.

Sweet Alert with form JS (3 input) - javascript

Related

How to access to nested objects keys

JSGrid add icon instead of text based on true or false value

How to add a 'tabindex' for radio buttons in angular formly

javascript - How to just add text to a form input

Using ian:accounts-ui-bootstrap-3 profile.first-name returns NaN though it shows to be populated in console

Categories

Resources