I have some radio buttons and I am adding checked attribute to selected radio button but having one problem. I want to remove checked="checked" attribute from radio button which selected.
HTML Code:
<div class="tabtwo-info">
<div class="tab-two">
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Unsecured Loans
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Secured 2nd Charge Lending
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Overdrafts
</div>
</div>
</a>
</div>
<div class="seperator">
<div class="container">
<div class="row"> <span class="sep"></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Trade Finance
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Business Cash Advance
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Working Capital
</div>
</div>
</a>
</div>
<div class="seperator">
<div class="container">
<div class="row"> <span class="sep"></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Stock Finance
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Acquisition Finance
</div>
</div>
</a>
</div>
<div class="seperator">
<div class="container">
<div class="row"> <span class="sep"></span>
</div>
</div>
</div>
</div>
</div>
jQuery Code:
$(".tabtwo-info .brokersector").click(function () {
$(this).find('input:radio').attr('checked', true);
});
My JSFiddle: https://jsfiddle.net/jj57q8fs/
JSFiddle Screenshot:
To force a remove of the attribute, before checking a new:
$(".brokersector").click(function () {
$('input[type=radio]').removeAttr('checked');
$(this).find('input[type=radio]').attr('checked', 'checked');
});
This will force an removal of all checked on any radio button, before a new radio is set. The selector can be more specific of course, like in Idir's example.
Also, #Regent posted a fiddle using prop instead. I would suggest you use this, as it states in the documentation:
Nevertheless, the most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does.
try this,
$(".tabtwo-info .brokersector").click(function() {
$('input[name=brokersector]').removeAttr('checked');
$(this).find('input:radio').attr('checked', 'checked');
});
I agree with [Rory McCrossan][1], you don't need jQuery for that. but here is what you can do this:
$('input[name=brokersector]:checked').removeAttr('checked');
$(".tabtwo-info .brokersector").click(function () {
$("input:radio").removeAttr("checked");
$(this).find('input:radio').attr('checked', true);
});
});
Related
I’ve a strange problem… When I start to compile the form the navbar slowly begins a fading until it disappears altogether. The same behavoiur if I use the tab on the keyboard to move from one input to another. I don’t understand the reason… It appens with the form.. I had the same problem with another form..
I thought that could be a div didn't close. I checked the code but it seems correct... but I don't know another possible cause
this is my html page
<div data-name="users-add" class="page">
<div class="page-content pg-no-padding">
<div class="row justify-content-center">
<div class="col-100 tablet-auto desktop-80">
<div class="block">
<form class="list" id="form-add-user">
<div class="row justify-content-center">
<div class="col-100 tablet-auto desktop-80">
<div class="row justify-content-center">
<h2> Add User</h2>
</div>
<div class="card">
<div class="card-content card-content-padding">
<div class="row justify-content-center margin padding">Compile...</div>
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-input-wrap">
<div class="item-title item-label">Nome</div>
<input type="text" placeholder="" name="first_name">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Surname</div>
<div class="item-input-wrap">
<input type="text" placeholder="" name="last_name">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Email</div>
<div class="item-input-wrap">
<input type="email" placeholder="" name="email">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Password</div>
<div class="item-input-wrap">
<input type="password" placeholder="" name="password">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Confirm password</div>
<div class="item-input-wrap">
<input type="password" placeholder="" name="password_confirm">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Phone</div>
<div class="item-input-wrap">
<input type="tel" placeholder="" name="phone">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Name Company</div>
<div class="item-input-wrap">
<input type="text" placeholder="" name="company">
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
<!--list-->
</div>
<!--col-->
</div>
<!--row-->
<div class="row justify-content-center margin padding">Role</div>
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="list no-hairlines-md">
<ul>
<li>
<label class="item-radio item-content">
<input type="radio" name="id_user" value="1" checked />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title"> Superadmin </div>
</div>
</label>
</li>
<li>
<label class="item-radio item-content">
<input type="radio" name="id_user" value="2" />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title"> Profile A </div>
</div>
</label>
</li>
<li>
<label class="item-radio item-content">
<input type="radio" name="id_user" value="3" />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title"> Profile B </div>
</div>
</label>
</li>
</ul>
</div>
<!--list-->
</div>
<!--col-->
</div>
<!--row-->
<div class="block margin padding">
<div class="row">
<div class="col">
<a class="button button-fill" onclick="addUser()">Save</a>
</div>
</div>
<!-- ./ block - save button -->
</div>
<!-- ./ block -->
</div>
<!--card-content-->
</div>
<!--.card-->
</div>
<!--.col-->
</div>
<!--.row-->
</form>
</div>
<!-- ./ block -->
</div>
<!--.col-->
</div>
<!-- .row-->
</div>
<!-- ./ page-content -->
I want to be able to check if the input is checked and if it is checked then grab the data associated with that input and display it into another div. here is my code.
var levels = $('input:checked + label').map(function() {
return $(this).text();
}).get();
//alert(levels);
document.getElementById('listprice').innerHTML = levels;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sln-service sln-service--3181">
<div class="col-md-12">
<div class="row sln-steps-info sln-service-info">
<div class="col-xs-2 col-sm-1 sln-checkbox sln-steps-check sln-service-check">
<div class="sln-checkbox">
<input type="checkbox" name="sln[services][3181]" id="sln_services_3181" value="1" data-price="175" data-duration="180">
<label for="sln_services_3181"></label>
</div>
</div>
<div class="col-xs-10 col-sm-8">
<label for="sln_services_3181">
<h3 class="sln-steps-name sln-service-name">Service Title</h3> <!-- collect this -->
</label>
</div>
<div class="col-xs-2 visible-xs-block"></div>
<h3 class="col-xs-10 col-sm-3 sln-steps-price sln-service-price">$175</h3> <!-- collect this -->
</div>
<div class="row sln-steps-description sln-service-description">
<div class="col-md-12"><hr></div>
<div class="col-sm-1 hidden-xs"> </div>
<div class="col-sm-10 col-md-9">
<label for="sln_services_3181">
<p></p>
<span class="sln-steps-duration sln-service-duration"><small>Duration:</small> 03:00</span> <!-- collect this -->
</label>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-11">
<span class="errors-area" data-class="sln-alert sln-alert-medium sln-alert--problem">
<div class="sln-alert sln-alert-medium sln-alert--problem" style="display: none" id="availabilityerror">
Not enough time for this service
</div>
</span>
</div>
</div>
</div>
<div class="demo">
You are booking a
<div id="listprice">
<!-- display collected here -->
</div>
</div>
I would like to collect the data and show it back in a div somewhere else on the page. Any jquery to help achieve this would be great.
$(document).ready(function(){
var checkedItems = $('input[type=checkbox]:checked');
checkedItems.each(function(){
var serviceName = $(this).parents('.sln-service-info').find('.sln-service-name').html();
var servicePrice = $(this).parents('.sln-service-info').find('.sln-service-price').html();
$('#listprice').append('<div>Title - '+serviceName +' Price - ' +servicePrice +'</div>');
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sln-service sln-service--3181">
<div class="col-md-12">
<div class="row sln-steps-info sln-service-info">
<div class="col-xs-2 col-sm-1 sln-checkbox sln-steps-check sln-service-check">
<div class="sln-checkbox">
<input type="checkbox" checked name="sln[services][3181]" id="sln_services_3181" value="1" data-price="175" data-duration="180">
<label for="sln_services_3181"></label>
</div>
</div>
<div class="col-xs-10 col-sm-8">
<label for="sln_services_3181">
<h3 class="sln-steps-name sln-service-name">Service Title</h3> <!-- collect this-->
</label>
</div>
<div class="col-xs-2 visible-xs-block"></div>
<h3 class="col-xs-10 col-sm-3 sln-steps-price sln-service-price">$175</h3> <!-- collect this -->
</div>
<div class="row sln-steps-description sln-service-description">
<div class="col-md-12"><hr></div>
<div class="col-sm-1 hidden-xs"> </div>
<div class="col-sm-10 col-md-9">
<label for="sln_services_3181">
<p></p>
<span class="sln-steps-duration sln-service-duration"><small>Duration:</small> 03:00</span> <!-- collect this -->
</label>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="demo">
You are booking a
<div id="listprice">
<!-- display collected here -->
</div>
</div>
Hello fellow internet strangers :) If any of you has some time to spare and knows Semantic UI I'd apreciate some help...
I'm building a form and on large screens it looks perfect...
but the problem ocures when I start displaying it on smaler screens... the elements start ovelaping each other like on the two images bellow:
My HTML code is:
<h1>Računi (2017)</h1>
<div class="ui form" style="padding: 20px">
<div class="ui stackable equal width grid">
<div class="row">
<div class="column">
<div class="field">
<label>Št. računa</label>
<div class="ui left icon input">
<input type="text" name="racun_id" placeholder="št. računa">
<i class="hashtag icon"></i>
</div>z
</div>
</div>
<div class="column">
<div class="field">
<label>Ime in priimek</label>
<div class="ui left icon input">
<input type="text" placeholder="Vnesi...">
<i class="user icon"></i>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label>Naslov</label>
<div class="ui left icon input">
<input type="text" name="kupec_naslov" placeholder="Vnesi...">
<i class="marker icon"></i>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label>Začetni datum</label>
<div class="ui left icon right labeled input">
<i class="calendar icon"></i>
<input type="text" name="zac" value="14.9">
<div class="ui basic label">
2017
</div>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label>Končni datum</label>
<div class="ui left icon right labeled input">
<i class="calendar icon"></i>
<input type="text" name="kon" value="14.9">
<div class="ui basic label">
2017
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="field">
<label>Referent</label>
<div class="ui selection dropdown">
<input type="hidden" name="referent_id">
<i class="dropdown icon"></i>
<div class="default text">Izberi...</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
<div class="item" data-value="1">Spaceman</div>
<div class="item" data-value="0">Spiderman</div>
</div>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label>Odprt račun</label>
<select class="ui dropdown">
<option value="">--</option>
<option value="N">Odprt TRR</option>
<option value="C">Odprt Plačilna kartica</option>
</select>
</div>
</div>
<div class="column">
<div class="field">
<label>Filter plačilnih kartic</label>
<div class="ui selection dropdown">
<i class="payment icon"></i>
<input type="hidden" name="referent_id">
<i class="dropdown icon"></i>
<div class="default text">Izberi...</div>
<div class="menu">
<div class="item" data-value="">--</div>
<div class="item" data-value="isicvisa">ISIC Visa</div>
<div class="item" data-value="maestro">Maestro / BA</div>
<div class="item" data-value="visa">Visa</div>
<div class="item" data-value="mc">MasterCard</div>
<div class="item" data-value="karanta">Karanta</div>
<div class="item" data-value="diners">Diners</div>
<div class="item" data-value="amex">American Express</div>
</div>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label>Zaključeni odprti računi</label>
<div class="ui slider checkbox">
<input type="checkbox" name="newsletter">
<label> </label>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label>Izpiši račune:</label>
<button class="fluid ui primary button"><i class="terminal icon"></i>Izpis</button>
</div>
</div>
</div>
</div>
</div>
BTW I havent written any of my own CSS... using purely the Semantic one
So if anyone has a solution to this or if anyone sees a problem in my code id apreciate some help :)
P.S. Sorry for bad english... it's not my native language
Don't use grids. Stick with the multiple field classes that semantic ui provides.
Semantic-UI multiple fields in forms
<div class="ui form">
<div class="three fields">
<div class="field">
<label>First name</label>
<input type="text" placeholder="First Name">
</div>
<div class="field">
<label>Middle name</label>
<input type="text" placeholder="Middle Name">
</div>
<div class="field">
<label>Last name</label>
<input type="text" placeholder="Last Name">
</div>
</div>
</div>
This bit me too but make sure you have
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> in your header.
Source: https://github.com/Semantic-Org/Semantic-UI/issues/3152
I had this problem, and with all the changes suggested here, the problem still persisted exclusively for the dropdown fields.
The solution for me was to change <select name="name" class="ui dropdown"> to <select name="name" class="ui dropdown fluid"> (adding the fluid class). This prevented the dropdown from jumping over the other fields, as in OP's example.
The structure of the HTML was the same as in the #VtoCorleone's answer, and the dropdown was previously initialized with $(".ui.dropdown").dropdown().
I'm trying to create a tile layout with bootstrap. Here is the website that I would like to try to copy: link
I kind of achieved this by using columns but using margins and paddings will break them. Aforementioned website uses some kind of script to automatically set their position value (e.g., position:absolute;top:0;left:248px). How is this done?
Here is what I have: jsfiddle
<div class="col-lg-4">
<div class="row">
<div class="col-lg-12 metro-1">
<img src="https://placehold.it/600x600/313236/000000" style="width:100%;">
<div class="top-text-block">
<div class="top-text-block-inner">
check out our<br>hottest winit
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-2">
<div class="row upper-metro">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<img src="https://placehold.it/300x300/ffffff/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<img src="https://placehold.it/300x300/23AE8F/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="row lower-metro">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 lower-metro-inner">
<img src="https://placehold.it/600x300/DEDCE1/000000" style="width:100%;">
<div class="center-text-block">
some text goes here
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-3">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/5B2988/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/C64001/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 right-metro">
<img src="https://placehold.it/300x600/017B39/000000" style="width:100%;">
<div class="center-text-block">
some text goes here
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-4">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/5535B1/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/7EC0BF/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/E4A706/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/925D63/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
</div>
</div>
</div>
It was called Mansory layout. I didn't know what it was called but now I got it. Funny how things are so easy when you actually know what to search for. Haha!
I'm using jQuery dialog to gather the informations from users then append to my desired div. This function works very well, but when comes to edit/update my contents, I have no ideas how to do.
Front-Ends HTML
<li class="description_panel">
<a id="editPanel" href="#"></a>
<a id="closeBtn" href="#" class="closeButton"></a>
<div class="panel_title">
<h2>**Subscribe Here!**</h2>
</div>
<div class="panel_img">
<img width="320px" src="link_to_img_url"/>
</div>
<div class="panel_description">
<p>My paragraph 1</p>
<p>My paragraph 2</p>
</div>
</li>
Edit Panel
<div id="edit-dialog-form" title="Edit Panel">
<form id="formUpdatePanel">
<div class="form-group">
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>Panel title::</h5>
<input style="margin-bottom:20px;" id="updatePanelTitle" class="form-control input-lg" name="title" placeholder="Panel Title" type="text"></input>
</div>
</div>
</div>
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>URL to image: </h5>
<input style="margin-bottom:20px;" id="updatePanelImageURL" class="form-control input-lg" name="imageURL" placeholder="Link to Image URL" type="text"></input>
</div>
</div>
</div>
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>Panel description:</h5>
<textarea id="updatePanelDescription" rows="5" cols="50" style="width:312px"></textarea>
</div>
</div>
</div>
</div>
</form>
</div>
JQuery
$('#editPanel').click(function(){
editDialog.dialog("open");
});
var editDialog = {...};
function updateDialog {
}
How to retrieve all the inputs values and textarea value and display in the dialog input box and update/overwrite the contents again.