I have two radio button, and I want to show some value on my html page according to value which a user selects in the radio button.
my html file:
<form action="">
<input type="radio" name="calenders" value="calendar_details_b2b">B2B
<br>
<input type="radio" name="calenders" value="calendar_details_b2c">B2C
</form>
<div id="calendar_details_b2c" >
content of B2C
</div>
<div id="calendar_details_b2b">
content of B2B
</div>
here is the JS fiddle which is working fine: https://jsfiddle.net/0b0xp5xm/9/
Now when I change the Id's , it is not working, https://jsfiddle.net/vjLnou8h/1/
EDIT
I have added this code in my rails application _form.html.erb which i am rendering on new.hrml.erb page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('input[type=radio][name=calenders]').change(function () {
$('#calendar_details_b2b').css("display","none");
$('#calendar_details_b2c').css("display","none");
console.log($(this).val());
var fieldToShow = $(this).val();
$("#" + fieldToShow).css("display","block");
});
});
</script>
But It is still not working.
Once you add the JQuery reference, it works just fine.
https://jsfiddle.net/vjLnou8h/2/
<html>
<head>
<style>
#data_Analysis,
#study_Design {
display: none;
}
</style>
</head>
<body>
<form action="">
<input type="radio" name="calenders" value="study_Design">B2B
<br>
<input type="radio" name="calenders" value="data_Analysis">B2C
</form>
<div id="study_Design">content of B2B</div>
<div id="data_Analysis" >content of B2C</div>
<!-- It's generally better to put your scripts just before the <body> tag closes
because by the time the browser gets that far, the DOM has been read. Also,
it can speed up page load times. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('input[type=radio][name=calenders]').change(function () {
$('#study_Design').css("display","none");
$('#data_Analysis').css("display","none");
console.log($(this).val());
var fieldToShow = $(this).val();
$("#" + fieldToShow).css("display","block");
});
</script>
</body>
</html>
Related
I'm very new to jQuery. I've been trying to use the .serialize method in jQuery, but I can not seem to garner a response. I've checked console on Microsoft Edge, Internet Explorer, and Chrome but there's no indication of anything happening past connecting to the latest library (3.4.1). My HTML and JavaScript code are below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script language="JavaScript" type="text/javascirpt" src="https://code.jquery.com/jquery-3.4.1.js">
</script>
</head>
<body>
<form name="ourform" id="ourform" action=''>
<select name="salute">
<option>Mr.</option>
<option>Mrs.</option>
</select>
<br>
First Name: <input type="text" name="firstname"/>
Last Name: <input type="text" name="lastname"/>
<br>
<select name="region" multiple="multiple">
<option>North</option>
<option>South</option>
<option>East</option>
<option>West</option>
</select>
<br>
<textarea rows="6" cols="20" name="comment">
</textarea>
<input type="submit" name="g" value="submit" id="g"/>
</form>
<div class="results">Your Results</div>
<script language="JavaScript" type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js">
$(document).ready(function(){
$('#ourform').submit(function(event){
event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>
</body>
</html>
Any help you could provide would be greatly appreciated.
Edit: Since it seems you want to disable the default submit behavior for the button, adding the type="button" attribute removes the need to cancel the default behavior.
When you are including your own javascript within <script> tags you don't need the src attribute (this was causing the 404)
updated jsfiddle
...
<button id="g" name="g" value="submit">Submit</button>
</form>
<div class="results">Your Results</div>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$('#g').click(function(event) {
//event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>
</body>
</html>
The $ is undefined is caused by jquery failing to load, which is caused by misspelling 'javascript' in
<script language="JavaScript" type="text/javascirpt" src="https://code.jquery.com/jquery-3.4.1.js">
</script>
You can't include an src attribute and have data in the tag - if you have src, your script tag must be empty.
Simply use two separate ones:
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#ourform').submit(function(event){
event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>
I have 3 files. a1.js, a2.js.& main.jsp. Main.jsp has two tabs each having its own functions. a1.js can access 1st tab elements which has multiple checkboxes and a text area where the options selected in the check boxes would be added to the text area. a2.js can access 2nd tab elements which has two radio buttons (yes / no). Depending on the input of the radio buttons, I want some check boxes to checked or unchecked in the 1st tab. How can I acheive this using javascript or jquery? Here is the code:
a1.jsp
<html>
<head>
<meta charset="ISO-8859-1">
<title>Sample Web page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
function changeTA() {
var inputElements = document.getElementsByName("favorite_pet");
for(var i=0; inputElements[i]; ++i){
if(inputElements[i].checked){
$('#ta').val($('#ta').val()+inputElements[i].value);
}
}
}
</script>
</head>
<body>
<form>
<legend>What is Your Favorite Pet?</legend>
<input type="checkbox" name="favorite_pet" id="check_cat" value="Cats" onchange="changeTA()">Cats<br>
<input type="checkbox" name="favorite_pet" id="check_dog" value="Dogs" onchange="changeTA()">Dogs<br>
<input type="checkbox" name="favorite_pet" id="check_bird" value="Birds" onchange="changeTA()">Birds<br>
<br>
<textarea id="ta" rows="4" cols="50">
</textarea>
</form>
</body>
</html>
a2.jsp
<html>
<head>
<meta charset="ISO-8859-1">
<title>Sample Web page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
function changeTA() {
///code to make changes in a2.jsp
}
</script>
</head>
<body>
<form>
<legend>Do you want Cat?</legend>
<input type="radio" name="CatLover" id="cat_yes" value="yes" onclick="changeTA()">Yes<br>
<input type="radio" name="CatLover" id="cat_no" value="no" onclick="changeTA()">No<br>
<input type="submit" value="Submit"
<br>
</form>
</body>
</html>
What I want to when yes is checked in the second jsp page, cats should be added in the text are in the first html and clicking on submit should submit the data from both jsp's/ Also, something t be noted both jsp s are included in another jsp page on different tabs. How can I acheive this?
I am trying to change the text inside the <label> tags with the chosen file's name from <input type="file" />
I have tried this, but it doesn't work:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#files').on("change",function() {
console.log("change fired");
var i = $(this).prev('label').clone();
var file = $('#files')[0].files[0].name;
console.log(file);
$(this).prev('label').text(file);
});
</script>
</head>
<body>
<div class="upload_firmware_container">
Please upload the provided <span style="color:#e11422">firmware.bin</span> file and/or <span style="color:#e11422">spiffs.bin</span> file.</br>
<!-- action="/doUpdate" -->
<form method="POST" enctype="multipart/form-data">
<label class="file_input_label" for="files">Browse files</label>
<input id="files" type="file" name="update">
<input class="upload_button" type="submit" name="getUpdate" value="Update">
</form>
</div>
</body>
</html>
As you can see I have 2 script sources. The first one is local, and it worked with all my little scripts. I have added the second one because I have found it in the example I got inspired from.
What do you think?
jQuery is welcomed.
Resolve:
It did not work because the script has to be after the element in question.
Moving the script at the end of the HTML page solved everything.
The reason is because html loads top to bottom and your code runs the scripts before any elements are loaded on the page.
One solution:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="upload_firmware_container">
Please upload the provided <span style="color:#e11422">firmware.bin</span> file and/or <span style="color:#e11422">spiffs.bin</span> file.</br>
<!-- action="/doUpdate" -->
<form method="POST" enctype="multipart/form-data">
<label class="file_input_label" for="files">Browse files</label>
<input id="files" type="file" name="update">
<input class="upload_button" type="submit" name="getUpdate" value="Update">
</form>
</div>
</body>
<script>
$('#files').on("change",function() {
console.log("change fired");
var i = $(this).prev('label').clone();
var file = $('#files')[0].files[0].name;
console.log(file);
$(this).prev('label').text(file);
});
</script>
</html>
Reference this post for more solutions: stackoverflow.com
Is it possible to have a group of inactive fields where if one of the fields is clicked some of the fields become mandatory and some segments of code are run? Say for example you have three fields which are shown:
<input type="text" id="gov1" name="gov1">
<input type="text" id="parentb" name="parentb">
<input type="checkbox" name="child" id="child">
All three of these fields are initially inactive; but say you click on one of the fields it now makes the rest active and mandatory, and some segment of code is run on the field "parentb" and it is attributed at readonly.
window.onload = function(event)
{
var $input2 = document.getElementById('dec');
var $input1 = document.getElementById('parentb');
$input1.addEventListener('keyup', function()
{
$input2.value = $input1.value;
});
}
I have done a bit of searching around but i can't seem to find anything of use for this specific situation and i'm quite new to JavaScript so any sort of help would be great. Is this at all possible using JavaScript? Or is something similar to this possible?
This method you are looking is called 'chained-select' method.
jQuery framework is used for example below:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<form action="" method="get">
<label>
<input name="Government" type="checkbox" value="">Government</label>
<br>
<label>
<input name="Parent" type="checkbox" id="parent_child_group" value="">Parent</label>
<br>
<label>Name of Child
<input type="text" name="parent_child" value="" class="parent_child_group"></label>
<br>
<label>Other
<input type="text" name="parent_other" value="" class="parent_child_group"></label>
</form>
<script type="text/javascript">
$(document).ready(function () {
$(function() {
enable_cb();
$("#parent_child_group").click(enable_cb);
});
function enable_cb() {
if (this.checked) {
$("input.parent_child_group").removeAttr("disabled");
} else {
$("input.parent_child_group").attr("disabled", true);
}
}
});
</script>
</body>
</html>
Working example on JSFiddle: http://jsfiddle.net/farondomenic/fg7p8/1/
I have to add a calendar text box dynamically on each click on a link. I have tested some codes. For the first declaration it works and not for the others.
Here's my code:
<head>
<script type="text/javascript">
$(function () {
$(".hajanDatePicker").datepicker();
});
</script>
<script type="text/javascript">
var intTextBox=0;
function addElement(){
var contentID = document.getElementById('content');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','txtDatePicker');
newTBDiv.innerHTML +="Date:<input id='txtDatePicker' type='text' name='test1'>";
contentID.appendChild(newTBDiv);
}
</script>
</head>
<body>
<form id="form1" method="get">
<div id="content">
<input type="text" id="txtDatePicker" name="test1"/>
</div>
<p><a href="javascript:addElement();" >Add</a>
</form>
</body>
When the form loads can get the calender. After clicking "Add" it just opens as a normal text box and not as calendar.
Just call
$(".hajanDatePicker").datepicker();
at the bottom of addElement function.
And change
<input id='txtDatePicker' type='text' name='test1'>
to
<input id='txtDatePicker' type='text' class='hajanDatePicker' name='test1'>
Also, you have multiple inputs on your page with the same id: txtDatePicker.