Hello Friends
I want to upload a image but according to requirement when click on button a pop window display and inner part of pop window display browse field using code something like
<form action="index.php" method="post" onsubmit="">
<div><label>Name:</label> <input type="text" name="form[name]" /></div>
<div><label>File:</label> <input type="file" name="form[file]" /></div>
<div><input type="submit" value="SUBMIT" /></div>
</form>
actually i want to show this browse field in pop-up window.
Please reply me regard this
Thanks
Just give a myform ID to your form hide it, using display:none; and try this code
Show Browse
UPDATE
I have created a demo of what you wanted. Check it here http://jsfiddle.net/Starx/rVw9M/
Since you are unfamilier with jquery, you need jquery library for this to run put this in your head (HTML Pages' Head :D)
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
Basically, here is how you could achieve that (just off the top of my head):
a) Create a new separate page and move your code into this page
b) On the existing page create a DIV and add IFRAME into it which would be pointed to that new page, e.g.
<div class="uploader" style="display: none;">
<iframe scrolling="no" style="width: 100%; height: 100%;" src="url"></iframe>
</div>
c) Download and add some modal popup plugin - personally, I prefer SimpleModal
d) Now you can show your popup by calling modal() method on the .uploader class, something like this..
Show Uploader
Related
So I have this form:
<form method="post" action="index.php" id="searchform">
<input type="text" name="search" placeholder="Search...">
<input type="image" src="img/img1.png" alt="submit" onmouseover="hover(this);" onmouseout="unhover(this);" /></a>
</form>
When the user searches for something I want to change this div:
<div class = "mainText">
<h2>Today's Events: </h2>
</div>
To say this:
<div class = "mainText">
<h2>Results: </h2>
</div>
How can I do this?
EDIT: Is it possible to run this code from within a php if statement?
jquery .text() seems a better fit, so you can just change the text of the tag.
$(".mainText h2").text("Results:");
More on this here:
http://www.w3schools.com/jquery/html_text.asp
The action in your form is the destination of where your form ends up.
If you are looking to control the dom elements you need something like javascript or jquery to control the front end of your application.
You could use jquery to simply listen for when your user has clicked the button or submitted the form and parse the results (in this case, just switching html text). *Remove the the action destination otherwise the page will redirect to index.php
$('form').submit(function(){
$('.mainText').html('<h2>Results: </h2>');
return false;
});
Common usage is to put an ajax call in the submit function to retrieve some data from outside the page source. Hopefully that puts you on track :)
The scenario:
I have a page with form that loads more than 4 iframe. i have no control in this iframe as this is generated by other website(API);
The Iframe has a form and input in it.
in my code
<form>
<div class="fields">
<!--onload iframe will populate this area-->
</div>
<div class="fields">
<!--onload iframe will populate this area-->
</div>
<div class="fields">
<!--onload iframe will populate this area-->
</div> </form>
upon page load this happens
<form>
<div class="fields">
<iframe src="" frameborder="0">
<html>
<body>
<form action="">
<input type="text">
</form>
</body>
</html>
</iframe>
</div>
<div class="fields">
<iframe src="" frameborder="0">
<html>
<body>
<form action="">
<input type="text">
</form>
</body>
</html>
</iframe>
</div>
<div class="fields">
<iframe src="" frameborder="0">
<html>
<body>
<form action="">
<input type="text">
</form>
</body>
</html>
</iframe>
</div></form>
in chrome:
when filling up the form, tabbing in chrome does not have any problem.
e.g click on the first input, then press tab key for next input until you complete the whole form filling up.
but in firefox mozilla:
click on the first input, then tab twice to get the next input. it does not select directly the input fields, it seems it goes to every element.
is there a script to prevent this? like the normal behaviour in chrome?
i have check this Tabindex to skip iframe but not content inside
but my case is different
**Update - It's important to note that this is a special accessibility feature of Firefox & Safari, i.e. it was implemented like this on purpose. Your question is in fact linked to this one - How to remove dotted outline from iframe in Firefox when tabbed
** Ideas on how to work around this..
I ran into this exact same issue today and I found a solution. However, there's two important caveats:
The code below shows only a partial solution - i.e. what you asked for - going forward. When the user presses SHIFT + TAB (to go back), they will see the border once again. So, in order to support this fully, you'd need to listen for these keyboard events, send a message
to the targeted Iframe, and within that controller focus the input. Also, bear in mind that you'd need to consider different browsers' implementations of this and gracefully handle the differences.
You need to be the provider/have full control of the iframe contents, in order to access the contents of the Iframe, attach listeners, get input and focus.
Hence, in your JavaScript controller you can do the following to implement the TAB (go forward) functionality:
constructor() {
...
this.input = document.getElementById("yourInputId");
window.addEventListener("focus", event => {
event.preventDefault();
this.input.focus();
});
}
What happens in the snippet above is:
Register an event listener on the whole window (meaning the whole iframe in this case)
Intercept the body focus event (as far as I understand, Firefox focuses the body of a cross-origin Iframe first. Perhaps to indicate it's a different context).
Prevent the default - so not focus
Focusing the input directly instead.
I am creating a registration form where its contents are contained in DIV (hidden), then when the user clicks a button, the modal shows and the content is loaded through the ID of the DIV.
However, I am encountering a problem where the button of the DIV is not recognized in my script. I assigned a click event using jquery, but it doesn't work. Probably because the hidden DIV has conflicts with the DIV create in the modal (which will eventually have the same IDs).
Here is my script:
$('#addCollege').click(function(e){
modal.open({content: $('#addCollegeForm').html()});
e.preventDefault();`
});
This is the DIV
<div id="addCollegeForm" style="display:none">
<label>College:</label><br>
<input type="text" placeholder = "Enter college name here..." id = "collegeDescription" > <br>
<input type="button" value="Save" id= "addCollege">
</div>
Thanks and I appreciate your help.
I wrote a dialog plugin for bootstrap, and got a similar problem.
I want to pop up an existing dom element.
Here is solution:
$targetElement.detach().appendTo($window.find('.modal-body')) // $targetElement is an existing dom
Detach element and append it to container.
Don't forget to revert the element to old container.
Hope it helps.
Regards
Try moving the button that opens your dialog out of the dialog:
EDIT - something like this should work...
HTML...
<div id="addCollegeForm">things in your dialog</div>
<input type="button" value="open dialog" id="addCollege">
jquery...
$("#addCollegeForm").dialog({
autoOpen: false
});
$('#addCollege').click(function () {
$("#addCollegeForm").dialog("open");
});
http://jsfiddle.net/DTq6m/
http://api.jqueryui.com/dialog/#option-autoOpen
i have small-image class when i click on it megnefic popup open. in my megnific popup there is big image of clicked image and one button with other-form-opener class when i click on button other-form-div class with form comes up with my custom popup in this part when i click on form element they dont work as default.
<div class="megnific_opener"><img class="small-image" ></div>
<div class="megnific_popup_div">
<img class="big-image">
more-info
</div>
<div class="other-form-div">
<form>
<input type="text">
<input type="text">
<input type="text">
</form>
</div>
i give stucture of my html and i already cheked that there is not a z-index problem.
so please help me thank you.
here is my demo in jsfiddle : http://jsfiddle.net/QHh7W/
Please use Magnific popup callbacks and move your custom html inside Magnific popup when opened and move it inside body when closed. You can check below working demo.
jsFiddle demo
Although i cannot get this working as per your that is opening both popups one above another in same window.
but in case you need it like this : open second after clicking from one.
http://jsfiddle.net/yDvvQ/5/
I have added different instance of megnific for both divs.
It is working for both popups, content and form both.
You can later amend it to add more popups or return to first from second.
Please review once and comment.
Regards
Can an onsubmit event insert an image into the page before the page submits/transfers control to the next page?
I am using classic asp.
Of course. The function resolves before the form is submitted.
(Although… while an img element may be inserted into the page, it might not load before the browser has gone to the next one, and even if it does, the user might not have time to see it clearly)
Yes . You can insert the HTML code (through javascript):
<img src="imgsrc">
But it takes a little time for loading the image. The form send the user to another page in new window or in the same window? Why would you want to insert an image in the current window if the page will be replaced with the new one?
Yes you can do this. It would be easier (for me to write) if you used jquery:
html:
<form id="myForm" action="">
<input type="text" id="someId" />
<input type="submit" id="submit" value="submit" />
</form>
and then JavaScript would be:
$(document).ready(function() {
$("#myForm").submit(function() {
$(this).append('<img src="someImage.jpg" alt="" />');
});
});
http://jsfiddle.net/rYUbQ/
But like others have said it might not be loaded and displayed before the form submits so you might want to instead look in to preloading the image and then just setting it to visible before the page submits.