I have a list of radio buttons with id, name and value attributes each.
in If(IsPost) to retrieve the selected radio button I have Request.Form[radio button name] which gives the value of the radio button. What if I want beside the value, the id of the button? What should? PS: I am using webmatrix to build the application
In my opinion your best option is to use a value that gives you more informations, something like:
#{
if (IsPost)
{
for (var i = 0; i < Request.Form.Count; i++)
{
string[] result = Request.Form[i].Split(',');
<p>Group: #result[0] - Selection: #result[1]</p>
}
}
}
<html lang="en">
<body>
<form method="post">
<h2>Group A</h2>
<input type="radio" name="groupA" id="groupA" value="A,1">1<br>
<input type="radio" name="groupA" id="groupA" value="A,2">2<br>
<input type="radio" name="groupA" id="groupA" value="A,3">3<br>
<input type="radio" name="groupA" id="groupA" value="A,4">4<br>
<h2>Group B</h2>
<input type="radio" name="groupB" id="groupB" value="B,1">1<br>
<input type="radio" name="groupB" id="groupB" value="B,2">2<br>
<input type="radio" name="groupB" id="groupB" value="B,3">3<br>
<input type="radio" name="groupB" id="groupB" value="B,4">4<br>
<input type="submit" />
</form>
</body>
</html>
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've a boolean field in the model just similar to the below one. And I want to create a view using embedded javascript.
**settings.js**
module.exports = {
attributes: {
myField:{
type:'boolean',
defaultsTo:'false'
}
}
};
This is the code that I'm using
<form action="/settings/create" method="POST" id="sign-up-form" class="form-inline">
<div class="form-group">
<label for="field1">my field label</label>
<input type="checkbox" class="form-control" id="field1" name="myField">
</div>
<input type="submit" class="btn btn-primary" value="Create"/>
<input type="hidden" name="_csrf" value="<%= _csrf %>" />
</form>
So the problems I'm facing are
When I create the record, I can see the boolean is set to ON and OFF in the json and why this is not true or false?
Also how to render the true or false in the view using embedded javascript
<div class="form-group">
<label for="confirmationBox">Field Label</label>
<% if(object.fieldName==true || object.fieldName=="true"){ %>
<input type="checkbox" id="confirmationBox" name="confirmationBox" checked>
<% } else { %>
<input type="checkbox" id="confirmationBox" name="confirmationBox">
<% } %>
</div>
I'm trying to submit a form with zombie.js, and pressButton() is failing with "Error: No BUTTON 'xxx'", where xxx is the selector. Here is the app:
var Browser = require('zombie');
b = new Browser();
b.visit('https://www.example.com/login/', function() {
b.
fill('name', 'My Name').
fill('code', 'My Code').
pressButton('submit', function() {
console.log(b.html());
});
});
And here is the form:
<form method="post" class="login">
<p> <label for="name"> <span id="nameprompt">Your Name:</span> </label> </p>
<input name="name" id="name" value="" size="40" maxlength="40" />
<p> <label for="code"> <span id="codeprompt">Bar Code</span> </label> </p>
<input name="code" id="code" type="PASSWORD" value="" size="40" maxlength="40" />
<div class="formButtonArea">
<input type="image" src="/screens/pat_submit.gif" border="0" name="submit" value="submit" />
</div>
</form>
I've tried a bunch of selectors including things like ".formButtonArea input" in addition to the obvious "submit" with no success.
What am I doing wrong?
It seems like you need the input to be of type="submit" (or type="button" perhaps). According to https://groups.google.com/forum/?fromgroups=#!topic/zombie-js/8L0_Cpn8vVU, where the author comments on clickLink, it's likely that clickButton will do the same: find buttons and then fire click.
Hope it helps.
Can someone direct me to an example of asp code that will process a form which has only radio buttons? The functionality: When a radio button is checked and submit is clicked the user will be redirected to specific url. onclick="window.location='http://www.google.com';" Will not do the trick here. We have to wait until "submit" is clicked.
<form name="input" action="the_code_you_are_helping_me_with.asp" method="get">
<input type="radio" name="option1" value="1" />option1<br />
<input type="radio" name="option2" value="2" />option2<br />
<input type="radio" name="option3" value="3" />option3<br />
<input type="radio" name="option4" value="4" />option4<br />
<input type="radio" name="option5" value="5" />option5<br />
<input type="submit" value="Submit" />
Thanks in advance,
dp
See a working demo here: http://jsfiddle.net/89s6R/3/
<script>
function onRadioClick(radio) {
radio.form.action = radio.value;
}
function onFormSubmit(form) {
window.location = form.action;
return false;
}
</script>
<form name="input" action="#" method="get" onsubmit="return onFormSubmit(this)">
<label><input type="radio" name="destination" onclick="onRadioClick(this)" value="http://google.com" />Google</label><br />
<label><input type="radio" name="destination" onclick="onRadioClick(this)" value="http://nyt.com" />New York Times</label><br />
<label><input type="radio" name="destination" onclick="onRadioClick(this)" value="http://twitter.com" />Twitter</label><br />
<label><input type="radio" name="destination" onclick="onRadioClick(this)" value="http://microsoft.com" />Microsoft</label><br />
<label><input type="radio" name="destination" onclick="onRadioClick(this)" value="http://apple.com" />Apple</label><br />
<input type="submit" value="Submit" />
</form>
The above client-side answer will work. However, if you want "asp code" I assume you wanted something server side. So:
Turn your submit button into an asp:Button.
Turn your radio buttons into an asp:RadioButtonList.
In the button's onClick event, get the value of the selected button. Then user Response.Redirect to redirect to that url.
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.