I am working on simple feedback form where I have 3 fields Name,rating(Poor, fair, good) and feedback comment.
In my form I want user to select a single rating at a time and submit the form with selected rating & feedback comments.
I have created the <div> elements for each rating and make them as radio type.
I don't want to show the radio button on the form, but I want my Div to behave as radio button.
Also how to fix the border of Divs?
I am attaching the screenshots.
First one, how I want it to appear and second one is how my current code is appearing on UI.
Below is my form code & CSS
<div id="modal_wrapper">
<div id="modal_window">
<div style="text-align: right;"><a id="modal_close" href="#">close <b>X</b></a></div>
<p><Strong>We'd love your feedback.</Strong><br></p>
<p>Your feedback will help us improve your experience. To protect your privacy, please do not enter personal or account information.</p>
<form id="modal_feedback" method="POST" action="#" accept-charset="UTF-8">
Your Name :<br>
<input type="text" name="name" value=""><span></span><br>
<div class="feedbackCl" >
<input id="overall_0" name="overall" type="radio" value="1" tabindex="0" aria-describedby="o1-l">
<label for="overall_0" class="labelClass">— —</label>
<span class="screen_reader" id="o1-l">Poor</span>
</div>
<div class="feedbackCl">
<input id="overall_1" name="overall" type="radio" value="2" tabindex="0" aria-describedby="o2-l">
<label for="overall_1" class="labelClass">—</label>
<span class="screen_reader" id="o2-l">Fair</span>
</div>
<div class="feedbackCl">
<input id="overall_2" name="overall" type="radio" value="3" tabindex="0" aria-describedby="o3-l">
<label for="overall_2" class="labelClass">+ —</label>
<span class="screen_reader" id="o3-l">Good</span>
</div>
<br>
<span><br></span><br>
<textarea style="overflow-x: hidden;" id="gBann" name="message" maxlength="1000" rows="4" cols="85" placeholder="How can we improve our site? Please share your suggestions." onKeyUp="toCount('gBann','uBann','{CHAR} characters left',1000);" >
</textarea><br>
<span id="uBann" class="minitext" style="text-align: right;">1000 characters left</span><br>
<input type="submit" name="feedbackForm" value="Submit">
</form>
</div>
</div>
CSS Code
.feedbackCl {
float: left;
box-sizing: border-box;
padding-top: 5px;
width: 9%;
text-align: center;
height: 40px;
}
input[type="radio" i] {
-webkit-appearance: radio;
box-sizing: border-box;
}
.labelClass{
margin-right: 0 !important;
height: 28px;
background-color: #fff !important;
color: #0511ac;
box-sizing: border-box;
}
You can do something like the following:
$('.radio-group .feedbackCl').click(function(){
$(this).parent().find('.feedbackCl').removeClass('selected');
$(this).addClass('selected');
var val = $(this).attr('data-value');
$(this).parent().find('input').val(val);
console.log('You have selected: '+val);
});
.feedbackCl {
display: inline-block;
width: 70px;
height: 30px;
border: 2px solid lightblue;
cursor: pointer;
margin: 2px 0;
text-align: center;
line-height: 30px;
}
.radio-group{
position: relative;
}
.feedbackCl.selected{
border-color: blue;
background-color: orange;
}
span{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modal_wrapper">
<div id="modal_window">
<div style="text-align: right;"><a id="modal_close" href="#">close <b>X</b></a></div>
<p><Strong>We'd love your feedback.</Strong><br></p>
<p>Your feedback will help us improve your experience. To protect your privacy, please do not enter personal or account information.</p>
<form id="modal_feedback" method="POST" action="#" accept-charset="UTF-8">
Your Name :<br>
<input type="text" name="name" value=""><span></span><br>
<div class="radio-group">
<div class="feedbackCl" data-value="1">— —
<span>Poor</span>
</div>
<div class="feedbackCl" data-value="2">-
<span>Fair</span>
</div>
<div class="feedbackCl" data-value="3">+ —
<span>Good</span>
</div>
<div class="feedbackCl" data-value="4">+
<span>Very good</span>
</div>
</div>
<br>
<span><br></span><br>
<textarea style="overflow-x: hidden;" id="gBann" name="message" maxlength="1000" rows="4" cols="85" placeholder="How can we improve our site? Please share your suggestions." onKeyUp="toCount('gBann','uBann','{CHAR} characters left',1000);" >
</textarea><br>
<span id="uBann" class="minitext" style="text-align: right;">1000 characters left</span><br>
</form>
</div>
</div>
Try my snippet! I dont use any js code, just html and css! hope this can help you!
.feedback{float:left;width:100%;margin-top:10px}
.feedbackCl{float:left;width:15%}
.feedbackCl>input[type="radio"]{display:none}
.feedbackCl>input[type="radio"]:checked+label>.sight{border:solid 2px #00f;background:orange}
.feedbackCl>label{width:100%;height:100%;display:inline-block;text-align:center}
.feedbackCl>label>.sight{width:100%;float:left;border:solid 1px #ccc;padding:10px 0;color:#00f;margin-left:1px}
.feedbackCl>label>.screen_reader{width:100%;float:left;padding-top:10px}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="modal_wrapper">
<div id="modal_window">
<div style="text-align: right;"><a id="modal_close" href="#">close <b>X</b></a></div>
<p><Strong>We'd love your feedback.</Strong><br></p>
<p>Your feedback will help us improve your experience. To protect your privacy, please do not enter personal or account information.</p>
<form id="modal_feedback" method="POST" action="#" accept-charset="UTF-8">
Your Name :<br>
<input type="text" name="name" value=""><span></span><br>
<div class="feedback">
<div class="feedbackCl" >
<input id="overall_0" name="overall" type="radio" value="1" tabindex="0" aria-describedby="o1-l">
<label for="overall_0" class="labelClass">
<span class="sight">— —</span>
<span class="screen_reader" id="o1-l">Poor</span>
</label>
</div>
<div class="feedbackCl">
<input id="overall_1" name="overall" type="radio" value="2" tabindex="0" aria-describedby="o2-l">
<label for="overall_1" class="labelClass">
<span class="sight">—</span>
<span class="screen_reader" id="o2-l">Fair</span>
</label>
</div>
<div class="feedbackCl">
<input id="overall_2" name="overall" type="radio" value="3" tabindex="0" aria-describedby="o3-l">
<label for="overall_2" class="labelClass">
<span class="sight">+—</span>
<span class="screen_reader" id="o3-l">Good</span>
</label>
</div>
<div class="feedbackCl">
<input id="overall_3" name="overall" type="radio" value="3" tabindex="0" aria-describedby="o3-l">
<label for="overall_3" class="labelClass">
<span class="sight">+</span>
<span class="screen_reader" id="o3-l">Very Good</span>
</label>
</div>
</div>
<br>
<span><br></span><br>
<textarea style="overflow-x: hidden;" id="gBann" name="message" maxlength="1000" rows="4" cols="85" placeholder="How can we improve our site? Please share your suggestions." onKeyUp="toCount('gBann','uBann','{CHAR} characters left',1000);" >
</textarea><br>
<span id="uBann" class="minitext" style="text-align: right;">1000 characters left</span><br>
<input type="submit" name="feedbackForm" value="Submit">
</form>
</div>
</div>
</body>
</html>
Rather than using radio buttons, you can add an onClick event to each div which will populate a hidden input.
<input type="text" name="name" value=""><span></span><br>
<div class="feedbackCl" onclick="setRating(1)">
<label for="overall_0" class="labelClass">- -</label>
<span class="screen_reader" id="o1-l">Poor</span>
</div>
<div class="feedbackCl" onclick="setRating(2)">
<label for="overall_1" class="labelClass">-</label>
<span class="screen_reader" id="o2-l">Fair</span>
</div>
Javascript
<script>
function setRating(v) {
document.getElementById('overall').value = v;
}
</script>
I think you wish to use the radio inputs, because you don't know another way to get only one form field to track on submit.
Here, I use a hidden input field to store which div (poor - fair - good) has been selected.
And divs are easy to style like you want.
;)
$(".feedbackCl").on("click",function(){
$(".feedbackCl").removeClass("selected").css({"opacity":1});;
$(this).addClass("selected");
$(".feedbackCl").not(".selected").css({"opacity":0.6});
console.log("Value stored in the hidden input of the form: "+$(this).attr("id"));
$("#feedbackResult").val( $(this).index() );
});
.feedbackCl {
float: left;
box-sizing: border-box;
padding-top: 5px;
width: 9%;
text-align: center;
height: 40px;
border:1px solid grey;
display:block;
}
.feedbackCl.selected{
border:2px solid blue;
}
#poor{
background-color:red;
}
#fair{
background-color:yellow;
}
#good{
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modal_wrapper">
<div id="modal_window">
<div style="text-align: right;">
<a id="modal_close" href="#">close <b>X</b></a>
</div>
<p><Strong>We'd love your feedback.</Strong><br></p>
<p>Your feedback will help us improve your experience. To protect your privacy, please do not enter personal or account information.</p>
<form id="modal_feedback" method="POST" action="#" accept-charset="UTF-8">
Your Name :<br>
<input type="text" name="name" value=""><span></span><br>
<br>
<div class="feedbackCl" id="poor">
Poor
</div>
<div class="feedbackCl" id="fair">
Fair
</div>
<div class="feedbackCl" id="good">
Good
</div>
<input type="hidden" id="feedbackResult" name="feedbackResult">
<br>
<br>
<br>
<textarea id="gBann" name="message" maxlength="1000" rows="4" cols="85" placeholder="How can we improve our site? Please share your suggestions." onKeyUp="toCount('gBann','uBann','{CHAR} characters left',1000);" ></textarea><br>
<span id="uBann" class="minitext" style="text-align: right;">1000 characters left</span><br>
<br>
<input type="submit" name="feedbackForm" value="Submit">
</form>
<br>
</div>
</div>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I need to find an easy way to get input from some <input>:
<p class="mono-header pt-1">Nicknames & Names</p>
<div class="form-floating">
<input type="text" class="form-control bg-dark text-white" name="nickname" placeholder="Nickname" id="nickname" minlength="1" maxlength="32" required>
<label for="floatingInputValue">Nickname</label>
</div>
<section class="p-1"></section>
<div class="form-floating">
<input type="text" class="form-control bg-dark text-white" name="username" placeholder="Username with Identifier" id="username" minlength="2" maxlength="37" required>
<label for="floatingInputValue">Username with Identifier</label>
</div>
<hr width="100%">
<p class="mono-header pt-1">About Me</p>
<div class="form-floating">
<textarea class="form-control bg-dark text-white aboutmetextarea" placeholder="About me" name="aboutme" id="aboutme" maxlength="190" required></textarea>
<label for="floatingTextarea2">About Me</label>
</div>
into a larger text (on the location of the ----------):
<div class="nickname-name">
<p class ="fakeginto prewrap" style="font-size: 20px; color: white; margin-bottom: 0px;" id="nickname">----------</p>
<p class ="prewrap" style="font-size: 14px; color: #B9BBBE; margin-bottom: 0px; font-weight: 500;" id="username">----------</p>
</div>
</div>
<div class="lineinbetween"><div class="lineline"></div></div>
<div class="aboutme">
<p class="aboutmeheader fakeginto">ABOUT ME</p>
<p class="aboutmetext opensans" id="aboutmeresult">----------</p>
</div>
And then get the total thing to be inserted into a <textarea>.
What's the easiest way to do this using javascript? I have no idea where to start with this since im quite new to JS.
Something like this?
function merge()
{
document.getElementById("finalOutput").innerText = "Hi, " + document.getElementById("input1").value + "-" + document.getElementById("input2").value;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<input type=text id=input1><br>
<input type=text id=input2><br>
<input type=text id=input3><br>
<input type=text id=input4><br>
<input type=text id=input5><br>
<input type=button onclick="merge()" value=Merge>
<hr>
<textarea id=finalOutput>
</textarea>
</body>
I am trying to make an HTML form, and I am trying to insert the "Plus" icon to the Input field. How would I do that, since I've already tried modifying it via CSS? Can someone help?
Also, I also want to create a "click" event which leads me to a secondary page where I can choose the Rooms and the capacity in my form, and go back once I am done with it. Any thoughts how I would do that?
This is my CSS Code:
*{
margin:0;
box-sizing: border-box;
padding:0px;
}
body{
height:100vh;
display: flex;
background-color: rgb(87,189,130);
}
.field-property,
.field-room,
.field-name-room,
.field-capacity,
.base-tariff{
position: relative;
top:30%;
left:100%;
}
.allinputs{
margin:10px;
padding:5px;
border-radius: 10px;
width:100%;
}
.client-form{
align-items: center;
justify-content: center;
display: flex;
}
This is my HTML Code:
<body>
<h1 class="client-form">Client Integration Form</h1>
<form>
<div class="field-property">
<label for="property Name">Property Name
<input type="text" class= "allinputs" name="name" placeholder="Property Name" required />
</label>
</div>
<div class="field-room">
<label for="rooms">Rooms
<input type="text" class="allinputs" name="name" placeholder="Rooms" required />
<div class="material-icon">
<i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i>
</label>
</div>
</div>
<!-- Adding the Icon for Adding Rooms -->
<div class="field-name-room">
<label for="room Selected">Room Selected
<!-- Adding a Drop Down Value for the rooms -->
<select class="all inputs">
<option class="options">Pink Room</option>
<option class="options">Red Room</option>
<option class="options">Green Room</option>
</select>
</label>
</div>
<div class="field-capacity">
<label for="capacity">Capacity</label>
<input type="number" class="allinputs">
</div>
<div class="base-tariff">
<label for="base Tariff">Base Tariff of the Room:</label>
<input type="value" class="allinputs" name="name" placeholder="Base Tariff">
</div>
<!-- Yet to be decided how to integrate this -->
<!-- <div class="field-billing">
<label for="billing">Billing:</label>
</div>
<div class="field-phone">
<label for="phone Number">Phone Number</label>
<input type="number" class="allinputs">
</div>
</form>
</div>
</body>
</html>
To insert the '+' sign use a placeholder.
<input type="" id="" name="" placeholder="+">
A click event could be achieved by a simple hyperlink <a href=''>Example Hyperlink</a>
I'm trying to build a simple inline form using bootstrap 3 and with typeahead functionalities. I'm having 2 issues, and I'm not sure if they are related somehow or not. The issues are as follows:
-- The first issue I'm having is with the size of #orig and #dest fields (1st and 2nd input fields) not fitting automatically to 100% of their grid container parent. It's as if they don't increase in size past 200px. See image: form. I really don't understand what is causing this, as nowhere in my stylesheet file do I mention 200px or any other limiting setting.
-- My second issue is also related to same aforementioned form fields, but the problem now is that when I try to resize the window, the field's ghost background remains with the same 200px in size and makes the forms appear very clumsy and stacked on each other. See image: form. I'm pretty sure this issue is related to typeahead, as when I don't include the link to my javascript file (which contains the typeahead functionality), this issue doesn't happen anymore.
See code below:
<div class="jumbotron text-center" id="main">
<div class="container-fluid">
<div class="row">
<div class="cl-md-12" id="box">
<div class="well well-lg" id="well-form">
<form role="form" class="form-inline" >
<div class="container">
<div class="row">
<div class="col-sm-3" id="field1">
<div class="form-group">
<label class="sr-only" for="orig">Origin city or airport</label>
<input type="text" class="form-control input-lg" placeholder="From" id="orig" name="origin" value="">
</div>
</div>
<div class="col-sm-1" id="field2">
<span class="glyphicon glyphicon-resize-horizontal" id="interchange"> </span>
</div>
<div class="col-sm-3" id="field3">
<div class="form-group">
<label class="sr-only" for="dest">Destination city or airport</label>
<input type="text" class="form-control input-lg" placeholder="To" id="dest" name="destination">
</div>
</div>
<div class="col-sm-2" id="field4">
<div class="form-group">
<label class="sr-only" for="date_out">Date out</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_out" name="departing">
</div>
</div>
<div class="col-sm-2" id="field5">
<div class="form-group">
<label class="sr-only" for="date_in">Date in</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_in" name="returning">
</div>
</div>
<div class="col-sm-1" id="field6">
<button type="submit" class="btn btn-danger btn-md" id="submit">Search</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
CSS
.jumbotron {
color: #ffffff;
padding: 80px 25px 200px;
margin-top: 0px;
}
.form-inline > * {
display: inline-block;
justify-content: center;
}
#date_out, #date_in{
background-color: #ffffff !important;
width:100%;
}
#orig, #dest {
background-color: #ffffff !important;
max-width: 400px;
width: 100%;
}
#field1, #field3, #field2, #field4, #field5, #field6{
padding: 1px;
margin: 0;
}
Any help would be much appreciated :)
Thanks in advance
As I running your code in bootstrap 3 with latest version. It is working fine. Check below snippet:(see in full page preview)
.jumbotron {
color: #ffffff;
padding: 80px 25px 200px;
margin-top: 0px;
}
.form-inline > * {
display: inline-block;
justify-content: center;
}
#date_out, #date_in{
background-color: #ffffff !important;
width:100%;
}
#orig, #dest {
background-color: #ffffff !important;
max-width: 400px;
width: 100%;
}
#field1, #field3, #field2, #field4, #field5, #field6{
padding: 1px;
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="jumbotron text-center" id="main">
<div class="container-fluid">
<div class="row">
<div class="cl-md-12" id="box">
<div class="well well-lg" id="well-form">
<form role="form" class="form-inline" >
<div class="container">
<div class="row">
<div class="col-sm-3" id="field1">
<div class="form-group">
<label class="sr-only" for="orig">Origin city or airport</label>
<input type="text" class="form-control input-lg" placeholder="From" id="orig" name="origin" value="">
</div>
</div>
<div class="col-sm-1" id="field2">
<span class="glyphicon glyphicon-resize-horizontal" id="interchange"> </span>
</div>
<div class="col-sm-3" id="field3">
<div class="form-group">
<label class="sr-only" for="dest">Destination city or airport</label>
<input type="text" class="form-control input-lg" placeholder="To" id="dest" name="destination">
</div>
</div>
<div class="col-sm-2" id="field4">
<div class="form-group">
<label class="sr-only" for="date_out">Date out</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_out" name="departing">
</div>
</div>
<div class="col-sm-2" id="field5">
<div class="form-group">
<label class="sr-only" for="date_in">Date in</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_in" name="returning">
</div>
</div>
<div class="col-sm-1" id="field6">
<button type="submit" class="btn btn-danger btn-md" id="submit">Search</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
I have two modal menus on the same page: for registration and for login. When appears first, second should be disappeared from the page and not overlap the first one. How could I do this using bootstrap or bootstrap & jQuery?
The first menu:
<div id="dialog-sign-in" class="modal" aria-hidden="true" style="display: none;">
<div class="modal-dialog" style="width: 320px;">
<div class="modal-content">
<div class="modal-body">
<h1 class="text-center" style="margin-bottom: 25px;">Login</h1>
<ul id="socail-media-sign-in" class="social-media social-media-lg social-media-horizontal social-media-save-positions text-center">
<li class="fb">
Facebook
</li>
<li class="vk">
Vkontakte
</li>
<li class="ok last">
Odnoklassniki
</li>
</ul>
<p class="line">or</p>
<form action="https://site.ru/wp-login.php" method="post" data-validate="true" data-ajax="true" data-ajax-callback="checkAjaxLogin" id="form_login" autocomplete="off" novalidate="novalidate">
<input type="hidden" id="sign-in-return" name="sign-in-return" value="%2F">
<div class="form-group">
<input class="form-control needed" type="email" name="log" id="login_user_email" placeholder="E-mail" data-rule-required="true" data-rule-email="true" aria-required="true">
</div>
<div class="form-group">
<input class="form-control needed" type="password" name="pwd" id="login_user_password" placeholder="Password" data-rule-required="true" aria-required="true">
</div>
<div class="form-group">
<input type="submit" value="Войти" name="dd" class="btn btn-primary btn-block">
</div>
</form>
<p class="text-center"><a rel="nofollow" href="#dialog-password-reset-toggler" id="dialog-password-reset-toggler" class="text-muted" title="Сбросить забытый пароль"><small>Забыли пароль?</small></a></p>
<p class="text-center"><a rel="nofollow" href="#dialog-sign-up" class="underline" id="dialog-sign-up-toggler">Зарегистрироваться</a></p>
<p class="text-muted text-center" style="margin-bottom: 0;">Говорят, Усейн Болт регистрируется <br>за 4,5 секунды</p>
</div>
</div>
</div>
</div>
The second one:
<div id="dialog-sign-up" class="modal" aria-hidden="true" style="display: none;">
<div class="modal-dialog" style="width: 320px;">
<div class="modal-content">
<div class="modal-body">
<h1 class="text-center" style="margin-bottom: 25px;">Sign up</h1>
<ul id="socail-media-sign-up" class="social-media social-media-lg social-media-horizontal social-media-save-positions text-center">
<li class="fb">
Facebook
</li>
<li class="vk">
Vkontakte
</li>
<li class="ok last">
Odnoklassniki
</li>
</ul>
<p class="line">or</p>
<form action="/registration" method="post" data-validate="true" data-ajax="true" data-ajax-callback="checkRegistration" id="form_register" novalidate="novalidate">
<div class="form-group">
<input class="form-control" data-rule-required="true" data-rule-email="true" type="email" name="user_login" id="user_email" placeholder="E-mail" aria-required="true">
</div>
<div class="form-group">
<input class="form-control" data-rule-required="true" data-rule-minlength="6" type="password" name="user_password" id="pass1" placeholder="Password" aria-required="true">
</div>
<div class="row">
<div class="col-xs-6" style="padding-right: 5px;">
<div class="form-group">
<input class="form-control" data-rule-required="true" type="text" name="user_firstname" id="first_name" placeholder="First name" aria-required="true">
</div>
</div>
<div class="col-xs-6" style="padding-left: 5px;">
<div class="form-group">
<input class="form-control" data-rule-required="true" type="text" name="user_lastname" id="last_name" placeholder="Last name" aria-required="true">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6" style="padding-right: 5px;">
<div class="form-group">
<input readonly="readonly" class="form-control datetime" data-rule-required="true" data-view-mode="2" type="text" name="user_birthday" id="user_birthday" placeholder="Год рождения" aria-required="true">
</div>
</div>
<div class="col-xs-6" style="padding-left: 5px;">
<div class="form-group">
<div class="select2-container form-control select2" id="s2id_user_sex"> <span class="select2-chosen" id="select2-chosen-1">Sex</span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow" role="presentation"><b role="presentation"></b></span><label for="s2id_autogen1" class="select2-offscreen"></label><input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-1" id="s2id_autogen1"><div class="select2-drop select2-display-none"> <div class="select2-search select2-search-hidden select2-offscreen"> <label for="s2id_autogen1_search" class="select2-offscreen"></label> <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" role="combobox" aria-expanded="true" aria-autocomplete="list" aria-owns="select2-results-1" id="s2id_autogen1_search" placeholder=""> </div> <ul class="select2-results" role="listbox" id="select2-results-1"> </ul></div></div><select class="form-control select2 select2-offscreen" data-rule-required="true" data-rule-min="1" data-placeholder="Пол" name="user_sex" id="user_sex" data-minimum-results-for-search="-1" tabindex="-1" title="" aria-required="true">
<option></option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<input type="submit" name="wp-submit" value="Sign up" class="btn btn-primary btn-block" disabled="">
</div>
<p class="text-center" style="margin-bottom: 0;"><a rel="nofollow" href="#dialog-sign-in" class="underline" id="dialog-sign-in-toggler">Login</a></p>
<div style="color: #ccc; padding-top: 10px;" class="text-center">
By signing up you agree with our Terms&Conditions
</div>
</form>
</div>
</div>
</div>
</div>
Update:
I wrote a jQuery snippet for this but it stopped working correctly (has no reaction on clicking).
URL links:
<div onclick="location.href='#dialog-sign-in';" style="background:url('http://example.com/bitrix/templates/main/assets/images/icons/proj_icon_login.png'); cursor: pointer; margin-top: -8px; float: right; padding-bottom: 10px; border-bottom: 0px solid #b2d109; line-height: 26px; background-position: left; background-repeat: no-repeat; display: inline-block;">
<div style="margin-left: 15px; padding-top: 12px;">
Login
</div>
</div>
<div onclick="location.href='#dialog-sign-up';" style="background:url('http://example.com/bitrix/templates/main/assets/images/icons/proj_icon_reg.png'); cursor: pointer; margin-top: -8px; float: right; padding-bottom: 10px; border-bottom: 0px solid #b2d109; line-height: 26px; background-position: left; margin-right: 20px; background-repeat: no-repeat; display: inline-block;">
<div style="margin-left: 25px; padding-top: 12px;">
Sign up
</div>
</div>
jQuery code:
<script>
jQuery(function( $ ) {
var $dialogSignIn = jQuery('#dialog-sign-in'),
$dialogSignUp = jQuery('#dialog-sign-up'),
$dialogPasswordReset = jQuery('#dialog-password-reset'),
$dialogSignUpToggler = jQuery('#dialog-sign-up-toggler'),
$dialogSignInToggler = jQuery('#dialog-sign-in-toggler'),
$dialogPasswordResetToggler = jQuery('#dialog-password-reset-toggler');
$dialogSignUpToggler.click(function( event ) {
event.preventDefault();
$dialogSignIn.modal('hide');
$dialogSignUp.modal('show');
});
$dialogSignInToggler.click(function( event ) {
event.preventDefault();
$dialogSignUp.modal('hide');
$dialogSignIn.modal('show');
});
});
</script>
Seems that the code is correct. Why it doesn't work?
$('#dialog-sign-in').modal('hide');
$('#dialog-sign-up').modal('show');
However you need to write a bit o javascript for it to work properly but it basically goes down to this methods.
I have the following code
$('#check-twitter').click(
function() {
if ($('#ShareTwitterPublish').val() == '0') {
$('#ShareTwitterPublish').val('1');
$(this).removeClass('red');
$(this).addClass('green');
}
else {
$('#ShareTwitterPublish').val('0');
$(this).removeClass('green');
$(this).addClass('red');
}
}
);
HTML:
<div tabindex="-1" class="simplemodal-wrap" style="height: 100%; outline-width: 0px; outline-style: initial; outline-color: initial; width: 100%; overflow-x: visible; overflow-y: visible; "><div class="share-dialog simplemodal-data" style="" id="simplemodal-data">
<div class="share-message" style="margin-bottom:30px;">
<span>Sharing: <a style="text-decoration:none"></a></span>
<!--<a id="copy-button" class="button medium blue" href="#">Copy URL</a>-->
</div>
<div id="vertical-tabs">
<ul class="tabs">
<a id="check-facebook" class="button tiny green span-1 last">
<span></span>
</a>
<li class="active">Facebook</li>
<a id="check-twitter" class="button tiny green span-1 last">
<span></span>
</a>
<li>Twitter</li>
<a id="check-twitter-dm" class="button tiny red span-1 last">
<span></span>
</a>
<li>Twitter DM</li>
<a id="check-email" class="button tiny red span-1 last">
<span></span>
</a>
<li>Email</li>
</ul>
<form style="float:right" id="VoicenoteShareForm" method="post" action="/fonykweb/voicenotes/share" accept-charset="utf-8"><div style="display:none;"><input type="hidden" name="_method" value="POST"></div> <input type="hidden" name="data[Share][vnid]" value="c764a5e0e9e026b8e79679e8de275def1bd3ad382d0a7e45639687400c95f486" id="ShareVnid"><input type="hidden" name="data[Share][fonykid]" value="abea0cd1eec985ebb812720a798e730d8ab287393d6327716bbf697bfcd2d4de" id="ShareFonykid"><input type="hidden" name="data[Share][voicenote_url]" value="http://localhost/fonykweb/voicenotes/view/228" id="ShareVoicenoteUrl">
<div id="tab1" class="tab_content span-8" style="display: block; ">
<input type="hidden" name="data[Share][facebook_publish]" value="1" id="ShareFacebookPublish"><div class="span-8"><label for="ShareFacebookMessage">Message</label><textarea name="data[Share][facebook_message]" class="input-text" cols="30" rows="6" id="ShareFacebookMessage"></textarea></div> </div>
<div id="tab2" class="tab_content span-8" style="display: none; ">
<input type="hidden" name="data[Share][twitter_publish]" value="1" id="ShareTwitterPublish"><input type="hidden" name="data[Share][twitter_dm]" value="0" id="ShareTwitterDm"><div class="span-8"><label for="ShareTwitterMessage">Message</label><textarea name="data[Share][twitter_message]" class="input-text" cols="30" rows="6" id="ShareTwitterMessage"></textarea></div> </div>
<div id="tab3" class="tab_content span-8" style="display: none; ">
<div class="span-8"><label for="ShareDmRecipients">Recipients</label><input name="data[Share][dm_recipients]" type="text" class="input-text long" id="ShareDmRecipients" style="display: none; "><div class="tagify-container" style="width: 317px; "><input type="text" placeholder="Tag friends" maxlength="15" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"></div></div><div class="span-8"><label for="ShareDmMessage">Message</label><textarea name="data[Share][dm_message]" class="input-text" cols="30" rows="6" id="ShareDmMessage"></textarea></div> </div>
<div id="tab4" class="tab_content span-8" style="display: none; ">
<input type="hidden" name="data[Share][email_publish]" value="0" id="ShareEmailPublish"><div class="span-8"><label for="ShareEmailContacts">Contacts</label><input name="data[Share][email_contacts]" type="text" class="input-text long" id="ShareEmailContacts"></div><div class="span-8"><label for="ShareEmailMessage">Message</label><textarea name="data[Share][email_message]" class="input-text" cols="30" rows="6" id="ShareEmailMessage"></textarea></div> </div>
</form></div>
<div class="share-buttons">
<div class="submit"><input class="button medium blue" id="publish-button" style="float:right" type="submit" value="Publish"></div><button type="submit" class="button medium blue" id="cancel-share" style="float:right">Cancel</button> </div>
<div class="span-8 last" id="share-loader-container" style="display:none;float:right;" align="center">
<img src="/fonykweb/img/ajax-loader.gif" id="loader" alt=""> </div>
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 0px; left: 0px; display: none; "></ul></div></div>
It functions on 3 different places on my site. In 2 it works just fine, but in the other, after the classes are swapped and the values change and the program enters the jQuery core code block, it's all changed back. When debugging I can see that my code gets executed, but when the core gets executed it all gets reverted, any idea what could be happening?
UPDATE:
Found the code that was messing it up, I seemed to have got careless when coding and coded it twice there, so it was getting called correctly, but twice, so it set the values back. I'm gonna give the answer to John Strickler since only he posted one.
Not a clue on what's happening... but try reducing your code like this:
$(this).toggleClass('green red');
$('#ShareTwitterPublish').val(function () { return +!$(this).val(); });