I have a function that gets all selected values from selects on my page as a text. I need a button that onclick opens new "blank" with different HTML page and puts output from my selectgetting function to text box on new page.
How to make that by JavaScript?
var w = window.open('form.html', 'blank', 'scrollbars=yes,toolbar=no,width=500,height=950')
var box = w.getElementById('input_16');
box.value = "bodystyle: " + body + "<br>" + "color: " + color;
w.focus();
this should work for changing the box text shouldn´t it? I first open second HTML in new window then i get its textbox by id and change its value. Why doesn´t it work?
Thank you
to pass your dropdown value to the _blank page you could add it as parameter in URL.
Them read it with Javascript from url on next page and put it in your text box.
So:
1. Read the value
2. Add to URL
3. Read the value from url
4. Add value to textbox
Good luck.
EDIT: this does 1 and 2.
<div>
<input type="button" value="click me" />
<input type="text" id="input_16" value="input16" />
</div>
<script>
$(function(){ $("input[type='button']").on('click',function(){ var val = document.getElementById('input_16').value; window.open('form.html¶m1='+val, '_blank', 'location=yes,height=570,width=520,scrollbars=yes,status=yes') })})
</script>
http://jsfiddle.net/2BejP/
Related
I am new to JavaScript. I am getting result from label from another javascript. Now I want to send it to the input type hidden. Please help on how to do it
Below is the code that I am getting result from javascript
<label id="result"></label>
here i want to change the year input value to the above label id=result value. Please help
<script type="text/javascript">
var post_title = new Date();
document.getElementById("post_title").value=(post_title.getFullYear());
</script>
<input type="hidden" name="post_title" id="post_title" class="form-control"/>
I would suggest bringing your <script> element all the way to the bottom of your HTML so that the rest of the HTML loads and you can avoid any errors where the element does not exist (As #Lain said in the comments)
We can get the inner value of the <label> using
var label = document.getElementById("result");
var labelValue = label.innerHTML; //What this does is it returns a string of all HTML and text inside this element, in this case it would just be the value
//Then using the rest of your code, set the post_title to the label value
var post_title = document.getElementById("post_title");
post_title.value = labelValue;
All of the above belongs inside of your script tags, in case that wasn't clear
Let me know if that works or if that's what you're looking for
I've recently started learning jQuery and for the first time after weeks, I didn't manage to find an answer to my problem on this site which leads me to think I've screwed when creating my radio buttons.
A little breakdown of what I do: I have this simple web page which contains a div:
<div id="skins">
</div>
In this div, I will push radio buttons that are generated by going through a for loop and assigning to each one of them a text which is stored in an array named skins
for(var i in skins) {
$("#skins").append("<input type='radio' class='result_skin' name='skin'>" + skins[i].name + "</br>")
}
I add a break at end of each radio button so they will sit one on top of each other and not be generated one after another (so it looks like a list)
Then I want to check which radio button has been checked and return its label text which after research, it can be done this way:
$("#skins").click(function() {
$("input:radio:checked").each(function() {
var text = $(this).text()
console.log(text)
})
})
This is where the problem is. The variable text in this case is returned as an empty string which leads me to thing that the way I created a radio button is incorrect.
Could someone help me with this small issue?
Radio buttons do not have text. Only elements that can encapsulate content between their opening and closing tags can have text and radio buttons don't get a closing tag, so they can never "contain" anything, let alone text. Instead, they have a value and that's where their data and ultimate meaning resides, not from the text caption (what you are calling label) that is next to them says.
So, really you need to give each of your radio buttons a value and then you can get that value with:
$(this).val()
not:
$(this).text()
Try this:
var skinValues = ["one","two","three","four","five", "Champion zed"];
// Don't use for/in loops with arrays, use .forEach()
skinValues.forEach(function(skin){
// each radio buttons needs a unique value and that's where its data is stored
$("#skins").append("<input type='radio' class='result_skin' name='skin' value='" + skin + "'>" + skin + "</br>")
});
$("#skins").click(function(){
$("input:radio:checked").each(function(){
var text = $(this).val() // Radio buttons don't have text, they have a value
console.log(text)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="skins"></div>
The basic use of radio buttons is the fact that you can force people to pick one out of many choices. To achieve this effect you will have to use the same name attribute on the radio buttons you want to group together.
To find out what radio button someone has selected, you can then indeed check with jQuery using the following code:
$('input[name=radioName]:checked', '#myForm')
with '#myForm' being optional, if you want to search in a certain form.
The text you write next to an input is totally unassociated with it. To get the value of the input you should add a value attribute, or another data attribute. More information about data attributes can be found here.
Piecing all this information together, your code should look something like this:
Creating the skin list
for(var i in skins){
$("#skins").append("<input type='radio' class='result_skin' name='skin' value='" + skins[i].name + "'>" + skins[i].name + "</br>")
}
Accessing "the text" next to the input
var text = $('input[name=skin]:checked').val();
Since you use values for the radio buttons, try not using .text() but .val() instead
The text associated to the radio isn't linked to the input tag. So you have to wrap the text and the input into a parent tag (something like a div):
<div>
<input type="checkbox"/>
<span class="label">Text</span>
</div>
When you want to check the text
$("input:radio:checked").each(function(){
var text = $(this).parent().find( "span" ).text()
console.log(text)
})
Updated with JiFus updated idea
You can use data-attribute or value attribute
for(var i in skins){
$("#skins").append("<input type='radio' class='result_skin' name='skin' data-skin-name='" + skins[i].name + "'>" + skins[i].name + "</br>")
}
And call it with dataset
$("input:radio:checked").each(function(){
var text = $(this).dataset['skin-name']
console.log(text)
})
I want to write javascript code which will recognize which button has been clicked and change its label. There are multiple buttons on the web page so there is no possibility of referring to it by its id. It is identified only by the fact that it has been clicked.
I saw one discussion on stack overflow that suggested writing
<input type = "button" value = " " id ="3" onclick="click(event)">
on the web page, and then defining click as a function with one argument, let's call it
ev. Then I referred to it (inside the function) by
var button = ev.target;
and then tried to change the value of button. It didn't work. I just want a button's label to change when I click it without referring to it by id (I can't tell what it's id is since it's just the button that was clicked amongst many).
Can anyone explain how to do this?
onclick="clickMe(this)">
This will pass a reference to the element clicked on, then you can get/set anything that you normally can from the element e.g:
function clickMe(el) {
el.value = "Hi"; // set
alert(el.value); // get
}
Demo
Note: calling a function click() is not allowed as it is a reserved keyword (just like you wouldn't have a function called function(), which is why I made it clickMe()
Pass the this keyword as a parameter, and use a data attribute to hold the new value :
html :
<input type="button" value=" " id="a3" data-value="test" onclick="func(this)">
js
function func(elem) {
elem.value = elem.getAttribute('data-value');
}
FIDDLE
this is set to the button that is clicked by the browser:
<input type=button onclick=clickhandler>
<script>
function clickhandler() {
this.value = "foo"; // button’s label is now foo
console.log(this.id); // will print the button’s id
}
</script>
I am using the jQuery UI Dialog box to enter the URL of the Image. I am using the following method:
<input id="dlg" value="Open Dialog" type="button" />
<script type="text/javascript">
var img = '<div id="dialog" title="Insert Image" style="width:500px;height:300px">';
img += '<table><tr><td style="width:100px">';
img += 'Image URL: </td><td><input id="txt" type="text" value="" size="52" /></td>';
img += '</tr></table></div>';
$('#dlg').click(function(){
$(img).dialog({buttons: {'Ok':function(){
var value = $("#txt").val();
var http = value.substr(0,7);
alert(value);
$(this).dialog('close');
}}},
{ closeOnEscape:true, resizable:false, width:600, height:200
});
});
</script>
When I Press the (<input id="dlg" value="Open Dialog" type="button" />) button a dialog box appears, with a textbox input field. When I enter any value in the text field, It alerts that value. But when I Press the Button Second or Third time and Enter some other value in the textbox of the dialog, and press OK, it alerts the value that I entered for the first time. So, No matter How many times I click the button and enter any value, it will alert the value that I entered first time.
Am I getting the text box value var value = $("#txt").val(); correctly with this method?
If Yes, then Why it is giving me the first time entered value.
Note: I have cleared the cache of my browser so many times, so there is no chance of any cache problem.
Problem is each time you call it you are making a new copy of the dialog. That means you have multiple elements with the same name. To avoid that you need to destroy the dialog after you close it.
Change:
$(this).dialog('close');
To
$(this).dialog('close').dialog("destroy");
Other option is to create the element once and than reuse it.
It seems to me that the txt items are being created multiple times. You would need to remove the item from the DOM once you are done.
in this section
$(img).dialog({buttons: {'Ok':function(){
var value = $("#txt").val();
var http = value.substr(0,7);
alert(value);
// save value somewhere
$("#txt").remove();
$(this).dialog('close');
}}},
It is because you are creating the dom structure every time the dialog is created, so it is fetching the first created input box every time you request $("#txt").
So the solution is to remove the complete dom structure on close of the widget
$(img).dialog({
buttons: {
'Ok':function(){
var value = $("#txt").val();
var http = value.substr(0,7);
alert(value);
$(this).dialog('close');
}
},
close: function(){
$(this).remove()
},
closeOnEscape:true,
resizable:false,
width:600,
height:200
});
No matter How many times I click the button and enter any value, it will alert the value that I entered first time.
Am I getting the text box value var value = $("#txt").val(); correctly with this method?
Yes.
If Yes, then Why it is giving me the first time entered value.
Because $("#txt") refers to the first element in the DOM with that id. On each click, you dynamically create elements from your img string and append them to the DOM via the dialog widget. Yet, calling its close method only hides them, but does not remove them from the DOM so the click handler always extracts its value from the first created input.
Try calling the destroy method instead:
$(this).dialog('close').dialog("destroy"); // not sure whether the "close" is still necessary
Or you create the dialog only once, and open it on every click.
I am making a page where users can answer questions (using radio buttons) about a product they are selling back. When they hit a button at the bottom of the page, a price quote will pop up. I have written a javascript function to be performed when the user hits the button. It calculates the price and displays it using document.write, but whenever the user hits the button, it opens up a new page and displays what I told it to.
function getQuote(){
document.write("Your Quote Is: $", price, ".00");
}
And here is the code for the button:
<button type="button" onclick='getQuote()'>Display Quote</button>
But when I push the button, a new page shows up and it shows the quote with only the formatting I put into the document.write phrase.
I have tried using .innerHTML to send the document.write to another part of the page, but the same problem persists.
What can I do to make sure that the quote shows up on the page, where I want it to?
There is no issue with document.write, it is doing exactly what it is supposed to do:
Overwrite the page with the new content.
If you do not want to do that, then you have to give it some context to write to.
For example:
function getQuote(){
var textArea = document.getElementById('textArea');
textArea.innerHTML = "Your Quote Is: $", price, ".00";
}
Which puts whatever your text is into a DOM element with id="textArea"
You should reference the element, and set its content instead of using document.write.
<button type="button" onclick='getQuote.call(this)'>Display Quote</button>
function getQuote(){
this.firstChild.data = "Your Quote Is: $" + price + ".00";
}
If you want to write to a different element, you should select that element, and likely use the same technique.
After your document has been full rendered and closed, using document.write() will clear your current document and start a new one, wiping out all previous content.
The put content into the existing document you need to use DOM manipulation functions, not document.write(). If, what you're trying to do is to change the text of your button, you can do so like this (assuming price is a global variable that contains the price):
<button type="button" onclick='getQuote(this)'>Display Quote</button>
function getQuote(obj) {
obj.innerHTML = "Your Quote Is: $" + price + ".00";
}
If you want to put the price into some other object on the page, then you give that object an id and you can get that object and set the price into it like this:
<button type="button" onclick='getQuote()'>Display Quote</button>
<div id="quotedPrice"></div>
function getQuote() {
document.getElementById("quotedPrice").innerHTML = "Your Quote Is: $" + price + ".00";
}
You can see both forums of these work here: http://jsfiddle.net/jfriend00/ED5V9/