I have a set of javascript buttons nested within another set of javascript buttons. Below is my fiddle.
<div data-toggle="buttons" style="padding: 20px;">
<div class="col-xs-6">
<div class="btn btn-info" style="padding: 20px;">
<div class="row">
<div class="col-sm-12">
<div class="btn-group btn-group-justified btn-group-lg" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="package" value="RP101" data-duration="7" />1</label>
<label class="btn btn-primary">
<input type="radio" name="package" value="RP102" data-duration="14" />2</label>
<label class="btn btn-primary">
<input type="radio" name="package" value="RP103" data-duration="21" />3</label>
<label class="btn btn-primary">
<input type="radio" name="package" value="RP104" data-duration="28" />4</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="btn btn-info" style="padding:20px;">
<div class="row">
<div class="col-sm-12">
<div class="btn-group btn-group-justified btn-group-lg" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="package" value="RP201" data-duration="7" />1</label>
<label class="btn btn-primary">
<input type="radio" name="package" value="RP202" data-duration="14" />2</label>
<label class="btn btn-primary">
<input type="radio" name="package" value="RP203" data-duration="21" />3</label>
<label class="btn btn-primary">
<input type="radio" name="package" value="RP204" data-duration="28" />4</label>
</div>
</div>
</div>
</div>
</div>
</div>
http://jsfiddle.net/q4xLs9f8/
My issue is that when I click the top level button, it logs out the nested radio button as if it was already selected. I don't have anything marked as selected or checked.
Does nesting buttons like this cause problems?
Nesting is certainly not intended. What happens is that it the javascript is selecting the last radio input in the group and selects that.
Related
I have this problem with model binding in asp.net core. I have a model which contains attributes and a list of another model. When I submit the model to display, it works properly. I used the debugger to track the values and the model in the razor view becomes null when I perform the post request via form submit. Please help me.
I am currently using Asp.net core 2.2 MVC and i am using asp-for tag to link the form attribute to the model.
<div class="row">
<form asp-action="Edit" method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input hidden asp-for="#Model.UserId" />
<div class="col-sm-5 col-md-4 col-lg-4 col-xl-4">
<div class="form-group">
<label asp-for=#Model.Username></label>
<input readonly asp-for=#Model.Username class="form-control" />
<span asp-validation-for=#Model.Username class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for=#Model.Name></label>
<input readonly asp-for=#Model.Name class="form-control" />
<span asp-validation-for=#Model.Name class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for=#Model.Email></label>
<input readonly asp-for=#Model.Email class="form-control" />
<span asp-validation-for=#Model.Email class="text-danger"></span>
</div>
</div>
<div class="row ml-1 form-group">
<div class="col-sm-2 col-md-2 col-lg-2">
Template
</div>
<div class="col-sm-2 col-md-2 col-lg-2">
Entity
</div>
<div class="col-sm-8 col-md-8 col-lg-8 ">
Role Assigned
</div>
#for (int i= 0; i < Model.EntityUserList.Count(); i++)
{
<input hidden asp-for="#Model.EntityUserList[i].TemplateId" />
<div class="my-2 col-sm-2 col-md-2 col-lg-2">
#Model.EntityUserList[i].TemplateName
</div>
<input hidden asp-for="#Model.EntityUserList[i].EntityId" />
<div class="my-2 col-sm-2 col-md-2 col-lg-2">
#Model.EntityUserList[i].EntityTitle
</div>
<div class="col-sm-8 col-md-8 col-lg-8 row ml-1">
<div class="custom-control custom-checkbox my-2 col-sm-2 col-md-2 col-lg-2">
<input type="checkbox" class="custom-control-input" asp-for="#Model.EntityUserList[i].IsSubmitter">
<label class="custom-control-label" asp-for="#Model.EntityUserList[i].IsSubmitter">
Submitter
</label>
</div>
<div class="custom-control custom-checkbox my-2 col-sm-2 col-md-2 col-lg-2">
<input type="checkbox" class="custom-control-input" asp-for="#Model.EntityUserList[i].IsApprover">
<label class="custom-control-label" asp-for="#Model.EntityUserList[i].IsApprover">
Approver
</label>
</div>
<div class="custom-control custom-checkbox my-2 col-sm-2 col-md-2 col-lg-2">
<input type="checkbox" class="custom-control-input" asp-for="#Model.EntityUserList[i].IsAdmin">
<label class="custom-control-label" asp-for="#Model.EntityUserList[i].IsAdmin">
Admin
</label>
</div>
</div>
}
</div>
<div class="form-group mt-3 ml-3">
<input type="submit" value="Update" class="btn btn-outline-primary mr-3" />
<a asp-controller="UserManagement" asp-action="Index" class="btn btn-outline-info" style="width:auto">
Cancel
</a>
</div>
</form>
When I perform the post method, the model throws me a null reference exception.
In Vue, I've tried naming buttons, but after the submit, the data isn't posted.
<div id="app">
<form ref="myForm" method="POST" v-on:submit.prevent="onSubmit($event)" action="/push" class="needs-validation" id="myForm" novalidate="true">
<div class="form-group">
<label for="cannedListLabel">Canned List</label>
<input v-model="cannedlist" ref="cannedlist" type="text" class="form-control" name="fileListFile" id="filelist"
:disabled="!!individuallist" v-on:submit.prevent="onSubmit" />
</div>
<div class="form-group">
<label for="pathListLabel">Path List</label>
<textarea v-model="individuallist" ref="cannedlist" :disabled="!!cannedlist" class="form-control" rows=10 name="fileListRaw" id="files"></textarea>
</div>
<div class="form-group">
<button v-on:submit.prevent="onSubmit($event)" type="submit" name="button1" value="submit" id="submitButton" class="btn btn-primary" :disabled="isDisabledButton">Submit</button>
<button v-model="clickedButton" v-on:submit.prevent="onSubmit($event)" type="submit" name="button2" value="checkOnly" id="checkOnlyButton" class="btn btn-primary" :disabled="isDisabledButton">Check Only</button>
</div>
</form>
</div>
The onSubmit function submits the form using this.$refs.myForm.submit(); If I change the type of the button from "submit" to "button", the submit() function no longer works, which I don't completely understand. Why is that, by the way?
As suggested, I change the type to button, and used the #click handler and while it does not work, here's changed diff:
<div class="form-group">
<button #click="onSubmit($event)" type="button" name="btn" value="submitButtonPressed" id="submitButton" class="btn btn-primary mb-2" :disabled="isDisabledButton">Submit</button>
<button #click="onSubmit($event)" type="button" name="btn" value="checkOnlyButtonPressed" id="checkOnlyButton" class="btn btn-primary" :disabled="isDisabledButton">Check Only</button>
</div>
I'm using VueJS to have it dynamically add new inputs once a button is clicked. With my current code it is not adding the inputs. Why is that?
<div class="row" v-for="count in task.pos.length">
<div class="col-12 col-sm-6">
<div class="form-group">
<label class="control-label" for="po_number">Order Number:</label>
<input id="po_number" class="form-control" type="text" placeholder="Purchase Order" v-model="task.pos[count-1].purchase_order">
</div>
</div>
<div class="col-12 col-sm-6">
<div class="form-group">
<label class="control-label" for="po_amount">Order: Amount:</label>
<input id="po_amount" class="form-control" type="text" placeholder="Purchase Amount" v-model="task.pos[count-1].po_amount">
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-success btn-xs mb5 text-white" v-on:click.prevent="addEditNewPOEntry()"><i class="fa fa-plus"></i> Add PO</button>
<button class="btn btn-warning btn-block btn-xs" v-on:click.prevent="saveEdit(task)">Done</button>
</div>
addEditNewPOEntry: function(){
this.newTask.po.push({'purchase_order': this.task.purchase_order, 'purchase_amount': this.task.purchase_amount});
this.$set(this, 'task.pos.length', this.task.pos.length+1);
},
I am trying to divide 4 radio buttons into two lines using bootstrap 4 alpha6, but I can't:
<div id="payment-table" class="row">
<div class="col-12">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="paymentMethod" data-id="1" checked autocomplete="off">
<img src="imgs/cash.png">
</label>
<label class="btn btn-primary">
<input type="radio" name="paymentMethod" data-id="2" autocomplete="off">
<img src="imgs/visa.png">
</label>
<label class="btn btn-primary">
<input type="radio" name="paymentMethod" data-id="3" autocomplete="off">
<img src="imgs/split.png" id="split">
</label>
<label class="btn btn-primary">
<input type="radio" name="paymentMethod" data-id="4" autocomplete="off">
<img src="imgs/master.png">
</label>
</div>
</div>
</div>
Here's what I get:
I tried to remove "btn-group" class, and I get:
And I can't align them to fit full width, as I want two radio buttons per line, and each line has full width with 50% for each radio button.
I tried to give each one "col-6", and here's what I get:
Any suggestion?
actually we need to use only col class. by nesting we determine how many columns will be there.
Try this
.btn-primary {
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div id="payment-table" class="row">
<div class="col">
<div class="" data-toggle="buttons">
<div class="row">
<div class="col">
<label class="btn btn-primary active col">
<input type="radio" name="paymentMethod" data-id="1" checked autocomplete="off">
<img src="imgs/cash.png">
</label>
</div>
<div class="col">
<label class="btn btn-primary col">
<input type="radio" name="paymentMethod" data-id="2" autocomplete="off">
<img src="imgs/visa.png">
</label>
</div>
</div>
</div>
<div class="row">
<div class="col">
<label class="btn btn-primary col">
<input type="radio" name="paymentMethod" data-id="3" autocomplete="off">
<img src="imgs/split.png" id="split">
</label>
</div>
<div class="col">
<label class="btn btn-primary col">
<input type="radio" name="paymentMethod" data-id="4" autocomplete="off">
<img src="imgs/master.png">
</label>
</div>
</div>
</div>
</div>
Hope this helps!
This code is for bootstrap2.
what is The equivalent of this html code in bootstrap3?
<div class="input-append pull-left visible-desktop" style="margin-top: 5px;">
<input type="text" data-i-search-input="true" class="search-query" name="word" value="word" data-autocomplete="true" data-autocomplete-url ="" placeholder="Enter word" >
<button class="btn btn-primary" type="submit">Search</button>
</div>
Thanks a lot.
From the Bootstrap 3 docs: http://getbootstrap.com/components/#input-groups
<div class="visible-lg">
<div class="input-group" style="margin-top: 5px;">
<input type="text" data-i-search-input="true" class="form-control" name="word" value="word" data-autocomplete="true" data-autocomplete-url="" placeholder="Enter word">
<span class="input-group-btn"><button class="btn btn-primary" type="submit">Search</button></span>
</div>
</div>
Demo: http://bootply.com/91940
'search-query' is gone.