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>
Related
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 want to be able to put my variable in my html action="" so that i can change the search engine I use in one click. instead of having to make another html page.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="searchbar">
<form action="[SEARCH VAR]" method="get">
<input autocomplete="off" type="text" name="q" placeholder=searchvar id="mySearch">
</form>
</p>
<button type="button" onclick="var search=https://www.duckduckgo.com/">
duckduckgo
</button>
<p id="demo"></p>
</div>
</body>
</html>
is there anyway to do it with this code.
You cannot have arbitrary HTML attributes be evaluated as JavaScript. Instead you'd use the DOM API to change the action property of the form element.
function setSearchEngine(engine) {
document.querySelector('form').action = engine;
}
Use as
<button type="button" onclick="setSearchEngine('https://www.duckduckgo.com/')">
duckduckgo
</button>
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
Hi I have been using mechanize and python to try and upload a file to a website, so far Ive been succesfull but im stuck at the upload page. I know mechanize does not work with JavaScript but I was wondering if anyone knows a way that I could pass a file directory to the form to upload it, any help will be greatly appreciated.
<link rel="stylesheet" type="text/css" href="cssABI.css" />
<link rel="stylesheet" type="text/css" href="ABIDynamicMenus.css" />
<html>
<head>
<title>File Upload Provided by Aeries Browser Interface</title>
<script language="JavaScript" src="ABIjava.js"></script>
</head>
<body vlink="Blue">
<form name="frmValues" id="frmValues" method="post" action="FileUpload/Default.aspx?cache=5%2F19%2F2011+5%3A02%3A22+PM&LoadID=txtUploadedFileID&LoadNM=">
<input type="hidden" name="UserType" id="UserType" value="P" />
<input type="hidden" name="username" id="username" value="69297" />
<input type="hidden" name="number" id="number" value="200673" /
<input type="hidden" name="Check1" id="Check1" value="c91097e8cad20b230024a190d8867b3c65aceaaef6297c3788dd5b017bb89b2b" />
<input type="hidden" name="Check2" id="Check2" value="163f01c431991367a988152a35b947fa339359a7124c8fe9bc390d9c06f48a16" />
</form>
<script type="text/javascript">document.getElementById('frmValues').submit();</script>
</body>
</html>
Mechanize handles file uploads to forms like this:
form.add_file(open("NAME/LOCATION OF FILE"), "MIME TYPE", "NAME OF FILE")
br.form.add_file(open("file.txt"), "text/plain", "file.txt")