I tried so many ways to parallel for those two buttons.Two buttons are parallel if I remove html.beginform. My problem is that I can't remove html.beginform. Please show me the right direction.
html code:
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6">
#using (Html.BeginForm("ExportExcel", "SalesByBranch", FormMethod.Post#*, new { enctype = "multipart/form-data" }*#))
{
<input type="submit" value="Excel" id="btnExcel" class="btn btn-danger btn-sm form-control" onclick=DataCheck(); style="width:80px;height:30px;" />
}
#using (Html.BeginForm("ExportPDF", "SalesByBranch", FormMethod.Post#*, new { enctype = "multipart/form-data" }*#))
{
<input type="submit" value="PDF" id="btnPDF" class="btn btn-danger btn-sm form-control" onclick=DataCheck(); style="width:80px;height:30px;" />
}
</div>
</div>
Photo
Please reply me.
Wrap the buttons inside a div with the following style:
display: inline-block;
So? http://jsfiddle.net/3aowjLc1/
display:inline block
You must add agin your "script".
Related
How can I input a link in the button when I press the button?
<div class="buttons">
<span class="sold-out-tag position-top-right">Best Seller</span>
<button class="btn custom-btn position-bottom-right"> Add to cart</button>
</div>
Also you can trigger a link by JavaScript.
<button
onclick="window.location(this.getAttribute('data-link'))"
data-link="/hello">go to hello</button>
One way could be to use an anchor tag instead of the button and make it look like a button.
HTML:
<div class="buttons">
<a class="btn custom-btn position-bottom-right"> Add to cart</a>
</div>
CSS:
.custom-btn {
border: medium dashed green;
}
Alternatively, you could do:
<button class="btn custom-btn position-bottom-right" onclick="location.href='yourlink.com';"> Add to Cart </button>
Try this:
<a href='http://my-link.com'>
<button class="GFG">
Click Here
</button>
</a>
You can use the anchor tag and provide a Bootstrap class for the button, like,
<a class="btn btn-success" href="link"> Add to Cart</a>
If the label "Add to cart" matches the expectations, we'd be talking about a form. A form that causes an element to be added typically uses the POST method:
<form class="buttons" method="post" action="/path/to/add/to/cart/script">
<input type="hidden" name="product" value="123">
<span class="sold-out-tag position-top-right">Best Seller</span>
<button class="btn custom-btn position-bottom-right"> Add to cart</button>
</form>
Alternatively, there's GET as well:
<form class="buttons" method="get" action="/path/to/add/to/cart/script?product=123">
<span class="sold-out-tag position-top-right">Best Seller</span>
<button class="btn custom-btn position-bottom-right"> Add to cart</button>
</form>
Since GET doesn't carry additional payload, you'll get the same effect with a regular anchor:
Add to cart
You don't want search engine spiders to populate carts, so you typically leave GET for data fetching.
How to attach a input element with a Form using jQuery ?
I have a Form like below.
<form action="{{ route('update_profile') }}" method="POST" id="buildyourform"
enctype="multipart/form-data">
<div class="form-group">
<label for="exampleFormControlFile1">Company Logo</label>
<div id="company_logo">
<i class="ri-close-line" title="Click to Update Image"></i>
</div>
</div>
<div class="flex-row">
<div class=" d-flex justify-content-end ">
<button type="submit" class="btn btn-primary mb-5 mt-3">Update</button>
</form>
</div>
</div>
I am trying to place <input type="file" class="form-control-file" name="company_logo" /> inside <div id="company_logo"></div> using jQuery.
I am using below jQuery code.
var fName = $("<input type=\"file\" class=\"form-control-file\" name=\"company_logo\" />");
$("#company_logo .ri-close-line").click(function() {
$("#company_logo").html(fName);
});
But this code is not working when I submit the Form.
Below code is working.
var fName = $("<input type=\"file\" class=\"form-control-file\" name=\"company_logo\" />");
$("#company_logo .ri-close-line").click(function() {
$("#buildyourform").append(fName);
});
How to attach a input element with a Form using jQuery ?
I'm trying to make these buttons display next to each other, I'm guessing I would want it to be an inline-block style so there is some space between them. I have tried to add display: inline and display: inline-block (not at the same time) to #being-survey-btn, but no luck there. I've also attempted to add those properties to .btn but no luck there either. I've tried putting <span> tags around all of it (inside the divs) as well as putting <span> tags around the <button> tags and I've come up with nothing. Using bootstrap.
My cshtml:
<div id="finish-survey-container">
<div id="finish-survey-items">
#using (Html.BeginForm("MakePDF", "HabitatManagement"))
{
<button id="begin-survey-btn" class="btn btn-default btn-lg" type="submit">Save as PDF</button>
}
#if (ViewBag.Type == "Habitat Management")
{
using (Html.BeginForm("Index", "HabitatManagement", new { userId = ViewBag.UserID }))
{
<button id="begin-survey-btn" class="btn btn-default btn-lg" type="submit">Finish</button>
}
}
</div>
</div>
I have also attempted styling through an ActionLink (this is actually how I originally had it before trying out Html.BeginForm syntax):
#Html.ActionLink("Save as PDF", "MakePDF", null, new { #id="begin-survey-btn", #class = "btn btn-default btn-lg", #style = "display: inline-block"})
I know I must be missing something rather obvious. Anybody have an idea?
EDIT
Generated HTML:
<div id="finish-survey-container">
<div id="finish-survey-items">
<form action="/HabitatManagement/MakePDF" method="post">
<button id="begin-survey-btn" class="btn btn-default btn-lg" type="submit">Save as PDF</button>
</form>
<form action="HabitatManagement?userId=#" method="post">
<button id="begin-survey-btn" class="btn btn-default btn-lg" type="submit">Finish</button>
</form>
</div>
</div>
Each Html.BeginForm creates a form element, so your code will end up like
this
<form>
<button>..</button>
</form>
<form>
<button>..</button>
</form>
Your problem is that the form elements are by default block. That is what you need to fix, and to do that you should set these form elements to be display:inline-block
Something like
#finish-survey-items form{display:inline-block;}
I have two buttons inside separate controllers.
<div ng-controller="aCtrl">
<button class="addButton" ng-click="toggle()"> Add </button>
<form ng-hide="myVar" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
<div ng-controller="bCtrl">
<button class="EditButton" ng-click="toggle()"> Add </button>
<form ng-hide="myVar" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
Note: Toggle just switches the hide/show bool in the back-end
As you can see when clicking the Addbutton it will show the form for aCtrl and EditButton for bCtrl. The result of the current layout is when Add Buttons form expands it pushes the EditButton down. I don't think this can be fixed with CSS as its the logical flow of the HTML.
I am looking for solutions that would allow me to have the buttons at the top in the flow of the page then the forms below.
for example I tried:
<button ng-controller="aCtrl" class="EditButton" ng-click="toggle()"> Add </button>
<button ng-controller="bCtrl" class="addButton" ng-click="toggle()"> Add </button>
<div ng-controller="aCtrl">
<form ng-hide="myVar" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
<div ng-controller="bCtrl">
<form ng-hide="myVar" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
Which doesn't seem to work.
The problem is that ng-hide hides the content with a display: none that causes the space occupied by the element to collapse.
You need visibility: hidden that also hides the element, but keeps the space.
Therefore, use ng-class instead of ng-hide:
<div ng-controller="aCtrl">
<button class="addButton" ng-click="toggle()"> Add </button>
<form ng-class="{ 'hidden' : myVar }" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
<div ng-controller="bCtrl">
<button class="EditButton" ng-click="toggle()"> Add </button>
<form ng-class="{ 'hidden' : myVar }" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
and the CSS
.hidden {
visibility: hidden;
}
Here is a live sample:
var myApp = angular.module('myApp',[]);
function aCtrl($scope) {
$scope.myVar = true;
$scope.toggle = function () {
$scope.myVar = !$scope.myVar;
}
}
function bCtrl($scope) {
$scope.myVar = true;
$scope.toggle = function () {
$scope.myVar = !$scope.myVar;
}
}
.hidden {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="myApp">
<div ng-controller="aCtrl">
<button class="addButton" ng-click="toggle()"> aCtrl.Add </button>
<form ng-class="{ 'hidden' : myVar }" ng-submit="submit()">
<input type="text" value="aCtrl.form">
</form>
</div>
<div ng-controller="bCtrl">
<button class="EditButton" ng-click="toggle()"> bCtrl.Add </button>
<form ng-class="{ 'hidden' : myVar }" ng-submit="submit()">
<input type="text" value="bCtrl.form">
</form>
</div>
</section>
As you can see, the bCtrl.Add button remains in place, regardless whether aCtrl.form is visible or not.
It can be done via css only, just wrap the two in a div with position: relative and then add position:absolute to addButton and editButton together with top/left/right positioning values.
<div class="formContainer">
<div ng-controller="aCtrl">
<button class="addButton" ng-click="toggle()"> Add </button>
<form ng-hide="myVar" ng-submit="submit()">
<h1>Add form</h1>
<input type="text">
<input type="text">
</form>
</div>
<div ng-controller="bCtrl">
<button class="editButton" ng-click="toggle()"> Edit </button>
<form ng-hide="myVar" ng-submit="submit()">
<h1>Edit form</h1>
<input type="text">
<input type="text">
</form>
</div>
</div>
and css:
.formContainer {
position: relative;
width: 200px;
padding-top: 30px;
}
.addButton {
position: absolute;
top: 0;
right: 40px;
}
.editButton {
position: absolute;
top: 0;
right: 0;
}
Here's a working demo: Plunker CSS Only
There's another way, put them in a parent controller, which would hold the logic for toggling between the forms and then each form have their own controller for their respective functionalities.
Here's a working demo of the second version: Plunker with parent Controller
Here is example as u mentioned in your post. u can keep button outside of your controllers
var myApp = angular.module('myApp',[]);
myApp.controller('aCtrl', ['$scope', function ($scope) {
$scope.myVar = true
}]);
myApp.controller('bCtrl', ['$scope', function ($scope) {
$scope.myVar = true;
}]);
function getscope(ctrlName) {
var sel = 'div[ng-controller="' + ctrlName + '"]';
return angular.element(sel).scope();
}
function showForm(ctrlName) {
var $scope = getscope(ctrlName);
$scope.myVar = !$scope.myVar;
$scope.$apply();
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<section ng-app="myApp">
<button class="addButton" onclick="showForm('aCtrl')"> aCtrl.Add </button>
<button class="EditButton" onclick="showForm('bCtrl')"> bCtrl.Add </button>
<div ng-controller="aCtrl">
<form ng-hide="myVar" ng-submit="submit()">
<input type="text" value="aCtrl.form">
</form>
</div>
<div ng-controller="bCtrl">
<form ng-hide="myVar" ng-submit="submit()">
<input type="text" value="bCtrl.form">
</form>
</div>
</section>
Is having two controllers is your requirement ?
You can have a separate controller of the button for eg. btnCtrl and toogle the value using a $rootscope variable. As follows.
<button ng-controller="btnCtrl" class="EditButton" ng-click="toggle()"> Add </button>
<button ng-controller="btnCtrl" class="addButton" ng-click="toggle()"> Add </button>
<div ng-controller="aCtrl">
<form ng-hide="$root.myVar" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
<div ng-controller="bCtrl">
<form ng-hide="$root.myVar" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
I have a website with a modal dialog box containing an input form. The text box at the bottom of the form is set up to use an autocomplete list to suggest options as you type into it. This is provided by a typeahead javascript module.
By default, the typeahead list falls underneath the modal footer:
So I edited the css for the containing dev to set the 'overflow' to 'visible'. This allowed the typeahead to overlap the footer, but the div shrunk, because it no longer had to contain all of the content:
The only way I could think to fix this was to make the height of the div constant, but now I have the problem that the error boxes can push the content into the footer:
My question is: Is there a way that I can set up the div so that it automatically resizes to fit its usual content (the input boxes and the validation boxes), but allows the suggestion list to overlap the footer?
I have attached the HTML here:
<div class="modal-body" #*Note! This height value will need to be updated if the contents change, it is here to allow the Typeahead list to
overlap the rest of the div*# style="height: 345px; overflow: visible">
<!-- Container for top half of objection form -->
<div class="span4 offset2">
#Html.Partial("OfferDisplay",Model.OfferDisplayModel)
</div>
<div class="span8">
<form id="rejectionForm" class="form-horizontal" method="POST" data-ajax-pubsubupdate="RenderPresentOfferOptionsForm">
<input type="hidden" value="#Model.NegotiationSessionId" name="NegotiationSessionId"/>
<hr />
<div class="control-group">
#Html.LabelFor(m => m.RejectionReasonId, new { #class = "control-label" })
<div class="controls">
#Html.DropDownListFor(m => m.RejectionReasonId, Model.RejectionReasons, new { #class = "input-large" })
<button type="button" class="btn pull-right btn-validation" tabindex="-1" disabled="disabled"><i class="icon-ok"></i><i class="icon-warning-sign"></i></button>
<div class="help-block">
<p>#Html.ValidationMessageFor(m => m.RejectionReasonId)</p>
</div>
</div>
</div>
<div class="control-group">
#Html.LabelFor(m => m.TargetPrice, new { #class = "control-label" })
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-gbp"></i></span>#Html.TextBoxFor(m => m.TargetPrice, new { #class = "input-medium", style = "width:162px", #data_val_keypressfilter_regex = UIValidationRegularExpressions.NumberKeyPressFilterRegex })
</div>
<button type="button" class="btn pull-right btn-validation" tabindex="-1" disabled="disabled"><i class="icon-ok"></i><i class="icon-warning-sign"></i></button>
</div>
</div>
<div class="control-group">
#Html.LabelFor(m => m.CompetitorNameId, new { #class = "control-label" })
<div class="controls">
<div class="input-prepend">
<input id="competitorName" type="text" data-provide="typeahead" class="input-large" style="width: 198px"/>
</div>
<button type="button" class="btn pull-right btn-validation" tabindex="-1" disabled="disabled"><i class="icon-ok"></i><i class="icon-warning-sign"></i></button>
</div>
</div>
<!-- the real submit button has to be hidden because the button we want to click is outside this div, and the form cannot span both divs -->
<input id="RejectionFormSubmitButton" type="submit" style="display: none"/>
<input id="competitorIdField" name="CompetitorNameId" type="hidden"/>
<input id="showNextOfferInput" type="hidden" value="true" name="ShowNextOffer"/>
</form>
</div>
</div>
<div class="modal-footer">
<form method="POST" data-ajax-pubsubupdate="RenderOverrideConfirmationForm">
<input type="hidden" value="#Model.NegotiationSessionId" name="NegotiationSessionId" />
<input type="hidden" value="#Model.SchemeId" name="SchemeId" />
<button class="btn btn-warning pull-left" type="submit"><i class="icon-warning-sign"></i> #Html.DisplayNameFor(m => m.OverrideButton)</button>
<input id="cancelButton" class="btn" type="button" value="#Html.DisplayNameFor(m => m.CancelButton)"/>
#if (Model.OfferDisplayModel.Offer.IsFinalOffer)
{
<input id="submitAndCloseButton" class="btn btn-primary" type="button" value="#Html.DisplayNameFor(m => m.SubmitAndCloseButton)"/>
}
else
{
<input id="rejectAndShowNextOffer" class="btn btn-primary" type="button" value="#Html.DisplayNameFor(m => m.SubmitButton)"/>
}
</form>
You should try to use the "z-index" css property.