I have a question and maybe there is a better method of doing it beside php but i am throwing the idea out there... let me know your expert advice.
I will have a pre designed certificate i will create in PHP and design in HTML.
User will be directed to a page to enter the name to print on the certificate.
the end result will be sized to 8 1/2" by 11" ready to print.
Image which shows what I am requesting: Example of Design
What is the best way to approach this? or is there something thats pre made and can be customized for my request?
Here's an example in Javascript.
HTML:
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
Enter Name:
<input id="who" type="text" />
<input id="submit" type="button" class="btn" value="Submit" />
<div id="certificate" style="text-align:center;display:none;">
<h1>Certificate of Merit</h1>
<h3>Presented To:</h3>
<h4 id="name"></h4>
<hr />
<h2>Congratz</h2>
</div>
Javascript:
$('#submit').click(function() {
$('#name').html($('#who').val());
$('#certificate').fadeIn();
});
JSFiddle: http://jsfiddle.net/6SWVV/1/
Related
I'm trying to learn mysqli and so I thought I'd put what I learned to the test. I'm just trying to get the mark up right for a login page to do some simple query's. So the first thing I did was set up a form to collect the first name and password from the user. I wanted a little space in between the two inputs (and another for submit). Since they are "stacked" on top of each other I thought I would do it with this code (the css does connect)
`#logininput{
margin-top:5 px;
}`
really simple easy css. But it did nothing so I tried setting in to margin instead of margin-top. Still nothing. Here is the markup used.
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<form action="index.php" method="post">
<input type="text" id="logininput" name="Fname"><br/>
<input type="text" id="logininput" name="Lname"><br/>
<input type="submit" id="logininput"name="loginS"><br/>
</form>
</body>
Anyone know why it is not working? (as a note there is a pair of php tags with a require in them for connecting to a DB)
The problem is that there is a space between the value of margin an the units. It should be
margin-top: 5px;
without the space between '5' and 'px'
You should use class instead when you want to style more than one element, with id, only the first occurrence will get the styles:
.logininput {
margin-top: 5px;
}
<form action="index.php" method="post">
<input type="text" class="logininput" name="Fname"><br/>
<input type="text" class="logininput" name="Lname"><br/>
<input type="submit" class="logininput" name="loginS"><br/>
</form>
I am just starting web programming with javascript and php.
I am trying to build a webpage that would accept text pasted in a form on upper half of page and on the press of a button show the processed text ( could be any type of text processing lets say removing all occurances of letter m from the text ).
i can you guide me to a link on the net to understand what kind of coding would be required in such a webpage ?
what kind of basics of php / javascript should be understood before trying out this page ?
thanks
You can use javascript like this
HTML code
<input type="text" id="name" />
<input type="buttom" onclick="do_process();" value="Process" />
JavaScript Code
<script type="text/javascript">
function do_process() {
var data = document.getElementById("name").value;
var processed_data = here put processing function whatever you want;
document.getElementById("name").value = processed_data;
}
</script>
You can do with jQuery (see here). Read all about jQuery here
HTML
<input type='textarea'>
<hr />
<div id="transfer">Click for copy</div>
<hr />
<div id="thecopy"></div>
JavaScript
$('#transfer').click(function(){
$('#thecopy').text($('input').val());
});
Is it possible to determine if the user has selected a file for a particular input type="file" field using javascript/jQuery?
I have developed a custom fieldtype for ExpressionEngine (PHP-based CMS) that lets users upload and store their files on Amazon S3, but the most popular EE hosting service has set a max_file_uploads limit of 20. I'd like to allow the user to upload 20 files, edit the entry again to add 20 more, etc. Unfortunately upon editing the entry the initial 20 files have a "replace this image" file input field that appears to be knocking out the possibility of uploading new images. I'd like to remove any unused file input fields via javascript when the form is submitted.
Yes - you can read the value and even bind to the change event if you want.
<html>
<head>
<title>Test Page</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function()
{
$('#tester').change( function()
{
console.log( $(this).val() );
});
});
</script>
</head>
<body>
<input type="file" id="tester" />
</body>
</html>
But there are other, multiple-upload solutions that might suit your needs better, such as bpeterson76 posted.
This code will remove all the empty file inputs from the form and then submit it:
HTML:
<form action="#">
<input type="file" name="file1" /><br />
<input type="file" name="file2" /><br />
<input type="file" name="file3" /><br />
<input type="file" name="file4" /><br />
<input type="file" name="file5" /><br />
<input type="submit" value="Submit" />
</form>
JavaScript:
$(function() {
$("form").submit(function(){
$("input:file", this).filter(function(){
return ($(this).val().length == 0);
}).remove();
});
});
Example:
http://jsbin.com/axuka3/
This uploader has worked really well for my purposes: http://webdeveloperplus.com/jquery/ajax-multiple-file-upload-form-using-jquery/
The benefit to using it as a basis for your coding is that the files are uploaded asynchronously, so no need to limit to 20 at a time. There's a definite UI benefit to doing the upload while the user is searching.
The resize is a pretty nice feature too, if you need it!
Can anyone explain why it comes? it makes source code lengthy and it will affect to site SEO also. Site is using Sitecore CMS
Is this fault of .NET framework or Sitecore CMS?
Is PHP and other technology better to produce clean, semantic and W3C valid code?
These extra info in header (what is the use of these)
<head>
<meta name="CODE_LANGUAGE" content="C#" />
<meta name="vs_defaultClientScript" content="JavaScript" />
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5" />
</head>
So much unneeded xhtml, JavaScript code just after body, why such a long code just after body?
<body>
<form name="MainForm" method="post" action="/en/site-services/alert.aspx" id="MainForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwMTk1MTQ1MDUPZBYGZg8VARdBbGVydCAgQm9va2VyIEdyb3VwIFBMQ2QCBg8VAQVhbGVydGQCBxBkZBYCAgEPZBYCAgEPZBYCZg9kFgJmDw8WAh4FQ2xhc3MFDWdsb2JhbFdyYXBwZXIWAh4FY2xhc3MFDWdsb2JhbFdyYXBwZXIWAmYPZBYGZg9kFgJmD2QWAmYPDxYCHwAFD0hlYWRlckNvbnRhaW5lchYCHwEFD0hlYWRlckNvbnRhaW5lchYCZg9kFgICAg8PFgQeCENzc0NsYXNzBQZTZWFyY2geBF8hU0ICAmQWAmYPDxYCHwAFG1NlYXJjaEdlbmVyYWxFcnJvckNvbnRhaW5lchYCHwEFG1NlYXJjaEdlbmVyYWxFcnJvckNvbnRhaW5lcmQCAQ9kFgJmD2QWAmYPDxYCHwAFE1R3b0NvbHVtbnNDb250YWluZXIWAh8BBRNUd29Db2x1bW5zQ29udGFpbmVyFgRmDw8WAh8ABRpUd29Db2x1bW5zTGVmdENvbENvbnRhaW5lchYCHwEFGlR3b0NvbHVtbnNMZWZ0Q29sQ29udGFpbmVyZAIBDw8WAh8ABRtUd29Db2x1bW5zUmlnaHRDb2xDb250YWluZXIWAh8BBRtUd29Db2x1bW5zUmlnaHRDb2xDb250YWluZXIWAmYPZBYCAgMPZBYEZg9kFhBmDw8WBB8ABSlhbGVydHNJbnZhbGlkRW1haWxBZGRyZXNzTWVzc2FnZUNvbnRhaW5lch4JX19WaXNpYmxlaBYCHwEFKWFsZXJ0c0ludmFsaWRFbWFpbEFkZHJlc3NNZXNzYWdlQ29udGFpbmVyZAIBDw8WBB8ABRhhbGVydHNMb2dpbkZhaWxDb250YWluZXIfBGgWAh8BBRhhbGVydHNMb2dpbkZhaWxDb250YWluZXJkAgIPDxYEHwAFG2FsZXJ0c0xvZ2luU3VjY2Vzc0NvbnRhaW5lch8EaBYCHwEFG2FsZXJ0c0xvZ2luU3VjY2Vzc0NvbnRhaW5lchYGZg8PFgIfAAUhYWxlcnRzTG9naW5TdWNjZXNzQmVmb3JlQ29udGFpbmVyFgIfAQUhYWxlcnRzTG9naW5TdWNjZXNzQmVmb3JlQ29udGFpbmVyZAIBDw8WAh8ABR9hbGVydHNMb2dpblN1Y2Nlc3NFZGl0Q29udGFpbmVyFgIfAQUfYWxlcnRzTG9naW5TdWNjZXNzRWRpdENvbnRhaW5lcmQCAg8PFgIfAAUgYWxlcnRzTG9naW5TdWNjZXNzQWZ0ZXJDb250YWluZXIWAh8BBSBhbGVydHNMb2dpblN1Y2Nlc3NBZnRlckNvbnRhaW5lcmQCAw8PFgQfAAUkYWxlcnRzU3VjY2Vzc2Z1bGx5Q29tcGxldGVkQ29udGFpbmVyHwRoFgIfAQUkYWxlcnRzU3VjY2Vzc2Z1bGx5Q29tcGxldGVkQ29udGFpbmVyZAIEDw8WBB8ABSBhbGVydHNBbHJlYWR5RXhpc3RzVXNlckNvbnRhaW5lch8EaBYCHwEFIGFsZXJ0c0FscmVhZHlFeGlzdHNVc2VyQ29udGFpbmVyZAIFDw8WBB8ABSFhbGVydHNVbnN1YnNjcmliZU1lc3NhZ2VDb250YWluZXIfBGgWAh8BBSFhbGVydHNVbnN1YnNjcmliZU1lc3NhZ2VDb250YWluZXJkAgYPZBYEAgEPZBYCZg9kFgJmDw8WBB8ABRphbGVydHNVbnN1YnNjcmliZUNvbnRhaW5lch8EaBYCHwEFGmFsZXJ0c1Vuc3Vic2NyaWJlQ29udGFpbmVyFgRmDw8WAh8ABSBhbGVydHNVbnN1YnNjcmliZUhlYWRlckNvbnRhaW5lchYCHwEFIGFsZXJ0c1Vuc3Vic2NyaWJlSGVhZGVyQ29udGFpbmVyZAIBDw8WAh8ABR1hbGVydHNVbnN1YnNjcmliZUJ0bkNvbnRhaW5lchYCHwEFHWFsZXJ0c1Vuc3Vic2NyaWJlQnRuQ29udGFpbmVyZAIVD2QWAgIBD2QWAmYPEGRkFgFmZAIHDw8WAh8ABR5hbGVydHNBbGVydERpc2NsYWltZXJDb250YWluZXIWAh8BBR5hbGVydHNBbGVydERpc2NsYWltZXJDb250YWluZXJkAgEPDxYCHgRUZXh0BZoEPHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPg0KZnVuY3Rpb24gU2VsZWN0QWxsKHN0cmFydFdpdGgsIHRvdGFsLCBTZWxlY3RlQWxsQ2hrKQ0Kew0KICAgICBmb3IodmFyIGkgPTE7aTw9dG90YWw7aSsrKQ0KICAgICB7DQogICAgICAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChzdHJhcnRXaXRoICsgaSkuY2hlY2tlZCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKFNlbGVjdGVBbGxDaGspLmNoZWNrZWQ7DQogICAgIH0NCn0NCg0KZnVuY3Rpb24gU2VsZWN0T25lKHN0cmFydFdpdGgsIHRvdGFsLCBTZWxlY3RlQWxsQ2hrKQ0Kew0KICAgICB2YXIgaTsNCiAgICAgZm9yKGkgPTE7aTw9dG90YWw7aSsrKQ0KICAgICB7DQogICAgICAgICBpZighZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoc3RyYXJ0V2l0aCArIGkpLmNoZWNrZWQpDQogICAgICAgICAgICAgYnJlYWs7DQogICAgIH0NCiAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoU2VsZWN0ZUFsbENoaykuY2hlY2tlZCA9ICgodG90YWwrMSkgPT0gaSk7DQp9DQo8L3NjcmlwdD4NCmRkAgIPZBYCZg9kFgJmDw8WAh8ABQ9Gb290ZXJDb250YWluZXIWAh8BBQ9Gb290ZXJDb250YWluZXIWAmYPZBYCZg9kFgJmD2QWAmYPDxYCHwAFDldyYXBwZXJXcmFwcGVyFgIfAQUOV3JhcHBlcldyYXBwZXJkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYOBTFib2R5XzEkZ2xvYmFsXzAkaGVhZGVyaGVhZGVyXzIkU2VhcmNoU3VibWl0QnV0dG9uBTVib2R5XzEkZ2xvYmFsXzEkdHdvY29sdW1uc3JpZ2h0XzMkYWxlcnRzQ2F0ZWdvcnlDaGtfMQU1Ym9keV8xJGdsb2JhbF8xJHR3b2NvbHVtbnNyaWdodF8zJGFsZXJ0c0NhdGVnb3J5Q2hrXzIFPGJvZHlfMSRnbG9iYWxfMSR0d29jb2x1bW5zcmlnaHRfMyRhbGVydHNSTlNTZWxlY3RBbGxDaGVja2JveAU4Ym9keV8xJGdsb2JhbF8xJHR3b2NvbHVtbnNyaWdodF8zJGFsZXJ0c1JOU0NhdGVnb3J5Q2hrXzEFOGJvZHlfMSRnbG9iYWxfMSR0d29jb2x1bW5zcmlnaHRfMyRhbGVydHNSTlNDYXRlZ29yeUNoa18yBThib2R5XzEkZ2xvYmFsXzEkdHdvY29sdW1uc3JpZ2h0XzMkYWxlcnRzUk5TQ2F0ZWdvcnlDaGtfMwU4Ym9keV8xJGdsb2JhbF8xJHR3b2NvbHVtbnNyaWdodF8zJGFsZXJ0c1JOU0NhdGVnb3J5Q2hrXzQFOGJvZHlfMSRnbG9iYWxfMSR0d29jb2x1bW5zcmlnaHRfMyRhbGVydHNSTlNDYXRlZ29yeUNoa181BThib2R5XzEkZ2xvYmFsXzEkdHdvY29sdW1uc3JpZ2h0XzMkYWxlcnRzUk5TQ2F0ZWdvcnlDaGtfNgU4Ym9keV8xJGdsb2JhbF8xJHR3b2NvbHVtbnNyaWdodF8zJGFsZXJ0c0xhbmd1YWdlc0xpc3RCb3gFP2JvZHlfMSRnbG9iYWxfMSR0d29jb2x1bW5zcmlnaHRfMyRhbGVydHNUZXJtc0NvbmRpdGlvbnNZZXNSYWRpbwU+Ym9keV8xJGdsb2JhbF8xJHR3b2NvbHVtbnNyaWdodF8zJGFsZXJ0c1Rlcm1zQ29uZGl0aW9uc05vUmFkaW8FPmJvZHlfMSRnbG9iYWxfMSR0d29jb2x1bW5zcmlnaHRfMyRhbGVydHNUZXJtc0NvbmRpdGlvbnNOb1JhZGlvulpIpatDBOMCMBv4U0RYSLazybs=" />
</div>
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWFALT6IybBwK12ZCYCgL2hrCVDQKx6Oq/BQKvrM3CAgLk78yLBgLl78yLBgKN4Yb+AQL27ZH1DQL27dXjAwL27em+DAL27a2tAgL27cGICwL27YV3AszllaIKArua5/UCAo3Dqa0OAsr3g8gDAuW5heMGApqBqc4CprBsaYlxC8dTfOwmP1U0NzwPiic=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['MainForm'];
if (!theForm) {
theForm = document.MainForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
My code starts from here:
<div id="globalWrapper">
<p>my all coded html comes here</p>
--
---
---
---
---
</div>
This is end of body with extra WebResource.axd file
<script src="/WebResource.axd?d=4AEhmjo4PfjXcTYk5tSDFQ2&t=633912595699095000" type="text/javascript"></script>
</form>
</body>
</html>
I invest so much time to make my XHTML clean but I can't control this unwanted code. Is there a way to get clean code?
use ASP.NET MVC if you don't want to deal with ViewState, theForm and other WebForms related issues.
The hidden fields that are visible from the markup you pasted form the core of ASP.NET WebFormns. It is quite long to describe here what is it all about, the topic is kinda big. The short answer is that you need all this if you want to properly use ASP.NET WebForms. You can take a look at this article you really want to understand what is the ViewState and what purposes it serves.
As for the axd link that you see, this is specially designated ASP.NET handler that servers for shipping javascript files to your page. It is automatically added to your rendered markup if there is ScriptManager in your aspx page.
I was wondering if anyone knew the best way to dynamically create an upload form?
Here's what I'm trying to achieve: The code shown below allows one upload, I want to have a button that when pressed, should add another form for file upload. So, if I want to upload - let's say 7 files, I want to press the button 7 times to create those upload forms, each on it's own row.
Is there anyway I can do it?
Thanks for your assistance:
<html>
<head>
<title> Multiple File Uploads </title>
</head>
<body>
<form enctype="multipart/form-data" action="uploader.php" method="POST">
Choose a file to upload: <input name="uploadedfile" type="file" /><br />
<input type="submit" value="Upload File" />
</form>
</body>
</html>
Usually you do something like this, Client-side:
<div id='Uploadcontainer'>
<input type='file' name='uploadfiles[]' class='uploadfile' />
</div>
<button id='extraUpload'>Add another field</button>
<script type='text/javascript'>
$('#extraUpload').click(function(){
$('.uploadfile:last').clone().appendTo('#uploadContainer');
});
</script>
That is using jQuery. Then on the server side you can easy loop over the $_FILES['uploadfiles'] array:
foreach($_FILES['uploadfiles'] as $file){
//do stuff with $file
}
take a look here for a simple example
http://mohamedshaiful.googlepages.com/add_remove_form.htm
Josh
jQuery has a nice plugin I've used called MultiFile. You may want to check that out.
http://www.fyneworks.com/jquery/multiple-file-upload/
Here's a really really simple one, works in FireFox, Chrome and IE7.
I'd really advise you to check out a javascript framework such as jQuery, it'll make your life easier.
<div id='Uploadcontainer'>
<input type='file' name='uploadfiles[]' class='uploadfile' />
</div>
<button id='extraUpload' onclick="return addAnother('Uploadcontainer')">Add another field</button>
<script type='text/javascript'>
function addAnother(hookID)
{
var hook = document.getElementById(hookID);
var el = document.createElement('input');
el.className = 'uploadfile';
el.setAttribute('type','file');
el.setAttribute('name','uploadfiles[]');
hook.appendChild(el);
return false;
}
You could try this jQuery plugin called uploadify
You could try YUI uploader
Just make sure that you handle the file correctly on the server as Flash sometimes posts the data to the server in different ways. So if you have some way of checking what is in the Request values then you should be good.
There is no way to do this with plain HTML currently. I think it is starting to be addressed in the latest versions of browsers and the forthcoming HTML5 spec.
Most current cross browser solutions will require a JS library (and I think Flash). The alternative is selecting each file individually with it's own input element. For obvious reasons browsers implement very strict security around the scripting and display of file upload elements that can make them hard to work with.