Changing input radio into large div boxes - css

I'm trying to figure out how to hide the radio buttons and instead, use div boxes so users can click on a large box instead of a small button.
Is this possible?


Associate divs with a radio button via click and you're set.
<div class="radio-wrap"><input type="radio"></div>
$('div.radio-wrap').click(function(e){
$(this).find('[type=radio]').attr('checked',true);
});
You can hide the radio input with css or move it where you want.


jQuery UI provides a buttonset feature that may work:
<div id="radio" align="center" >
<input type="radio" name ="gender" id="male" value="MALE" checked="checked"/><label for="male">MALE</label>
<input type="radio" name ="gender" id="female" value="FEMALE" /><label for="female">FEMALE</label>
</div>
and script
$(function() {
$( "#radio" ).buttonset();
});
Demo

Related

Bootstrap Toggle with ASP.NET

I'm using bootstrap-toggle in one of the forms in ASP.NET:
<input type="checkbox" id="IsValidated" data-toggle="toggle" data-on="Validated" data-off="Not Validated" data-onstyle="success" data-offstyle="danger" value="Y" >
But when switching on the toggle, and check the state of the checkbox in the code behind after posting the form, always I find that the checkbox is not checked!
How to capture the state of the checkbox?

Add name attribute to your checkbox element
<input type="checkbox" name="IsValidated" id="IsValidated" data-toggle="toggle" data-on="Validated" data-off="Not Validated" data-onstyle="success" data-offstyle="danger" value="Y" >
Access the checkbox value on server side using
Request.Form["IsValidated"]

How to Remove character-counter in radio button in materializecss

I need to remove this span tag its come automatically when i click on radio button

I think you used class="with-gap" in <input> like this :
<input class="with-gap" name="group3" type="radio" checked />
Remove it like this :
<input name="group3" type="radio" checked />
And your problem will be solve. Read here for more info.

How to place the cursor (auto focus) in text box when a page gets loaded without javascript support?

I have a form with some text fields,and I want to place the cursor (auto focus) on first text field of form when page gets loaded.
I want to do it without using javascript.

Ya its possible to do without support of javascript..
We can use html5 auto focus attribute
For Example:
<input type="text" name="name" autofocus="autofocus" id="xax" />
If use it (autofocus="autofocus") in text field means that text field get focused when page gets loaded..
For more details:
http://www.hscripts.com/tutorials/html5/autofocus-attribute.html

Just add autofocus in first input or textarea.
<input type="text" name="name" id="xax" autofocus="autofocus" />

This will work:
OnLoad="document.myform.mytextfield.focus();"

<body onLoad="self.focus();document.formname.name.focus()" >
formname is <form action="xxx.php" method="POST" name="formname" >
and name is <input type="text" tabindex="1" name="name" />
it works for me, checked using IE and mozilla.
autofocus, somehow didn't work for me.

An expansion for those who did a bit of fiddling around like I did.
The following work (from W3):
<input type="text" autofocus />
<input type="text" autofocus="" />
<input type="text" autofocus="autofocus" />
<input type="text" autofocus="AuToFoCuS" />
It is important to note that this does not work in CSS though. I.e. you can't use:
.first-input {
autofocus:"autofocus"
}
At least it didn't work for me...

very easy you can just set the attribute autofocus to on in the wanted input
<form action="exemple.php" method="post">
<input name="wantedInput" autofocus="on">
<input type="submit" value="go" >
</form>

Sometimes all you have to do to make sure the cursor is inside the text box is:
click on the text box and when a menu is displayed, click on "Format text box"
then click on the "text box" tab and finally modify all four margins (left, right, upper and bottom) by arrowing down until "0" appear on each margin.

toggle button: How to have same contents between the editors when I toggle?

I am trying to implement a toggle switch-toggle between textarea and ckeditor in my web form.
As of now I am able to toggle between the 2 editors.But I am not able to have the same contents in both the editors. Its treating it like 2 separate textarea, I want them to have the same contents when I toggle from textarea to ckeditor.Can anybody help me and lemme know what I am missing?
Thanks in advance
Code:
Updated code
<textarea id="editor1" name="editor1" class="ckeditor" rows="20" cols="75"></textarea>
<input type="button" value="CKEditor" onclick="CKEDITOR.replace('editor1');" />
<input type="button" value="Text editor" onclick="CKEDITOR.instances.editor1.destroy('editor1');" />
<input type="submit" value="Submit" />
</form>

Use CKEDITOR.instances.editor1.destroy() to restore it to a textarea and call CKEDITOR.replace('editor1') again when you want a CKEditor.
Remove the whole <div id="textarea"> because otherwise you will get unexpected results, you're using two textareas with the same id and name.

JqueryMobile style issue text box in portrait

I am trying to simply make a page that has a form on it. i need it on one line to be like textbox "%" space textbox "%" however when i put the code in it in portrait mode on the iPhone it places it one on top of the other instead of side by side. i have told it the textboxes they are 55px wide and that is working. but no matter what i try i can not get them side by side. this is the code snip that i am using.
<div data-role="fieldcontain" class="percentselectingdiv">
<label for="grp1percent">Percent Selecting:</label>
<input type="text" name="grp1percent" id="grp1_percent_select" value="" />
<label >%</label>
<input type="text" name="grp2percent" id="grp2_percent_select" value="">
<label >%</label>
</div>
i am thankful for any help... CSS is not my strong suit...

add float: left in your text box's style
<input type="text" name="grp1percent" id="grp1_percent_select" value="" style="width:80%;float:left" />
http://fiddle.jshell.net/qF925/

Resources