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
});
});
});
Related
In my .cshtml file I have a form which works fine for my MVC pages:
<form action="#Url.Action("SaveUserEntryAsync", "ConfirmEmail")" method="post">
<label class="modal-body1 col-form-label" id="confirmEmailPageComingSoonModalFormLabel">Modal Error!3</label>
<br />
<textarea class="form-control" name="newsfeedUserEntry" id="newsfeedUserEntry" type="text"></textarea>
<div class="modal-footer">
<button type="submit" id="ComingSoonModalFooterSubmitButton" class="btn btn-success" data-dismiss="confirmEmailPageComingSoonModal">#_loc[Model.Submit]</button>
</div>
</form>
In my scaffolded cshtml.cs file I have a public async Task<IActionResult> SaveUserEntryAsync(string newsfeedUserEntry) method.
<form action="#Url.Action("SaveUserEntryAsync", "ConfirmEmail")" method="post"> does not work with the Razor page and I cannot find the correct syntax so that my button works on the page. Any help would be appreciated?
First of all, change #Url.Action instead of you have to use #Url.Page or use asp-page directly like #Rena says. and change your code:-
<button type="submit" id="ComingSoonModalFooterSubmitButton" class="btn btn-success" data-dismiss="confirmEmailPageComingSoonModal">aaa</button>
to
<input type="submit" id="ComingSoonModalFooterSubmitButton" data-dismiss="confirmEmailPageComingSoonModal" value=#_loc[Model.Submit] class="btn btn-success/>
Hope it will resolve your issue.
For Razor Pages, it uses razor pages and page handler. #Url.Action() targets to MVC controller and action. You could use #Url.Page(string pageName, string pageHandler). Asume you have a ConfirmEmail.cshtml and ConfirmEmail.cshtml.cs:
<form method="post" action="#Url.Page("ConfirmEmail", "SaveUserEntry")" >
#Html.AntiForgeryToken()
<label class="modal-body1 col-form-label" id="confirmEmailPageComingSoonModalFormLabel">Modal Error!3</label>
<br />
<textarea class="form-control" name="newsfeedUserEntry" id="newsfeedUserEntry" type="text"></textarea>
<div class="modal-footer">
<button type="submit" id="ComingSoonModalFooterSubmitButton" class="btn btn-success" data-dismiss="confirmEmailPageComingSoonModal">aaa</button>
</div>
</form>
Or you could use asp-page and asp-page-handler like below:
<form asp-page="ConfirmEmail" asp-page-handler="SaveUserEntry" method="post">
<label class="modal-body1 col-form-label" id="confirmEmailPageComingSoonModalFormLabel">Modal Error!3</label>
<br />
<textarea class="form-control" name="newsfeedUserEntry" id="newsfeedUserEntry" type="text"></textarea>
<div class="modal-footer">
<button type="submit" id="ComingSoonModalFooterSubmitButton" class="btn btn-success" data-dismiss="confirmEmailPageComingSoonModal">aaa</button>
</div>
</form>
Note: No need to add Async suffix in request url.
For the handler, it shoud be OnPostXXX(XXX should be the handler name):
public class ConfirmEmailModel : PageModel
{
public void OnGet()
{
}
public async Task<IActionResult> OnPostSaveUserEntryAsync(string newsfeedUserEntry)
{
return Page();
}
}
Reference:
https://learn.microsoft.com/en-us/aspnet/core/razor-pages/?view=aspnetcore-5.0&tabs=visual-studio#multiple-handlers-per-page
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>
I have two submit buttons and a few textboxes on my page. When I enter details in the textbox and hit the enter button the form should actuate the start new button. But the form is actuating the old button. I don't want to add on click to button because I am checking some conditions and redirecting from my controller. What do I have to do to avoid my form from actuating by default for old value button on hitting the enter button any suggestions, please?
controller :
public ActionResult Index(MyModel model, string new, string old)
{
if (new == "new")
{
if (rows > 0)
{
return ProcessAction();
}
else
{
return ProcessAction();
}
}
if (old == "old")
{
if (rowsAmount > 0)
{
//do something
}
else
{
//do something
}
}
return View();
}
View:
#using (Html.BeginForm("Index", "Application", FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="col aligncenter">
<div class="form-row topMargin">
<div class="col-md-6 form-group">
#Html.TextBoxFor(model => model.Email)
</div>
<div class="col-md-4 form-group">
#Html.TextBoxFor(model => model.FirsttName)
</div>
<div class="col-md-2 form-group">
#Html.TextBoxFor(model => model.LastName)
</div>
</div>
<div class="form-row">
<div class="col-md-9 form-group text-right">
<button class="btn" type="submit" name="old" value="old">Get History</button>
</div>
<div class="col-md-3 form-group text-right">
<button class="btn" type="submit" name=newr" value="new">Start New</button>
</div>
</div>
</div>
}
to cange form submitting through old button just Change button type from type="submit" to type="button"
<div class="form-row">
<div class="col-md-9 form-group text-right">
<button class="btn" type="btn" name="old" value="old">Get History</button>
</div>
<div class="col-md-3 form-group text-right">
<button class="btn" type="submit" name=newr" value="new">Start New</button>
</div>
</div>
update
you can give Get History button a click event you can make an Ajax call through javascript function and give that to get history or bind your controller action in the anchor link and
Your buttons have type="submit" which means they will submit the form when pressed. Instead use type="button" to avoid submitting the form. You can also use type="reset" if you want to provide a way to reset the form inputs.
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
<button type="button">Just a button</button>
<button type="submit">Submit</button>
<button type="reset">Reset the form</button>
</form>
I am trying to auto-fill a form on a webpage using .NET's web browser int he C# language. I need to fire the submit button but it doesn't have a name or ID, all it has is a type and value.
The type is equal to "submit" and the value is equal to "Sign In"
Heres how I did it for Sign Up:
webBrowser1.Document.GetElementById("email").InnerText = email;
webBrowser1.Document.GetElementById("password").InnerText = password;
webBrowser1.Document.GetElementsByTagName("input")["register"].InvokeMember("click");
But this time, the submit button doesn't have a name, can someone guide me in the right direction to getting an element by its type or even better, value?
HTML:
<form accept-charset="utf-8" method="post">
<div class="field">
<label for="email">Email or Username</label> <span class="required">*</span> <input class="email" id="email" name="email" size="32" type="text">
</div>
<div class="field">
<label for="password">Password</label> <span class="required">*</span> <input id="password" name="password" size="16" type="password">
<p class="tip">I don't know my password</p>
</div>
<div class="field">
<input id="persistent_hidden" name="persistent" type="hidden" value="f"> <input checked="checked" id="persistent" name="persistent" type="checkbox" value="t"> <label for="persistent">Keep me logged in</label>
</div>
<div class="submit">
<input id="redirect_path" name="redirect_path" type="hidden"> <input type="submit" value="Sign In"> or <a class="cancel" href="/">Cancel</a>
</div>
</form>
try :
foreach(HtmlElement elem in webBrowser.Document.getElementByTagName("input")) {
if (elem.GetAttribute("value") == "Sign In") {
elem.InvokeMember("Click");
}
}
I append my select option from database table. Select option has two type
scalar
event
If the option type is scalar, I need to show 2 input fields (alarm, reset) so that user can inset values in it and when the option type is event I need to hide 2 input fields (alarm, reset) so that user cannot inset values in it.
When the option type is scalar, my form saves successfully but when option type is event form submit button not going to perform any action.
Can you please help?
Here is my code
HTML
<div class="row">
<form method="post" action="/Home/SaveTriggers" class="form-inline">
<div class="col-md-12">
<div class="col-md-2">
<select name="sourceId" class="select2" required>
#foreach (var i in ViewBag.opt)
{
<option value="#i.Id,#i.name,#i.type" id="opt">#i.name</option>
}
</select>
</div>
<div class="col-md-2">
<input id="alarm" name="alarm" type="text" placeholder="alarm" style="display:none" required />
</div>
<div class="col-md-2">
<input id="reset" name="reset" type="text" placeholder="reset" style="display:none" required />
</div>
<div class="col-md-1">
<input type="text" name="delay" id="delay" placeholder="delay" required />
</div>
<div class="col-md-3">
<select class="address2" name="action" id="select" required>
<option selected disabled>Select alarm action</option>
<option>John Doe, Switch on warning light</option>
<option>John Doe</option>
<option>Do anything</option>
</select>
</div>
<div class="col-md-2">
<button id="delete2" type="button" class="btn btn-default">Delete</button>
</div>
<button class=" add btn btn-primary" type="submit">Add</button>
</div>
</form>
</div>
Jquery(as i have to hide or show alarm or reset fields respectively)
<script>
$(document).ready(function () {
$(".select2").change(function () {
var text = $(".select2 option:selected").text();
var val = $(".select2 option:selected").val();
var res = val.split(",");
var type = res[2];
if (type == "scalar") {
document.getElementById("reset").style.display = "block";
document.getElementById("alarm").style.display="block"
}
else if(type=="event") {
document.getElementById("reset").style.display = "none";
document.getElementById("alarm").style.display = "none"
var alarm = document.getElementById("alarm");
}
});
});
</script>
The problem is most likely your inputs for alarm and reset.
If type is event, they are hidden and will most likely hold no value. But since they are required, the form will not submit until that error is resolved.
So you can either remove the required attribute from those 2 input fields, populate them with default values or use novalidate in your form tag. This disables form validation. You'd have to validate your inputs by hand in javascript.
<div class="col-md-2">
<input id="alarm" name="alarm" type="text" placeholder="alarm" style="display:none" />
</div>
<div class="col-md-2">
<input id="reset" name="reset" type="text" placeholder="reset" style="display:none" />
</div>
<div class="col-md-2">
<input id="alarm" name="alarm" type="text" placeholder="alarm" style="display:none" required />
</div>
<div class="col-md-2">
<input id="reset" name="reset" type="text" placeholder="reset" style="display:none" required />
as you're having required attribute in your input element, the validation is getting triggered and not letting you submit the form.
i would suggest you to do a validation on jquery on submit instead of using default html5 validation