I have a javascript function that toggles the display for rows in a table. The dilemma is that I would like to display one row at a time. What is a neat way to do this?
function optionSelected() {
var optionSelect = document.getElementById('ddlSelect');
var strTest = optionSelect.options[optionSelect.selectedIndex].value;
var rowHeader = document.getElementById(strTest);
var row = document.getElementById(strTest);
if (rowHeader.style.display == '') {
rowHeader.style.display = 'none';
row.style.display = 'none';
}
else {
rowHeader.style.display = '';
row.style.display = '';
}
}
<select id="ddlSelect" onchange="optionSelected()">
<option value="optionA">A</option>
<option value="optionB">B</option>
<option value="optionC">C</option>
<option value="optionD">D</option>
</select>
<table id="tableList">
<tr id="optionA"><td>DisplayA</td></tr>
<tr id="optionB"><td>DisplayB</td></tr>
<tr id="optionC"><td>DisplayC</td></tr>
<tr id="optionD"><td>DisplayD</td></tr>
</table>
simple with jquery
$('tr').hide();
$('#'+strTest).show();
This is your vanilla Javascript solution (although I'd rather go with jQuery):
function optionSelected() {
var sel = document.getElementById('ddlSelect');
for (var i=0; i<sel.options.length; i++) {
document.getElementById(sel.options[i].value)
.style.display = sel.options[i].selected ? '' : 'none';
}
}
Also, if you want to initialize your display, you should call optionSelected() once in an onLoad handler.
Instead of looping on DOM nodes, you can change style rules and use the speed of the CSS selectors instead.
Here is an example to show one line at a time and stay.If you want to remove them at each selection you can clear the style each time you make a selection.
<body>
<style id="styles">
table tr{
display:none;
}
</style>
<select id="ddlSelect" onchange="optionSelected()">
<option value="optionA">A</option>
<option value="optionB">B</option>
<option value="optionC">C</option>
<option value="optionD">D</option>
</select>
<table>
<tr id="optionA"><td>DisplayA</td></tr>
<tr id="optionB"><td>DisplayB</td></tr>
<tr id="optionC"><td>DisplayC</td></tr>
<tr id="optionD"><td>DisplayD</td></tr>
</table>
<script>
function optionSelected() {
var optionSelect = document.getElementById('ddlSelect'),
styles = document.getElementById('styles'),
selector = '#' + optionSelect.options[optionSelect.selectedIndex].value,
rule = 'display:block';
if(styles.styleSheet){
styles.styleSheet.cssText = selector + '{' + rule + '}';
}else{
styles.appendChild(document.createTextNode(selector + '{' + rule + '}'));
}
}
</script>
</body>
Related
I'm having and issue with passing a variable from page to page. Here I have a drop down menu that allows two options of Yes or No to be chosen. With the default of Choose.
<form method="post" id="Form" action="/admin/DefCon5">
<table align="center" style="width: 200px; height: 140px;">
<tr>
<td colspan="5"><img src="/images/logo.png"><br> </td>
</tr>
</table>
<div align="center">
<select id = "DefCon5" align="center" valign="top" name="DefCon5">
<option value="Choose">Choose..</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br />
         
<textarea align="Center" name="message" value="message" rows="4" cols="40">Please enter a brief message before engaging DefCon5</textarea>
<br />
<input type="submit">
</div>
Here I take one of those two options( for testing purposes I chose Yes)
string yes = Request.Params["Yes"];
string no = Request.Params["No"];
var DefCon5 = Request["DefCon5"];
string message = Request.Params["message"];
string redirURL = "";
if (DefCon5 == "yes")
{
Response.Write(#message);
Response.Write(#Defcon);
redirURL = "/somepage";
}
else
{
redirURL = "/DefCon5";
}
I'm noticing that the if statement fails because DefCon5 is not reading exactly as yes. I have tried with the variable from the previous page and finally a literal string "Yes". I have also tried a few different Requests with no change. I believe I may be passing Yes/No incorrectly but I'm unclearas to why this is the case.
I think you should have changes like this in your controller code
public ActionResult DefCon5(string DefCon5,string message)
{
//string yes = Request.Params["Yes"];
//string no = Request.Params["No"];
//var DefCon5 = Request["DefCon5"];
//string message = Request.Params["message"];
string redirURL = "";
if (DefCon5.ToLower() == "yes")
{
Response.Write(#message);
//Response.Write(#Defcon);
redirURL = "/somepage";
}
else
{
redirURL = "/DefCon5";
}
// your code here
return View();
}
I want to add checkbox in table heads dynamically,I have created their ids dynamically but how to print it on Aspx Page ???
<table border="1">
<thead>
<%string j = " Check"; %>
<%for (int i = 0; i < 10;i++ )
{%>
<th style="padding:2px; width:500px;">Table Head<br /><br />
<%
CheckBox chk = new CheckBox();
chk.ID = i + j;
chk.Text = "I am "+ i+j;
%>
<%=chk %>
</th>
<%} %>
</thead>
</table>
<input type="checkbox" id='<%=i%>' name="allcheck">
Use ASP.NET Web Form, please use HTML tags more, not like this :)
CheckBox chk = new CheckBox();
chk.ID = i + j;
chk.Text = "I am "+ i+j;
example：
aspx page:
<input type="hidden" id="userid" value='<%=userid>'/>
<input type="checkbox" id='<%=i%>' name="allcheck" /> with for
js code with jquery:
function delete()
var id_array = new Array();
$('input[name="allcheck"]:checked').each(function () {
id_array.push($(this).attr('id'));
});
var idstr = id_array.join(',');
$.ajax({
method:"POST",
url: "services/delete",
data: {
userid: $("#userid").val(), ids: idstr
}
})
with ashx:
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Cache.SetNoStore();
string userid = "";
string ids = "";
try
{
string userid = context.Request.QueryString["userid"];
string ids = context.Request.QueryString["ids"];
//then do your things
}
catch (Exception)
{
throw;
}
}
Hopefully it can help you to deal with your problem.
Front end
<body>
<form id="form1" runat="server">
<table>
<thead id="test" runat="server">
</thead>
</table>
</form>
</body>
Back end
protected void Page_Load(object sender, EventArgs e)
{
CheckBox cb = new CheckBox();
cb.ID="****";
test.Controls.Add(cb);
}
If you are using ASPX page then use simply any control like GirdView or DataList or Repeater.
In that you put your checkbox, it will create dynamic ID Automatically and you can easily find that control on your back end coding..
For example check below links.
http://www.asp.net/web-forms/overview/data-access/displaying-data-with-the-datalist-and-repeater/displaying-data-with-the-datalist-and-repeater-controls-vb
https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.datalist.repeatlayout(v=vs.110).aspx
We have an HTML page with an form on it.
We are prepopulating a form from an XML file using jQuery AJAX.
We would like the form, on submit, to save over our default.xml file. Most likely we will use ASP.Net as our server side.
Our question would be, what would the ASP.Net/C# look like in order to save the info in put in the form and save over our XML file.
Thanks in advance.
EDIT
This is our example:
<option id="timeBlockOne">
<select>12:00</select>
<select>1:00</select>
</option>
<option id="titleBlockOne">
<select>Title One</select>
<select>Title Two</select>
</option>
<option id="titleBlockTwo">
<select>Title three</select>
<select>Title Four</select>
</option>
<option id="timeBlockTwo">
<select>12:00</select>
<select>1:00</select>
</option>
...etc up to 10 blocks.
<button action="Post">Submit</button>
Desired XML output.
<main>
<itemOne>
<timeBlockOneValue>Value selected from form</timeBlockOneValue>
<titleBlockOneValue>Value Selected from form</titleBlockOneValue>
</itemOne>
<itemTwo>
<timeBlockTwoValue>Value selected from form</timeBlockTwoValue>
<titleBlockTwoValue>Value Selected from form</titleBlockTwoValue>
</itemTwo>
...etc
</main>
Hopefully this helps out with my question.
Alright, here is a possible way to get you on the right track, please let me know if this is not clear.
JavaScript:
function GetXMLButton() {
var xml = "<main>";
var i = 1;
// Loop for each OPTION element in the myForm div
$("#myform select").each(function() {
// Get value of selected option.
var selectedValue = $(this).val();
xml = xml + "<item_" + i + "><" + this.id + ">" + selectedValue + "</" + this.id + "></item_" + i + ">";
i++;
});
xml = xml + "</main>";
// Call C# WebMethod to save into xml file
PageMethods.SaveXMLFile(xml);
}
ASPX: Make sure to set EnablePageMethods = true in the ScriptManager object. Also I think you might have switched your OPTION and SELECT tags, check your code, it should be SELECT then OPTION tag.
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="fileupdatepanel">
<ContentTemplate>
<div id="myForm">
<select id="timeBlockOne">
<option selected>12:00</option>
<option>1:00</option>
</select>
<select id="titleBlockOne">
<option>Title One</option>
<option selected>Title Two</option>
</select>
<select id="titleBlockTwo">
<option selected>Title three</option>
<option>Title Four</option>
</select>
<select id="timeBlockTwo">
<option>12:00</option>
<option selected>1:00</option>
</select>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="button1" runat="server" Text="Get XML" OnClientClick="return GetXMLButton();" />
C# Code-Behind:
You need to reference the following:
using System.Web.Services;
Then add the following method and make sure you put [WebMethod] before method declaration:
[WebMethod]
public static void SaveXMLFile(string formXMLData)
{
// Put your code to convert formXMLData string to an XML File and save/upload on/to server
}
so I’m trying to build a win 8 app, which includes a WebView. The WebView contains the HTML code (+JavaScript) below.
<!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<?xml version='1.0' encoding='UTF-8' standalone='yes'?>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' >
<script type='text/javascript'>
function get_radio_value()
{
for (var i=0; i < document.myForm.frage1.length; i++)
{
if (document.orderform.frage1[i].checked)
{
var rad_val = document.myForm.frage1[i].value;
return rad_val;
}
}
}
</script>
<title>Kundenfragebogen</title>
</head>
<body>
<h1>Kundenfragebogen</h1>
<div id='myDiv'>Hello</div>
<form name='myForm' action=''>
<table border='2'>
<tr>
<td></td>
<td>sehr gut</td>
<td>gut</td>
<td>schlecht</td>
</tr>
<tr>
<td>Wie geht es Ihnen?</td>
<td><input type='radio' name="frage1" value='1'/>Mir ging es noch nie besser!</td>
<td><input type='radio' name="frage1" value='2'/>Es geht mir so wie immer.</td>
<td><input type='radio' name="frage1" value='3'/>Heute geht einfach gar nichts…</td>
</tr>
<tr>
<td>Können Sie Auto fahren?</td>
<td><input type='radio' name="frage2" value='1'/>Ja</td>
<td></td>
<td><input type='radio' name="frage2" value='3'/>Nein</td>
</tr>
<tr>
<td>Möchten Sie unseren Newsletter abonnieren?</td>
<td><input type='radio' name="frage3" value='1'/>Ja</td>
<td></td>
<td></td>
</tr>
</table>
<input type='button' value='Formular absenden' onclick="return get_radio_value()"/>
</form>
</body>
</html>
So the html contains some radio buttons and a button. I’ve used JavaScript ~2 years ago (just a little), so I don’t really know how to write the exact code. I’ve found something on the internet, but it doesn’t do what I want. I want to have the following:
The user can check the RadioButtons. When the user clicks the Button, the JavaScript function should return all the checked radio buttons (I only need to know which RadioButton is checked).
Since I know the name of the RadioButtons in my Windows 8 App, I can do the following:
var object = WebView.InvokeScript("JavaScriptFunctionNAME", NameOfRadiobutton);
So the WebView invokes the script and should get as a return the VALUE of the RadioButton, which is checked.
“JavaScriptFunctionNAME” = name of the function in Javascript
NameOfRadiobutton = the name of the RadioButton as a parameter (for example “frage1”).
Currently I’m returning the value of the radiobutton, which is checked in the RadioGroup “frage1”. How can I check every RadioButton by it’s parameter? By this I mean I have a parameter “frage1” and return the value of the checked RadioButton. After this, I call the function again with the parameter “frage2” and return the checked RadioButtons value. Could anyone help me out with the JavaScript-function?
Radiobuttons are grouped by their name property. You can get a collection of radiobuttons using document.getElementsByName and look at the checked status of each, for example: -
function FindChecked() {
var elements = document.getElementsByName("frage1")
for (var i = 0; i < elements.length; i++) {
if (elements[i].checked) {
return elements[i].value;
}
}
}
Will return the value of the checked radiobutton within its group.
jsfiddle example
Edit: To pass the group name from your C# code to this function you could do: -
public class YourClass
{
public string GroupName { get { return "frage1"; } }
}
And then the javascript function would become:
function FindChecked() {
var elements = document.getElementsByName('<%= this.GroupName %>')
for (var i = 0; i < elements.length; i++) {
if (elements[i].checked) {
return elements[i].value;
}
}
}
try this , This will return the checked name of radio buttons
<script type='text/javascript'>
function get_radio_value()
{
var nameArry = [];
var allInputs = document.myForm.getElementsByTagName('input');
for (i = 0; i < allInputs.length; i++) {
if (allInputs[i].type == 'radio' && allInputs[i].checked ) {
nameArry.push(allInputs[i].name);
}
}
alert(nameArry)
}
</script>
Below is a html script, I grabbed from a website. I wanna select the item programmatically using .NET
<div id="MySite.condition_s-wrp" class="c-wrp-slctbx" style="z-index: 1;">
<input id="MySite.condition_s-input" type="text" autocomplete="off" readonly="readonly" tabindex="0" class=" c-slctbx-medium" style="width: 268px;">
<ul class="c-ul-slctbx max_height_300" style="width: 285px; display: none; top: 21px;">
<li id="MySite.condition_s-option-" class="c-li-slctbx">Please choose</li>
<li id="MySite.condition_s-option-First" class="c-li-slctbx">First</li>
<li id="MySite.condition_s-option-Second" class="c-li-slctbx">Second</li>
</ul>
<select id="MySite.condition_s" name="attributeMap[MySite.condition_s]" class=" c-slctbx-medium" style="display: none;">
<option value="">Please choose</option>
<option value="First">First</option>
<option value="Second">Second</option>
</select>
</div>
Please note the following code is not working at all.
webBrowser1.Document.GetElementById("MySite.condition_s").SetAttribute("value", "First");
Any quick help will be highly appreciated.
Finally I figure it out with one of my friends. This little function will do the rest very easily.
Thanks to Farrukh Momin and his time.
public void SetComboItem(string id, string value) {
HtmlElement ee = this.webBrowser1.Document.GetElementById(id);
foreach (HtmlElement item in ee.Children) {
if (item.OuterHtml.ToLower().IndexOf(value.ToLower()) >= 0) {
item.SetAttribute("selected", "selected");
item.InvokeMember("onChange");
}
else {
item.SetAttribute("selected", "");
}
}
ee = this.webBrowser1.Document.GetElementById(id + "-input");
ee.InnerText = value;
}
Calling Function
this.SetComboItem("MySite.condition_s", "First");
Have you tried this:
webBrowser1.Document.GetElementById("MySite.condition_s").selectedIndex = 1
Try this.
HtmlDocument document = webBrowser1.Document;
HtmlElement siteCondition = document.GetElementById("MySite.condition_s");
var option = siteCondition.Children.Cast<HtmlElement>().First(x => x.GetAttribute("value").Equals("First"));
option.SetAttribute("selected", "selected");
here is your solution just go through example: http://www.vbforums.com/showthread.php?701093-Webbrowser-Control-Select-Dropdownlists-option
or
http://social.msdn.microsoft.com/Forums/en-US/Vsexpressvb/thread/b1273d78-d4af-49e0-9238-6f86e9952484/
I founded that if you just invoke click one by one, you should be able to find what you want by doing a for loop click inside it.
HtmlElement site = this.webBrowser2.Document.GetElementById("myId");
foreach (HtmlElement item in site.Children)
{
if (item.InnerText.ToString() == "something")
{
item.InvokeMember("Click");
break;
}
else
{
item.InvokeMember("Click");
}
}
100% working code (tested on win7 - ie11)
taken from:
c# | WebBrowser control - programmatically select item on html select
http://mdb-blog.blogspot.com/2016/12/c-browser-control-programmatically.html
HtmlElementCollection col = webBrowser1.Document.GetElementsByTagName("select")
foreach (HtmlElement heItem in col)
{
if (heItem.GetAttribute("className").Contains("exampleClassName") == true)
{
heItem.SetAttribute("selectedIndex", "3"); // select value at #3
break; // incase of needed...
}
}