|
JavaScript - Getting Value From Hidden Input
After searching the web most of the day, nothing has resolved this issue:
Code: <!-- ALERT IS NEVER HIT -->
<html>
<input type="hidden" id="info" name="info" value="testInformation"/>
<script type="text/javascript">
var me = document.getElementById('info').value;
alert(me);
</script>
</html>
Code: <!-- ALERT SAYS "null" -->
<html>
<input type="hidden" id="info" name="info" value="testInformation"/>
<script type="text/javascript">
var me = document.getElementById('info');
alert(me);
</script>
</html>
Code: <!-- WORKS GREAT, BUT I NEED THE INPUT FIELD HIDDEN -->
<html>
<input type="text" id="info" name="info" value="testInformation"/>
<script type="text/javascript">
var me = document.getElementById('info').value;
alert(me);
</script>
</html>
Any idea how I can keep the input value "hidden" and have javascript still see the value? And yes, I've even tried using the "defer" method. Similar TutorialsHi I have a form with some input tags, and when the user submit the form I which if a new hidden tag get submitted with the value the user did tip. I am thinking for doing that but not sure if it is the right thing : Code: <form method="POST"
<input type="text" name="{actionForm.Name}" id="username">
<input type="password" name="{actionForm.Passwd}" id="password">
<input type="hidden" name="usernameh" value="document.getElementById('username')">
<input type="hidden" name="passwordh" value="document.getElementById('password')">
</form>
Is it alright ? I mean when the user enter the username and password, the hidden tags should contain those two values that the user has made. I have a script where I move randomly users from one multiple selectfield to another and that part works perfectly, but... When I want to submit the form I don't get any users passed along, course they are not "selected". I have then read around on the net and I need to create an elemet with a hidden input field where all the randomly selected users is inserted to with comma separation, but dont know how?!?! This is what I got: Code: function randomusers(){
var given = 3, used = {}, randnum, opts = $('#select1 option'), olen = opts.length;
function ran() { // generate a unique random number
randnum = Math.floor(Math.random() * olen);
return used['u'+randnum] ? ran() : randnum;
}
for (var i = 0; i < given; i++) { // get the correct quantity of randoms
used['u'+ran()] = true;
}
opts.filter(function(index) { // remove all options that are not one of the randoms
return !!used['u'+index];
}).appendTo('#select2');
}
I have tryied to insert this: appendTo('#select2' + '<input type="hidden" name="test[]" value="" />'); but that didn't seem right... Please help :-) Hi all, I'm having some trouble with the this... I have a PHP based calendar where the cells will change color depending on the number of clicks.. this all works fine, but is pointless if I can't send the outcome along in an email. I can do this with PHP but first need to get the values into a hidden field. This is what I have: Code: <script type="text/javascript">
function countClicks (obj){
if (!obj.count) {
obj.count = 0;
}
obj.count++;
if (obj.count > 4) {obj.count = 1};
if(obj.count == 1){
obj.style.color='#FFFFFF';
obj.style.backgroundColor='#66CC33';
obj.parentNode.style.backgroundColor='#66CC33';
document.getElementById("availability").value='Available';
}
if (obj.count == 2){
obj.style.color='#FFFFFF';
obj.style.backgroundColor='#FF0000';
obj.parentNode.style.backgroundColor='#FF0000';
document.getElementById("availability").value='Not Available';
}
if (obj.count == 3){
obj.style.color='#FFFFFF';
obj.style.backgroundColor='#FFCC33';
obj.parentNode.style.backgroundColor='#FFCC33';
document.getElementById("availability").value='Working';
}
if (obj.count == 4){
obj.style.color='#000000';
obj.style.backgroundColor='#FFFFFF';
obj.parentNode.style.backgroundColor='#FFFFFF';
document.getElementById("availability").value='Not Set';
}
}
</script>
and... Code: echo "<input type=\"hidden\" name=\"availability\" id=\"availability\" value=\"\">"; All I'm trying to do is populate value with either 'available', 'not available', 'working' or 'not set'... however, it is worth noting that each cell may have a different value, e.g. 1 cell might be working while the other is not available... so i need to pass the values of all the cells. Can anyone help me out here. Many thanks, Greens85 hi guyz i do have a problem in passing javascript variable to <input type=hidden value=""> here's my code: <?php while ($row = mysql_fetch_array($result)) { ?> <script type="text/javascript"> function viewcodec(){ var randomValueCodec = randomString(5, 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'); document.getElementById('commentMarkCodeCompCodec-'+<?php echo $row['p_id'];?>).innerHTML = randomValueCodec; document.getElementById('commentMarkCodeComp-'+<?php echo $row['p_id'];?>).innerHTML = randomValueCodec; } </script> <form action="" method="post" name="postsForms"> <div class="commentBox" align="right" id="commentBox-<?php echo $row['p_id'];?>" <?php echo (($comment_num_row) ? '' :'style="display:none"')?>> <input type=text id="commentMarkname-<?php echo $row['p_id'];?>" name="commentmarkname" class="commentMarkname" size="35" maxlength="20"> <textarea class="commentMark" id="commentMark-<?php echo $row['p_id'];?>" name="commentmark" cols="60"></textarea> <input type=text id="commentMarkcode-<?php echo $row['p_id'];?>" name="commentmarkcode" class="commentMarkcode" size="35" maxlength="20"> <br clear="all" /> <span id='commentMarkCodeCompCodec-<?php echo $row['p_id'];?>'><b><script type="text/javascript">viewcodec();</script></b></span> <input type="hidden" id="commentMarkCodeComp-<?php echo $row['p_id'];?>" name="commentMarkCodeComp" value=""> <br clear="all" /> <br clear="all" /> <a id="SubmitComment" style="float:right" class="small button comment"> Comment</a> </div> </form> <?php } ?> I have an idea for a little script.....I'm just stuck on one little part: When a user changes the value in a input or textarea box, I want it to change the value of a certain hidden input tag too. Here's what I have so far: function getNewValue(inputhidden, textinput) { var data = document.getElementById(inputhidden); var text = document.getElementById(textinput); data.value = text.value; } <input type= "text" name= "name" id= "name" onChange="getNewValue('detail', 'name')"> <input type= "hidden" name= "detail" id="detail" value= ""> However, this is not working and I'm not sure why I have a problem with adding new inputs to a form (if and when required), Internet Explorer is fine but in Firefox if any previous input fields are filled when the more button is clicked they get reset to blank. JS: Code: fields = 0;
function addInput() {
if (fields != 100) {
document.getElementById('input').innerHTML += "<input type='text' name='input[]' size='30' />";
fields += 1;
} else {
document.getElementById('input').innerHTML += "<br />Maximum 100 fields allowed.";
document.form.add.disabled=true;}
}
form: Code: <form action="index.php" method="post"> <div id="input"> <input type="text" name="input[]" size="30" maxlength="15" /> </div> <!-- button --> <div id="more"> <input type="button" onclick="addInput()" name="add" value="More" /> </div> <!-- // button --> <input type="submit" name="submit" value="Submit" /> </form> as usual any help is appretiated .. I am thinking this should be fairly easy but yet I am not getting far. I want to have a form with a single text imput field for a zip code. Depending on which zip code the user enters will determine which url they will be sent to. If they enter a zip code which is not in the script, they would be sent to a default url. I am also assuming this can be accomplished with javascript. Any help is greatly appreciated. Hi, i want to set an input value to the same value as the input selected from another input on the same form so when the user selects input 1 i want the hidden input2 to get the same value im guessing i use onsubmit because its hidden so there wont be a focus or blur this would be part of the input Code: onsubmit="(this.value = this.othervalue)" othervalue being the other input name="othervalue" is that the correct syntax Need to append a hidden value to a floating div that is made via javascript. I tried the most obvious way but I am getting mismatch error in debug. .HTML Code: <input type="hidden" id="desc1" value="blah blah blah" /> .JS Code:
var item;
var image;
var description;
function one(){
item = document.getElementById("product1");
image = document.getElementById("i1");
description = document.getElementById("desc1");
expand();
}
function expand() {
//changes css of the div
item.innerHTML = "";
item.style.position = "absolute";
item.style.top = "27%";
item.style.left = "21.3%";
item.style.width = "952px";
item.style.height = "610px";
item.appendChild(image);
image.height = "300";
image.width = "400";
image.align = "left";
image.id = "cenimage";
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", "form.html");
ifrm.setAttribute("frameborder", "0");
ifrm.setAttribute("scrolling", "no");
ifrm.style.width = 950+"px";
ifrm.style.height = 300+"px";
item.appendChild(ifrm);
// mismatch error !!
var x = description.value;
item.appendChild(x);
}
Hey guys! How are ya? Gettin' right to the point, I need a help! I already created a javascript code to hide my div when click on close "[x]". What I need to do is get it movin' around the website here's the code: it's between <head></head> Code: <script language=javascript type='text/javascript'>
function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideShow').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'hidden';
}
else { // IE 4
document.all.hideShow.style.visibility = 'hidden';
}
}
}
function showdiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideShow').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'visible';
}
else { // IE 4
document.all.hideShow.style.visibility = 'visible';
}
}
}
</script>
and it's between <body></body> Code: <div id="hideShow"> <img src="../imagens/tela01CQ_07.jpg" alt="teste"/><a href="javascript:hidediv()">[x]</a></div> and it's in CSS Code: #hideShow {
position:absolute;
margin: 300px 110px;
}
thx! hello, This seems very basic, but I am running into a complication. What I would like to do is check if a certain div is displayed or hidden (really doesnt matter which) then set a map zoom level based upon that. here is my current function. function closeDirections(){ gdir.clear(); if(document.getElementById("river").style.display="none"){ map.setZoom(16); hideID('river'); showID('main'); } if(document.getElementById("main").style.display="none"){ map.setZoom(12); hideID('main'); showID('river'); } } Also here is a link to my map, just in case. map I have tried several variations, but from what I can tell with every instance, it only examines the first and never considers the second "if". I thought to rememdy this issue by using if/else...same issue. The only thing I could think is a nested if statements, but I am not sure what to use as a parent if. I have searched for a while, but cannot seem to find something like an .is_hidden(). Something that I could see if its true/false. Any help would be very much appreciated. Hi all I believe this to be a JS quesiton, but perhaps there is something here of CSS too? I have an "ecard" which is: - a <div id="outer_ecard"> wrapping an <iframe>... - is hidden by default (via a JS function that fires onload of the parent doc), .. - that gets its display and visibility turned on when the user clicks a link in the parent doc, ... - and then gets its display and visibility turned off again via a call to that same JS function in the parent doc that hid it in the first place by default. here is just the relevant snip of the hiding JS function - Code: elementToSet.style.display = "none"; elementToSet.style.visibility = "hidden"; everything works fine, *BUT* this issue: after the <div> disappears (the 2nd time, when the above snip is triggered in the iframe's parent via an onload event in the iframe doc)... then hyperlinks (in the parent file) that are geographically positioned underneath the <div id="outer_ecard"> do not work (i.e. they still think the ecard div is sitting on top of them (z-index:1). Can anyone advise me here? I need the links underneath the ecard to behave as though that div was never there. Thanks! -Govinda Hello. The link below is the result of a product search on a website. It displays 2 results. However, the actual results (picture & information) that are displayed on the web page are not present in the "Page Source". For example, if you search the page source for the string '860723' (which is one of the product numbers visible on the web page) it is not there. What is going on here? It looks to me like dummy images & information in the HTML are first loaded by the browser, and then that dummy info gets replaced by the real information via a javascript function. Is that what's going on? http://www.lightsamerica.com/metro/s...mber:SL9469-8; I'm trying to retrieve that information by downloading the source in my PHP program. The problem is that the information I want isn't present in the source. It stands to reason that the information is somehow being sent to the browser because I can see it... any ideas? Thanks for your time, -Scott hello, i have a form in my header that is hidden and i have it show when you click a link, the problem is, when the form appears, it pushes everything down below it, any ideas on how to get around this?
I have a form that has a checkbox that I want to base a hidden value on. If the checkbox is checked I want the hidden value to be 25. If not checked, I want the value to be 0. I am working with code someone else has written and I am fairly new to javascript and cannot get it to work. Here is the code on the form: <code> <td><input type="checkbox" name="binderdiscount" value="Yes" <?php /*?><?php if ($pgdata['binderdiscount']=='Yes') echo 'checked'; ?><?php */?> />I do not need a book;</td> <input type="hidden" name="binder_discount" value="0"> </code> and then in a separate page is all the javascript to process the form. I have this, but it is not working. <code> if(getControlValue(form.binderdiscount)==="Yes") {form.binder_discount.value=25;} </code> As I said, i am really new to javascript and I am working with someone else's code. All the research I have done has just confused me more about why it is not working. Any help would be greatly appreciated. I have a simple script connect to a radio button. Based on which option, the matching div appears with a text box - and one with a radio button. If they change their mind and click another radio button, it'll switch to the new div, but keep the content in the old. How do I clear that out? I looked for a snippet, but they're all for clearing default text in a field when you click it. I want something a little different. Here's what I'm using: Code: <script>
$(document).ready(function() {
$("div.desc").hide();
$("input[name$='hear']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#" + test).show();
});
});
</script>
<input type="radio" name="hear" value="dcranch"> DC Ranch Community <br />
<input type="radio" name="hear" value="friend"> From a friend <br />
<div style="display: none;" id="dcranch" class="desc"> <input type="checkbox" value="Yes" name="resident" /> If so, are you a DC Ranch resident? )</div><br />
<div style="display: none;" id="friend" class="desc"> Name? <input type="text" name="how1" /></div><br />
I have a script that brings up an overlay box onclick that needs to be on top of everything else on page, however I can't get it to show on top of the navigation tabs. I tried calling the overlay script at the very beginning of the head section as well as tried to call it at the end but it doesn't seem to matter. Is there something I can add to the script to force it on top of every other object on the page? Hey Guys, I have the following hidden field within a form: Code: <input type="hidden" name="test12" value="test12" /> I also have the following function which does something if that field exists: Code: if(document.formName.test12.value == "thisdata")
{
//do something
}
The problem I'm having is that if the hidden field doesn't display (which based on conditional logic, sometimes happens), a JS error is thrown on the page. What is the best way to carry out this check effectively without throwing an error if the field does not exist? Thanks in advance. My website contains a ton of hidden divs. I thought this would make everything easier for the user because now they can stay on one page and view tons of content but it is making my page load very slowly. Is there a way to not load the pages hidden content until the user clicks the link and makes it visible? I see various tutorials online but I am having trouble learning how to translate that to my site. So again this content is hidden, and an onclick makes it visible, but I would like the onclick to make it visible and load for the first time. Thank you for reading, link to site and code below. Source: By clicking the info or photo tabs you will see the toggle for hidden divs Code for my tabs: PHP Code: <?php if( $page <= 1 and !$public ) { ?> <div id="mngl-profile-tab-control"> <ul> <li id="mngl-board-tab-button" class="dark"><a href="javascript:mngl_set_active_tab('board');"><span><?php _e('Board', 'mingle'); ?></span></a></li> <li id="mngl-info-tab-button"><a href="javascript:mngl_set_active_tab('info');"><span><?php _e('Info', 'mingle'); ?></span></a></li> <li id="mngl-log-tab-button"><a href="javascript:mngl_set_active_tab('log');"><span><?php _e('Log', 'mingle'); ?></span></a></li> <li id="mngl-fav-tab-button"><a href="javascript:mngl_set_active_tab('fav');"><span><?php _e('Favorites', 'mingle'); ?></span></a></li> <li id="mngl-display-photo-tab-button"><a href="javascript:mngl_set_active_tab('display-photo');"><span><?php _e('Photos', 'mingle'); ?></span></a></li> <li id="mngl-video-tab-button"><a href="javascript:mngl_set_active_tab('video');"><span><?php _e('Videos', 'mingle'); ?></span></a></li> </ul> </div> <?php } ?> Code for one of the tabs content. The class mngl-hidden is just a display:none PHP Code: <div id="mngl-fav-tab" class="mngl-profile-tab mngl-hidden"> <div style="color:#171717; font-weight:bold;"><?php echo $user->first_name . "'s Favorites >> For Motivational Posts You Enjoy"?></div> <?php //require_once(MNGL_MODELS_PATH . "/MnglUser.php"); foreach ($fav_posts as $fav_post) { $author = MnglUser::get_stored_profile_by_id($fav_post->author_id); $owner = MnglUser::get_stored_profile_by_id($fav_post->owner_id); if($author and $owner) $this->display_board_post($fav_post,$public); } /*$this->display_board_post('5705',$public);*/ //echo count($fav_posts).'--'.$page_size; ?> <?php if( count($fav_posts) >= $page_size ) { ?> <!-- <div id="mngl-older-posts"><a href="javascript:mngl_show_older_posts( <?php echo ($page + 1) . ",'" . (($public)?'activity':'boards') . "','" . (($public)?$mngl_user->screenname:$owner->screenname) . "'"; ?> )"><?php _e('Show Older Posts', 'mingle'); ?></a></div>--> <?php } ?> </div> Javascript that Sets Active Tab Code: function mngl_set_active_tab( tab )
{
jQuery('#mngl-profile-tab-control li').removeClass('mngl-active-profile-tab');
jQuery('#mngl-' + tab + '-tab-button').addClass('mngl-active-profile-tab');
jQuery('.mngl-profile-tab').hide();
if((tab != 'board') && (tab != 'fav')){
jQuery('.mngl-board-post').hide();
} else {
jQuery('.mngl-board-post').show();
}
jQuery('#mngl-' + tab + '-tab').show();
}
I have a hidden field whose value is a text string, "xyz". I want to write the value to the page so that the user can see it but not edit it. Can't I just use document.write(form.field.value)? Why isn't it working?
|
|||||||