here is my view:
#model IDictionary<int, RemoteControl.Core.Slot>
<div style="left: 20px; width: 350px">
<form id="rcForm">
#foreach (var a in Model)
{
<div id="#a.Key-div">
<div style="float: left; width: 225px">
<input type="radio" class="slotRadio" name="slots" id="#a.Key" value="#a.Key"/>#a.Value.Name</div>
<div>
<input type="text" readonly="readonly" value="#a.Value.Status" style="width:20px"/>
<input disabled="disabled" type="submit" class="buttonOperation" id="#a.Key-btnON" value="ON" />
<input disabled="disabled" class="buttonOperation" type="submit" id="#a.Key-btnOFF" value="OFF" /></div>
</div>
}
</form>
</div>
this view receives IDictionary from my Index action of my Home Controller. it displays the elements of the dictionary with each element corresponding a radio button.
each element has a name and status. Every radio button of the elements has two buttons besides it: ON and OFF.
I want to everytime either the ON/OFF button is clicked, the name and status of the element selected in the radio buttons will be passed to an action in a controller. I have been trying to do a form collection but I always see examples that uses only input text box.. so how could i do this??
PS: dont worry about the readonly and disabled attribs... i am doing something with it in my jquery..
Related
I'm trying to type invoice number as input type i.e. 123456789
After I click Print Record button, the value of invoice number disappears like this:
Aslo I have wrote
<div class="form-group row">
<label for="invoice_no" class="col-sm-2 col-form-label">Inovice Number</label>
<div class="col-sm-10">
<input type="text" class="form-control col-sm-4" name="InvNumber" id="InvNumber" value="{{request()->input('InvNumber')}}">
</div>
</div>
And the Print button looks like:
<div class="form-group row">
<div class="col-sm-12 dol-12" >
<button class="btn btn-secondary float-right" onclick="printDiv()">Print Record</button>
</div>
And printDiv() function is:
<script type="text/javascript" language="javascript">
function printDiv(divName) {
var printContents = document.getElementById('printableArea').innerHTML;
document.body.innerHTML = printContents;
window.print();
}
Clicking a submit button will submit the form it is in.
Presumably, your form's action is the current URL, so it reloads the page.
The new page doesn't have the data in the form fields that you had typed into the previous page.
If you don't want to submit the form, use the type attribute to change the <button> from its default of submit.
As per the documenation, if you don't specify type of button it assumes it as submit button that is why your form is being submitted by default.
Add type="button" in your button
<button type="button" class="btn btn-secondary float-right" onclick="printDiv()">Print Record</button>
submit: The button submits the form data to the server. This is the
default if the attribute is not specified for buttons associated with
a form, or if the attribute is an empty or invalid value.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
In my listview template I want to use some databound elements. For example I have next template:
<script type="text/x-kendo-tmpl" id="phoneView">
<div style="width:301px">
<span style="width:100px" data-role="tooltip" data-position="top" data-bind="val: tooltips.phoneNumber"><input type="text" data-bind="value: number" /></span>
<span style="width:45px" data-role="tooltip" data-position="top" data-bind="val: tooltips.phoneExt"><input type="text" data-bind="value: ext" /></span>
<span data-role="tooltip" data-position="top" data-bind="val: tooltips.removePhone"><a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span> Delete</a></span>
</div>
</script>
for listview
<div data-role="listview" id="phones"
data-template="phoneView"
data-bind="source: phones"></div>
when I bound data to form this listview shows rows with empty textboxes without data for each row in phones source and no tooltips.
But if I start editing some row by (for example) next code:
var listView = $("#phones").data("kendoListView");
listView.edit(listView.element.children().first());
Then edited row works perfectly.
So my question is - Is this possible to use MVVM data binding inside "view" list view templates in this case?
There is no binding called "val" hence the problem. There should even be an exception thrown. The following should work though:
<script type="text/x-kendo-tmpl" id="phoneView">
<div style="width:301px">
<span data-role="tooltip" data-filter="input"><input type="text" data-bind="value: number, attr: {title:tooltips.phone}" /></span>
<span data-role="tooltip" data-filter="input">
<input type="text" data-bind="value: ext,attr:{title:tooltips.ext}" />
</span>
<a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span> Delete</a>
</div>
</script>
Here is a live demo: http://trykendoui.telerik.com/#korchev/IGIJ
I have a view that has the ultimate aim of being a user creation form. It is structured in the following way:
<fieldset>
#Html.DropDownList("first dropdown")
</fieldset>
<fieldset id="exists">
#Html.DropDownList("seconddropdown")
#Html.DropDownList("third dropdown")
#Html.DropDownList("fourth dropdown")
<input type="submit" value="Create User"/>
</fieldset>
<fieldset id="new">
#Html.DropDownList("dropdown")
#Html.DropDownList("dropdown")
#Html.DropDownList("dropdown")
<input type="submit" value="Create User"/>
</fieldset>
<script>
//script here shows and hides fieldsets depending on value chosen in first dropdown
</script>
Depening on the value chosen in the first dropdown, either fieldset exist or fieldset new will show. they both interact with the database differently so I really need to be able to handle the submit action separately for each. I have tried creating a submit within each fieldset, but the controller action is never hit.
I am obviously missing the mark with MVC submit buttons so could anyone help me understand how these work and how to create multiple (and separate) submit possibilities on one view.
Many thanks
You could have two forms, each that post to a different action...the submit will then only submit the form values in that form...
e.g.
#using (Html.BeginForm("Login", "Account", FormMethod.Post))
{
<fieldset id="exists">
#Html.DropDownList("seconddropdown")
#Html.DropDownList("third dropdown")
#Html.DropDownList("fourth dropdown")
<input type="submit" value="Log in"/>
</fieldset>
}
#using (Html.BeginForm("Create", "Account", FormMethod.Post))
{
<fieldset id="new">
#Html.DropDownList("dropdown")
#Html.DropDownList("dropdown")
#Html.DropDownList("dropdown")
<input type="submit" value="Create"/>
</fieldset>
}
I have a simple form with a submit button. I would like to use the submit button using an image something like,
<INPUT TYPE="image" SRC="images/submit.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="Submit Form">
How can I use the image as submit button? Then what I want to change in jquery initialisation?
<form action='#' id='freeForm' method='post' autocomplete="off">
<a>
<input style='border: none' type='submit' value='Submit' />
</a>
</form>
jQuery
$("#freeForm").submit(function()
{
});
Thanks!
jQuery isn't necessary, as an image button already submits a form.
<form>
<input type="image" src="foo.png" />
</form>
Fiddle: http://jsfiddle.net/jonathansampson/AkR95/
u can do some thing like this
$("#image").onclick(function()
{
$("#freeForm").submit();
});
#image is the id of element containing your image.
Try this one:
<input type="submit" value="Enter" name="submit" style="background:url('/imgBG.jpg') no-repeat;width:100;height:50;border:none;"/>
and how can I trasmit data between popup and page that have called popup?
I would like to do a ajax form for user registration inside popup "reveal" in zurb foundation.
Do you think is possible?
This answer might be a little late, but you can absolutely put a form into the reveal popup. For instance, if you wanted a login dialog to show up when they click a login button:
At the bottom of your HTML (after all the rows), create the content for the popup:
<div id="login-modal" class="reveal-modal" style="width: 400px; background: black; color: white;">
<h2>Login</h2>
<form id="login-form" class="six">
<div class="row">
<label for="username">Username</label>
<input type="text" name="username" />
<label for="password">Password</label>
<input type="password" name="password" />
</div>
<div class="row">
<div class="right" style="margin-top: 20px;">
<button type="reset" class="button radius alert">Reset</button>
<button type="submit" class="button radius">Login</button>
</div>
</div>
</form>
<a class="close-reveal-modal">×</a>
</div>
Then you can display it using one of their methods. The new foundation 3.0 let you display it super easy like:
<a href="#"
data-reveal-id="login-modal"
data-animation="fadeAndPop"
data-animationspeed="300"
data-closeonbackgroundclick="true"
data-dismissmodalclass="close-reveal-modal">Login</a>
Hope that helps!
try this in app.js.
Then use reveal class on any anchor
$('a.reveal').click(function(event) {
event.preventDefault();
var $div = $('<div>').addClass('reveal-modal').appendTo('body'),
$this = $(this);
$div.empty().html('<p align="center"><img src="application/public/loading.gif" /></p>').append('<a class="close-reveal-modal">×</a>').reveal();
$.get($this.attr('href'), function(data) {
return $div.empty().html(data).append('<a class="close-reveal-modal">×</a>').reveal();
});
});