I have a form on a dialog box like so:
<form action="../ControlerFunction">
<input type=text id="id1"/>
<input type=text id="id2"/>
<button type="submit"> OK </button>
<button type="button" class="close"> Cancel </button>
</form>
When the form is submitted it hits my controller function, but how can I retrieve the values of the two text boxes?
Also when I change the form action to:
<form action="JavaScriptFunction();">
or:
<form action="JavaScriptFunction();return false;">
and I have my JavaScript on the same page as:
function JavaScriptFunction()
{
alert("Hi!");
}
it does not hit the function. Am I missing something?
In your controller add another action method that accepts an HTTP POST and takes in the form collection.
Like:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult ControllerFunction(FormCollection collection)
Kindness,
Dan
Correct html form tag syntax:
<form method="post" action="/controller/method/" onsubmit="yourJSFunction();">
...
This suits ALL server-side languages and technologies.
Try considering this first:
FORM Tag needs method(POST or GET);
Your INPUT tags don't have name
attributes which will be used for
accessing the values.
Additional code:
<form name="form1" method="POST" onSubmit="JavaScriptFunction(); return false;">
<input type=text id="id1" name="id1"/>
<input type=text id="id2" name="id2"/>
<button type="submit"> OK </button>
<button type="button" class="close"> Cancel </button>
</form>
javascript:
function JavaScriptFunction()
{
var id1Text = document.form1.elements["id1"].value; //get the value of id1
var id2Text = document.form1.elements["id2"].value; //get the value of id2
//do whatever you want here.
}
Further to #Daniel.
You can either use MyAction[FormCollection collection] and then pull your values from the collection object.
Or, if you have a model that you passed to the view you can use TryUpdateModel() to propergate your model with the values from the form.
If you need more then post a comment and I'll add code.
Going home now so there will be a delay as I fight the traffic. :)
Oh, and welcome to SO.
I want to answer your first question.
how can i retreive the values of the two text boxes?
One answer is given by Daniel Elliot.
After giving you input tags a name attribute with the same value of the id attribut, you can access the values as parameters to your action method.
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult ControllerFunction(String id1, String id2)
Your second question about java script is answerd by Sergei
<form name="form1" method="POST" onSubmit="JavaScriptFunction(); return false;">
<input type=text id="id1" name="id1"/>
<input type=text id="id2" name="id2"/>
<button type="submit"> OK </button>
<button type="button" class="close"> Cancel </button>
</form>
javascript:
function JavaScriptFunction()
{
var id1Text = document.form1.elements["id1"].value; //get the value of id1
var id2Text = document.form1.elements["id2"].value; //get the value of id2
//do whatever you want here.
}
Related
In my View i have the following code:
<input type="text" id="createdDate" placeholder="dd/mm/yyyy" />
Download
In my Control i have de following code:
[HttpGet]
public async Task<IActionResult> GetRoomAccessHistory(DateTime createdDate)
{
// TO DO
}
In this particular case, i want to pass the createdDate value that is inside the textbox (createdDate) to my Url.Action(...), so it could be passed as a queryString in my URL.
This action is invoked as a GET request, and in GetRoomAccessHistory control method, i should get my createdDate.
Thank you.
PS
I think the solution should be something like this:
<a href="#Url.Action("GetRoomAccessHistory", "Files", new { createdDate = ??? })" >Download</a>
I have got a possible answer:
<form method="post" enctype="multipart/form-data" asp-action="GetRoomAccessHistory" id="formGetRoomAccessHistory">
...
<button type="button" id="downloadRoomAccessHistory"</button>
</form>
<script>
var form = document.getElementById("formGetRoomAccessHistory");
document.getElementById("downloadRoomAccessHistory").addEventListener("click", function () {
form.submit();
});
</script>
This does exactly what i want and it works, but i was trying to find a more nice solution because my experience in ASP.NET MVC is low.
You're using the wrong tool for the job.
Since the Url.Action() helper runs on the server-side, it has already executed when the page was first loaded, and generated a fixed URL which is inserted into the page's HTML. It cannot know what the user later enters into the textbox.
If you want to capture data which a user has entered, it makes more sense to use a form. In this case I've used the BeginForm tag helper to generate a suitable HTML <form> tag:
<form asp-action="GetRoomAccessHistory" asp-controller="Files" method="get">
<input type="text" id="createdDate" name="createdDate" placeholder="dd/mm/yyyy" />
<input type="submit" value="Download"/>
</form>
When submitted, this will generate a GET request to the GetRoomAccessHistory action's URL, and append createdDate as a querystring variable, using the value from the textbox.
For Get request,try to use window.location.href.
<input type = "text" id="createdDate" placeholder="dd/mm/yyyy" />
<a onclick = "navigate()" >
< input type="button" value='Download' />
</a>
<script type = 'text/javascript' >
function navigate()
{
var createdDate = document.getElementById('createdDate').value;
var url = "/Files/GetRoomAccessHistory?createdDate=" + createdDate;
window.location.href = url;
}
</script>
And your solution could be simplified to
<form method = "get" asp-controller="Files" asp-action="GetRoomAccessHistory" id="formGetRoomAccessHistory">
<input type = "text" name="createdDate" placeholder="dd/mm/yyyy" />
<button type = "button" onclick="myFunction()">Download</button>
</form>
<script>
function myFunction()
{
document.getElementById("formGetRoomAccessHistory").submit();
}
</script>
I have a model with say 10 properties. A, B, C and so on...
Property A is an array.
For each value in array I generate one tag like this:
<div class="col-sm-10 row">
#foreach (var item in Model.A)
{
<div class="col-sm-1 right-buffer">
<i class="" aria-hidden="true">#item.Text</i>
</div>
}
</div>
When user clicks on some link I should redirect it to the same page, but with Some model property changed. For example:
Current url: my/controller/someaction?name=Alex&age=20&from=fr&CurrentA=
with model ?name=Alex&age=20&from=fr&CurrentA=
If user clicks on <a> with text foo it should be redirected on my/controller/someaction?name=Alex&age=20&from=fr&CurrentA=foo
then is clicks on <a> with text bar and it should be now redirected on my/controller/someaction?name=Alex&age=20&from=fr&CurrentA=bar
So entire query string (except one parameter) should be preserved to send current model state to server while I want to set one value and redirect it to the same page but with new value.
Eventually, it should acts like postback with one extra value setted to model
Is it possible or I should use JS and perform everything myself?
Manually i solved it like this:
First, create hidden fields for every property in model:
<form asp-controller="search" asp-action="index" method="get" role="form" id="searchForm" asp-antiforgery="false">
<input asp-for="SessionId" type="hidden" name="sessionId" value="#Model.SessionId" />
<input asp-for="Quantity" type="hidden" name="quantity" value="#Model.Quantity"/>
<input asp-for="SortField" type="hidden" name="sortField" value="#Model.SortField"/>
<input asp-for="IsAscending" type="hidden" name="IsAscending" value="#Model.IsAscending" />
<input asp-for="Offset" type="hidden" name="offset" value="0" />
...
</form>
Then, use JS to replace value in hidden field and then submit form. Values from inputs will be autimatically converter in query string, so everything works fine:
function sortDocuments(sortField) {
var sField = document.getElementById('SortField');
var isDescending = document.getElementById('IsAscending');
if (sField.value === sortField) {
if (isDescending.value.toUpperCase() === 'FALSE') {
isDescending.value = 'TRUE';
} else {
sField.value = 'rank';
isDescending.value = 'FALSE';
}
} else {
sField.value = sortField;
isDescending.value = 'FALSE';
}
document.getElementById('searchForm').submit();
}
Not very elegant, but it does its job.
I have a contenteditable form I'm trying to POST from a form which will be handled by an Action method but I get null for its POST data.
I first define my form:
<form class="composer-form" name="input" action="~/Articles/ResearchArticles/ArticleSubmit" method="post" onsubmit="return SubmitForm()">
#RenderPage("text-editor-partial.cshtml")
<textarea id="hidden_text_area" style="display: none"></textarea>
<div style="padding-left: 2em">
<input class="btn" type="submit" value="Submit" style="width: 200px">
</div>
As the above code shows, the SubmitForm function will handle the copying of the value of the content editable which looks like this:
function SubmitForm() {
var clr = confirm("Are you sure you want to submit the article?");
if (clr == true) {
var hta = document.getElementById("hidden_text_area");
var content_html = document.getElementById("editor").innerHTML;
hta.value = content_html;
return true;
}
else {
return false;
}
}
The code successfully gets the value from the contenteditable div and puts it in the hidden text value field.
So now I have an action that I get from this like:
[HttpPost]
public ActionResult ArticleSubmit(string postData)
{
return new EmptyResult(); //postData is NULL... why?
}
Setting a breakpoint shows postData as null... What is my stupid mistake :) ?
Thanks!
Your textarea needs a name, otherwise the model binder won't fetch its value when you submit your form :
<textarea id="hidden_text_area" style="display: none" name="postData"></textarea>
Possible solution is to use a hidden input instead of textarea, since it does not have a value, actually the contents are stored in a text.
So in HTML:
<input id="hidden_input" style="display: none" name="data" />
And in Controller:
public ActionResult ArticleSubmit(string data)
{
}
I have a view with a list of items. Each item have a textbox and a button.
What is the best way to get the item id of the button clicked in the controller action?
I need the value from the associated textbox in the controller action, so I do not think I can use action links.
There are a number of ways to do this. Some use javascript, others don't. I personally prefer to NOT use javascript for basic functionality, unless your design is itself javascript based (such as using ajax)
For instance, you can have each item be wrapped in it's own form, with a different submit value. Just be careful not to nest forms, as that's not valid HTML.
For instance:
#using(Html.BeginForm("MyAction", "MyController", new { id=1 })) {
<input type="submit"/>
#Html.TextBox("TheValue", "One")
}
#using(Html.BeginForm("MyAction", "MyController", new { id=2 })) {
<input type="submit"/>
#Html.TextBox("TheValue", "Two")
}
public ActionResult MyAction(int? id, string TheValue) {
// if they click the first one, id is 1, TheValue = "One"
// if they click the second one, id is 2, TheValue = "Two"
}
this answer is using jquery - If you do not know how to add jQuery to your view or just simply do not want to use it let me know and I can re-work the answer
I would do something like this
<li>
<input type="text" id="1" name="1" class="whatever" />
<input type="button" value="CliCk mE" class="myButton" />
</li>
<li>
<input type="text" id="2" name="2" class="whatever" />
<input type="button" value="CliCk mE" class="myButton" />
</li>
<input type="hidden" id="myHiddenText" name="myHiddenText" />
then add this jQuery:
<script>
$(function(){
$('.myButton').click(function(){
// this is how to get the closest textbox
// you didn't show your html , maybe .prev() or .next()
var textValue = $(this).closest("input[type='text']").val();
// this sets your hidden field with the value from desired textbox
$('#myHiddenText').val(textValue);
});
});
</script>
now when you submit this form to server you can just use myHiddenText on the server
public ActionResult Index(string myHiddenText = "")
{
// hidden fields in the HTML form automatically get passed to server on submit
return View();
}
The best option would be to use jquery but if you only want to use c# I would suggest the following:
I imagine you are using some sort of repeating statement (for or foreach) to generate your textboxes, so what I would do is create a form inside that foreach this new form would contain your textbox, and foreach item you would pass the textbox id to the form submit.
something like this pseudo code:
foreach(item in array){
<form action="address/"#item.Id>
<input type="text" value=""/>
<input type="submit" value="submit textbox"/>
</>
}
Hi all i am having my input text which was declared as follows
<input name="text1" type="text" id="text1" value="textbox 1" onBlur="toggleVisibility(this.name);">
I would like to pass the text values in my href . I tried the below but i am unable to get the value can any one help me
Unsubscribe
you can try like this...using javascript function...
<input type="text" id="myText"/>
click here
<script type="text/javascript">
function RedirectToSecondPage()
{
var input = document.getElementById('myText');
var value = input ? input.value : 'defaultText';
window.location.href = 'mySecond.asp?MyText=' + escape(value);
}
</script>
If you really want the actual value you can do something like this:
<input name="text1" type="text" id="text1" value="textbox 1" onBlur="toggleVisibility(this.name);">
Unsubscribe
However this may have unwanted side effects (e.g. spaces appear in the URL as actual spaces).
If you can change the name of the input you might consider doing it via a proper form:
<form id="myform" action="http://aaapaymycheck.info/federalregulartaxcalculator.aspx" method="get">
<input name="id" type="text" id="text1" value="textbox 1" onBlur="toggleVisibility(this.name);">
</form>
Unsubscribe