Hi I am new to javascript, html and jquery. I would really appreciate any help or suggestion thanks in advance. I am trying to get the value of my jquery select box and set the value to the textfield everytime they select something in the selectbox it will automatically change the value of text box. I am using the code below but I am just wonderingw what seems to be wrong in the code
<!DOCTYPE html>
<html>
<script type="text/javascript">
$('#loc').change(function(){
var val = $('#loc').val();
$("#com").val(val);
});
</script>
</html>
You means the innerHTML of option not value?
Try this:
<!DOCTYPE html>
<html>
<script type="text/javascript">
$('#loc').change(function(){
var val = $( "#loc option:selected" ).text();
$("#com").val(val);
});
</script>
</html>
Related
I am new to jquery. What I want to do is to change the "p" value everytime user changes the input field with syntax like "Input changed to: " and then the value from input field. My code doesn't work. Anyone could explain to me why?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#myinput").change(function() {
var str = $("#myinput").val();
$( "p" ).text(str);
});
});
</script>
</head>
<body>
<input type="text" id="myinput">
<p> Text changed to: </p>
</body>
</html>
The change event will run the function when the textbox changes focus (i.e mouse leaves the textbox). To run the function every time the user types a button, try the keyup event.
$(document).ready(function(){
$("#myinput").keyup(function() {
var str = $("#myinput").val();
$( "p" ).text(str);
});
});
Heres a working example: https://jsfiddle.net/8wra05sy/
okay the solution was simple. I should have used the .append() function instead of .text().
I am working with HTML, CSS, jQuery, and JavaScript, all on one HTML page. Generally, I trying to figure out for the first time how to access information from the HTML body for use in my JavaScript code.
I want to set a variable in JavaScript equal to the string contained in the data attribute of one of my <div> elements.
Can I use document.getElementsByClassName()[] in my JavaScript to actually pull the information out of the HTML document? In examples on W3schools and elsewhere, I only see it used to change the value of some HTML element, not to actually use its input. Is there something more fundamental that I'm missing, here?
____here's my more specific code (where div.onlyOne is the only div of that class, and has the data-need attribute "string i need"):
var myVar = document.getElementsByClassName("onlyOne")[0].getAttribute("data-need")
Why will this not store "string i need" into myVar?
It works, make sure though, that you run the script after the markup or DOM load, or else the script will not find the element as it has not yet been loaded.
After in markup
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="onlyOne" data-need="hey there"></div>
<script type="text/javascript">
var myVar = document.getElementsByClassName("onlyOne")[0].getAttribute("data-need");
alert(myVar);
</script>
</body>
</html>
DOM load
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var myVar = document.getElementsByClassName("onlyOne")[0].getAttribute("data-need");
alert(myVar);
});
</script>
</head>
<body>
<div class="onlyOne" data-need="hey there"></div>
</body>
</html>
May I suggest you use document.querySelector('.onlyOne') instead in the future. With that you can narrow down the result list in a more efficient way.
Src: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
<div class="onlyOne" data-need="some text">...</div>
var myVar = document.getElementsByClassName("onlyOne")[0].getAttribute("data-need");
alert(myVar);
https://jsfiddle.net/howa6w1o/
since you are using jQuery, you can simplify your code to get the contents of the data-attribute: as follows:
$(document).ready(function(){
var myVar = $(".onlyOne").eq(0).data("need");
})
im doing a school work with Jquery and I just want to know if its possible and how to do the following:
Page A has the following : external JS file that has the function to allow a user to enter some text and then when they press the submit button that text is automatically put as the paragraph text as ive use JS to get the element and replace the text using innerhtml.
External JS file:
function grabText() {
var grabThePara = document.getElementById("firstP").value;
var intoParagraph = document.getElementById("pOne").innerHTML = grabThePara;
}
HTML FILE :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.10.2"></script>
<script type="text/javascript" src="ts.js"></script>
</head>
<body>
<input type="text" id="firstP" name="firstP">
<br />
<p id="pOne">Static works fine -- > this is the static</p>
<input type="button" onclick="grabText()" value="Submit">
GO to JD Panel
</body>
</html>
Page B has the Jquery part, this has the code that will grab the text from the Page A's first paragrpah called ID pOne, it gets the text without an issue if its STATIC input but the moment you use as described previous by using the textbox and dynamically changing the text of the paragraph the page A does the change but Page B still shows the static text input, not the new dynamic changes that occurred after input-ed into the textbox and submitted. I will show code.
Page B code :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="ts.js"></script>
</head>
<body>
Change the text again
<script type="text/javascript">
jQuery.ajax({
url: "adminPanel.html",
success: function (printIt) {
var html = jQuery('<p>').html(printIt);
var grabIt = html.find("p#pOne").html();
var sendItToParaOne = document.getElementById("paraOne").innerHTML = grabIt;
}
});
</script>
<p id="paraOne"></p>
</body>
</html>
Sorry for my English i know its not the best. thanks for taking the time in reading my issue and any helps is appreciated
Thanks again!
M
You need to save your data somewhere. If you don't want to work with a database, you can use HTML 5 web storage: http://www.w3schools.com/html/html5_webstorage.asp
Furthermore, looking at your external JS file, you might want to have a look at jQuery selectors: http://www.w3schools.com/jquery/jquery_selectors.asp
I hope this helps you.
You're confusing yourself by thinking that pages are able to talk to each other. Your page A has to send the changes to the server, but the server also has to be programmed to listen to those changes in server code like PHP or ASP.NET. Only then can page B get the changes made by page A.
In my website there are "boxes" that open when you click on the song name, but I would like to make the one that is open to close when you click on another song name. So just one box would be open at the time. The code that invokes boxes to appear is just below. Does anyone know the solution how i could achieve that ? P.S with image it would be a lot more understandable but I am not allowed to add images.
<script type="text/javascript">
var showOrHide = true;
function parodyti (a) {
$(function () {
$("#nauj-" + a).slideToggle('slow', function () {})
})
};</script>
You can the jquery concept to do it . Jquery provides you with the method .toggle() to work it out . An example code will be like this :
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
<script>
$("button").click(function () {
$("p").toggle();
});
</script>
</body>
</html>
This will toggle on button press between the two strings Good Bye and Hello .
Use .click(function() to achieve your task.
Refer Jquery toggling the element one at a time link for your reference.
This may help you : http://jsfiddle.net/fd46R/
Its just a sample for your reference.
$(function(){
$('ul.child').hide();
$('ul.parent a.slide').click(function(){
$('ul.child').slideUp('slow');
$(this).next().find('a').show();
if( $(this).next().is(':hidden') ) {
$(this).next().slideDown('fast');
}
return false;
});
});
I would like to dynamically modify the values of certain form elements, more specifically certain input text fields. So far, whenever I load my html page, I am just getting the blank input field, but I am expecting it to contain the value of 1. Here is an example of how I am trying to do this.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var myForm = $(this).getElementById('form1');
myForm.elements['Q01'].value = '1';
});
</script>
</HEAD>
<BODY>
<form id="form1">
<input type="text" name="Q01" maxlength="1" />
</form>
</BODY>
</HTML>
The reason this needs to be done dynamically is because the value of form could be different every time. Am I even approaching this correctly? Suggestions on how I can achieve my intended functionality?
-- EDIT --
None of the solutions seem to be doing the trick. Here is an update of my code:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$("#Q01").val("1");
$("#form1 input[name='Q01']").val("1");
//$("input[name='Q01']").val('1');
});
</script>
</HEAD>
<BODY>
<form id="form1">
<input type="text" id="Q01" name="Q01" maxlength="1" />
</form>
</BODY>
</HTML>
I am expecting when I load the page, that the input text will have 1 in it. But the input text keeps showing up empty. Any ideas?
-- EDIT --
Here is a solution derived from the answers from below that I like:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#Q01").val("1");
});
</script>
</HEAD>
<BODY>
<form id="form1">
<input type="text" id="Q01" name="Q01" maxlength="1" />
</form>
</BODY>
</HTML>
If you are using jQuery you could just change the id attribute to name in the input elements and then do something like this:
$('#Q01').val('1')
The val method sets the value sou can find more here: http://api.jquery.com/val/
You've got your ready handler correct. One of the great things about jQuery is its selector engine. I recommend taking a look at the documentation to help familiarize yourself with it.
To do what you want, I'd recommend something like this:
$(document).ready(function() {
$("#form1 input[name='Q01']").val("1");
});
The #form1 is the same as document.getElementById("form1"). The input[name='Q01'] grabs all input elements that have a name attribute equal to Q01. The .val method sets the selected elements value to the string 1.
$(document).ready(function(){
$("form input[name='Q01']).val('1');
)};
This should work:
$("input[name='Q01']").val('1');
But why not to set id's to your inputs?
Hope it works