i'm trying to create a "chat" on my website, i wrote question and answer in html (radio) e hide them when not selected with js, also after the first selection the script hide the other radio and disable the selected one. Probably i should simplify the all code but i'm kind a noob with Js. There's a more simple way to achieve the same result? Should I convert it in php? Anyone can help?
Thanks a lot
<!DOCTYPE html>
<html>
<head>
<title>progettodont</title>
<style type="text/css">
.classQuestion {
margin: 10px;
padding: 10px;
border-radius: 7px;
color: #fff;
background-color: #119b97;
display: inline-block;
max-width: 700px;
}
.classAnswerActive {float: right;}
.divClassAnswer {text-align: center}
.classAnswer { margin: 10px;
padding: 10px;
border-radius: 7px;
color: #414042;
background-color: #ccc;
max-width: 700px;
display: inline-block;
}
.classRadio {display: none;}
</style>
</head>
<body>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('.classAnswer').click(function(){
$('.classAnswer').not(this).hide();
});
});
</script>
<script>
$(document).ready(function () {
$('.classAnswer').on('click', function () {
$('.classAnswer').addClass('classAnswerActive');
});
});
</script>
<div class="classQuestion">QUESTION 1_1</div>
<div class="divClassAnswer">
<label for="idAnswer_1_1" class="classAnswer">ANSWER 1_1</label>
<input type="radio" name="nameAnswer_1_1" class="classRadio"
id="idAnswer_1_1" value="Answer_1_1">
<label for="idAnswer_1_2" class="classAnswer">ANSWER 1_2</label>
<input type="radio" name="nameAnswer_1_2" class="classRadio"
id="idAnswer_1_2" value="Answer_1_2">
<label for="idAnswer_1_3" class="classAnswer">ANSWER 1_3</label>
<input type="radio" name="nameAnswer_1_3" class="classRadio"
id="idAnswer_1_3" value="Answer_1_3">
</div>
<script type="text/javascript">
$(function () {
$("#idAnswer_1_1").click(function () {
if ($(this).is(":checked")) {
$("#idQuestion_2_1").show();
} else {
$("#idQuestion_2_1").hide();
}
});
});
</script>
<div class="classQuestion" id="idQuestion_2_1" style="display: none">
QUESTION 2_1
</div>
<script type="text/javascript">
$(function () {
$("#idAnswer_1_2").click(function () {
if ($(this).is(":checked")) {
$("#idQuestion_2_2").show();
} else {
$("#idQuestion_2_2").hide();
}
});
});
</script>
<div class="classQuestion" id="idQuestion_2_2" style="display: none">
QUESTION 2_2
</div>
<script type="text/javascript">
$(function () {
$("#idAnswer_1_3").click(function () {
if ($(this).is(":checked")) {
$("#idQuestion_2_3").show();
} else {
$("#idQuestion_2_3").hide();
}
});
});
</script>
<div class="classQuestion" id="idQuestion_2_3" style="display: none">
QUESTION 2_3
</div>
</body>
I don't know what this has to do with a 'chat' system, however you can make several improvements to your code:
You're including multiple versions of jQuery. Only include a single one.
Place all script within a single <script> in the page, and place any jQuery code in that within a single document.ready event handler.
Use a common class to group the radio elements. Then you can bind a single event handler to that class. You can use a data attribute to store custom meta data about the element which you can then use in the event handler.
Try this:
$(document).ready(function() {
$('.classAnswer').click(function() {
$('.classAnswer').not(this).hide();
$(this).addClass('active');
});
$(".classRadio").on('change', function() {
$('#' + $(this).data('target')).toggleClass('active', this.checked);
});
});
.classQuestion {
margin: 10px;
padding: 10px;
border-radius: 7px;
color: #fff;
background-color: #119b97;
display: inline-block;
max-width: 700px;
display: none;
}
.classQuestion.active { display: inline-block; }
.divClassAnswer {
text-align: center
}
.classAnswer {
margin: 10px;
padding: 10px;
border-radius: 7px;
color: #414042;
background-color: #ccc;
max-width: 700px;
display: inline-block;
}
.classAnswer.active {
float: right;
}
.classRadio {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="classQuestion active">QUESTION 1_1</div>
<div class="divClassAnswer">
<label for="idAnswer_1_1" class="classAnswer">ANSWER 1_1</label>
<input type="radio" name="nameAnswer_1_1" class="classRadio" id="idAnswer_1_1" value="Answer_1_1" data-target="idQuestion_2_1">
<label for="idAnswer_1_2" class="classAnswer">ANSWER 1_2</label>
<input type="radio" name="nameAnswer_1_2" class="classRadio" id="idAnswer_1_2" value="Answer_1_2" data-target="idQuestion_2_2">
<label for="idAnswer_1_3" class="classAnswer">ANSWER 1_3</label>
<input type="radio" name="nameAnswer_1_3" class="classRadio" id="idAnswer_1_3" value="Answer_1_3" data-target="idQuestion_2_3">
</div>
<div class="classQuestion" id="idQuestion_2_1">QUESTION 2_1</div>
<div class="classQuestion" id="idQuestion_2_2">QUESTION 2_2</div>
<div class="classQuestion" id="idQuestion_2_3">QUESTION 2_3</div>
Related
I want to take the value on an input field and display what the user has entered using JQuery on clicking a submit button. The problem is that when I click the button the console.log is blank without the user text and this is driving me crazy because I can't figure out why, here is my html:
const userLocation = $('#location').val();
$('#submit').on('click', getInfo);
function getInfo() {
console.log(userLocation)
}
#content {
width: 400px;
}
#request {
text-align: center;
}
.bl {
width: 300px;
}
#current {
text-align: center;
font-size: 2em;
}
#upcoming {
text-align: center;
}
.condition {
text-align: left;
display: inline-block;
}
.symbol {
font-size: 4em;
display: inline-block;
}
.forecast-data {
display: block;
}
.upcoming {
display: inline-block;
margin: 1.5em;
}
.label {
margin-top: 1em;
font-size: 1.5em;
background-color: aquamarine;
font-weight: 400;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Forecatser</title>
</head>
<body>
<div id="content">
<div id="request">
<input id="location" class='bl' type="text">
<input id="submit" class="bl" type="button" value="Get Weather">
</div>
<div id="forecast" style="display:none">
<div id="current">
<div class="label">Current conditions</div>
</div>
<div id="upcoming">
<div class="label">Three-day forecast</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="./weather.js"></script>
</body>
</html>
Why does the console print blank lines with no value, what am I doing wrong?
You're reading only the initial value of the input, not after it has been clicked. You should read the value inside of your callback, to get it's value at the time of clicking:
$('#submit').on('click', getInfo);
function getInfo() {
const userLocation = $('#location').val();
console.log(userLocation)
}
Here is working sample with small change of your code
$('#submit').on('click', function(){
getInfo();
});
function getInfo() {
const userLocation = $('#location').val();
console.log(userLocation)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Forecatser</title>
<style>
#content { width: 400px; }
#request { text-align: center; }
.bl { width: 300px; }
#current { text-align: center; font-size: 2em; }
#upcoming { text-align: center; }
.condition { text-align: left; display: inline-block; }
.symbol { font-size: 4em; display: inline-block; }
.forecast-data { display: block; }
.upcoming { display: inline-block; margin: 1.5em; }
.label { margin-top: 1em; font-size: 1.5em; background-color: aquamarine; font-weight: 400; }
</style>
</head>
<body>
<div id="content">
<div id="request">
<input id="location" class='bl' type="text">
<input id="submit" class="bl" type="button" value="Get Weather">
</div>
<div id="forecast" style="display:none">
<div id="current">
<div class="label">Current conditions</div>
</div>
<div id="upcoming">
<div class="label">Three-day forecast</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="./weather.js"></script>
</body>
</html>
Please check the working demo
https://jsfiddle.net/o2gxgz9r/73662/
$(document).ready(function() {
$('#submit').on('click', getInfo);
function getInfo() {
const userLocation = $('#location').val();
alert(userLocation);
}
});
I followed the examples that I found but for some reason clicking on the above div won't trigger a click on the below input. Can someone tell me where I'm going wrong?
$(document).on('click', '#uploader', function(event) {
$("#url").click();
});
#uploader {
width: 480px;
height: 100px;
line-height: 100px;
border: 2px dashed #443d66;
cursor: pointer;
color: #777;
font-family: 'Arial';
font-weight: bold;
text-align: center;
margin-bottom:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="uploader">
Click
</div>
<input type="text" name="url" id="url">
</body>
</html>
If you need the click to focus on the #url element, use .focus() instead of .click():
$(document).on('click', '#uploader', function(event) {
$("#url").focus();
});
#uploader {
width: 480px;
height: 250px;
line-height: 250px;
border: 2px dashed #443d66;
cursor: pointer;
color: #777;
font-family: 'Arial';
font-weight: bold;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="uploader">
Click
</div>
<input type="text" name="url" id="url">
</body>
</html>
$(document).on('click', '#uploader', function(event) {
$("#url").click();
});
#uploader {
width: 480px;
height: 250px;
line-height: 250px;
border: 2px dashed #443d66;
cursor: pointer;
color: #777;
font-family: 'Arial';
font-weight: bold;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="uploader">
Click
</div>
<input type="file" name="url" id="url" onclick="console.log('clicked!!')">
</body>
</html>
I guess you want to open native file browser window on click. Check the snippet, there in an click handler attached to the input too.
You can use this for further processing.
I hope on click of div you want to show file upload window.
For that Convert type="text" to type="file" and it will work fine.
Working snippet:-
$(document).on('click', '#uploader', function(event) {
$("#url").click();
});
#uploader {
width: 480px;
height: 250px;
line-height: 250px;
border: 2px dashed #443d66;
cursor: pointer;
color: #777;
font-family: 'Arial';
font-weight: bold;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="uploader">
Click
</div>
<input type="file" name="url" id="url">
</body>
</html>
Note:-
Your code is working fine, but there is no click handler written to catch that event. So notting happening
You can assure by adding click handler to your code like below:-
$(document).on('click', '#uploader', function(event) {
$("#url").focus(); // you can apply .click() too
});
/* for click add the even handler like below
$('#url').click(function(){
$(this).val('Hey click worked!').focus();
});
*/
#uploader {
width: 480px;
height: 250px;
line-height: 250px;
border: 2px dashed #443d66;
cursor: pointer;
color: #777;
font-family: 'Arial';
font-weight: bold;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="uploader">
Click
</div>
<input type="text" name="url" id="url">
</body>
</html>
Instead of this
$(document).on('click', '#uploader', function(event) {
$("#url").click();
});
Use like this
$(document).on('click', '#uploader', function(event) {
$("#url").trigger('click);
});
Are you missing an click event for the #url element?
When triggering a click event for an element using .click() you have to define an actual click event for it.
$(document).on('click', '#uploader', function(event) {
$("#url").click();
});
$("#url").click(function(){
alert('asd');
});
This could be the only reason, unless the scripts aren't loaded properly, or you are getting some errors while running your JS.
See: JSFiddle
In case you want the click event to focus on your input element, you'd use .focus(), as described in a previous answer written by Alive to Die.
See: JSFiddle
Click & Focus, just modify few code
$('#uploader').on('click', function(event) {
$("#url").click().focus();
});
#uploader {
width: 480px;
height: 100px;
line-height: 150px;
border: 2px dashed #443d66;
cursor: pointer;
color: #777;
font-family: 'Arial';
font-weight: bold;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="uploader">
Click
</div>
<br>
<input type="text" name="url" id="url" onclick="alert('clicked!!')">
</body>
</html>
I'm trying to create a program where the user will input some text in a field and when pressing "Start" the text will go to a paragraph but it will be shown backwards.
Trying to do this with Html,jquery and Css.
How can I do this?
Here's the Html:
<!DOCTYPE html>
<html id="head">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="BackTalk.js"></script>
<link rel="stylesheet" type="text/css" href="BackTalk.css">
<title>BackTalk</title>
</head>
<body id="body">
<div id="Main">
<form>
<input id="input" type="number" value="Start">
<button id="input2" onclick="">Start</button>
</form>
</div>
<form id="frm">
<p id="para"></p>
</form>
</body>
</html>
And the $/javascript (Main part I need help with as you can see):
$(document).ready(function () {
$('#input2').click(function () {
});
});
Css (Don't know if needed):
#head {
}
#body {
background-image: url('stardust.png');
}
#Main {
width: 230px;
padding: 10px;
border: 1px double #ffffff;
border-radius: 10px;
margin: auto;
}
#frm {
width: 230px;
height: 500px;
padding: 10px;
border: 1px double #ffffff;
border-radius: 10px;
margin: auto;
}
#input {
border-radius: 10px;
}
#input2 {
border-radius: 10px;
}
Try this http://jsfiddle.net/Tushar490/th778nfs/
$('#input2').click(function () {
var value=$('#input').val();
console.log($('#para').text(value.split("").reverse().join("")));
});
Not sure if this is exactly what you're looking for:
$(document).ready(function () {
$('#startbutton').click(function () {
$('#para').text($('#input').val().split('').reverse().join(''));
});
});
JSFiddle
I was trying to create a Gmail Contextual Gadget and get to know that it doesn't support referencing JS and CSS files. It doesn't load Javascripts and CSS. I have to copy paste the whole CSS and Javascript then only it works.
Please find my code below : It is just to display tabbed layout in gadget.
<link href="http://54.251.60.219/staging/google/gadget_ui/css/smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<script src="http://54.251.60.219/staging/google/gadget_ui/js/jquery-1.9.1.js"></script>
<script src="http://54.251.60.219/staging/google/gadget_ui/js/jquery-ui-1.10.3.custom.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
function() {
$( this ).addClass( "ui-state-hover" );
},
function() {
$( this ).removeClass( "ui-state-hover" );
}
);
});
function showList(){
$('#cust-list').show();
}
function save(){
if(!$('input[name=customer]:checked').length)
alert('You need to select a customer to save an email.');
}
</script>
<style>
#main {
margin: 0px;
padding: 0px;
font-size: small;
}
</style>
<!-- <div id="main" style="display: none">
</div>
<div id="approval" style="display: none">
<img src="http://gadget-doc-examples.googlecode.com/svn/trunk/images/new.gif">
Personalize this gadget
</div>
<div id="waiting" style="display: none">
Please click
I've approved access
once you've approved access to your data.
</div> -->
<div id="loadinggadget"><h2>PS NetSuite Gadget</h2></div>
<style>
body{
font: 62.5% "Trebuchet MS", sans-serif;
margin: 50px;
}
.demoHeaders {
margin-top: 2em;
}
#dialog-link {
padding: .4em 1em .4em 20px;
text-decoration: none;
position: relative;
}
#dialog-link span.ui-icon {
margin: 0 5px 0 0;
position: absolute;
left: .2em;
top: 50%;
margin-top: -8px;
}
#icons {
margin: 0;
padding: 0;
}
#icons li {
margin: 2px;
position: relative;
padding: 4px 0;
cursor: pointer;
float: left;
list-style: none;
}
#icons span.ui-icon {
float: left;
margin: 0 4px;
}
.fakewindowcontain .ui-widget-overlay {
position: absolute;
}
</style>
<!-- Tabs -->
<div id="tabs">
<ul>
<li>Login</li>
<li>Customers</li>
</ul>
<div id="tabs-1">
<table cellpadding='0' cellspacing='0' border='0' width='100%'>
<tr><td bgcolor="white" style="padding:5"><br>
<form method="post" action="#" name="aform" target="_top">
<table>
<tr><td><font face="verdana,arial" size=-1>Login:</font></td><td><input type="text" name="login"></td></tr>
<tr><td><font face="verdana,arial" size=-1>Password:</font></td><td><input type="password" name="password"></td></tr>
<tr><td><font face="verdana,arial" size=-1>Account Id:</font></td><td><input type="text" name="accid"></td></tr>
<tr><td><font face="verdana,arial" size=-1> </font></td><td><font face="verdana,arial" size=-1><input type="submit" value="Save"></font></td></tr>
<tr><td colspan=2><font face="verdana,arial" size=-1> </font></td></tr>
</table>
</form>
</td></tr></table>
</div>
<div id="tabs-2">
<button onclick="showList()"/>Get Customers</button>
<button onclick="save()"/>Save To NetSuite</button>
<div id="cust-list" style="display:none">
<input type="radio" name="customer" value="cust1"> Customer </input><br/>
<input type="radio" name="customer" value="cust1"> Customer </input><br/>
<div>
</div>
</div>
<script type="text/javascript">
gadgets.window.adjustHeight(200);
function initGadget() {
gadgets.window.adjustHeight(200);
}
gadgets.util.registerOnLoadHandler(initGadget);
</script>
]]>
I am getting error : "$ is not defined". But this code works in plain HTML file.
Thanks in advance.
Perhaps your web site uses another library. Try use "jQuery" instead of "$"
Well, #aayushi... gadget container doesn't allow to load files from unsecured http. In your code you are loading files using http
<script src="http://54.251.60.219/staging/google/gadget_ui/js/jquery-1.9.1.js"></script>
Instead of that try using https
<script src="https://54.251.60.219/staging/google/gadget_ui/js/jquery-1.9.1.js"></script>
And if your server/application/project is not using https, then you have to make it first.
And just to be sure of this solution try loading this for jquery and/or for any other library files like: bootstrap, jquery-ui, etc.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
I've searched around for a way to disable the error messages that are displayed next to invalid form elements and I have only found ways to customize the messages, not prevent them altogether.
I tried:
jQuery.extend(jQuery.validator.messages, {
required: ""
}
But that still places a blank space next to my text boxes and throws off the positioning. Anyone know a way that I can do this?
$('#submit').click(function(){
$("#contactform").validate({
errorPlacement: function(error, element) { },
debug:true
})
});
leaving the errorPlacement line blank did the trick.
You could use CSS to hide them
label.error { display:none; }
It's not a perfect solution, but it'll work
I created an over-ride of the existing "required" validator to return no error messages.
Over-Ride Required Method:
// Creates the NEW validator method
jQuery.validator.addMethod('requiredNoMsg', jQuery.validator.methods.required, '');
// Creates a new CSS Rule for the validator method
// so we can add it like "class='requriedNoMsg'".
jQuery.validator.addClassRules('requiredNoMsg', { requiredNoMsg: true });
Full Example:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Demo</title>
<!-- jQuery 1.6.1 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" charset="utf-8"></script>
<!-- jQuery Validate 1.8.1 -->
<script type="text/javascript" src="https://github.com/jzaefferer/jquery-validation/raw/master/jquery.validate.js" charset="utf-8"></script>
<script type="text/javascript" src="https://github.com/jzaefferer/jquery-validation/raw/master/additional-methods.min.js" charset="utf-8"></script>
<style type="text/css">
body { margin: 0; padding: 0; font-family: Verdana, Tahoma, Arial, sans-serif; }
fieldset.main { margin: 1em; padding: 1em; width: 400px; font-size: .9em; }
fieldset.main ol { padding: 1em 1em 0 1em; list-style: none; }
fieldset.main li { padding-bottom: .5em; }
fieldset.main ol li label { display: block; width: 12em; margin-right: 1em; }
input[type=button] { width: 6em; height: 2.5em; }
input[type=checkbox] { }
input[type=text].error { border: 1px dotted red; background-color: yellow;}
</style>
<script type="text/javascript">
jQuery.validator.addMethod('requiredNoMsg', jQuery.validator.methods.required, '');
jQuery.validator.addClassRules('requiredNoMsg', { requiredNoMsg: true });
$(document).ready(function () {
$('#myform').validate(
{submitHandler: function () { alert('Validation Passed!'); }}
);
});
</script>
</head>
<body>
<form id="myform" method="get" action="">
<fieldset class="main">
<ol>
<li>
<label for="CustomerCode" class="left">
Customer Code</label>
<input type="text" id="CustomerCode" name="CustomerCode" class="requiredNoMsg" />
</li>
<li>
<label for="DeliveryCode" class="left">
Delivery Code</label>
<input type="text" id="DeliveryCode" name="DeliveryCode" class="requiredNoMsg" />
</li>
<li>
<input type="submit" id="Add" value="Add" />
</li>
</ol>
</fieldset>
</form>
</body>
</html>