im working with .Net and Vue and I cant really bind a value in a label
<li v-for="restaurant in vHolidays.data" >
<form id="1">
<div>
<label >{{restaurant.restaurantId}}</label>
<input type="text" class="form-control" value=HERE>
</div>
<button type="button" class="btn btn-danger btn-block" #click="test()">Modificar</button>
</form>
</li>
In "HERE" I want to put the same as {{restaurant.restaurantId}} that alredy works .
Thanks
You should use v-bind directive to bind tag attribute values to Vue expression:
<input type="text" class="form-control" v-bind:value="restaurant.restaurantId">
or its shorthand ::
<input type="text" class="form-control" :value="restaurant.restaurantId">
Read more about this directive here: link
Related
#{
ViewData["Title"] = "Login";
}
<h1>#ViewData["Title"]</h1>
<div class="container">
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" 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">
<label>
<input type="checkbox" name="remember">Remember me
</label>
</div>
**<script>function openWin() {
window.open("https://localhost:7257/Home/Stocks");
}</script>
<form>
<button type="submit" class="btn btn-primary" value="Login" onclick="openWin()">
Login
</button>
</form>
<script>function openWin() {
window.open("https://localhost:7257/Home/Signup");
}</script>
<form>
<button type="submit" class="btn btn-primary" value="Sign up" onclick="openWin()">
Sign up
</button>
</form>**
</form>
</div>
After executing this code block the page that is similar to photo can be displayed but my problem is how should I change these 2 buttons functions so that they can pop up different locations like it is written in the bold area.
If there is any related page similar to this issue, you can share as comment.
It looks like you've named both functions openWin(). When you click the button it's finding the the top function and never makes it to the second one since it thinks it found what it was looking for. JS runs from top to bottom in order so as soon as it finds the first function it will stop.
You need to change one of the function names when you declare it, such as openWin() and openWin2().
I would also recommend that you move all of your JS code to a single <script> tag in order to avoid errors in the future.
This is my html code:
<label>Search:</label>
<input type="text" id="list_search" class="form-control col-8">
<button class="btn btn-info col-2">Search</button>
You see my input tag has 8 columns and my button has 2.
Then I don't get why I'm getting this:
Isn't supposed they should be X-aligned?
What I expect is:
But I had to use <div class="row"> there, which is modifying margins (look at the label).
You need form inline
and don't forget to set for inside label
<form class="form-inline">
<label for="list_search">Search:</label>
<input type="text" id="list_search" class="form-control">
<button class="btn btn-info">Search</button>
</form>
GL
I am using AngularJs and have inputs with predefined value from ng-repeat. I want resend those data value via ng-click function to treat data.
The problem the data is not submitted
<label>Price</label>
<input type="text" class="form-group form-control" ng-value=s.prix required="required" ng-model="prix" >
</div>
<div class="modal-footer">
<button type="submit" id='submit' ng-click="edit()" class="btn btn-primary" data-dismiss="modal">Save</button>
s.prix is a value of column in the table prix (ng-repeat="s in produit") if you know what i mean.
Use ng-repeat instead as model
Like this
<input type="text" class="form-group form-control" required="required" ng-model="s.prix" >
Then pass object in edit.
Try like this
ng-click="edit(s)"
JS
$scope.edit=function(s){
console.log(s);
}
html:
<body ng-controller="myCtrl">
<label>Price</label>
<div ng-repeat="s in produit">
<input type="text" class="form-group form-control" required="required" ng-model="s.prix" >
<button type="submit" id='submit' ng-click="edit(s)" class="btn btn-primary" data-dismiss="modal">Save</button>
</div>
</body>
controller:
myApp.controller('produitCtrl', ['$scope',function($scope){
$scope.produit = [{prix:'hello'}];
$scope.edit=function(s){
console.log(s);
}
}]);
I am experiencing a issue detecting if the submit button was clicked. I was give the following form by a CSS designer:
<form action="" method="post">
<div class="form-group">
<label>Username</label>
<input name="username" type="text" class="form-control span12">
</div>
<div class="form-group">
<label>Password</label>
<input name="password" type="password" class="form-controlspan12 form-control">
</div>
Sign In
<div class="clearfix"></div>
</form>
I would like submit the captured information by clicking on the Sign In CSS button. I am used to the usual:
<input type="Submit" value="Sign-In>
button, but not this is different, I am stuck. Any assistance will be appreciated.
try to change
Sign In
with
<button type="submit" class="btn btn-primary pull-right">Sign In</button>
Furthermore you need to set an action attribute on your form element
Give your form and ID = "myform" And try below:
Sign In
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.