We Keep Coding

passing textbox value to controller on button click?

I need to pass textbox data to controller action on a button click. Here is my code:
<input id="txt" type="text">
<button onclick="#Url.Action("MyAction", "Mycontroller", new {currencyCode=ViewBag .currencyCode,endDate=Model.StartDate, value entered in txt above})" >
I cant use form here. Can you please suggest me how I can access/ pass this value to action ?
Thanks for your help and guiding me.

The code below sends the text-box value to the controller's action.
<input id="txt" type="text">
<button id="button">Click Me</button>
#section Scripts {
<script type="text/javascript">
$("#button").click(function () {
var txtVal = $("#txt").val();
window.location = "#Url.Action("TheAction","TheController")" +
"/" + txtVal;
});
</script>
}

You can use something like
<div>
<input type='text' name='UnboundTextBoxName' />
</div>
MVC will automatically take the value of UnboundTextBoxName and insert that value into the parameter of the same name.

You should be using <form> tags and set the action to your controller and have set a place in your model to store the data.

This would help you get the value entered in the text box to be the part of the url and in turn hit the required action in your controller specified
<form id = "form1" runat="server">
<asp:TextBox id= "txtbox" runat="server"></asp:TextBox>
<input type="button" id = "searchbtn" value="Search" onclick="srch_Click()"/>
</form>
<script type ="text/javascript" >
function srch_Click() {
var host = window.location.host;
var txt = $("#txtbox").val();
var path = "/CONTROLLER/ACTION/" + txt;
window.location.pathname = path;
var url = host + path;
window.location(url);
}
</script>
any improvisation to the above code is welcomed

Table show/hide breaking when using it with table property

I am trying to hide and show a table using jquery which is working. My issue is I also need to check if this table is visible or not in the codebehind so I can say if it is visible then validate these fields. And I also want the table to not be visible on pageload.
On my PageLoad when I add the following code the javascript stops working
table1.Visible = false;
$(document).ready(function () {
$("#checkbox1").change(function () {
$("#table1").toggle();
});
})
<input type="checkbox" id="checkbox1" name="checkbox1" />
<table id="table1">
Hiddent Fields
</table>

Here's my 2 cents:
In markup:
<table id="table1" runat="server">
In Page_Load:
table1.Style.Add("display", "none");
And when you want to check if the table is invisible:
if(table1.Style["display"] == "none")
{
// Do what you need to
}
You will have full control of the table in jquery as well as in code behind.

DEMO
Try this,
$(document).ready(function () {
$("#table1").hide();
$("#checkbox1").change(function () {
$("#table1").toggle();
});
})
and specify id="checkbox1"
<input type="checkbox" id="checkbox1" />
<table id="table1">
<th>Hidden things</th>
</table>

You can use the hidden selector.
// Matches all elements that are hidden
$('element:hidden')
And the visible selector
// Matches all elements that are visible.
$('element:visible')
or
You can use .is(':visible') to test if something is visible and .is(':hidden') to test for the opposite:
http://api.jquery.com/is/
http://api.jquery.com/visible-selector/
http://api.jquery.com/hidden-selector/
to hide on page load you can use
$(document).ready(function () {
$('#table1').hide();
});
or using css
#table1{ display:none; }
DEMO
$(document).ready(function () {
$("#table1").hide();
$("#checkbox1").change(function () {
$("#table1").toggle();
});
})

You try to access element using his id (#checkbox1) instead of his name , so your problem is that your change event is never triggered.
Change your selector to use name='checkbox1' :
$("input[name='checkbox1']").change(function () {});
Or add id='checkbox1' to your input:
<input type="checkbox" name="checkbox1" id="checkbox1" />
DEMO HERE

How to remove an item in DropDownList in ASP MVC using JavaScript

I am developing an ASP .Net MVC 3 application using C# and SQL Server 2005.
In a view, I have a DropDownList, a button.
How can I remove an item from the DropDownList for each click of the button.
I try to use javascript, but I think that's not working because when I click on the button, nothing happens.
This is the code :
<%:Html.Label("Poste :")%>
<%:Html.DropDownListFor(
model => model.SelectedPoste,
Model.PostesItems,
new { #id = "poste" })%>
<div>
<input type="submit"
value="Enregistrer"
id="btnSave"
onclick="remove()" />
</div>
<script type="text/javascript">
function remove() {
var rm = document.getElementById('btnSave');
var poste = document.getElementById('poste');
poste.removeItem();
}
</script>

using jQuery
<select id="poste">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<input type="button" id="btnSave" value="Remove current item" />
<script type="text/javascript">
$(function () {
$('#btnSave').click(function () {
$('#poste option:selected').remove();
return false;
});
});
</script>
EDIT: binding the click event using jQuery

The generated HTML will give the select element an ID of "SelectedPoste", not "poste" as you are attempting to set.
Use remove to remove an item.
Change your javascript to be:
var poste = document.getElementById('SelectedPoste');
poste.remove(poste.selectedIndex);
Edit: The generated HTML for the select will be:
<select id="poste" name="SelectedPoste">...</select>
Either of these two lines will get that elements:
var poste = document.getElementById('poste');
or
var poste = document.getElementById('SelectedPoste');
(Atleast in IE10)
Then to remove the selected item from the list, do:
poste.remove(poste.selectedIndex);
This does not remove the button :)
Edit 2: Like Dimitar's answer, you need to change your function name from remove to something else.
Once you do that, my code above works in IE and Chrome.

Using vanilla JavaScript you can do:
<script type="text/javascript">
function removeOption() {
var posteElement = document.getElementById('poste');
var currentIndex = posteElement.selectedIndex;
posteElement.removeChild(posteElement[currentIndex]);
return false;
}
</script>
That's all you need. Also make sure you rename your function to anything other than remove():
<input type="submit"
value="Enregistrer"
id="btnSave"
onclick="removeOption()" />
Check out this (not very nice inline-fiddle).
However I'd strongly suggest at least looking into a library such as jquery, (this would be much easier than with vanilla.js). Check out Andre's answer.

Try this:
$("#poste option[value='X']").each(function() {
$(this).remove();
});
Or to be more terse, this will work just as well:
$("#poste option[value='X']").remove();
Example:
$("#btnSave").click(function(){
$("#poste option[value='X']").remove();
});
Remember to use JQuery :)

How to get a html tag innerHTML of client side code?

Using asp.net and c# on a sharepoint server I edit the innerhtml of a div tag that has runat="server", and I place lots of html code in it and an input box (this input box is the autocomplete jquery UI input box).
I can give the input box an id.
Now how can I access the text in the input box in c#?
searchbox.InnerHtml = #"
<script type='text/javascript'>
$(function() {
var availableTags = [
" + results + #"
];
$( '#tags' ).autocomplete({
source: availableTags
});
});
</script>
<div class='demo'>
<div class='ui-widget'>
<input id='tags'>
</div>
</div>";

You want an HTML parser. You can try out this library. Specifically, if you use Chrome.. right click the box itself and 'Inspect it'. Right click the inputbox, and hit 'Copy XPath'. This is the path, now just select the element with HTMLAgilityPack.

You cannot directly access to the value of the input box from the server side code. You either need to post it back or send the value of the input box by an Ajax request to the server.
Post back using form & submit
<form action="yourpage.aspz" method="POST">
<input type="text" name="inputbox" id="inputbox"/>
<input type="submit" name="submit" value="submit"/>
</form>
And for the Ajax code with JQuery:
<input type="text" name="inputbox" id="inputbox"/>
<input type="button" name="submit" value="submit" onclick="ajaxPost();"/>
<script type="text/javascript">
function ajaxPost(){
var inputBoxValue=$("#inputbox").val();
$.post("yourpage.aspx", { inputbox: inputBoxValue } );
}
</script>
Yourpage.aspx.cs
// ... some other code
var a = Request.Form("inputbox")
// ... some other code

How can I make a "tr" of a table visible using JavaScript for a checkbox event?

I have a checkbox when user checked that check box means. I need to make this tr visible "true" on the page. If again unchecked make tr "invisible" using JavaScript or jQuery.
Initially during the page load I have binded the values for the drop down
<tr id ="trddl" runat= "server" visiable="false">
-- here I have a dropdown control where values are coming from DB --
</tr>
Right now I am doing using server side event for the check box, which takes a lot of time.
if(chkbox.checked=true)
{
trddl.visiable= true
}

This should help you:
<html>
<head>
<script language="javascript">
function Toggle(sender)
{
document.getElementById('theRow').style.display = sender.checked?"block":"none";
}
</script>
</head>
<body>
<input type="checkbox" checked="checked" onclick="Toggle(this)" /> Show Row
<table>
<tr id="theRow"><td>Test Row</td></tr>
</table>
</body>
</html>

The row:
<tr id="tr99"><td>......</td></tr>
The checkbox:
<input type="checkbox" onclick="toggletr(this);" value="val" id="cbox" />
The javascript:
<script type="text/javascript>
$(document).ready(function() {
//$(#tr99).hide(); //ver 1
toggletr($(#cbox)); //ver 2
});
function toggletr(obj){
if(obj.checked)
$(#tr99).hide();
else
$(#tr99).show();
}
</script>

<input type="checkbox" name="cb1" id="cb1">
<table>
<tr id="row1">
<td>...</td>
</tr>
</table>
with
$(function() {
var cb1 = $("#cb1");
cb1.change(toggle_cb1);
// this sets 'this' to the checkbox
// note: this is only required if you don't hide or show the row
// correctly on the serverside based on the checkbox state
toggle_cb1.call(cb1[0]);
});
function toggle_cb1() {
if ($(this).is(":checked")) {
$(this).show();
} else {
$(this).hide();
}
}

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//We attach an "onclick" event handler to our 1st checkbox here, as apposed to html code below for the input checkbox
//This is the practice of separating display vs function
$("#chkToggle1").click(function(){
//Call our toggleVisibility JS function, passing in a jQuery object for the row we want to hide, and a boolean indicating if our checkbox is checked or not
toggleVisibility($("#trTarget1"), $(this).is(":checked"));
});
//Again for our 2nd checkbox
$("#chkToggle2").click(function(){
//Call our toggleVisibility JS function, passing in a jQuery object for the row we want to hide, and a boolean indicating if our checkbox is checked or not
toggleVisibility($("#trTarget2"), $(this).is(":checked"));
});
//Again for our 3rd checkbox
$("#chkToggle3").click(function(){
//Call our toggleVisibility JS function, passing in a jQuery object for the row we want to hide, and a boolean indicating if our checkbox is checked or not
toggleVisibility($("#trTarget3"), $(this).is(":checked"));
});
});
//I created a generic function that can reused for toggle visibility of other objects, not locked down to just our table row
//You'll note the first parameted has a "$" before it. This is to denote that the function is expecting a jQuery object and not a normal DOM object
function toggleVisibility($targetObj, isVisible){
if(isVisible == true)
$targetObj.show();
else
$targetObj.hide();
}
</script>
<head>
<body>
<input type="checkbox" id="chkToggle1" checked="checked" />
<input type="checkbox" id="chkToggle2" checked="checked" />
<input type="checkbox" id="chkToggle3" checked="checked" />
<table style="border: 1px solid black;">
<tr id="trTarget1">
<td>Table Row 1</td>
</tr>
<tr id="trTarget2">
<td>Table Row 2</td>
</tr>
<tr id="trTarget3">
<td>Table Row 3</td>
</tr>
<table>
</body>
</html>