Here is my code:
HTML:
<label><input type="radio" name="radio"> Checkbox 1</label>
<label><input type="radio" name="radio"> Checkbox 2</label>
JavaScript:
$(document).ready(function(){
$(":radio").behaveLikeCheckbox();
});
JSFiddle.
I got the code from here. My problem is that I can't make it work.
Can someone help?
You have to include jQuery and the behaveLikeCheckbox plugin to make this work. Here is an updated fiddle: http://jsfiddle.net/mq8Zq/174/
So in your HTML document:
<label><input type="radio" name="radio"> Checkbox 1</label>
<label><input type="radio" name="radio"> Checkbox 2</label>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="relative/path/to/plugin/or/cdn"></script>
<script>
$(document).ready(function(){
$(":radio").behaveLikeCheckbox();
});
</script>
sadly, that example page doesn't explain anything...
looking at the source code of the page, it seems that you have to include jquery and the extension for the behavior
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.radio.checkbox.behavior.js"></script>
You need to include some JS files : JQuery, and the plugin for the checkbox.
Like this :
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="http://www.digitss.com/jquery/jquery.radio.checkbox.behavior.js"></script>
</head>
<body>
<label><input type="radio" name="radio"> Checkbox 1</label>
<label><input type="radio" name="radio"> Checkbox 2</label>
<script>
$(document).ready(function(){
$(":radio").behaveLikeCheckbox();
});
</script>
</body>
</html>
The only thing you have to do is put a different "name" to your Radios. When you put the same name to them, only one gets "selected".
Make type="checkbox" and name Same
Related
I am trying to add two two functions in one input tag. BUT failed many times.
What i am trying to do ?
There are two functions in different input tags in my HTML template.
One for add tag by , .
AND second for autocomplete.
I am trying to add autocomplete and tags input in the same textinput, So i can use autocomplete and add tag at same time.
home.html
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<link href="{{ STATIC_URL }}user_tags/css/jquery.tagit.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">
<script src="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
#This function is for `autocomplete`.
<form>
<label for="product">Product</label>
<input type="text" name="product" id="product">
</form>
</form>
<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>
#This function is for `add tag`
<b>Add Tags </b>
<input type="text" data-role="tagsinput" class="form-control" name="tags">
<br>
What have i tried ?
I see an answer that if i add semicolons at the end of the both tag then it will work BUT it didn't work for me.
<form>
<label for="product">Product</label>
<input type="text" name="product" id="product"; data-role="tagsinput";>
</form>
I don't know what to do.
Any help would be Appreciated.
I'm confused what you are asking. If you are trying to mark an element (input) to be selected by different queries, you can use classes. If you are trying to run 2 functions with one function call, wrap the two functions in a single function.
I have the following code on a web page:
<script>
jQuery(function(){
console.log($("[name='type']:checked").val());
})
</script>
<form>
A <input type="radio" name="type" value="A">
B <input type="radio" name="type" value="B"><br>
<input type="submit" name="submit" value="submit">
</form>
When I load the page, the output in the console is, naturally, 'undefined'. Let's say I select the 'A' option, click the submit button and then click the browser's back button. The 'A' option is still checked but the console output is also still 'undefined'. That doesn't seem right. Obviously I want the output to be 'A'. What am I doing wrong?
Are you sure that you are importing jQuery before running the script?
When recreating this issue, I got your wished result simply by importing jQuery first.
Working JS-fiddle: https://jsfiddle.net/961qgy4f/
Code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form>
<input type="radio" name="type" value="A">
<input type="radio" name="type" value="B"><br>
<input type="submit" name="submit" value="submit">
</form>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script>
jQuery(function(){
console.log($("[name='type']:checked").val());
});
</script>
</body>
</html>
I have a form where I have a file input field, where I can choose multiple files. Now the problem is that
If I choose 3 files then it should create 3 input fields having files from 1 to 3. Eg can be seen below.
I want to to do it using jquery. The code which i have written is
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<form name="form" class="form-group" method="post" action="" enctype="multipart/form-data">
<input type="file" id="track" name="tracks" multiple>
<button type="button" id="btn-submit"> Upload</button>
<script>
$(document).on("click", "#btn-submit", function() {
});
</script>
</body>
</html>
What approach or methodologies should I use to get the result expected?
Any help is appreciated.
I would like to use a pdfform.js library(package) within react app. I have tried by using the npm pdfform but no luck.
Any help is much appreciated.
https://github.com/phihag/pdfform.js
Here is a working demo, maybe it will help you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>pddform.js demo</title>
<link rel="stylesheet" href="https://phihag.github.io/pdfform.js/docs/demo.css" />
</head>
<body>
<div class="error"></div>
<form class="url_form">
<div>Upload a PDF form file: <label><input type="file" name="file" /></label></div>
<label>or download one: <input type="text" size="40" value="Spielberichtsbogen_2BL.pdf" name="url" /><button role="submit">Download</button></label>
</form>
<form class="cur_file"></form>
<form class="lib_form">
PDF library:
<label><input type="radio" name="pdflib" value="minipdf" checked="checked" />minipdf</label>
<label><input type="radio" name="pdflib" value="pdf.js" />PDF.js</label>
</form>
<form class="fill_form"><button class="fill" disabled="disabled">Fill and download PDF</button></form>
<form class="list_form">
</form>
<div class="loading">Loading (this may take a while since PDF.js is gigantic)</div>
<!-- In a real-life scenario, you want to chose EITHER minipdf (smaller) -->
<script src="https://phihag.github.io/pdfform.js/minipdf.js"></script>
<!-- .. OR pdf.js (huge, but better compatibility).
pdf.worker.js is slightly modified to export the actual classes we care about -->
<script src="https://phihag.github.io/pdfform.js/customlibs/pdf.worker.js"></script>
<script src="https://phihag.github.io/pdfform.js/minipdf_js.js"></script>
<!-- pako and pdfform.js are required either way -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.3/pako.min.js" integrity="sha256-X7u/eQo6oIgWqc5jOmTjQn3loM8Lse0ock76Gkkn/Ro="
crossorigin="anonymous"></script>
<script src="https://phihag.github.io/pdfform.js/pdfform.js"></script>
<!-- FileSaver.js is just needed for the demo, although you'll probably use it in some form as well -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.0.0/FileSaver.min.js"></script>
<script src="https://phihag.github.io/pdfform.js/docs/demo.js"></script>
</body>
</html>
I have this simple slider in jquery mobile
<label for="slider-1">Input slider:</label>
<input type="range" name="slider-1" id="slider-1" value="60" min="0" max="100" data-highlight="true" data-theme="b" data-track-theme="b" data-mini="true"/>
The code is nearly copied and pasted from documentation (https://demos.jquerymobile.com/1.2.0/docs/forms/slider/) and the slider works. Value, data-theme, data-track-theme are fine and working. Instead, data-mini and data-highlight have no effect on the slider... Tried on different browsers, too. Why this could happen?
EDIT:
Tried the script way. No fortune too.
<script>
$(document).ready(function(){
$('#slider-1').slider({ mini: true });
});
</script>
Solved. Wrong library version
Changing
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
to
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
solved the problem