I am working on a website for work and have two options for radio buttons. I've used <a> tags as wrappers for the text and radio button to send the user to a specific webpage of that website. The radio buttons and text work each perfectly well on Firefox. On Chrome however, the text works fine as a link. The radio buttons on the other hand do not work. The page just refreshes and nothing happens. I even decided to add a submit so it directs it to one of those pages, with no success as of now. I tried to replicate the code as close as I could to the code from the website down below.
https://jsfiddle.net/hLph4at4/1/
<form name="frmSite" style="float: left; margin-top: 5px;">
<a class="loginPg_choices" href="www.youtube.com">
<input type="radio" name="site" value="1" id="radio_btn_1" style="float: left; clear: both;" />
<span style="float: left; margin: -2px 0 0 5px;">Take me to youtube.</span>
<br/>
</a>
<a class="loginPg_choices" href="www.google.com">
<input type="radio" name="site" value="1" id="radio_btn_1" style="float: left; clear: both;" />
<span style="float: left; margin: -2px 0 0 5px;">Take me to google.</span>
<br/>
</a>
<a href="#" type="submit" value="Submit" title="Login" style="float: right; clear: both;">
Submit
</a>
</form>
You could add an onclick attribute to your tag, e.g. onclick="window.location.href = 'https://youtube.com'"
Or, as an updated Fiddle: https://jsfiddle.net/hLph4at4/7/
That will always be called (unless the propagation is stopped), which also includes the radio button.
Related
How do i make a radio button which can link to a page each radio button having being linked to a website and when i press a button i want it to direct me to the selected radio buttons link and i do not want it to be onclick i want it to direct me when i press the button. I have tried doing this but i need help.
This is what i tried:
<h3>
Which part of the building do you want cleaning
</h3>
<form name="frmSite" style="float: left; margin-top: 5px;">
<a class="loginPg_choices" href="www.youtube.com">
<input type="radio" name="site" value="1" id="radio_btn_1" style="float: left; clear: both;" />
<span style="float: left; margin: -2px 0 0 5px;">The whole building</span>
<br/>
</a>
<a class="loginPg_choices" href="www.google.com">
<input type="radio" name="site" value="1" id="radio_btn_1" style="float: left; clear: both;" />
<span style="float: left; margin: -2px 0 0 5px;">Kithcen</span>
<br/>
</a>
<a href="#" type="submit" value="Submit" title="Login" style="float: right; clear: both;">
Submit
</a>
</form>
Here is what i have tried https://jsfiddle.net/nb7jmfxp/
Here is the fieldset documentation.
Html code:
<form>
<fieldset>
<legend>Choose your Website</legend>
<input type="radio" id="youtube" name="monster">
<label for="youtube">Youtube</label><br />
<input type="radio" id="google" name="monster">
<label for="google">Google</label><br />
</fieldset>
</form>
<button id="go_to_website">
Go to website
</button>
Js code:
$("#go_to_website").click(function(event) {
var link_id = $("input[name='monster']:checked").attr("id");
if (link_id) {
switch (link_id) {
case "youtube":
// code block
window.location.href = 'www.youtube.com';
break;
case "google":
// code block
window.location.href = 'www.google.com';
break;
default:
// code block
}
} else {
alert("please pick an option")
}
})
Jsfiddle link: https://jsfiddle.net/pc62oL74/4/
Hope that it helps.
env:
Ipad web app, use Cordova
my html source:
<div style="text-align: right; font-size: 15px;">
<input type="checkbox" disabled>
space
</div>
when my checkbox is disabled, checkbox's left line can not be shown. Like this:
I think text-align is not suitable for input checkbox.
I resole this bug by delete text-again and use margin-left:
<div style="margin-lest: 100px; font-size: 15px;">
<input type="checkbox" disabled>
space
</div>
I've created a page with 3 buttons on it but all the buttons are stuck side by side and I don't know how to add space in between them.
This is the page so far.
<div style="width: 500px; margin-left: 20px;">
<a href="https://drive.google.com/file/d/0B9B-lYnsBAPHcFlkT3NQQThpa1E/view? usp=sharing" target="_blank">
<input type="submit" name="" value="View Study" />
</a>
<a href="https://drive.google.com/file/d/0B9B-lYnsBAPHT2c2MHhJN0l5NlE/view? usp=sharing" target="_blank">
<input type="submit" name="" value="View Study" />
</a>
<a href="https://drive.google.com/file/d/0B9B- lYnsBAPHZ0xoTUlnZGZMaWc/view?usp=sharing" target="_blank">
<input type="submit" name="" value="View Study" />
</a>
</div>
you can add a style for all the buttons with some margins around them like below
input[type='button']
{
margin:10px 10px 10px 10px; //just an example, you can add according to your need
}
Try adding a class to your div and styling it into your ss instead of hardcoding it into your html. You'll be able to modify all your links via this class later on. If however you must style in your html, simply add this to all your <a> tags: style="margin-right: 10px;"
Example :
<input type="submit" name="" value="View Study"/>
You can also just and break the line then in your top you can just center it or left or right and make it different areas.
I want to change the style of my bootstrap form to my own custom css. So, I create a class in my form, but the changes I make to the class's css isn't changing the style of the form.
Here's my form:
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown"> <span class="glyphicon glyphicon-log-in"></span> Login</a>
<div class="dropdown-menu" style="padding: 5px; padding-bottom: 5px;">
<form class="login-form" action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
<input id="user_username" placeholder="Email" style="margin-bottom: 15px;" type="text" name="user_username" size="30" />
<input id="user_password" placeholder="Password" style="margin-bottom: 15px;" type="password" name="user_password" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user_remember_me" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</div>
</li>
And here's my css:
.login-form {
left:0px;
right:0px;
width:300px;
margin:0 auto;
background-color:#000000;
padding:60px;
}
If .login-form class is coming from an external style sheet you should determine that the style sheet is being loaded by the browsers. In Chrome go to the View menu and from the Developer submenu choose Developer Tools. For most these tools appear at the bottom of the browsers' view port. Click on the Sources tab and then click on your CSS file; if you see the CSS then the style is loading. If not, then the style is not loading and it may be a problem with the URL that points to the style sheet.
Additionally you should validate your style sheet in W3C validator as an error in an earlier or later style could be causing a cascading error. Common Cascading errors are failing to properly close a style rule with a curly brace or terminating a property's value(s) with a semi-colon.
I want to display textbox first and then button.But now button appears first.I attached css code and html
css
.search,.stxt{
float: right;
}
html
<form method="POST">
<p style="align:right;">
<input class="stxt" type="text" name="searchtxt"><a style="padding-right:2ex;"></a>
<button name="search" class="search">Search</button></p>
</form>
The nature of floats will prioritise the first element in the list. This is why your input text box is to the right.
I would recommend wrapping your elements within a div and having that float to the right instead.
Floating Elements Next to Each Other
If you place several floating elements after each other, they will float next to each other if there is room.
So add the same class for both elements like below
HTML:
<form method="POST">
<p style="align:right;">
<input class="stxt alignLeft" type="text" name="searchtxt"><a style="padding-right:2ex;"></a>
<button name="search alignLeft" class="search">Search</button></p>
</form>
And remove the float:right; in the .search,.stxt classes in CSS styles and add the following CSS:
.alignLeft{
float: left;
}
p{
margin-left: 290px;
}
Fiddle:http://jsfiddle.net/gvmtuo5j/1/
Alternative:
Try Like this:
.search,.stxt{
float: left;
}
p{
margin-left: 290px;
}
check out this fiddle:http://jsfiddle.net/gvmtuo5j/
Just move the button before your input text :
<form method="POST">
<p style="align:right;">
<button name="search" class="search">Search</button></p>
<input class="stxt" type="text" name="searchtxt"><a style="padding-right:2ex;"></a>
</form>
Or the simpliest way is to put the float right on your <p> tag and remove the others float right