Note: I've been using ASP.NET Webforms, so ViewState was my friend.
Note: Default.html and Default.cshtml are two different files/pages.
Basically, all I'm trying to do is take form values from a .html page, post them, and then go back to the original page without the values resetting.
Here's what I have so far:
My client-side script
<!-- Default.html -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing Stuff</title>
</head>
<body>
<form id="mainpage" action="Default.cshtml" method="post">
<div style="clear:both;" id="dbInput">
<label for="linedesc">Description:</label>
<input type="text" id="linedesc" name="linedesc" />
<br /><br />
<input id="fruits" name="options1" value="fruits" type="radio" />
<label for="fruits">Fruits</label>
<input id="candies" name="options1" value="candies" type="radio" />
<label for="candies">Candies</label>
<input id="snacks" name="options1" value="snacks" type="radio" />
<label for="snacks">Snacks</label>
<br /><br />
<label for="options2">Choose beverage:</label>
<select id="options2" name="options2">
<option value="Coca-Cola">Coca-Cola</option>
<option value="Sprite">Sprite</option>
<option value="Root Beer">Root Beer</option>
<option value="Orange Juice">Orange Juice</option>
</select>
<br /><br />
<input type="submit" id="submit" name="submit" value="Submit" />
</div>
</form>
</body>
</html>
And my server-side script
//Default.cshtml
#{
var linedesc = Request.Form["linedesc"];
var food = Request.Form["options1"];
var drinks = Request.Form["options2"];
// Go back to Default.html and keep values selected, ie. values don't reset
var blah = "hi";
}
All I want to do is simple, no bells, no whistles, postback and return. I'm just missing that last piece.
Related
I'm building this checkbox that it woyld only work if all 3 checkboxes are checked on the web. Otherwise it will fail.
I tried to set without value - but it doesn't work at all.
I tried to give them the same value as the name or field - doesn't work.
Works only if the value is set as true - but for some reason it expects it all to be true?
<fieldset class="question-fieldset twocolinputs">
<h2>Question #81:</h2>
<div class="answer-single">
<input id="2-a" name="MX3A" type="checkbox" class="checkbox-button-input" value="true">
<label class="answer-label" for="2-a">
Email
</label>
</div>
<div class="answer-single">
<input id="2-b" name="MX3B" type="checkbox" class="checkbox-button-input" value="true">
<label class="answer-label" for="2-b">
SMS
</label>
</div>
<div class="answer-single">
<input id="2-c" name="MX3C" type="checkbox" class="checkbox-button-input" value="true">
<label class="answer-label" for="2-c">
Llamada
</label>
</div>
</fieldset>
In an <input> of type checkbox, you set the checked property to true, not the value:
<input id="2-b" name="MX3B" type="checkbox" class="checkbox-button-input" checked="true">
▲
Update
Demo 2 is an example of radio button pairs with the value of true and false strings submitted to server.
It seems that everyone is assuming that you want the checkboxes checked by default. Although I could be mistaken, I don't interpret it that way. What I gather is that you only get a value submitted if all of your checkboxes are checked which is odd. As a test I have placed your unmodified code inside a <form> and added a <input type='submit'> button, then posted the <form> to a test server. It will only send the values of the checkboxes that are checked as expected.
Demo 1 - PLUNKER
Demo 1 - STACK (Does not function due to SO security measures, see PLUNKER for a functioning example)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id='main' method='post' action='http://httpbin.org/post'>
<fieldset class="question-fieldset twocolinputs">
<h2>
Question #81:
</h2>
<div class="answer-single">
<input id="2-a" name="MX3A" type="checkbox" class="checkbox-button-input" value="true">
<label class="answer-label" for="2-a">
Email
</label>
</div>
<div class="answer-single">
<input id="2-b" name="MX3B" type="checkbox" class="checkbox-button-input" value="true">
<label class="answer-label" for="2-b">
SMS
</label>
</div>
<div class="answer-single">
<input id="2-c" name="MX3C" type="checkbox" class="checkbox-button-input" value="true">
<label class="answer-label" for="2-c">
Llamada
</label>
<input type='submit'>
</div>
</fieldset>
</form>
</body>
</html>
Demo 2 - PLUNKER
Demo 2 - STACK (See PLUNKER for working example)
<!DOCTYPE html>
<html>
<head>
<style>
input,
label {
font: inherit;
}
[type=submit] {
float: right;
}
</style>
</head>
<body>
<form id='main' method='post' action='http://httpbin.org/post'>
<fieldset>
<legend>Question #82</legend>
<p>Using radio buttons that share the same name attribute ensures that only one of them can be checked</p>
<label>True
<input type='radio' name='Q82' value='true'>
</label>
<label>False
<input type='radio' name='Q82' value='false'>
</label>
</fieldset>
<fieldset>
<legend>Question #83</legend>
<p>If you wish to set a default, use the checked attribute. ex. checked='false' (see the radio buttons below)</p>
<label>True
<input type='radio' name='Q83' value='true'>
</label>
<label>False
<input type='radio' name='Q83' value='false' checked='true'>
</label>
</fieldset>
<input type='submit'>
</form>
</body>
</html>
<input id="2-a" name="MX3A" type="checkbox" class="checkbox-button-input" checked>
I have this html code which made in browser three buttons.How can I put the buttons on the same line?(they appear on different lines).
<form action="file:///C:/Users/andre/Desktop/home.html"/>
<input type="submit" value="Home" />
</form>
<form action="file:///C:/Users/andre/Desktop/players.html"/>
<input type="submit" value="Players" />
</form>
<form action="file:///C:/Users/andre/Desktop/league.html"/>
<input type="submit" value="League" />
</form>
input[type=submit]{cursor:pointer}
form input{float:left;margin:5px}
<form action="file:///C:/Users/andre/Desktop/home.html"/>
<input type="submit" value="Home" />
</form>
<form action="file:///C:/Users/andre/Desktop/players.html"/>
<input type="submit" value="Players" />
</form>
<form action="file:///C:/Users/andre/Desktop/league.html"/>
<input type="submit" value="League" />
</form>
form tag's default display value is block. If you make it inline-block, it will solve that problem.
<form style="display: inline-block;" action="file:///C:/Users/andre/Desktop/home.html">
<input type="submit" value="Home" />
</form>
<form style="display: inline-block;" action="file:///C:/Users/andre/Desktop/players.html">
<input type="submit" value="Players" />
</form>
<form style="display: inline-block;" action="file:///C:/Users/andre/Desktop/league.html">
<input type="submit" value="League" />
</form>
Just add following code
<style>
form { display : inline-block; }
</style>
I have 2 form action below and whenever I click the 2nd form action (post /logout), the first action (get /journey) get triggered.
<form action="/journey" method="get"><input type="submit" value="Journey" />
<form action="/logout" method="POST"><input type="submit" value="Logout" />
The second action works if I didn't add in the /journey action.
Anyone can tell me what's wrong? Thanks.
try after closing form tags as shown below :
<div style="float:left">
<form action="/journey" method="get">
<input type="submit" value="Journey" />
</form>
</div>
<div>
<form action="/logout" method="POST">
<input type="submit" value="Logout" />
</form>
</div>
When label tag should be used over span or dev in form?
Example:
option1-span:
<form action="">
<span>Name:</span><input type="text">
<input type="submit" />
</form>
option2-label:
<form action="">
<label>Name:</label><input type="text">
<input type="submit" />
</form>
option3-div:
<form action="">
<div style="display:inline;">Name:</div><input type="text">
<input type="submit" />
</form>
Thanks
This is what label tags are for:
<form action="">
<label for="txt">Name:</label><input type="text" id="txt" name="txt" />
<input type="submit" />
</form>
Then clicking on the label will focus on the input element.
The label tag is primarily used along with the for attribute. This aids in web accessibility of forms. For example
<form>
<label for="firstName">First name:</label>
<input type="text" name="firstName" value=""/>
</form>
By using the for tag, we can essentially associate the text "First Name:" with the input field having the name = "firstName".
Aside from that it has other attributes allowed but the span is more regularly used for styling markup.
When I pick Coffee
check box group – enabled
button box group – disabled
When I pick Hot Coco
check box group – disabled
button box group – enabled
BELOW CODE:
<fieldset id="mixdrinks">
<!-- pull down or drop menu examples -->
<label><strong>Drinks Selection</strong></label><br />
<select name="drinks" id="drinks">
<option selected="selected" label="none" value="none">null</option>
<option value="Coffee">Coffee</option>
<option value="Tea">Tea</option>
<option value="Juice">Juice</option>
<option value="Milk">Milk</option>
<option value="Hot Chocolate">Hot Coco</option>
</select>
<br />
<!-- check box -->
<label><strong>What do you want in your coffee?</strong></label><br />
<input type="checkbox" name="sugar" id="Checkbox1" value="yes" tabindex="4" /> Sugar<br />
<input type="checkbox" name="milk" id="Checkbox2" value="yes" tabindex="5" /> Milk<br />
<input type="checkbox" name="cream" id="Checkbox3" value="yes" tabindex="6"/> Cream
<p>...more mix drinks...</p>
<!-- radio buttons -->
<label><strong>Do you want Whip Cream on your Hot Coco?:</strong></label><br />
<input type="radio" name="WhipCream" id="Radio1" value="yes" title="Yes" />Yes<br />
<input type="radio" name="WhipCream" id="Radio2" value="yes" title="No" />No<br />
<br />
To do what you're asking, you need something more than html, you need Javascript.
I learned javascript from W3Schools.
Something like this might help.
<select name="drinks" id="drinks">
<option selected="selected" label="none" value="none">null</option>
<option value="Coffee">Coffee</option>
<option value="Tea">Tea</option>
<option value="Juice">Juice</option>
<option value="Milk">Milk</option>
<option value="Hot Chocolate">Hot Coco</option>
</select>
<br />
<!-- check box -->
<div id="coffeeDetails">
<label><strong>What do you want in your coffee?</strong></label><br />
<input type="checkbox" name="sugar" id="Checkbox1" value="yes" tabindex="4" /> Sugar<br />
<input type="checkbox" name="milk" id="Checkbox2" value="yes" tabindex="5" /> Milk<br />
<input type="checkbox" name="cream" id="Checkbox3" value="yes" tabindex="6"/> Cream
<p>...more mix drinks...</p>
</div>
<!-- radio buttons -->
<div id="cocoDetails">
<label><strong>Do you want Whip Cream on your Hot Coco?:</strong></label><br />
<input type="radio" name="WhipCream" id="Radio1" value="yes" title="Yes" />Yes<br />
<input type="radio" name="WhipCream" id="Radio2" value="yes" title="No" />No<br />
<br />
</div>
<script type="text/javascript">
window.onload = function() {
var ddl = document.getElementById("drinks");
var coffeeDetails = document.getElementById("coffeeDetails");
var cocoDetails = document.getElementById("cocoDetails");
ddl.onchange = function() {
var beverage = ddl.options[ddl.selectedIndex].text;
if (beverage == "Coffee") {
cocoDetails.style.display = "none";
coffeeDetails.style.display = "block";
}
if (beverage == "Hot Coco") {
cocoDetails.style.display = "block";
coffeeDetails.style.display = "none";
}
}
};
</script>
Use javascript to alter the CSS DISPLAY attribute for a given HTML attribute:
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
..then update what you want to hide with something resembling:
<span onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</span>
<div id="foo">This is foo</div>
Reference: Toggle Visibility - Show/Hide Anything
You can use javascript to enable or disable the controls as:
var varName = document.getElementById('<%= this.buttonGroup.ClientID %>');
varName.disabled = true or false; accroding to ur requirements.
Cheers