jQuery plugin is not working(depends-on) - javascript

<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!

Related

Separate the user input with semicolon javascript html

I am not javascript html php expert but I would like to study I just wanted to ask for advice Is it possible to make the user can enter single or Multiple input of email in textbox separated by ; using javascript just like in outlook,yahoo,email?
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
email <input type="text" name="FirstName" value="Mickey"><br>
</form>
</body>
</html>
Just Enter the text and click in the text box emails are separated
<html lang="en">
<head>
<title>Jquery - input tags plugin example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.js"></script>
</head>
<body style="background: #337AB7">
<div style="width: 500px; margin: 0px auto;">
<h2 style="font-family:cursive;">Jquery - input tags plugin example</h2>
<input name="tags" id="input-tags" style="width:500px !important" />
</div>
<script type="text/javascript">
$('#input-tags').tagsInput();
</script>
</body>
</html>

Onclick not working with outside .JS file

what am I doing wrong here? I got a separate js file from my html but onclick doesn't seem to reach the js file I have. It works though if I place the function code inside the html. Help me.
//jlhtml.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text\javascript" src="jljs.js"></script>
<meta charset="utf-8">
</head>
<body>
<center>
<fieldset>
<p>
Search here: <input type="text" id="txtsearch"/> &nbsp
<button onclick="Search()">Find now</button>
</p>
</fieldset>
</center>
</body>
</html>
//jljs.js file below
function Search()
{
var me = (d3.select("#txtsearch").property("value"));
alert(me);
}
I created a short snippet which binds the Search function to the button click event using d3.
var searchButton = d3.select("#searchButton").on("click", Search);
function Search() {
var me = (d3.select("#txtsearch").property("value"));
alert(me);
}
<!DOCTYPE html>
<html lang="en">
<script src="https://d3js.org/d3.v3.min.js"></script>
<meta charset="utf-8">
<body>
<center>
<fieldset>
<p>
Search here: <input type="text" id="txtsearch" /> &nbsp
<button id="searchButton">Find now</button>
</p>
</fieldset>
</center>
</body>
</html>

Using map function of jquery to alert the values of checkbox

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

Append radio button using JQuery vs HTML - Bootstrap formats the text differently

I'm using JQuery to add radio buttons to a form and I noticed that the button text is formatted bold (when compared to marking up a radio button in HTML, or text in general).
Note this behaviour does not occur when I comment out the Bootstrap library.
How can I force the text to remain unformatted?
<!DOCTYPE html>
<html lang="en" xmlns:background-color="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div>Normal text</div>
<form id="myJSForm" ></form>
<form id="myNormalForm">
<input type="radio">myNormalForm</input>
</form>
</body>
<script>
var myRadioButton = $('<input>',{
type: 'radio',
name: 'myRadio',
value: 'myRadio'
});
$('<label>', {
insertAfter:'#myJSForm',
append: [myRadioButton, 'myJSForm']
});
</script>
</html>
Change css of label as :
label { font-weight:400!important; }
Another way to insert input element
<!DOCTYPE html>
<html lang="en" xmlns:background-color="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div>Normal text</div>
<form id="myJSForm" ></form>
<form id="myNormalForm">
<input type="radio">myNormalForm</input>
</form>
</body>
<script>
var myRadioButton = '<input type="radio">myJSForm</input>'
$('#myJSForm').append(myRadioButton);
</script>
</html>

Append the results from input fields from one page and show them on another page

I'm trying to do the following:
- I have 2 pages (page 1 with input fields & page 2 where the entered input should display)
- I need to get all that was typed from the first input field, and put the results inside the tag "content" of the 2nd page.
1º Page Input :
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Page 1 - Input</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script>
function submit() {
var code = $('textarea[name=message]').val(); //Input Code HTML
$("#iframeId").contents().find("body").html($("<div class='content'></div>").append(code));
}
</script>
</head>
<body>
<h2>Input</h2>
<textarea name="message" id="input" rows="10" cols="100"></textarea>
<input type="button" value="Submit" onclick="submit();" />
<iframe id="iframeId" name="iframeId" src="layout.html"></iframe>
<div id="test">
Text
</div>
</body>
</html>
2º Page Layout :
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Page 2 - Layout</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
</head>
<body>
<div class="header"></div>
<div class="content"></div>
<div class="sidebar"></div>
<div class="foot"></div>
</body>
</html>
THANKS!
This should work if both files are having the same origin:
<script>
function submit() {
var code = $('textarea[name=message]').val(); //Input Code HTML
$('#iframeId').contents().find('.content').text(code);
}
</script>
You were almost there :)
UPDATE:
To insert on submit:
<script type="text/javascript">
$('#iframeId').load(function(){
$('input[type="button"]').on('click',function(){
$('#iframeId').contents().find('.content').html($('textarea[name=message]').val());
});
});
</script>
To insert on type:
<script type="text/javascript">
$('#iframeId').load(function(){
$('textarea[name=message]').on('input',function(){
$('#iframeId').contents().find('.content').html($(this).val());
});
});
</script>

Categories