|
JavaScript - Get Value Of Input Field From Jquery Modal Window
Hi,
I have a JQuery modal window and I am trying to pass the value of its input field to a hidden input field within a form but I can not seem to get the value when it is in the modal window. Modal Window Code: Code: <div id="modal-content" class="clearfix"> <h2> enter a name</h2> <div> <input id="enteredName" name="enteredName" type="text" value="" /> <a href="javascript:submitform(true)" name="save" id="save" class="btn"><span>Save</span></a> </div> <a href="javascript:submitform(false)" id="close" class="close-link">No thanks just carry on</a> </div> Javascript to set the value of the hidden field to equal the value of the modal input field Code: <script type="text/javascript">
function submitform(assignName) {
if (assignName) {
var hiddenfield = document.getElementById("hiddenfieldid");
hiddenfield.value = document.getElementById("enteredName").value;
}
var form = document.getElementById("formTest");
form.submit();
}
</script>
Any help would be much appreciated. Similar TutorialsHi all! I am struggling with getting a modal window to launch. The two problems I experience are as follows: 1) Images do not display in IE within the hidden <div> tags. (This I tested on another page less complicated. Click the "donate" button on this page using IE and firefox to see what I mean... http://www.clanreportdb.co.uk/report...ls.php?id=1473) 2) When integrating the <a> tag link to launch within PHP code, it fails to work. Here is my code, and hopefully someone will know what I am doing wrong: Code: <html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="/report/images/close.gif" border="0" class="btn_close" title="Close Window" alt="Close" /></a>');
//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
<style type="text/css">
#fade { /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
display: none; /*--hidden by default--*/
background: <? echo $highlightbg; ?>;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
</style>
</head>
</html>
<?php
foreach ($d as $f)
{
echo "{$f[1]}<a href=\"#?w=500\" rel=\"popup_name\" class=\"poplight\"><img src=\"/report/images/tick.gif\" border=\"0\"></a>";
?>
<html>
<div id="popup_name" class="popup_block">
//CONTENT HERE eg. <? echo $f[2]; ?>
//Image does not display in IE but does in firefox
<img src="/report/yes.gif">
</div>
</html>
<?
}
?>
I am working on my homework. On my page, I need to make a modal window, which is just a picture has x or close letter, shows up whenever people open the page. So far, I called a picture with onload in a body and centered the picture. I don't know if there is anyway that I can just put x or close somewhere so that whenever people click x or close, the picture is not going to be visible ( promoPic.style.visibility = "hidden" this is my code for the picture. And I though I can just put input button or any letters inside of picture because its wrapped by paragraph, but, I can't. I guess I am miss understanding some concept? Code: <body onload="promoCenter()"><p><img src="http://codingforums.com/images/hauntedHouse.jpg" id="promoPic" alt="Haunted House" height="400" width="400" /></p> I want a Login Box to be opened in modal window when user clicks on a link and authentication is done with Ajax. I tried jQuery BlockUI, jQuery UI, ThickBox. But they are large in scope. I also tried writing separate plugin for my need but i don't have clear idea how does it work. So please either suggest a way or give me link to article which is simple to understand and can clear how it work. Hi, I am working on a project in which I have to open my flash demo in a modal window. I got all the code for modal window and it is working great. The only problem is I am not able to open a flash file in modal window. Can any one guide me or suggest me how should I fix this. Thanks in advance. Vikrant Hi. I have a page in a modal window that fades in over the top of my site when clicked. When this page comes up in Google and is clicked it does not load up the site with the modal window over top, it just loads the content of the modal window on a full page. Is there a way to have the link on Google go to the page with the modal window over top? The modal window is "PrettyPhoto" using JQuery. Thanks in advance. Hi, well i used soh tanaka inline modal window which is a popup window like lightbox. But it failed to work with IE9 RELEASED CANDIDATE VERSION. Can anyone tell me that why is it having issue with a better version of explorer. I have made a video to show the error, as to make it more easy to explain what i am saying. here is the link to it http://www.youtube.com/watch?v=pHi9ZlGyWc0 i would look forward to the replies. thank you. Hi, I am writing an application which needs to open a modal dialog window in a secure connection. I am able to open the dialog using HTTPS, but on the status bar I cannot see the SSL Padlock. The application is being written in .NET and the browser I use is IE 6.0. Any suggestions and feedback are welcome. Regards Totre On my main page, I have a list of item ID's which are assigned variables, the list is concatenated and so the variables are always different. So another thing that gets concatenated is a link, which uses javascript/jquery to open a popout modal window which is another php file called sharepost.php. I want to be able to transfer the php variables from the main page to append them on the end of the sharepost.php URL so I can use $_GET to grab them for use. Here's what I have... not working, but I figured I'd give it a try. Code: <?php
//use mysql to loop through some variables
$post_id = $setvalue;
$member_id = $anothersetvalue;
$list .= '
<div>
' . $post_id . '
</div>
<div>
' . $member_id . '
</div>
<div>
<a href="#" class="button" onClick="openup(); return false">Share This Post</a>
</div>
$the_link = " http://sharepost.php?post_id=' . $post_id . '&member_id=' . $member_id . ' ";
';
?>
<HTML>
<head>
<script>
// Displays an external page using an iframe
function openup(){
var src = "<?php echo $the_link;?>";
$.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', {
closeHTML:"",
containerCss:{
height:150,
padding:0,
width:350
},
overlayClose:true,
});
}
</script>
</head>
<body>
<?php echo $list;?>
</body>
</HTML>
Hey there everyone I'm a bit new to javascript and having a bit of a problem. I have a page users can click to upload a photo. When users click I want a modal window to pop up with a simple file upload input inside it and a submit button. I have this working except that when users click submit nothing happens. I'm using nyroModal http://nyromodal.nyrodev.com/#demos and the code I use is: Code: <a href="#test" class="nyroModal"><img src="/img/uploadimage.gif" alt="" /></a> <div id="test" style="display: none; width: 600px;"> <form id="ImageUploadForm" enctype="multipart/form-data" method="post" action="images/upload" accept-charset="utf-8"> <div style="display:none;"> <input type="hidden" name="_method" value="POST" /> </div> <div class="input file"> <label for="ImageFileName">File Name</label> <input type="file" name="data[Image][fileName]" id="ImageFileName" /> </div> <div class="submit"><input type="submit" value="Upload" /> </div> </form> </div> If I take the code out of the div=id"test" the form appears on the normal page and submits just fine. Inside the test div tho the modal window pops up with the form inside but the submit button does nothing. Can anyone enlighten me what I'm doing wrong? Hi all can someone guide me (total JS newbie) on this presumably pretty easy task? I have a "parent" page with some text inputs in it (a form). This is what I am after: -when the user clicks a link it pops open a new window via JS - "child" (this is working). -in the "child" window there are also some text inputs (another form) (done). -when the user changes the value for 'testChild_textInput_4' in the child window, then I want it to automatically set this same value, to effectively overwrite, what is currently in 'testParent_textInput_2' in the parent window. Presumably this involves an onChange event, but it is also OK with me if the needful (the text input's value in the parent window being overwritten) happens upon the child window's form submit. If anyone can show me either trick, I would be thrilled! I set up a test page to make this all easy to talk about: http://www.yellow-turtle.com/testDumpMe_parent.html Please let me know! Thanks! -John Hey there everybody! I'm learning javascript, and I am having trouble figuring out how to do this. Maybe you guys can help me out. What I need is for my main page to have a text field. Above the text field there should be a set of images for bold, italics, underline, etc; when you click on them it inserts the html code <b></b> at the cursor point. Next I want there to be a link, that when clicked will open a popup box with smileys. When you click on one of the smiley images it should insert the smiley code (example :smile: ) into the parent window text field. And would it be possible to make that work with pages of emotes? Or perhaps a second popup window? I hope I explained that without it sounding confusing. I would really appreciate any help. Here is my basic code, it does not include a popup code however. Code: <html>
<script type="text/javascript">
function insert(el,ins) {
window.lstText={};
if (el.setSelectionRange){
el.value = el.value.substring(0,el.selectionStart) + ins + el.value.substring(el.selectionStart,el.selectionEnd) + el.value.substring(el.selectionEnd,el.value.length);
}
else if (document.selection && document.selection.createRange) {
el.focus();
var range = document.selection.createRange();
range.text = ins + range.text;
}
}
</script>
<body>
<form>
<textarea rows="20" cols="100" name="txt1" onfocus="window.lstText=this;">
This is sample text, click anywhere in here then
choose on of the buttons above to see text inserted.
</textarea><br /><br />
<img src="http://i570.photobucket.com/albums/ss141/vwcorrado/Docs_smiley.jpg" onclick="insert(window.lstText,'hello')">
<input type="button" value="hi" onclick="insert(window.lstText,'hi')">
<br />
</form>
</body>
</html>
hi, how can i write this if/ else condition in jquery?? if window resize, run this code, Code: $(window).resize(function(){
var height_window = $(window).height();
var width_window = $(window).width();
var margin_left = (width_window/2) - (840/2);
$('.slide').css({width:width_window+'px'});
$('.content').css({marginLeft:margin_left+'px'});
$('#enter').click(function () {
$('#container').animate({marginLeft:'-'+width_window+'px'}, 600);
return false;
});
$('#back').click(function () {
$('#container').animate({marginLeft:'0px'}, 600);
return false;
});
});
else run this, Code: var height_window = $(window).height();
var width_window = $(window).width();
var margin_left = (width_window/2) - (840/2);
$('.slide').css({width:width_window+'px'});
$('.content').css({marginLeft:margin_left+'px'});
$('#enter').click(function () {
$('#container').animate({marginLeft:'-'+width_window+'px'}, 600);
return false;
});
thanks, Lau All, I've got the following bit of code: Code: $(function(){
$(".facebook").fancybox({
'width' : '80%',
'height' : '80%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'hideOnOverlayClick' : false,
'hideOnContentClick' : false,
'type' : 'iframe'
});
});
When I click on a link I'm trying to open up an iFrame to have my user have some facebook photos be displayed. If they aren't logged in I redirect them to facebook to login and then facebook redirects them back to my page. The return URL looks something like: http://website.com/get_started.php?page=facebook What I would like to do is open up the same iFrame now with their pictures. So I have the following code to do that: Code: function showFacebook(){
alert("goes to show facebook");
$(".facebook").trigger('click');
}
function parseQS(str){
var ob={}, float="", key="", dc=decodeURIComponent;
for( var i=0, mx=str.length; i<mx;i++){
var it=str[i];
if(it==="="){ key=float; float=""; continue;}
if(!it.search(/^[?&]/)){
if(it==="&" && str.slice(i+1,i+5)==="amp;"){ i=(i+4);float+="&"; continue;}
if(key){ob[key]=dc(float);} key=""; float=""; continue;
}
float+=it;
}
ob[key]=dc(float);
return ob;
}
$(window).load(function(){
var allParams=parseQS(location.href);
if(allParams.page!=undefined){
if(allParams.page=="facebook"){
$(".facebook").fancybox({
'width' : '80%',
'height' : '80%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'hideOnOverlayClick' : false,
'hideOnContentClick' : false,
'type' : 'iframe'
});
showFacebook();
}
}
});
I can't get the iFrame to load again. In my window.load function I'm basically trying to reinitialize the fancybox iframe code and then based on the link he http://fancybox.net/blog I'm trying to trigger it again. The alert appears so I know it's getting to the function but it's not opening up the iFrame. Any ideas on how to make this happen? Thanks very much in advance! Hello i am using a simple calendar date picker in which when u click a date is displayed in an input field. Using a javascript i am trying to retrieve data from a second page using this value but probably i am doing something wrong. 1st page: Code: <script type="text/javascript">
function showCustomer(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","check6.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
Check in:
<input onchange="showCustomer(this.value)" size="22" id="f_date1" /><button id="f_btn1">...</button>
<script type="text/javascript">//<![CDATA[
var cal = Calendar.setup({
onSelect: function(cal) { cal.hide() },
showTime: true
});
cal.manageFields("f_btn1", "f_date1", "%Y-%m-%d");
//]]></script>
</form>
<br />
<div id="txtHint">here...</div>
</body>
</html>
and in second one i am trying to get date like this: Code: sql_cmd.CommandText = "SELECT dbo.rooms.id, type, image, price,details FROM dbo.rooms, dbo.transactions WHERE dbo.rooms.id=dbo.transactions.roomid and '" & request.querystring("q") & "' not between checkin and checkout"
How can i run a script after the window.open loads completely?
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="javascript/text">
<!--
function clearInputField( input, def )
input = document.getElementById( input );
if ( input.value == def ) {
input.value = '';
}
}
-->
</script>
</head>
<body>
<b>Testing Input</b>
<input id="input" onclick="JavaScript: clearInputField('input', 'Enter Text');" type="text" size="31" value="Enter Text" />
<body>
</html>
This gives me a "Uncaught ReferenceError: clearInputField is not defined" error and I'm not sure why...? I'm new in web-development. I've searched it but it's not found. I make a input then how i get value of it for javascript value?
Hi everyone, im new to javascript and I have created two forms.. a value will be put in the first field and the second field should display either $20 or $35 depending on the value of the first field. Im doing something wrong here.. but I cant see what. Any help is appreciated. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Distance from Depot</title> </head> <body> <form id="distanceform"> <ul> <li> <label for="Distance from EverWarm Depot">Distance from Depot (km):</label> <input type="text" id="distance" class="large"/> </li> </ul> </form> <input name="Button1" type="button" value="calculate" onclick="deliverycost()"/> <form id="deliverycostform"> <ul> <li> <label for="Delivery Cost" >Delivery Cost:</label> <input type="text" id="deliverycost" class="large"/> </li> </ul> </form> <script> function deliverycost() { /* Here is the delivery cost: less than or equal to twenty kilometres is $20.00 greater than twenty kilometres is $35.00 */ var distance = document.forms["neworder"]["distance"].value; if(distance<20) { document.getElementById('deliverycost').innerHTML="$20"; } else { document.getElementById('deliverycost').innerHTML="$35"; } } </script> </body> </html> Below is my previous code I had working in the manner it would change the price, sub_total, tax, sh, total, and total_paid input fields to 0. There are two problems with this... 1. When it outputs to the input fields, the value displays as 0 instead of 0.00. 2. I need to have it only react when the value typed into the input field "trees_sold" is "0". If any higher, I would like it to ignore the statement. Code: <!-- Comp all prices to zero value -->
<SCRIPT LANGUAGE="JavaScript">
var trees_sold = 0.00;
function InitSaveVariables(form) {
price = form.price.value;
sub_total = form.sub_total.value;
tax = form.tax.value;
sh = form.sh.value;
total = form.total.value;
total_paid = form.total_paid.value;
}
function CompPrices(form) {
if (trees_sold == 0.00) {
InitSaveVariables(form);
form.price.value = 0.00;
form.sub_total.value = 0.00;
form.tax.value = 0.00;
form.sh.value = 0.00;
form.total.value = 0.00;
form.total_paid.value = 0.00;
}
}
</script>
Code: <input name="trees_sold" id="trees_sold" size="15" onkeyup="javascript:CompPrices(this.form);" maxlength="15" /> Below is my current code I'm working with that I can't seem to get to function properly. I've modified the first two lines of code here, and am attempting to pull any data that is typed in and automatically take into consideration if it is a "0" value, it reacts as my code below says "if (trees_sold == 0.00)" and if anything else, it will not do anything. This is not working unfortunately. Code: <!-- Comp all prices to zero value -->
<SCRIPT LANGUAGE="JavaScript">
form.trees_sold.value = "";
trees_sold = form.trees_sold.value;
function InitSaveVariables(form) {
price = form.price.value;
sub_total = form.sub_total.value;
tax = form.tax.value;
sh = form.sh.value;
total = form.total.value;
total_paid = form.total_paid.value;
}
function CompPrices(form) {
if (trees_sold == 0.00) {
InitSaveVariables(form);
form.price.value = 0.00;
form.sub_total.value = 0.00;
form.tax.value = 0.00;
form.sh.value = 0.00;
form.total.value = 0.00;
form.total_paid.value = 0.00;
}
}
</script>
Code: <input name="trees_sold" id="trees_sold" size="15" onkeyup="javascript:CompPrices(this.form);" maxlength="15" /> Anyone have any ideas? Thank you. can someone help me isolate this input script to 1 designated input field? it just removes any pre-existing value in the field but does so to all input text types now. Code: // Home Page Search Box Input Clear
function initInputs () {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++ ){
if(inputs[i].type == "text" ) {
inputs[i].valueHtml = inputs[i].value;
inputs[i].onfocus = function (){
this.value = "";
}
inputs[i].onblur = function (){
this.value != ""? this.value = this.value: this.value = this.valueHtml;
}
}
}
}
if (window.addEventListener){
window.addEventListener("load", initInputs, false);
}
else if (window.attachEvent){
window.attachEvent("onload", initInputs);
}
|
|||||||