Whats wrong with my code . The title is not displayed within the div banAdT :
<form action="" method="post" enctype="multipart/form-data">
<p>
Banner Ad Name :<br />
<input type="text" name="bannerAdName" id="bannerAdName" />
</p>
<p>
Your web page :<br />
<input type="text" name="bannerAdWeb" id="bannerAdWeb" />
</p>
<p>
Ad image :<br />
<input type="file" name="bannerAdImage" id="bannerAdImage"/>
</p>
<p>
Title :<br />
<input type="text" name="bannerAdTitle" id="bannerAdTitle" />
</p>
<p>
Description :<br />
<textarea name="bannerAdDesc" id="bannerAdDesc" ></textarea>
</p>
<div id="button"><input type="button" value="VIEW" onclick="return upload()"/></div>
<input type="hidden" value="POST" />
</form>
<div id="popupContact">
<a id="popupContactClose">x</a>
<div id="contactArea">
<div id="banAdT">
<script>document.write(document.getElementById("bannerAdTitle").value);</script> <!-- Displays nothing -->
</div>
<img src="" id="preview" width="120" height="120" />
</div>
</div>
That's because when the script runs, the element bannerAdTitle won't have a value. I'm not exactly sure what you're trying to do, but you probably want to attach a change event listener to the bannerAdTitle input, and write the value from there:
document.getElementById("bannerAdTitle").onchange = function() {
document.getElementById("banAdT").innerHTML = this.value;
}
That will write the value of bannerAdTitle in the banAdT element every time the change event is fired.
document.write is executed as the page loads, but at that point you haven't given bannerAdTitle a value - the INPUT is empty.
Related
I am trying to submit a form inside lightbox modal. But popup showing empty content. my code is as follows:
<amp-lightbox id="success-lightbox" layout="nodisplay">
<amp-list src="http://localhost:4000" width="auto" height="200" layout="fixed-height" items="." single-item>
<template type="amp-mustache">
<div class="lightbox-modal">
<form action="/" method="get" target="_top">
{{#items}}
<input type="checkbox" value={{id}} /> {{/items}}
<input type="submit" value="submit" />
</form>
</div>
</template>
</amp-list>
</amp-lightbox>
<input class="" type="submit" value="show more" on="tap:success-lightbox" />
I included all dependencies required amp-form, amp-lightbox, amp-list, amp-mustache.
If I remove the form tag, checkboxes are showing fine.
The working code:
<amp-lightbox id="success-lightbox" layout="nodisplay">
<amp-list src="http://localhost:4000" width="auto" height="200" layout="fixed-height" items="." single-item>
<template type="amp-mustache">
<div class="lightbox-modal">
{{#items}}
<input type="checkbox" value={{id}} /> {{/items}}
<input type="submit" value="submit" />
</div>
</template>
</amp-list>
</amp-lightbox>
<input class="" type="submit" value="show more" on="tap:success-lightbox" />
I went through docs. but didn't find anything. is it not possible to nest the form inside amp-lightbox ?? if not possible, is there any workaround to submit data from lightbox ??
amp-mustache doesn't support form elements. A simple workaround in your case is moving the form tag outside the amp-list element.
I have added an aweber form on my project file called adduser.php. It has three fields First name, Last Name and Email. When user will submit form data they will go to welcome.php page. In welcome.php page I have some welcome message and and button called "Start". When a user click on "Start" Button they will get a custom form.
So, My question is now, How can i show previously data that was submited by user on adduser.php on my custom form.
Remember that I did not use any custom database to store adduser.php form data. This page handled by aweber.com embedded Perl script.
There are total four pages on my Project folder. one is adduser.php and then welcom.php, then custom.from.php and last one is thankyou.php.
This is the form script for adduser.php. It is a embedded from script provided by aweber.com.
<form method="post" class="af-form-wrapper" action="https://www.aweber.com/scripts/addlead.pl" >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="1305186106" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="awlist3791609" />
<input type="hidden" name="redirect" value="http://localhost/php/intro.php?" id="redirect_33699466c49909887d43ec924c761a52" />
<input type="hidden" name="meta_adtracking" value="My_Web_Form" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="name (awf_first),name (awf_last),email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<div id="af-form-1305186106" class="af-form">
<div id="af-header-1305186106" class="af-header">
<div class="bodyText">
<p> </p>
</div>
</div>
<div id="af-body-1305186106" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-71044792-first">First Name:</label>
<div class="af-textWrap">
<input id="awf_field-71044792-first" type="text" class="text" name="name (awf_first)" value=""/>
</div>
<div class="af-clear"></div>
</div>
<div class="af-element">
<label class="previewLabel" for="awf_field-71044792-last">Last Name:</label>
<div class="af-textWrap">
<input id="awf_field-71044792-last" class="text" type="text" name="name (awf_last)" value=""/>
</div>
<div class="af-clear"></div>
</div>
<div class="af-element">
<label class="previewLabel" for="awf_field-71044793">Email: </label>
<div class="af-textWrap">
<input class="text" id="awf_field-71044793" type="text" name="email" value=""/>
</div>
<div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<input name="submit" type="submit" class="btn btn-success" value="Start Screening"/>
</div>
</div>
</div>
</form>
I'm in big trouble, I'm unable to handle I'm waiting for support from expert developer. I'm still working on local server connected with internet.
You can use $_SESSION to use your variables through your entire application runtime. At the end, just close them to clear your users browsers.
It's a common practice used by "flash session messages". They setup the message by $_SESSION and close when the variables has no use anymore.
Change the default action of your form
<form method="post" class="af-form-wrapper" action="https://www.aweber.com/scripts/addlead.pl" >
to
<form method="post" class="af-form-wrapper" action="trial.php" >
In this file trial.php, start the seeion first and then use the session variables as follows
session_start();
$_SESSION["first-title"] = $_POST['awf-first'];
and so on for each of the form inputs and then redirect the page to default action using location
header('Location : Aweber perl script link');
That's is the html structure: (see also in jsfiddle here: http://jsfiddle.net/hQ5dZ/)
<div id="fields">
<div>
<input type="file" />
<input type="button" value="+add">
<div>
<div>
<input type="file" />
<input type="button" value="+add">
<div>
</div>
The second jQuery-statement below does not work, why?
$('#fields').children().hide();
$('#fields :first-child').show();
EDIT: Desired Behaviour -> First div-child (with its content) should appear
Your markup is invalid — you are not closing the <div> and <input> tags:
<div id="fields">
<div>
<input type="file" />
<input type="button" value="+add" />
</div>
<div>
<input type="file" />
<input type="button" value="+add" />
</div>
</div>
After changing the markup to a valid syntax, it's working - http://jsfiddle.net/teddyrised/nBbxY/
You were not closing the div elements, instead was creating new div child which was causing the #fields element to have only one child.
So $('#fields').children().hide() was hiding the child and then $('#fields > :first-child').show() was displaying it back.
<div id="fields">
<div> <!-- fc-1 -->
<input type="file" /> <!-- fc-2 -->
<input type="button" value="+add" />
</div> <!--not closed-->
<div>
<input type="file" /> <!-- fc-3 -->
<input type="button" value="+add" />
</div>
</div> <!--not closed-->
$('#fields').children().hide();
$('#fields > :first-child').show();
Demo: Fiddle
Also the second selector is updated because #fields :first-child will select all descendant elements of #fields which are the first child of its parent, in the above markup it will select all fields marked as fc-x
Besides closing the needed tags you can shorten you jQuery code like so, for example:
$('#fields').children().hide().eq(0).show();
Working example online: http://jsfiddle.net/nBbxY/1/
I have a series of divs that load each has a dynamic id name based on a database result.
Within each div are several hidden input text fields that all have the same name and id.
The user clicks a href which is dynamically generated from the database launching colorbox. For example ()
On the opening div is a button. When the user clicks this button it submits a form.
As it is now it sumbits only the values of the first instance of the fields (for example Yellow, digital-world, Digital Revolution).
It is suppsoed to submit the values of the url that is active. For example, if the user clicks (">) then it should submit Blue, abstract, Abstract Panel. Instead of Yellow, digital-world, Digital Revolution.
In addition, there are scroll buttons on the colorbox so for example the user can click a next button to load the next set of values. Ie. if he is on and clicks the next button he is suddenly on so if he clicks the button on here it should submit the correct values ie. Blue, abstract, Abstract Panel.
Does this make sense?
Let me show...
<div class="doneit">
<div style="float:left;"><img src="/videos/digital-world/Yellow/02_Digital_Revolution_Yellow.jpg" ></div>
div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Yellow">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="digital-world">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Digital Revolution">
</div>
<div class="doneit">
<div style="float:left;"><img src="/videos/abstract/Blue/06_Abstract_Panel_Blue.jpg"></div>
<div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Blue">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="abstract">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Abstract Panel">
</div>
<div class="doneit">
<div style="float:left;"><img src="/videos/abstract/Red/10_Abstract_Discs_Red.jpg"></div>
<div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Red">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="abstract">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Abstract Disks">
</div>
<div class="doneit">
<div style="float:left;"><img src="/videos/electric-effect/Purple/electric-purple-grid.jpg"></div>
<div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Purple">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="electric-effect">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Electric Grid">
</div>
<div style="display:none">
<div id="container"><div id="video"></div>
<div id="doesit">
<script type="text/javascript">
function submitMyForm(){
$('#Product_color_16').val($('#Product_Vid_1').val());
$('#Product_Dir_16').val($('#Product_Dir_1').val());
$('#Product_Name_16').val($('#Product_Name_1').val());
$('#myform').submit();
}
</script>
<form name="myform" action="/thisurl.asp" method="post">
<input type="hidden" id="Product_color_16" name="Product_color_16" value="">
<input type="hidden" id="Product_Dir_16" name="Product_Dir_16" value="">
<input type="hidden" id="Product_Name_16" name="Product_Name_16" value="">
<button class="addtobutton addtocart" onclick="submitMyForm();"></button>
</form>
</div></div>
</div>
Thanks for any and all help!
You have multiple elements sharing the same ID - which is wrong and can cause you lots of problems.
One of the problems is exactly the one you're facing now.
As you don't have a unique ID for the elements, the code will consider just the first match (in your case, the "Yellow" ones)
To fix this? Let's leave as much as possible with jQuery, to make it simple. Also, let's fix a bit the HTML markup. Please refer to the comments.
HTML
<!-- Removed all the input ids, because they were duplicated and useless. If you really need them for something else, make them unique. -->
<div class="doneit">
<div style="float:left;">
<a href="#container" id="02_Digital_Revolution_Yellow" target="Yellow" title="digital-world" class="lightbox-image inline">
<img src="/videos/digital-world/Yellow/02_Digital_Revolution_Yellow.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Yellow" />
<input type="hidden" name="Product_Dir_1" value="digital-world" />
<input type="hidden" name="Product_Name_1" value="Digital Revolution" />
</div>
<div class="doneit">
<div style="float:left;">
<a href="#container" id="06_Abstract_Panel_Blue" target="Blue" title="abstract" class="lightbox-image inline">
<img src="/videos/abstract/Blue/06_Abstract_Panel_Blue.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Blue" />
<input type="hidden" name="Product_Dir_1" value="abstract" />
<input type="hidden" name="Product_Name_1" value="Abstract Panel" />
</div>
<div class="doneit">
<div style="float:left;">
<a href="#container" id="10_Abstract_Discs_Red" target="Red" title="abstract" class="lightbox-image inline">
<img src="/videos/abstract/Red/10_Abstract_Discs_Red.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Red" />
<input type="hidden" name="Product_Dir_1" value="abstract" />
<input type="hidden" name="Product_Name_1" value="Abstract Disks" />
</div>
<div class="doneit">
<div style="float:left;">
<a href="#container" id="electric-purple-grid" target="Purple" title="electric-effect" class="lightbox-image inline">
<img src="/videos/electric-effect/Purple/electric-purple-grid.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Purple" />
<input type="hidden" name="Product_Dir_1" value="electric-effect" />
<input type="hidden" name="Product_Name_1" value="Electric Grid" />
</div>
<div style="display:none">
<div id="container">
<div id="video"></div>
<div id="doesit">
<form name="myform" action="/thisurl.asp" method="post">
<input type="hidden" id="Product_color_16" name="Product_color_16" value="" />
<input type="hidden" id="Product_Dir_16" name="Product_Dir_16" value="" />
<input type="hidden" id="Product_Name_16" name="Product_Name_16" value="" />
<!-- You can just ommit the onclick here. It's gonna work automatically, because it's a submit type. -->
<button class="addtobutton addtocart" type="submit"></button>
</form>
</div>
</div>
</div>
jQuery (Javascript):
// Add this bit to your page header, straight into the HTML markup (wrapped
// into script tags) or save into a separate JS file. Up to you.
var setFormValues = function(div) {
// Getting the inputs values. The ones within the clicked div.
// We look for the inputs which name starts with Product_...
// Let's use .prop() instead of .val() because IE sometimes doesn's like it.
var div = $(div);
var productVid = $("input[name^='Product_Vid_']", div).prop("value");
var productDir = $("input[name^='Product_Dir_']", div).prop("value");
var productName = $("input[name^='Product_Name_']", div).prop("value");
// Setting the form inputs values.
$("#Product_color_16").prop("value", productVid);
$("#Product_Dir_16").prop("value", productDir);
$("#Product_Name_16").prop("value", productName);
}
$(function () {
// When the user clicks on one of the divs.
$(".doneit").on("click", function () {
setFormValues($(this));
return true;
});
// When the user clicks the cart button, on the video window.
$(".addtocart").on("click", function() {
// Here we need a bit of native Javascript.
var videoPlaying = document.getElementById("video_video");
if (typeof videoPlaying != "undefined") {
var videoSource = videoPlaying.currentSrc;
if (typeof videoSource != "undefined") {
var videoSourceFilename = videoSource.split("com/")[1].split(".")[0];
// Check which div has an image which src
// matches the video filename.
var image = $(document).find("img[src*='" + videoSourceFilename + "']");
if (typeof image != "undefined") {
var divContainer = $(image).parent().parent().parent();
if (typeof divContainer != "undefined")
setFormValues($(divContainer));
}
}
}
return true;
});
});
I'm trying to slideUp part of page by jQuery.
I use this code
$("#FirstPage").slideUp(1000);
I will hide FirstPage part of page,but not by time,I mean that it will hide suddenly not by 1000 ms.
the following code is FirstPage part,which should be hide after 1000ms and with slideUp.
<div id="FirstPage">
<div id="Login">
<form method="post" id="LoginForm">
<br />
<input type="text" name="username" id="username" />
<br />
<input type="password" name="passowrd" id="password" />
<br />
<input type="checkbox" name="invisible" value="TRUE" id="invisible" />
<br />
<img src="" /><input type="text" name="captcha" disabled="true" style="display: none"
id="captcha" />
<br />
<input type="button" value="Login ..." onclick="Ajax_Login()" />
</form>
</div>
<div class="OtherFeaturBig" id="WindowsVersion">
<img src="http://localhost/Files/Images/02.jpg" />
</div>
<div class="OtherFeaturBig" id="Advertisment">
<img src="http://localhost/Files/Images/02.jpg" />
</div>
<div class="OtherFeaturSmall" id="AboutUs">
<img src="http://localhost/Files/Images/03.jpg" />
</div>
<div class="OtherFeaturSmall" id="ContactUs">
<img src="http://localhost/Files/Images/03.jpg" />
</div>
</div>
where is my code problem?
This code works fine to slide your div up upon the click of a button:
$("#hide").click(function() {
$("#FirstPage").slideUp(1000);
})
As used in this jsFiddle with your HTML (I removed the non-functioning images): http://jsfiddle.net/jfriend00/JFRGr/.
So, the issue must have to do with either your code or the rest of your HTML, both of which you have not shared. If you want further help, please show us the actual code you are using and explain what triggers the code to run.
As Trikks said, make sure that you aren't calling slideUp before the page is fully loaded.
try
Ensure to run your code after document.ready so the DOM is really loaded. Also ensure that jQuery is loaded and 1sec = 1000 ms...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#FirstPage").slideUp(1000);
});
</script>