I have a form in a View.
#if (Request.IsAuthenticated) {
#(Html.BeginForm("LeaveComment", "Publication")){
<input type="text" name="pub" style="display: none" value=#publication.PublicationID>
<input type="text" name="mail" style="display: none" value=#Context.User.Identity.Name>
<textarea id="comment" name="comment"></textarea>
<button type="submit">Submit</button>
}
}
The view show me "System.Web.Mvc.Html.MvcForm":
The method of controller is :
public ActionResult LeaveComment(int pub, string mail, string comment)
How can I solve it?
EDIT
If I use #using this work well but this crash another Form. The code of the other Form is the next :
#if (Request.IsAuthenticated)
{
using(Html.BeginForm("LeaveComment", "Publication", FormMethod.Post,
new { publicationID = publication.PublicationID, mail = Context.User.Identity.Name }))
{
<textarea id="comment" name="comment" style="width: 828px; margin-left: 18px;"></textarea>
<button type="submit" name="action:LeaveComment" value="LeaveComment" class="btn btn-default pull-right">
<strong>Submit</strong>
</button>
}
}
else
{
<form action="#">
<textarea id="comment" name="" style="width: 828px; margin-left: 18px;"></textarea>
<button type="button" href="#login" data-toggle="modal" data-target="#login-modal" class="btn btn-default pull-right" style="margin-right: 15px;">
Submit
</button>
</form>
}
UPDATE
I resolve this problem adding using in the leave comment and I deleted the field FormMethod.Post of this post.
You need to use using (Html.BeginForm(...)), as MvcForm.Dispose() will print the actual end form tag.
Your code #(Html.BeginForm) will call MvcForm.ToString(), which will just print the type name.
Related
I have a requirement where I have to keep the button to be disabled initially and enable it only when the length of my input is 10.
<div class="form-group">
<label for="MSISDN_Value" class="m-r-10">MSISDN:</label>
<input type="number"
onkeyPress="if(this.value.length === 10) return false;"
[(ngModel)]="MSISDN_Value"
id="MSISDN_Value"
name="MSISDN_Value"
class="form-control display-inline-block width70p m-b-5">
</div>
<div class="form-group">
<button class="btn btn-primary m-l-65" type="submit"
[disabled]="true">Search</button>
</div>
I tried [disabled] = "MSISDN_Value.length !== 10" but it did not work, there are many solutions that disable buttons, but I couldn't find any solution which enables buttons in Angular5.
Hii the problem is you are checking integer value with === operator which is returning false. see my below code.
<div class="form-group">
<label for="MSISDN_Value" class="m-r-10">MSISDN:</label>
<input type="number"
#num
max=10
(change)="toggle2($event)"
id="MSISDN_Value"
name="MSISDN_Value"
class="form-control display-inline-block width70p m-b-5">
</div>
<div class="form-group">
<button class="btn btn-primary m-l-65" type="submit"
[disabled]="this.num.value==10?false:true">Search{{this.num.value===10}}</button>
</div>
//.ts file
toggle2(event){
console.log(event.target.value)
}
After searching, I took the help of events and used (input) function binding and fired an event on even.target.value changes to toggle [isDisabled]
<div class="form-group">
<label for="MSISDN_Value" class="m-r-10">ISMSDN/IMEI:</label>
<input type="number" onkeyPress="if(this.value.length === 10) return false;" (input)="onSearchChanges($event.target.value)" [(ngModel)]="MSISDN_Value" id="MSISDN_Value" name="MSISDN_Value" class="form-control display-inline-block width59p m-b-5">
</div>
<div class="form-group">
<button class="btn btn-primary m-l-96" type="submit" [disabled]="searchDisabled">Search</button>
</div>
component.ts file
onSearchChanges(value) {
if(value.length === 10){
this.searchDisabled = false;
} else{
this.searchDisabled = true;
}
}
im trying to prevent the default action on a button then run my function and after my function is done then run default again, however i dont know how to build my jquery correctly.
here is what i have
/* somewhere else .with--abo class does something that prevents my click function from working */
/* so now when ever i click it i prevent it from running default before my click function */
$(".with-abo").click(function(event) {
event.preventDefault()
$("#sure").click();
$(".table--add-product").submit();
});
$("#sure").click(function(){
$("#confirm").toggleClass("is--hidden");
$("#twpConfirm").click();
});
$("#twpConfirm").click(function(){
alert("deleted")
});
#confirm{
color:red;
}
.is--hidden {
display: none !important;
}
#sure{
margin-top: 10px;
background-color:red;
width:40px;
border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" title="Sdsd" class="table--add-product add-product--form block-group">
<input type="hidden" name="twpAboAdd" value="1">
<button type="submit" class="btn with-abo is--primary block is--icon-right">
add item to subscription
<i class="icon--arrow-right"></i>
</button>
<input type="hidden" name="__csrf_token" value="iSTHZQdHHpP5iCcNM0u6NvPPHroipp"></form>
<div id="sure" class="btn is--small column--actions-link" title="">
<i class="icon--cross">delete item</i>
</div>
<div class="panel--td column--actions">
<div id="sure" class="btn is--small column--actions-link" title="">
<i class="icon--cross"></i>
</div>
<div id="confirm" class="is--hidden">
<span>
are you sure?
<button id="twpConfirm" type="submit" class="btn column--actions-link">
<i class="icon--check"></i>delete
<input type="hidden" name="noSurcharge" value="1">
</button>
</span>
</div>
<input type="hidden" name="__csrf_token" value="iSTHZQdHHpP5iCcNM0u6NvPPHroipp">
</div>
basically when i click [add item to subscription] i want to automatically click the [delete] button. but how my function is built i trigger the click and then run default again before my trigger function is done.
i was hoping that something like this would work:
$(".with-abo").click(function(event) {
event.preventDefault()
$("#sure").trigger("click", function(){
$("#confirm").toggleClass("is--hidden");
$("#twpConfirm").click();
});
$(".table--add-product").submit();
});
but this is so wrong and dont know how go around it. any suggestion is appreciated.
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".
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 am sending in the fileName a hebrew word "הי"
and it return "??"
really need help on this,
thanks for the helpers!
for encoding I added the top of this html lines :
<%# page language="java" contentType="text/html; charset=windows-1255"
pageEncoding="windows-1255"%>
JSP:
<form name='DMform' id='DMform' style="height: 226px; " method="Post" >
<center>
<h2 id="titleID">title </h2>
<input type="button" value="button1" style="width: 116px; " onclick="setTextOnFile()">
<input type="text" name="filePath" id="filePath" style="width: 258px;" value="<%if(filePath!=null){
out.println(filePath[0].trim());
}%>" >
</br></br>
<input type="text" name="fileName" id="fileName" style="width: 258px;" value="<%if(fileName!=null){
out.println(fileName[0].trim());
}%>" >
<label>: שם המסמך </label>
</br></br>
<input type="button" value="send" onclick="checkData();" <%if(filePath!=null){
if(filePath[0].trim()!=""){ out.println(" disabled ");}
}%> >
</br></br>
<input type="button" value="איפוס הטופס" onClick="window.location=window.location.href ;">
</center>
</form>
Java script that past:
function checkData(){
document['DMform'].submit();
}