is there any way in angular 2 to pick name/id of input inside divs?
html:
<div class="form-pages" (click)='function()'>//if it's possible then what should I put into function param?
<fieldset>
<input type="text" name="firstName"/>
<input type="text" name="firstName"/>
</fieldset>
</div>
component:
function(str){this.var=str}
Not sure if template variables of child elements can be accessed
<div class="form-pages" (click)='function(input1.value, input2.value)'>//if it's possible then what should I put into function param?
<fieldset>
<input #input1 type="text" name="firstName"/>
<input #input2 type="text" name="firstName"/>
</fieldset>
</div>
If this doesn't work you can use
<div class="form-pages" (click)='function()'>//if it's possible then what should I put into function param?
<fieldset>
<input #myinput type="text" name="firstName"/>
<input #myinput type="text" name="firstName"/>
</fieldset>
</div>
#ViewChildren('input') inputs:QueryList<ElementRef>;
myFunction() {
let inputs = this.inputs.toArray();
console.log(inputs[0].value;
console.log(inputs[1].value;
}
Ok, I did it alone, thanks for previous answer, but for me it works well, It's needed to call $event.target.name method which will return name of clicked target.
<div (click)="setFocus($event.target.name)">
<input type='text' name='input1 />
<input type='text' name='input2 />
</div>
in componentsetFocus(str){this.var = str)
Related
To turn off autocompletion in HTML I use:
<input type="text" name="foo" autocomplete="off" />
But this forces me to specify autocomplete="off" in every input field of my application. Is it possible to define autocomplete="off" in a CSS style?
You can just apply it to the form tag.
Using CSS you cannot achieve it. You can use client side script for example using Jquery
$('input').attr('autocomplete','off');
If you are not using Jquery or scripting language then you have to stick to HTML only.
As TeT Psy said you can apply it in form tag like
<form id="Form" runat="server" autocomplete="off">
you can disable all the autocompletes using form
<form id="Form1" runat="server" autocomplete="off">
U can use autocomplete="off" attribute on form tag. Like
<form id='test' autocomplete="off">
<input ...
<input ..
...
</form>
You can set it on form element if you wants to set autocomplete: off for all input elements of form. And if wants to make it on for some selected input you can apply autocomplete: on on that input.
.form {
padding: 30px 0;
width: 300px;
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form action="#" class="form" autocomplete="on">
<div class="form-group">
First name:<input type="text" class="form-control" name="fname">
</div>
<div class="form-group">
Last name:<input type="text" class="form-control" name="lname" autocomplete="off">
</div>
<div class="form-group">
E-mail: <input type="email" class="form-control" name="email">
</div>
<input type="submit">
</form>
No you can't do this using css, but there are 2 other ways to do it:
1- you can apply it for the form
<form autocomplete="off" >
<input type="text" name="name">
<input type="text" name="mail">
</form>
2- you can handle it using js
var eles = document.getElementsByTagName('input');
for(i=0; i<eles.length; i++){
eles[i].setAttribute("autocomplete", "off");
}
https://jsfiddle.net/ng1mb77m/1/
I am using web.py in my backed to generate a form. I am also wanting to use bootstraps form class. This is a snippet from my html
<form name="test" method="POST">
$:form.render()
<input type="submit" name="button" value="Login" />
</form>
Which, when generated by web.py, turns into
<form name="login" method="POST" class = "register">
<table>
<tr><th><label for="username">Username:</label></th><td><input type="text" id="username" name="username"/></td></tr>
<tr><th><label for="password">Password:</label></th><td><input type="password" id="password" name="password"/></td></tr>
<tr><th><label for="password_again">Repeat your password:</label></th><td><input type="password" id="password_again" name="password_again"/></td></tr>
</table>
<input type="submit" value="Register" />
</form>
However. This makes it difficult to add bootstrap features to my code.
One example directly from the bootstrap website is :
<form>
<fieldset>
<legend>Legend</legend>
<label>Label name</label>
<input type="text" placeholder="Type something…">
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form>
Is it possible to add these sorts of features into my form?
Use $:form.render_css() instead.
I wrote class inherited from Form class with modified render_css method. It look like that:
class bootstrap_form(form.Form):
def render_bootstrap(self):
from web import net
out = []
out.append(self.rendernote(self.note))
for i in self.inputs:
out.append('<div class="form-group">')
if not i.is_hidden():
out.append('<label for="%s">%s</label>' % (i.id, net.websafe(i.description)))
out.append(i.pre)
out.append(i.render())
out.append(self.rendernote(i.note))
out.append(i.post)
out.append('</div>')
out.append('\n')
return ''.join(out)
I hope you'll find this useful.
i need a twitter bootstrap form with input text boxes on the same line, but its labels must be on the top of input boxes.
So far i have:
<form action="#">
<label for="city">City</label>
<input type="text" id="city"/>
<label for="street">Street</label>
<input type="text" id="street"/>
</form>
http://jsfiddle.net/A8RaG/
So i need inputs on the same line and labels must be on the top of each input.
How do i do that?
Another solution is putting a div around each label/input combination and setting the css to float left
HTML
<form action="#">
<div>
<label for="city">City</label>
<input type="text" id="city"/>
</div>
<div>
<label for="street">Street</label>
<input type="text" id="street"/>
</div>
</form>
CSS
form div{
float: left
}
jsFiddle
you can put a div around each label and block, and in the css put this div in inline-bloc
like :
<form action="#">
<div class = "css">
<label for="city">City</label>
<input type="text" id="city"/>
</div><div class="css">
<label for="street">Street</label>
<input type="text" id="street"/>
</div>
</form>
and in the CSS:
.css{
display : inline-block;
}
You could also just use <br />. It will work for a form as well.
If you use Bootstrap you need to use the css of bootstrap !
Use class="form-horizontal" or class="form-inline"
You can try this with no css added :
<form action="#" class="form-horizontal">
<label for="city">City</label>
<input type="text" id="city"/>
<label for="street">Street</label>
<input type="text" id="street"/>
</form>
Simple no ?
Is it possible by default make all the fileds in a div class as required fileds. I have a form and inside the form i have a div class.. why i am using the div class is by defalut the div class is hidden and when i clicked on some check box it will be visible. SO i need all the elements in the div class should be required filed. I was trying required="required" on all the elements but it is not working. Any one has idea?
Here is my html
<div class="downtime" id="downtime" style="display: none" >
<label> name </label>
<input required="required" type="text" name="name><br>
<label> age </label>
<input required="required type="text" name="age><br>
</div>
</form>
Any help will be appreciated
Syntax highlighting - probably the greatest tool at any coder's disposal. (It's even on Stack Overflow!)
<div class="downtime" id="downtime" style="display: none" >
<label> name </label>
<input required="required" type="text" name="name><br>
<label> age </label>
<input required="required type="text" name="age><br>
</div>
</form>
Attributes are red and their values are blue. So it should look more like this:
<div class="downtime" id="downtime" style="display: none" >
<label> name </label>
<input required="required" type="text" name="name" /><br>
<label> age </label>
<input required="required" type="text" name="age" /><br>
</div>
</form>
and FYI the required attribute doesn't need a value:
<input type="text" name="age" required />
Change your code as follow:
<input type="text" name="name" required>
and
<input name="age" required>
Just writing "required" make your fields as required. It works only in HTML5. So put it before html tag starts.
if you want to use html5 you can do it with required(this only works on browsers that support html5), if not use a jquery plugin for validation like this:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
I have a DIV that contains many input text.
I need a way in jQuery 1.3.2 to clear all the values inside the inputs onclick.
So when I click on a specific link all the values of the inputs inside that DIV will be cleared.
I do not have any sample code, I just need to know if there is a way to clear all the values of inputs that are inside a specific DIV (not in a FORM, but in a DIV).
yes there is
html like this
<div id="div_id">
<input type="text" value="foo" />
<input type="text" value="foo" />
<input type="text" value="foo" />
<input type="text" value="foo" />
</div>
then jQuery
$('#div_id input[type="text"]').val('');
working demo
What are those inputs? Textboxes? May be this
$("#DivID input:text").val("");
Demo
To clear form element values inside the div use below
function clear_form_elements(id_name) {
jQuery("#"+id_name).find(':input').each(function() {
switch(this.type) {
case 'password':
case 'text':
case 'textarea':
case 'file':
case 'select-one':
jQuery(this).val('');
break;
case 'checkbox':
case 'radio':
this.checked = false;
}
});
}
Try using val proerpty of the input text elements to blank.
Something like:
$("input[type='text']", "#<YOUR_DIV_ID>").val("");
e.g:
<div id="textDiv">
<input type="text" Value="1"/> <br/>
<input type="text" Value="2"/> <br/>
<input type="text" Value="3"/> <br/>
<input type="text" Value="4"/> <br/>
<input type="text" Value="5"/> <br/>
<input type="text" Value="6"/> <br/>
<a name="clickMe" href="javascript:void(0)">Empty Boxes</a>
</div>
<script type="text/javascript">
$(function(){
$("a[name='clickMe']").click(function(){
$("input[type='text']", "#textDiv").val("");
});
});
</script>
Check live example #: http://jsfiddle.net/DKwy8/
$('linkselector').onClick(function() {
$('#DivId input').val('');
});
try
HTML
<div id="myDiv">
<input type="text" value="One">
<input type="text" value="Two">
<input type="text" value="Three">
</div>
Clear
jQuery
$('a#clearDiv').bind('click', function() {
var $div = $('div#myDiv');
$('input[type="text"]', $div).each(function() {
$(this).val('');
});
});
working DEMO