What i'm trying to do, is get the value of an input on my form and affect it to a variable on my Typescript class, here is my template :
<form [ngFormModel]="form" (ngSubmit)="save()">
<fieldset>
<legend>
Action
</legend>
<div class="form-group">
<label for="label">Label</label>
<input ngControl="label" type="text" class="form-control">
</div>
For example here i want to get the value of the input called label when the user save the form and simply affect it like this :
export class ActionFormComponent {
form: ControlGroup;
_label: any;
constructor() {
}
print() {
this_label = this.form.label;
console.log(this._label);
}
}
ngModel does what you want:
<input ngControl="label" type="text" class="form-control" [(ngModel)]="label">
Related
I am new in SilverStripe. I want to create a custom HTML form in SilverStripe.
<form class="form-inline" $HelloForm.FormAttributes>
<p id="{$HelloForm.FormName}_success" class="message" style="">$HelloForm.Message</p>
<div class="form-group">
<label for="email">Email:</label>
<input type="text" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<div class="checkbox">
</div>
$HelloForm.fields
<input type="hidden" value="{$AbsoluteLink}" name="redirectURL" class="action" id="{$HelloForm.FormName}_action_doSayHello"/>
And in my controller
public function HelloForm()
{
$form = Form::create(
$this,
'HelloForm'
);
$actions = new FieldList(
FormAction::create('doSayHello', 'Submit')->setAttribute('class', 'btn btn-success')
);
$form = new Form($this, 'HelloForm',$actions);
return $form;
}
public function doSayHello($data,$form)
{
$form->sessionMessage('thanks for contact us','good');
return $this->redirectBack();
//i am not getting success message after submit
}
Can I get a success message after submitting in this case?
When I use standard SilverStripe form it's working but when using custom HTML form like above I am stuck
You could submit the form via ajax, which would have many advantages.
The page does not have to refresh itself
You can animate the form after submitting, by sliding up or some kind of similar animation.
You can handle form states like success or error
Some example code (in jQuery):
let form = $('.form-inline');
$(form).ajaxSubmit({
success: function() {
$(form).slideUp();
$('#form-state').text("Successfully submitted form.");
}
})
Suppose I have an input person name and another input business name:
<input name="nameofperson" id="nameofperson" class="form-control">
<input name="nameofbusiness" id="nameofbusiness" class="form-control" value="1234567">
If I started writing something on the nameofperson input. I want to clear the value of nameofbusiness, how to do that using CSS?
What you want to do is not possible through the Css,but you can do that using javascript or jquery.
With Javascript :
var nameofperson = document.getElementById('nameofperson');
var nameofbusiness = document.getElementById('nameofbusiness');
nameofperson.oninput = function() {
nameofbusiness.value = '';
}
<input type="text" name="nameofperson" id="nameofperson" class="form-control">
<input type="text" name="nameofbusiness" id="nameofbusiness" class="form-control" value="1234567">
With Jquery :
$(document).ready(function(){
$('#nameofperson').keyup(function(){
$('#nameofbusiness').val('');
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="nameofperson" id="nameofperson" class="form-control">
<input type="text" name="nameofbusiness" id="nameofbusiness" class="form-control" value="1234567">
You can't clear an input field's value using CSS. However, you can use JavaScript/JQuery for that.
Please find the working example.
$("#person").on("keyup", function(){
$("#business").val("");
});
input {
width: 350px;
height: 30px;
text-indent: 5;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="person" placeholder="Enter name of person">
<input type="text" id="business" placeholder="Enter your Business">
You add same class name for both input. For exampale I add 'nameofSomething' class.
and the jquery
$(".nameofSomething").keypress(function () {
var id = $(this).attr('id')
var text = $("#" + id).val();
$(".nameofSomething").val('');
$("#" + id).val(text);
});
You can change keypress to change, blur...or whatever you want.
This is basically done by javascript and not by css.
CSS as the name says is for styling purpose.
you can do this by javascript easily using onfocus method:
<input type="text" onfocus="document.getElementById('nameofbusiness').value = ''">
This is our Handlebars partial we've called input-field. We're trying to dynamically create name and email fields based on the number of participants selected on the previous page.
<div class="form-group {{errors.fullName.class}}" id="fullName">
<label for="full-name">Your full name</label>
<p class="message-error">{{errors.fullName.message}}</p>
<input type="text" class="form-control" name="fullName" value="{{values.fullName}}">
</div>
We have some functions which create and display error messages if any of those form fields are unfilled. Instead of {{errors.fullName.class}}, we need it to be {{errors.fullName{{this}}.class}}.
We've found that Handlebars doesn't allow you to refer to another handlebars variable inside a handlebars statement this way.
It's all within an each loop:
{{#each otherOccupiers}}
{{> input-field}}
{{/each}}
Does anyone have an idea about how to achieve this effect, maybe by writing a handlebars helper function or some other way to perform this concatenation.
I'm assuming the data object you are passing to handlebars looks something like this:
{
otherOccupiers: ["A", "B"],
errors: {
fullName: {
class: "error-class",
message: "error-message"
}
}
}
However if you change the structure of your data object to look something like this:
{
errors: {
otherOccupiers: [
"A" : {
fullName: {
class: "error-class",
message: "error-message"
}
}
"B" : {
fullName: {
class: "error-class",
message: "error-message"
}
}
]
}
}
Then you can do an each loop like this:
{{#each errors.otherOccupiers}}
<div class="form-group {{this.fullName.class}}" id="fullName">
<label for="full-name">Your full name</label>
<p class="message-error">{{this.fullName.message}}</p>
<input type="text" class="form-control" name="fullName">
</div>
{{/each}}
i have created collection named as "tbl_dynamic" in that a field named "dynamicField" created in that i'm storing data like this
"_id":"LoBTiSo3oqr54Ac5R",
"text":"test",
"dynamicField" : {
"text1" : {
"checkedValue" : false
},
"text2" : {
"checkedValue : true
}
}
and in meteor side i have a template like this
<template name="tmpChecked">
<input id="newField" name="field" type="text" placeholder="Field" readonly="readonly" class="form-control" value={{key}}>
<div class="checkbox">
<label>
<input id="chkChecked" type="checkbox" name="chk_checked" checked={{checkedValue}}>
</label>
</div>
</template>
and my helper contains following code to fetch data from collection
//helper to view fields
Template.tmpChecked.helpers({
values: function() {
return tbl_dynamic.find({},{dynamicField:1,text:1});
}
});
now the problem is when i tried to display checkbox value it doesn't show me the checkedValue.
any suggestion ?
Thanks,
I understand that you want to show list of checkboxes and each checkbox followed by input box.
For this, You need to do following 2 things -
Change the data model little bit. Make the dynamicField properties as the array. Each array element containing information about field name and checked property
{
"_id":"LoBTiSo3oqr54Ac5R",
"text":"test",
"dynamicField" : [
{
"name": "text1",
"checkedValue" : false
},
{
"name": "text2",
"checkedValue : true
}
]
}
2.In template code, iterate over objects dynamicFields array and display them
<template name="tmpChecked">
{{#with values}}
{{ #each dynamicField}}
<input id="newField" name="field" type="text" placeholder="Field" readonly="readonly" class="form-control" value={{name}}>
<div class="checkbox">
<label>
<input id="chkChecked" type="checkbox" name="chk_checked" checked={{checkedValue}}>
</label>
</div>
{{/each}}
{{/with}}
</template>
You can keep helper function as it is. No need to change.
Hope this helps
I am doing simple validation of inputs in meteorjs, after first tour it works, and every next time it doesn't work (until I reload the page) – it means error messages are not displayed.
//main.js//
Template.addMealForm.events({
'click #submitNewMeal': function (ev) {
ev.preventDefault();
var query = {
name: $("#name").val().trim(),
price: $("#price").val(),
calories: $("#calories").val(),
category: $("#category").val()
};
areInputsValid(query);
}
});
var areInputsValid = function (query) {
if ((query.name.length === 0) || (query.price.length === 0) || (query.calories.length === 0)) {
$("#warningLabel").addClass("di")
$(".warningLabel").text("All fields are required");
}
else if ((isNaN(query.price) === true) || (isNaN(query.calories) === true)) {
$("#warningLabel").addClass("di")
$(".warningLabel").text("To Price and Calories fields please enter a number");
}
else {
console.log('it works');
$('.dn').hide();
}
};
//main.html//
<template name="addMealForm">
<form role="form">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control input_form" id="name" placeholder="Name of the meal">
</div>
<div class="form-group">
<label for="price">Price</label>
<input class="form-control input_form" id="price" placeholder="Price">
</div>
<div class="form-group">
<label for="calories">Calories</label>
<input class="form-control input_form" id="calories" placeholder="Calories">
</div>
<div id="warningLabel" class="form-group has-error dn">
<label class="control-label warningLabel"></label>
</div>
<button id="submitNewMeal" type="submit" class="btn btn-rimary">Add</button>
</form>
</template>
The problem is that you are calling $('.dn').hide() in the success case. Because #warningLabel has a class of dn it will not be displayed again on subsequent errors.
One solution is to add $('.dn').show() to the top of areInputsValid.
You already have Tracker as part of Meteor, so I put a little tutorial and JSfiddle together on how to use it to implement a typical form validation scenario.
http://bit.ly/meteor-form-validation-video
http://bit.ly/meteor-form-validation-fiddle