How do I access an external and different document using jquery & js? - javascript

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?

Related

Input box alerts the text by clicking a button (Really new to JQuery)

JQuery Part
I just started using JQuery. First I wanted to create a a input box with an button that alerts the text that is in that box. This is the way I wanted to do that.
$(document).ready(function() {
$('#hit').click(function() {
alert($('#term').val());
});
});
That is the code in the html body part. Here im not sure if I have to declare the id with an # or not. I tried both but It didnt work for both.
My Code
<!DOCTYPE html>
<html>
<head>
<title>Button Event</title>
<script src="cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> $(document).ready(function() { $('#hit').click(function() { alert($('#term').val()); }); }); </script>
</head>
<body> <input id="term" type="text" value="enter your search"> <button id="hit" type="button" name="Button">Search</button> </body>
</html>
I am really new to JavaScript and Jquery. When I run this code there are no errors or something like that in the console just blank. The Button and Input field are on the website but when I enter something and click the button after that nothing happens. That´s why im sure there are some mistakes in that code.
$(document).ready(function() {
$('#hit').click(function() {
alert($('#term').val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="term" type="text" value="enter your search" />
<button id="hit" type="button" name="Button">Search</button>
here has worked, do you have imported a jquery library?
Resolution with your code:
<!DOCTYPE html>
<html>
<head>
<title>Button Event</title>
</head>
<body> <input id="term" type="text" value="enter your search"> <button id="hit" type="button" name="Button">Search</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() { $('#hit').click(function() { alert($('#term').val()); }); });
</script>
</body>
</html>

field enable disable javascript not working

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>

Couldn't post values to program

I am trying to POST text values to the different python program based on user selection (through radio button). Program works fine with single form action
<form action='/cgi-bin/prog1.py' method='POST'>
...text input1
...text input2
...submit
</form>
but when using radio button text values are not posted to the program.
Here is the code I tried
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function whichsite(form){
var sites = form.elements.site, i = sites.length;
while (--i > -1){
if(sites[i].checked){
return sites[i].value;
}
}
}
</script>
</head>
<body>
<form action="#" onsubmit="window.open(whichsite(this)); return false; method='POST' ">
<b>Program Jump</b>
<p>
Enter PDB ID:<input type="text" name="PDB_ID"><br>
Enter PDB Chain:<input type="text" name="Chain_ID"><br>
<label><input type="radio" name="site" value="/cgi-bin/prog1.py">P-P</label>
<label><input type="radio" name="site" value="/cgi-bin/prog2.py">P-L</label>
<label><input type="radio" name="site" value="/cgi-bin/prog3.py">P-C</label>
<p>
<input type="submit" value="Submit">
</form>
</body>
</html>
Help me !
I think you should change the action attribute value of the form in onsubmit method instead of window.open method, you can try something like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function whichsite(form){
var sites = form.elements.site, i = sites.length;
while (--i > -1){
if(sites[i].checked){
// here change the action value instead of return the site
form.action = sites[i].value;
}
}
}
</script>
</head>
<body>
<form action="#" onsubmit="whichsite(this); return false;" method="POST">
<b>Program Jump</b>
<p>
Enter PDB ID:<input type="text" name="PDB_ID"><br>
Enter PDB Chain:<input type="text" name="Chain_ID"><br>
<label><input type="radio" name="site" value="/cgi-bin/prog1.py">P-P</label>
<label><input type="radio" name="site" value="/cgi-bin/prog2.py">P-L</label>
<label><input type="radio" name="site" value="/cgi-bin/prog3.py">P-C</label>
<p>
<input type="submit" value="Submit">
</form>
</body>
</html>
Or, you can try change the value of action in the change event of radio, hope this can help~~~

Button not remaining disabled after submitting form

I am attempting to disable a button using an external JavaScript - activated by a submit button
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Join Email List</title>
<link rel="stylesheet" href="Radio_Button.css">
<script src="Radio_Button.js"></script>
</head>
<body>
<section>
<h1>Fun with Radio Buttonst</h1>
<form id="email_form" name="email_form" method="get">
<input type="radio" name="food1" id="cake1" value="cake" > Cake <br>
<input type="radio" name= "food2"id="muffns1"value="muffins" > Muffins <br>
<input type="radio" name= "food3"id="donuts1" value="donuts1" > hello <br>
<input type="radio" name="food4" id="food1" value="cookies" > Cookies<br>
<input type="submit" id="drink_selection" value="Process Drink Selection" onclick = "join_list()">
<br>
</form>
</section>
</body>
</html>
My JavaScript is as follows
var getsElement = function (id) {
return document.getElementById(id);
};
var join_list = function () {
getsElement("cake1").disabled = true;
getsElement("cake1").parentElement.disabled = true;
};
I can see the button disable when I watch the code but when the HTML reappears for user access the button is not disabled.
Your button reload the page, so your JS is missing. Also you should change your var join_list (scope var problems if you use this var in other functions like window.onload) to function.
So your code should be
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Join Email List</title>
<link rel="stylesheet" href="Radio_Button.css">
<script src="Radio_Button.js"></script>
</head>
<body>
<section>
<h1>Fun with Radio Buttonst</h1>
<input type="radio" name="food1" id="cake1" value="cake"> Cake
<br>
<input type="radio" name="food2" id="muffns1" value="muffins"> Muffins
<br>
<input type="radio" name="food3" id="donuts1" value="donuts1"> hello
<br>
<input type="radio" name="food4" id="food1" value="cookies"> Cookies
<br>
<input type="submit" id="drink_selection" value="Process Drink Selection" onclick="join_list()">
</section>
</body>
</html>
JavaScript
var getsElement = function(id) {
return document.getElementById(id);
};
function join_list() {
getsElement("cake1").disabled = true;
getsElement("cake1").parentElement.disabled = true;
};
When you click submit, the page reloads. Any attributes you added via JS before the page reload will be set back to default.

firefox addon sdk : how to copy textbox value from popup html into clipboard?

I'm using Firefox's addon-sdk to create addons for Firefox browser.
I need to copy text from textbox element to clipboard in popup.html file. I don't want to use flash to copy text to the clipboard.
popup.html
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery.min.js"></script> <!-- Including jQuery -->
<script type="text/javascript" src="const.js"></script>
<script type="text/javascript" src="popup.js"></script>
<script>
</script>
</head>
<body style="font-family:Tahoma, Geneva, sans-serif;line-height:30px;width:250px;">
<form >
element Id : <input type="button" onclick="copy($('#idElem').val())" class="btn" value="copy"/>
<input type="text" id="idElem" value=""/><br/>
element class name : <input type="button" class="btn" onclick="copy($('#classNameElem').val())" value="copy"/>
<input type="text" id="classNameElem" value=""/><br/>
element xpath : <input type="button" onclick="copy($('#xpathElem').val())" class="btn" value="copy"/>
<input type="text" id="xpathElem" value=""/><br/>
</form>
</body>
</html>
And popup.js file is :
$(document).ready(function () {
addon.port.on("vars", function(vars) {
if (vars){
$("#idElem").val(vars[0]);
$("#classNameElem").val(vars[1]);
$("#xpathElem").val(vars[2]);
}
});
});
How can I do it?
You'll first have to get the textarea value with a panel content script, then use message passing to pass that to the add-on process, then use the "clipboard" module to save that value to the clipboard.

Categories