HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>JobSeeker Registration Page </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="../jquery-1.11.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="try.js"></script>
</head>
<body>
<div>
<form>
<input type="checkbox" name="cb" value="First" /> First
<input type="submit" value="Submit" id="sm" /> Submit
</form>
</div>
</body>
</html>
Jquery Code:
$(document).ready(function(){
//alert("hello");
$("#sm").click(function(event){
event.preventDefault();
var searchIDs =
$(".cb:checked").map(function(){
return $(this).attr('value');;
}).get();
alert(searchIDs.join(','));
});
});
I am trying to alert the values of the checkbox on to the browser. But no data is coming. Could anybody please tell me what is the problem with the above code.
You haven't added a class called .cb to your inputs so your selector is never picking them up.
Try this:
$("input[name=cb]:checked")
Or add the missing class:
<input type="checkbox" name="cb" class="cb" value="First" /> First
Related
I tried using the input color tag but i have to click twice on the tag to change the color any way to fix this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form action="">
<label for="color"> Color:</label>
<input
type="color"
name="color"
id="color"
value="#00FFFF"
onclick="changecolor()"
/><br />
</form>
<script>
function changecolor() {
let color = document.getElementById("color").value;
document.body.style.backgroundColor = color;
}
</script>
</body>
</html>
Your code does work, only you are using an incorrect event listener for what you are trying to do.
Simply change your event from onclick to onchange
Like this
<input
type="color"
name="color"
id="color"
value="#00FFFF"
onchange="changecolor()"
/>
Hopefully this makes sense.
I am using one js file for two html page
Here is my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="../assets/css/style.css"> -->
<!-- bootstrap -->
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div id="salestable">
<label for="Type">Today</label>
<input type="radio" id="day" name="months" value="Today" checked>
<label for="Type">Peroid</label>
<input type="radio" id="range-period" name="months" value="Peroid" onchange="getperiod()">
<input type="date" name="Date" id="startdate" >
<input type="date" name="Date" id="end-date" >
</div>
<script src="../db.js"></script>
</body>
</html>
The today radio button is checked by default
i want to add onchange event listner to first input date id = startdate if the today radio button is checked
Here is the code i tried in db.js
if(document.getElementById('day').checked){
// get date element
const day = document.getElementById('startdate');
day.addEventListener("change", function() {
console.log('hi);
});
}
I also tried inside the script tag in html but the code does not work
and another doubt is
if i add the eventlistener to date in script tag in html
like this
<script>
const day = document.getElementById('startdate');
day.addEventListener("change", function() {
console.log('hi');
});
</script>
The code is working fine and logging as hi
but when I add the same code in db.js file the code does not work
Any one help to solve
In your db.js file you forgot ' in console.log('hi);. You have to change it with console.log('hi');
I ran your code as an inline script and it works!
const day = document.getElementById('startdate');
day.addEventListener("change", function() {
console.log('hi');
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="../assets/css/style.css"> -->
<!-- bootstrap -->
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div id="salestable">
<label for="Type">Today</label>
<input type="radio" id="day" name="months" value="Today" checked>
<label for="Type">Peroid</label>
<input type="radio" id="range-period" name="months" value="Peroid" onchange="getperiod()">
<input type="date" name="Date" id="startdate" >
<input type="date" name="Date" id="end-date" >
</div>
</body>
</html>
I want to call a function when the user submit a form, and how to achieve this with external JS script.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>teste</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link type="text/javascript" src="main.js">
</head>
<body>
<h1 class="title">teste</h1>
<form action="a()">
<input type="input1" class="input1" name="verb" id="verb" placeholder="Verb"/>
</form>
</body>
</html>
main.js
function a(){
alert("verb");
}
Follow This code...
HTML file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>teste</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 class="title">teste</h1>
<form >
<input type="text" name="text" id="input" placeholder="Verb" />
<input type="submit" onclick="a()">
</form>
<script src="./index.js"></script>
</body>
</html>
JS File
function a() {
alert('hello');
}
You could add event listener on onsubmit event of form and you can add the external scripts by using script tag.
Example: how to add external JS file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>teste</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="./main.js"></script>
</head>
<body>
//.. html
</body>
</html>
Working Example:
let formElem = document.getElementById("form");
formElem.addEventListener("submit", formSubmitHandler);
function formSubmitHandler(event) {
event.preventDefault();
console.log("Form submitted");
console.log("User entered: " + event.target.elements[0].value);
}
<h1 class="title">teste</h1>
<form id="form">
<input
type="input1"
class="input1"
name="verb"
id="verb"
placeholder="Verb"
/>
<button type="submit" >Submit</button>
</form>
You can add the formSubmitHandler in the main.js file.
<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="dependsOn-1.0.0.min.js"></script>
<script>
$(document).ready(function) {
$('#basicTest .subject').dependsOn({
'#basicTest input[type="checkbox"]': {
checked: true
}
});
});
</script
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="basicTest">
<label>
<input type="checkbox"> Check me
</label>
<input type="text" class="subject">
</form>
</body>
</html>
I am actually trying to implement the basic example which is after click on the "check me" a input box gets displayed. By using the depends on plugin is is not working. These are the files. I placed the script in between the html and head tags. Any suggestions are welcome!
I have a basic asp.net web form application harmonized with JavaScript. There is a jQuery calendar and I try to send selected date to server.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="CalendarSample1.aspx.cs" Inherits="CalendarApplication.CalendarSample1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"/>
<link rel="stylesheet" href="/resources/demos/style.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$(function () {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>Date: <input type="text" id="datepicker" onclick="datepickerSendData()"/></p>
<br />
<input ID="lblDates" />
<br />
<br />
<asp:Button ID="btnTamam" Text="Tamam" runat="server" OnClick="btnTamam_Click" />
</div>
</form>
</body>
</html>
<script type="text/javascript">
function datepickerSendData() {
document.getElementById("lblDates").innerHTML = "YOU CLICKED ME!";
}
</script>
The JavaScript function datepickerSendData has not behave as expected. I expect to change the content of the lblDates however, no change. Could you please point out the problem?
Thanks in advance.
There is no inner html as input is self closing tag.
document.getElementById("lblDates").value = "YOU CLICKED ME!";