I have a choice of radio buttons in a form however I am using them as button group. However I want to pass the value selected back to the controller. But its not posting back at all it just sits there any reason why a btn group would make a form behave in this way.
#using (Html.BeginForm("Create", "Relationships", FormMethod.Post, null)) {
<div class="btn-group" data-toggle="buttons">
<div class="btn-group type-select pull-left top-buffer add-on btn-group-lg" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="RealtionShipType" data-relationshiptype="1" style="display:none" value="1">
<i class="fa fa-person-booth fa-4x"></i>
</label>
<label class="btn btn-primary">
<input type="radio" name="RealtionShipType" data-relationshiptype="1" value="2">
<i class="fa fa-ship fa-4x"></i>
</label>
<label class="btn btn-primary">
<input type="radio" name="RealtionShipType" Value="3">
<i class="fa fa-location-arrow fa-4x"></i>
</label>
<label class="btn btn-primary">
<input type="radio" name="RealtionShipType" data-relationshiptype="1" value="4">
<i class="fa fa-brain fa-4x"></i>
</label>
<label class="btn btn-primary">
<input type="radio" name="RealtionShipType" data-relationshiptype="1" value="5">
<i class="fa fa-car fa-4x"></i>
</label>
<label class="btn btn-primary">
<input type="radio" name="RealtionShipType" style="display:none" value="5">
<i class="fa fa-mobile fa-4x"></i>
</label>
</div>
<input type="submit" class="btn-success" value="Save And Edit">
</div>
}
I have included a .net fiddle for it as expierence the same situation there the form simply wont post.
https://dotnetfiddle.net/FMiprT
The outer button-group div:
<div class="btn-group" data-toggle="buttons">
...
</div>
seems to be redundant, but it is also preventing your "submit" button's click event from firing (see https://getbootstrap.com/docs/4.0/components/buttons/#toggle-states for details). You don't need to put your submit button in toggle mode, only the radio buttons need this - and you already have another div around those to do that.
Just remove that div and the button works again.
Demo: https://dotnetfiddle.net/qeRX9I
Agree with ADyson, it seems that the issue is related to the outer button-group div. After removing it, we could submit the form.
If you don't want to remove the outer button-group div, as a workaround,you could consider use the JQuery method to submit the form.
code like this:
#using (Html.BeginForm("Create", "Home", FormMethod.Post, new { #class="mainform" }))
{
<div class="btn-group" data-toggle="buttons">
<div class="btn-group type-select pull-left top-buffer add-on btn-group-lg" data-toggle="buttons">
...
</div>
<input type="submit" class="btn-success" value="Save And Edit">
</div>
}
JavaScript code:
<script type="text/javascript">
jQuery(document).ready(function () {
$(".btn-success").click(function () {
//find the form and submit
$(".mainform").submit();
});
});
</script>
Related
I have a list of buttons, each belonging to a hidden form with corresponding item.Id. I want to show the form when the button is clicked. To achieve this, I have a jQuery script which selects the button by name ($('[name="RequestSpeakButton"]')) and reads its id to know which hidden form to set to visible ($("#RequestSpeak"+this.id).css("visibility", "visible")).
But of course, it's not working. I.e. nothing happens when I click the buttons.
I don't know if it's of importance, but the document consists of a main view with several partial views. The script is located in the scripts section of the main view. The buttons are in a partial view and the forms in another partial view.
The forms are rendered like this (in a partial view):
#foreach (AgendaItemViewModel item in Model.Agenda)
{
<div id="RequestSpeak#(item.Id)" style="visibility:hidden;">
<form asp-action="Action">
<input type="hidden" name="Id" value="#item.Id" />
<button type="submit">
Yes
</button>
<span class="btn btn-danger" onclick="javascript: document.getElementById('RequestSpeak'+#item.Id).style.visibility='hidden'">
No
</span>
</form>
</div>
}
The output of the forms looks like this:
<div id="RequestSpeak57e33e17-c988-4a28-66a0-08d978345a1d" style="visibility:hidden;">
<form action="/Controller/Action" method="post">
<input type="hidden" name="Id" value="57e33e17-c988-4a28-66a0-08d978345a1d" />
<button type="submit">
Yes
</button>
<span class="btn btn-danger" onclick="javascript: document.getElementById('RequestSpeak'+57e33e17-c988-4a28-66a0-08d978345a1d).style.visibility='hidden'">
No
</span>
</form>
</div>
The buttons that are supposed to show a form is rendered like this (in another partial view):
#foreach (AgendaItemViewModel item in Model.Agenda)
{
<a name="RequestSpeakButton" id="#item.Id"
class="btn btn-primary">
Speak
</a>
}
And the output looks like this:
<a name="RequestSpeakButton" id="57e33e17-c988-4a28-66a0-08d978345a1d"
class="btn btn-primary">
Speak
</a>
This is the script for the buttons:
$(document).ready(function () {
$('[name="RequestSpeakButton"]').click(function () {
alert("test"); /* Checking if the script runs. It doesn't. */
$("#RequestSpeak"+this.id).css("visibility", "visible")
});
})
I would imagine that since I have many buttons with the same name, they all get selected by $('[name="RequestSpeakButton"]'). Can I know which one was clicked? Is this.Id enough?
Perhaps it would work if I dropped the name, and just selected the buttons by id. But I am going to add other buttons later, which is going to perform different operations on the items, so I need the name to know which operation to perform.
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
</head>
<body>
<a name="RequestSpeakButton" id="57e33e17-c988-4a28-66a0-08d978345a1d"
class="btn btn-primary">
Speak1
</a>
<a name="RequestSpeakButton" id="57exxx7-cxx8-4x8-6xx0-08xxxxxxa1d"
class="btn btn-primary">
Speak2
</a>
<div id="RequestSpeak57e33e17-c988-4a28-66a0-08d978345a1d" style="visibility:hidden;">
<form action="/Controller/Action" method="post">
<input type="hidden" name="Id" value="57e33e17-c988-4a28-66a0-08d978345a1d" />
<button type="submit">
Yes
</button>
<span class="btn btn-danger" onclick="document.getElementById('RequestSpeak57e33e17-c988-4a28-66a0-08d978345a1d').style.visibility='hidden'">
No
</span>
</form>
</div>
<div id="RequestSpeak57exxx7-cxx8-4x8-6xx0-08xxxxxxa1d" style="visibility:hidden;">
<form action="/Controller/Action" method="post">
<input type="hidden" name="Id" value="57exxx7-cxx8-4x8-6xx0-08xxxxxxa1d" />
<button type="submit">
Yes
</button>
<span class="btn btn-danger" onclick="document.getElementById('RequestSpeak57exxx7-cxx8-4x8-6xx0-08xxxxxxa1d').style.visibility='hidden'">
No
</span>
</form>
</div>
<script>
$("[name='RequestSpeakButton']").click(function(){
var thisid = $(this).attr("id");
$("#RequestSpeak"+thisid).css("visibility", "visible")
})
</script>
</body>
</html>
Or maybe you prefer this?
#model WebApplication1.Models.TestModel
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
#foreach (AgendaItemViewModel item in Model.Agenda)
{
<div id="RequestSpeak#(item.Id)" style="visibility:hidden;">
<form asp-action="Action">
<input type="hidden" name="Id" value="#item.Id" />
<button type="submit">
Yes
</button>
<span class="btn btn-danger" name="noBtn">
No
</span>
</form>
</div>
}
#foreach (AgendaItemViewModel item in Model.Agenda)
{
<a name="RequestSpeakButton" id="#item.Id"
class="btn btn-primary">
Speak
</a>
}
<script>
$("[name='RequestSpeakButton']").click(function () {
var thisid = $(this).attr("id");
$("#RequestSpeak" + thisid).css("visibility", "visible")
})
$("[name='noBtn']").click(function () {
var thisid = $(this).parent().parent().css("visibility", "hidden");
})
</script>
document.getElementById('RequestSpeak'+57e33e17-c988-4a28-66a0-08d978345a1d)
is probably not what you want. That should probably even throw an error since it isn't a proper string. If you change it to all be within quotes like this, it should at least get you a step in the right direction:
document.getElementById('RequestSpeak57e33e17-c988-4a28-66a0-08d978345a1d')
To get that change your view template to be the item.id but in quotes.
document.getElementById('RequestSpeak'+'#item.Id')
and see if that does the trick.
I need to make a post to log off, so I need an "input type".
How could I change this input so that I could use the FontAwasone class
I already tried to use the button tag, but it does not work inside the "a" tag.
<div class="sidebar-footer">
<a href="#">
<i class="fa fa-envelope"></i>
<span class="badge badge-pill badge-success notification">7</span>
</a>
<a>
#using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { role = "form" }))
{
#Html.AntiForgeryToken()
<input type="submit" value="Logout" class="btn btn-primary" />
}
</a>
//Need to use that Awesome Class
<a href="#">
<i class="fa fa-power-off"></i>
</a>
</div>
Using a button element should work in this case and let you put whatever HTML you desire inside.
<button type="submit" class="btn btn-primary">
<i class="fa fa-power-off"></i>
</button>
Trying to get an inline form out of bootstrap using the class form-inline. However, I'm encountering some unexpected behavior and I'm using exactly the same code as listed on the Boostrap official page.
This is what I get:
The code:
#using (Html.BeginForm("Edit", "Index", FormMethod.Post, new { #class = "form-inline" }))
{
<div class="form-group">
<label for="new-value">Enter new value: </label>
<input type="text" id="new-value" class="form-control" />
</div>
<div class="checkbox">
<label>
Public: <input type="checkbox" />
</label>
</div>
<input type="submit" class="btn btn-primary" />
}
When I remove the form-control class from the text box I get the wanted result, but I don't have the cool text box then:
I'm aware of the warning from bootstrap:
This only applies to forms within viewports that are at least 768px wide.
But this is on a large screen and the form width is 1160px.
I have edited your code.
Hope this is what you wanted!
HTML
<form class="form-inline">
<div class="form-group">
<label for="new-value">Enter new value: </label>
<input type="text" id="new-value" class="form-control" />
</div>
<div class="form-group">
<div class="checkbox">
<label> Public:
<input type="checkbox" />
</label>
</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" />
</div>
</form>
Check this for the working model http://www.bootply.com/ZWGwdEcnva
I'm new in MVC.
I have simple HTML website where I have two three inputs
input to write email adress
one checkbox
button
I have one HomeController which have on method
[HttpGet]
public ActionResult Index()
{
return View();
}
I want to generate method [HttpPost] after I click the button.
Now after I am click inputbutton in my Url I have just one change
Before click
http://localhost:52254/Home/Index
and after
http://localhost:52254/Home/Index?
There is a form
<form>
<div class="col-xs-3">
<input type="email" class="form-control" id="email" placeholder="Wpisz adres email">
</div>
<br />
<label class="checkbox-inline">
<input type="checkbox" />
</label>
<br />
<a href="/Controller/View">
<input type="submit" value="Sign" class="btn btn-primary"/>
</a>
</form>
Change The Code Like This
#using (Html.BeginForm())
{
<div class="col-xs-3">
<input type="email" class="form-control" id="email" placeholder="Wpisz adres email">
</div>
<br />
<label class="checkbox-inline">
<input type="checkbox" />
</label>
<br />
<a>
<input type="submit" value="Sign" class="btn btn-primary"/>
</a>
}
I have a page with post and wanted when the user clicks on the button "Atualizar", instead of calling the post, called a JQuery. How to do this?
<form action="/Conselho/Detalhar/6" method="post"> <div class="row">
<h3>Visualizando Conselho Profissional</h3><hr>
<input data-val="true" data-val-number="The field ConselhoID must be a number." data-val-required="O campo ConselhoID é obrigatório." id="ConselhoID" name="ConselhoID" type="hidden" value="6">
<div class="col-md-2">
<label for="Sigla">Sigla</label> <span class="field-validation-valid" data-valmsg-for="Sigla" data-valmsg-replace="true"></span><br>
<input class="form-control" id="Sigla" name="Sigla" type="text" value="CREA"><br>
</div>
<div class="col-md-10">
<label for="Descricao">Descrição</label> <span class="field-validation-valid" data-valmsg-for="Descricao" data-valmsg-replace="true"></span><br>
<input class="form-control" id="Descricao" name="Descricao" type="text" value="Conselho Federal de Engenharia e Agronomia"><br>
</div>
<div class="col-md-5">
<div class="botoes">
<input name="btnSubmit" class="btn btn-success" type="submit" value="Salvar">
<input name="btnSubmit" class="btn btn-warning" type="submit" value="Excluir">
<input name="btnSubmit" class="btn btn-info" type="submit" value="Atualizar">
<a class="btn btn-default" href="/Conselho/Index">Voltar</a> </div>
</div>
</div>
</form>
You should add an id attribute so you have an easy, unique selector for the button. I have given it "Atualizar" in this example
Write a javascript event handler for the button
Prevent default behavior which in this case is form post.
Alternatively, you could use the button tag, and this will not submit the form by default
var doSomething = function(){
//your code here
};
$('#Atualizar').click(function(e) {
e.preventDefault();
doSomething();
});
Alternative:
<button type="button" onClick="doSomething()" id="Atualizar">
In javascript, you can listen for the click event of this specific button, get the form for this button, serialize the form and post it the action method url.
$(function(){
$("#Atualizar").click(function(e){
e.preventDefault(); //prevent default form submit behaviour
var _this=$(this);
var _form=_this.closest("form");
$.post(_form.attr("action"),_form.serialize(),function(res){
// do something with res
});
});
});