In the following code sample is there a 'Angular way' of preventing the default event of a button click or form submit. Currently I'm using 'onsubmit' to accomplish the task.
<form onsubmit="return false;">
<input ng-model="ctrl.task">
<button class="btn btn-primary" ng-click="ctrl.addTask()">Add</button>
</form>
Change your html to use $event like this (ctrl removed because controllers have been removed from Angular.dart):
<form onsubmit="return false;">
<input ng-model="task">
<button class="btn btn-primary" ng-click="addTask($event)">Add</button>
</form>
And in your component class:
void addTask(MouseEvent evt){
evt.preventDefault();
}
<form onsubmit="return false;">
<input ng-model="ctrl.task">
<button class="btn btn-primary" ng-click="ctrl.addTask($event)">Add</button>
</form>
In the controller:
$scope.ctrl = function() {
addTask: function(event) {
event.preventDefault();
}
}
Related
I am working on a registration form. I want to show and hide my users past registrations using a button.The button should only show or hide registrations that are gone not the upcoming ones This is what I have so far. Pleasssseeee Help.
<div class="Table01">
<button id="older">Show Registration History</button>
#foreach (var sm in Model)
{
var tmp = #sm.SeminarNm.Replace("&", "and");
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 well table-item" align="left" data-toggle="tooltip" data-eventtype="#tmp" data-placement="top" title="#tmp">
<span class="sortName mid-weight"> #sm.SeminarNm</span>
<span class="sortDate alert-info">(ON #string.Format("{0:yyyy-MM-dd}", #sm.SessionStartDT) IN #sm.SessionCityNm)</span>
<div class="row " style="margin-top:10px">
#if (#sm.IsEditable == "Y")
{
using (Html.BeginForm("EditRegister", "App", FormMethod.Post, new { onclick = "showPageLoadingSpinner()" }))
{ #Html.AntiForgeryToken()
<div class="col-xs-12 col-md-6 col-lg-6">
<input class="btn btn-success " name="submitButton" type="submit" value="Edit" />
<input type="hidden" value="#sm.RegistrantSeq" name="hiddenseq" />
<input type="hidden" value="0" name="cntView" />
<input type="hidden" value="EditRegister" name="cntStage" />
</div>
}
}
#using (Html.BeginForm("ViewRegister", "App", FormMethod.Post))
{ #Html.AntiForgeryToken()
<div class="col-xs-12 col-md-6 col-lg-6 col">
<input class="btn btn-info" name="submitButton" type="submit" value="View" />
<input type="hidden" value="#sm.RegistrantSeq" name="hiddenseq" />
<input type="hidden" value="ViewRegister" name="cntStage" />
</div>
}
//
</div>
}
</div>
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
<script>
var $btns = $('.btn').click(function () {
if (this.id == 'older') {
$('#child > div').toggle(450);
}
$btns.removeClass('active');
$(this).addClass('active');
})
</script>
My Program Pic
I dont know if I need some sorting javascript function to display only those sessions that are in the past. Nothing seems to be working.
Assuming old registrations are any item with SessionStartDT value earlier than current date, you can set an html data attribute on each item's container div indicating whether it is an old item or new item and when user clicks the hide/show button, toggle the visibility of these items.
#foreach (var sm in Model)
{
<div data-old="#(p.SessionStartDT.Date < DateTime.Today.Date)">
<!-- your existing code for rendering each item goes here -->
</div>
}
And in the javascript part, when the button is clicked, make select the elements who's data-old attribute value is True (which we set via our C# expression which results in a boolean value) and toggle the visibility.
$(document).ready(function() {
$("#older").click(function(e) {
e.preventDefault();
$("[data-old='True']").toggle();
});
});
I am creating a web app using mvc 5 here i have two buttons
<div class="row">
<div class="col-sm-offset-5 col-sm-1">
<input type="submit" name="save" value="SAVE" class="btn btn-primary glyphicon glyphicon-save" />
</div>
<div class="col-sm-offset-0 col-sm-1">
<input type="submit" name="reset" id="reset" value="Reset" class="btn btn-warning active glyphicon glyphicon-refresh" />
</div>
</div>
and i have a method which is being called after button click,
now on that event i want to differentiate the button click,
like,
if a user click
<input type="submit" name="save" value="SAVE" class="btn btn-primary glyphicon glyphicon-save" />
then
{
//this code should run
}
and if a user clicks
<input type="submit" name="reset" id="reset" value="Reset" class="btn btn-warning active glyphicon glyphicon-refresh" />
then
{ //this set of code should run }
and my method looks like this
[HttpPost]
public ActionResult insertrecd(FormCollection fc)
{
if(fc["reset"]==null)
{
return RedirectToAction("party", "party");
}
else
{
ViewBag.message = string.Format("Hello {0}.\\nCurrent Date and Time: {1}", "name", DateTime.Now.ToString());
return RedirectToAction("party", "party");
}
}
what i need to do, i want to do different code on different button clicks?
Give each input button the same name, but a different value
<input type="submit" name="action" value="save" class="btn btn-primary glyphicon glyphicon-save" />
<input type="submit" name="action" id="reset" value="reset" class="btn btn-warning active glyphicon glyphicon-refresh" />
The value will then be in your form collection as
fc["action"]
So your controller action could look like
[HttpPost]
public ActionResult insertrecd(FormCollection fc)
{
var action = fc["action"];
if(action == "save")
{
//save stuff
}
if(action =="reset")
{
//reset stuff
}
}
I am using one search box.How to clear value of this text box By button click.
$(document).ready(function(){
$(".searchClear").click(function(){
//document.getElementById("searchGo").value="";
$('#searchGo').removeAttr('value');
});
<input class="col-lg-3" type="text" name="searchroleName" id="searchroleName">
<button class="btn searchGo" id="searchGo">Go</button>
<button type="reset" class="btn searchClear">Clear</button>
Try this
$(document).ready(function(){
$(".searchClear").click(function(){
$('#searchroleName').val('');
});
Empty the value rather than removing the element attribute, Also your brackets are not closed properly.
Also the selector of an input is wrong.
Try following code
$(document).ready(function() {
$(".searchClear").click(function() {
//document.getElementById("searchGo").value="";
$('#searchroleName').val("");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input class="col-lg-3" type="text" name="searchroleName" id="searchroleName">
<button class="btn searchGo" id="searchGo">Go</button>
<button type="reset" class="btn searchClear">Clear</button>
How can I change button name in a same view, my view is "_CreateOrUpdate", I want to call Save Action my button name change is Save and else when I call Update Action my button change Update.
<div class="form-actions">
<button type="submit" class="btn btn-primary" value="Save"><i class="icon-save"></i>Save</button>
You can have a property in the model for the button text.
#using (Html.BeginForm())
{
<button type="submit" class="btn btn-primary" value="Save"><i class="icon-save"></i>#Model.ButtonName</button>
}
Demo
this is solution for my answer.
#if (ViewContext.RouteData.GetRequiredString("action") == "Create")
{
<button type="submit" class="btn btn-primary" value="Save"><i class="icon-save"></i> Save</button>
}
else
{
<button type="submit" class="btn btn-primary" value="Edit"><i class="icon-save"></i> Save changes</button>
}
You can use simple JS function for this which will change button value. When the page is ready:
var button = document.getElementById("saveButton");
button.value = [Basically anything you want to pass from controller];
Another option is to use razor and ViewBag to pass something from controller. This is easier if you want just to pass Save/Update from controller:
ViewBag.CreateUpdate = "Save";
and in the view:
<button type="submit" class="btn btn-primary"><i class="icon-save"></i>#ViewBag.CreateUpdate</button>
I am using a simple html button to submit the data.I am using codeigniter framework.The following code is my button for cacel the page and go back to the previous page.
<input type="button" value="Cancel" onclick="" class="cancel_button">
When I click the cancel button it should go to the following url
http://localhost/sample/categorycontroller/index
Please let me know,how to pass the url through the button.?
Thanks in advance
Try this:
<input type="button" value="Cancel" onclick="window.location = 'http://localhost/sample/categorycontroller/index'" class="cancel_button">
Please user this :
<input type="button" value="Cancel" onclick="window.location.href = 'http://localhost/sample/categorycontroller/index'" class="cancel_button">
<input type="button" value="Cancel" onclick="goBack()" class="cancel_button">
Then create a Javascript function called goBack()
<script type="text/javascript">
function goBack() {
window.location = 'http://localhost/sample/categorycontroller/index';
}
</script>