We Keep Coding

How to get the value of "<select></select>" from a view into a Controller's "ActionResult"?

I have a tag and a button. On click of the button, an actionResult in a controller is called. Like this.
<button type="button" onclick="location.href='#Url.Action("GetAllItems", "Items")'">Get Items</button>
And here's the ActionResult
public ActionResult GetAllItems() {
string selectedItem = string.Empty;
ItemsRepository itemsRepository = new ItemsRepository();
ModelState.Clear();
return View(itemsRepository.GetAllItems());
}
selectedItem is the variable I want to store either the selectedText or the selectedValue. But I don't know how to.
This is the <Select> tag.
<select style="width:170px" id="ItemsID" name="Items"></select>
And this is the rough function to get the different results from onChange event.
<script>
$(document).ready(function () {
$("#ItemsID").change(function () {
var a = $('#ItemsID option:selected').val();
var b = $('#ItemsID option:selected').text().trim();
var c = $('#ItemsID option:selected').index();
alert(a);
alert(b);
alert(c);
})
});
Please help.

location.href doesn't sent a POST request. What you got to do is to place a form tag with your ActionResult to make a POST request.
<form action='yourAction'>
<select name='name'></select>
<button type="submit">Get Items</button>
</form>

You can use following code to get the value of your select in the action method. Note that you must pass the name attribute of your html select element to Request.
var selectedValue = Request["Items"];
Also, make sure the button that is clicked submits a form by using code like below.
The main point is that you can only use Request object to access a html element value in C# code, provided the html element and the submit button are within the same form. If you use a button that redirects the user rather than submits a form then this will not work, so it must be a submit type button as in code below.
#using (Html.BeginForm("YourActionName", "ControllerName")) {
<select style="width:170px" id="ItemsID" name="Items"></select>
<input type="submit" value="Submit Data" id="btnSubmit" />
}

How to submit form and redirect users to different pages based on what they have chooses in the drop down menu

I am developing a html page in which the user submit a form which icludes a dropdown box to choose a value from. Once the user submit the form i want to submit the form and redirect users to different pages based on what they have chooses in the dropdown box.
HTML form code
<form action="#" method="post" class="form-group" id="dtls">
<label for="sp">Choose one:</label><select name="sp" id="sponsor" class="form-control">
<option value="mark" id="s1">Mark</option>
<option value="markus" id="s2">Markus</option>
</select>
<label for="mail">Your Email:</label><input type="email" name="mail" class="form-control" placeholder="Email Address...">
<input type="submit" name="sub" class="btn form-control btn-success" id="but">
</form>
Can anyone suggest me a good way to tackle this challenge?
Thanks

Sure, something like this in your JS:
redirectPage() {
// Gets value of dropdown
var selectedOption = $("#sponsor option:selected").val();
// Picks correct url to go to
var url;
switch(selectedOption) {
case "mark":
url = "your link #1 here";
break;
case "markus":
url = "your link #2 here";
break;
default:
url = "";
break;
}
// Changes current page and keeps back history
window.location.assign(url);
}
An easy way to get rid of the big switch statement is to just have the value of each option be the url, if you're not using the dropdown values for anything else. You can replace .val() with .text() at any time to get "Mark" and "Markus" out of the dropdowns.
References:
Get the value of a dropdown in jQuery
How to redirect to another webpage in JavaScript/jQuery?

Php
if(isset($_POST["sub"])) {
$value = $_POST["sp"];
header("location: /$value");
}
You could do if statements with the value or you can directly redirect user with setting a header like I did or echo javascript window.location
jQuery
$("#dtls").submit(function() {
var value = $("#sponsor").val();
if(value == "mark") {
window.location.href = "/mark";
} elseif(value == "markus") {
window.location.href = "/markus";
}
});

adding an input value and submitting the form on load

I have the following form:
<form action="http://example.co.uk/order" method="post" id="voucher" class="AVAST_PAM_nonloginform">
<fieldset>
<h4>Vouchers</h4>
<input type="text" class="discount_name form-control" id="discount_name" name="discount_name" value="">
<input type="hidden" name="submitDiscount">
<button type="submit" name="submitAddDiscount" class="button btn btn-default button-small"><span>OK</span></button>
</fieldset>
</form>
and am using the following script:
<script>
window.onload = function(){
document.getElementById(\"discount_name\").value = \"50681\";
}
</script>
to populate the input. I then use:
<script>
window.onload = function(){
document.forms['voucher'].submit();
}
</script>
to activate the submit.
However, use the second script, it stops the "50681" from being inputted into the text box (instead submits a blank input).
Originally I had the code as :
<script>
window.onload = function(){
document.getElementById(\"discount_name\").value = \"50681\";
document.forms['voucher'].submit();
}
</script>
(I split it up thinking it may be a timing issue).
Any ideas?
p.s. the reason for the backslash's is due to it currently being run under php until I can get it working

The issue seems to be with (\"discount_name\").value = \"50681\"; & document.forms['voucher'].submit();
In either of the case you can avoid \ & for form you need to target by the index number. Assuming there is only one form present , so passing 0 in index
window.onload = function(){
document.getElementById("discount_name").value = "50681";
document.forms[0].submit();
}
Note: In the demo I have changed the action url to https else it will prohibit to make call from jsfiddle. In your case you can still keep http in code
DEMO USING ID

pass js variable to form action

I have a dynamic variable in js. I have to get this variable in my form action.
Here is my code
<script type="text/javascript">
$(document).on('click', 'span', function () {
var AutoPath = $(this).attr('automationpath');
// or var AutoPath="Redirect.jsp";
}
</script>
<form action="%{#AutoPath}" method="get">
<input name="AutoRun" id="AutoAction" value="Auto Action" type="submit" />
</s:form>
But this does not redirect to the Redirect.jsp page
If I manually set as below, it will redirect to the Redirect.jsp
<s:set var="formAction" value="'Redirect.jsp'" />
<s:form action="%{#formAction}" >
<input name="AutoRun" id="AutoAction" value="Auto Action" type="submit" />
</s:form>
Can somebody help me with this.

In your javascript code, you are not inserting the automation path into your markup.
Instead the code should look something like this:
$(document).on('click', 'span', function () {
//saving the value to variable
var AutoPath = $(this).attr('automationpath');
//Inserting value int he form
$('form').attr('action', autoPath);
})

I don't know what you are trying to do but if you want to change the action attribute of a form element you simply do the following:
$('form').attr('action','Redirect.jsp');

pass JavaScript variable to HTML input box and (to use in PHP file)

I'm trying to pass a JavaScript variable to the value of an hidden input button to use in my PHP file output.
My HTML is:
<input type = "hidden" id = "location2" name = "location2" value = ""/>
I'm using this onclick="myFunction();" in my "Submit Form" input to run the function as it is not able to be done in the window.load()
My JavaScript below is calling indexes from another function and assigning the text to the variable 'location' (I know this sounds strange but it was the only way I have got it to work so far):
function myFunction() {
var x = document.getElementById("box2").selectedIndex;
var y = document.getElementById("box2").options;
var location=(y[x].text);
document.getElementById("location2").value=(location);
}
Any help would be hugely appreciated as I am really struggling and have been working on this for some time (as you can probably tell, I dont really know what I'm doing) - I just need to call the value of this variable into my PHP file output and the majority of my web form is completed.
Thanks very much
Marcus
I've just changed my HTML as follows
I've removed myFunction from my submit
I've added the following HTML button:
<button onclick="myFunction();" id = "location2" name = "location2" value="">Click me</button>
The variable is now passing!!!! The only problem is when I press the onclick button, it is now submitting my form!!
Is it okay for me to replace my previous submit button with this code??
THANKS TO EVERYONE FOR THEIR HELP ON THIS!!

I Was not sure what you doing but below example may help you. It will post the value as well as the option text.
Here we are using print_r to print the $_POST array from the AJAX Request. using this method, you should be able to debug the issue.
<!DOCTYPE html>
<html>
<body>
<?php if($_POST) {
print_r($_POST); die;
} ?>
<form name="" id="" method="post" >
Select a fruit and click the button:
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
<input type = "hidden" id = "location2" name = "location2" value = ""/>
<input type = "hidden" id = "locationname" name = "locationname" value = ""/>
<button type="submit" id="submit">Display index</button>
</form>
<script>
function myFunction() {
var x = document.getElementById("mySelect").selectedIndex;
var y = document.getElementById("mySelect").options;
//alert("Index: " + y[x].index + " is " + y[x].text);
document.getElementById("location2").value=(y[x].index);
document.getElementById("locationname").value=(y[x].text);
//alert($("#location2").val());
}
var submit = document.getElementById('submit');
submit.onsubmit = function(e){
myFunction();
};
</script>
</body>
</html>

i'm assuming your form method is 'POST' and action value is the same php page where you are expecting to see the 'location2' hidden input value, if that is the case, you can use $_POST['location2'] to get the value in that php page.

Yes it is fine to use button tag by default it acts like the submit button inside the form tag. You can also make it act like button(won't submit the form) by using the attribute type='button'.
Edited
button or input type='submit' can submit the form only when it is placed within the form tag(without javascript).
<form action='http://www.stackoverflow.com/'>
<button>stackoverflow</button> <!-- this works -->
</form>
<form action='http://www.stackoverflow.com/'></form>
<button>stackoverflow</button><!-- this won't work -->
var go = function() {
document.forms[0].submit();
};
<form action='http://www.stackoverflow.com/'></form>
<button onclick='go()'>stackoverflow</button><!-- still works -->