How to hide a file input item in a form? - javascript

I'm developing a web page that lets user upload a font file, but the requirement is to display the font name after user selects a file, then he can decide to upload it or not, the font name is a property in the font file, the file name might be "123.ttf", but when you right click on the font file and look into it "Title" preperty, it's called "ACME Explosive Bold", so my Javascript should ideally find the "tilte" property of this font, but after lots of research, I was told JS can't get this property, while on the other hand I've found a piece of Java code that can get it.
So now I'm trying to hide a 2nd form on the page, with an input field whose value will be the user selected file from the first form, when user selected a file but before he clicks the first form's submit button, my JS calls the 2nd form with user selected file, submit it and run a servlet to find it's "Title" and come back and display it on the page, then delete that file on the server, because user has never officially submitted it.
So my question is how to hide this 2nd form with it's own input file field and browse button on the page, I need the form tag so I can simulate a submit. But I don't want users to see it ?
Here is my code so far :
![<div class="body">
<h1>Upload Font</h1> <%-- \[+\] --%>
<s:form namespace="/font" action="add" method="POST" enctype="multipart/form-data">
<div class="dialog">
<table>
<tbody>
<tiles:insertAttribute name="form" />
<tr class="prop">
<td valign="top" class="name required">
<label for="description">Font File:</label>
</td>
<td valign="top">
<s:file name="file" size="62" theme="simple" id="fname" onchange="fileUpload('/pages/font/getFontTitle.jsp',value,this.files\[0\])"/>
</td>
</tr>
<tr class="prop">
<td>
<span class="button"><s:submit/></span>
</td>
</tr>
</tbody>
</table>
</div>
</s:form>
<s:form namespace="/font" action="hiddenForm" method="POST" enctype="multipart/form-data">
<div class="dialog">
<table>
<tbody>
<tr class="prop">
<td valign="top">
<s:file name="file" size="62" theme="simple" id="fname_1"/>
</td>
</tr>
</tbody>
</table>
</div>
</s:form>
</div>]

You can hide the second form using CSS property visibility : hidden.
<s:form namespace="/font" style ='visibility:hidden' action="hiddenForm" method="POST" enctype="multipart/form-data">

Related

Adding error message just below the fields in Visualforce page

I have two fields in a form.I have applied various custom validation using javascript on first field.So I want to display Error meassage just below the field if value entered by user fails the validations.But problem here is user can add as many row as he want using an 'Add Row' button available.So Suppose user adds 3 rows.And the error is in second row , "error value" message should be displayed just below the field of second row.Following is part of my code inside form.So How do I display error using javascript solely(Not using controller class).Please help.
<apex:outputPanel id="List">
<div id="repayid">
<table style="width:100%;display: block;overflow: scroll;" id="Table">
<tr id="Tabletr1">
<td class="A">Alpha No</td>
<td class="A">BetaText</td>
</tr>
<apex:repeat value="{!List}" var="rep" id="addrow">
<tr id="repayTabletr2">
<td id ="tdid">
<apex:inputField value="{!rep.S_Code_No__c}" id="barid" style="width:100%;"/>
<div style="color:red; background-color:white;">
<p class="SError" style="display:none;">Error Value </p>
</div>
</td>
<td>
<apex:inputField styleClass="RequiredField" value="{!rep.C_Code__c}" style="width:100%;"/>
<div style="color:red; background-color:white;"></div>
</td>
</tr>
</apex:repeat>
</table>
</div>
You must be iterating through the input fields in your javascript function. While iterating each field you will have the ID of the field.
Using javascript and CSS you can insert a new DIV below the input with error and can then style and show error message in that DIV.
Or, you can add a empty DIV inside the repeat tag and can then style/add innerHTML to it if you find a error.

HTML to plain text email on web-based email form

I need turn HTML email into a plain text email.
Currently, my email go out as HTML and I get this message in Horde HTML client:
This message part contains HTML data, but inline HTML display is disabled.
View HTML data in new window.
Convert HTML data to plain text and view in new window.
I used third-party web-based email editor which allows for all sort of customized codes at the back-end of the email message body.
I cannot directly delete any specific lines, and therefore a separate code will be required for any removal or modification.
<div id="tab-mailContent" class="tab-pane active">
<fieldset id="mail-content-options">
<table class="form-table">
<tbody><tr>
<td class="form-inline">
<label for="mail_title" class=" required">Title</label>
<input id="mail_title" name="mail[title]" value="MBS1" type="text">
</td>
<input id="mail_distributorMessageId" name="mail[distributorMessageId]" type="hidden">
<td class="form-inline">
<label for="mail_promotion" class=" required">Promotion</label>
<select id="mail_promotion" name="mail[promotion]" class="w140"><option value=""></option><option value="1">Employee Discount</option></select>
</td>
<td class="form-inline">
<input value="Upload images" class="btn clicked-border" id="upload_images_btn" type="button">
</td>
</tr>
</tbody></table>
</fieldset>
<div>
<textarea id="mail_body" name="mail[body]" style="visibility: hidden; display: none;">Hello! We truly appreciate your business today and look forward to serving you again in 2 weeks or sooner. </textarea>

How to display a table inside a modal popup window which is part of a larger form

I have some code below that contains a form which contains a hiddenTable element that will show up once you click the search button. My question is: how would I display the table in a modal popup window while still having it be apart of the same form. The table contains a comment box and a submit button, I want the comment to be submitted along with all the other field's data inside the form.
<!DOCTYPE html>
<html>
<head>
<style>
#hiddenStuff {
display: none;
}
</style>
</head>
<body>
<form action="...">
// search fields here
<input type="button"
value="Search"
onclick="document.getElementById('hiddenTable').style.display='block';">
<table id="hiddenTable" class="form_table" style="display:none;">
<tr>
<td class="form_field_name">Enter a comment</td>
</tr>
<tr>
<td class="form_field_entry">
<textarea required ="true"
name="textarea" rows="10"
cols="50"
placeholder="Please enter a description for the performed task."></textarea>
</td>
</tr>
<tr>
<td class="form_field_entry">
<cfinput type="submit" name="createPeriod" value="Submit"/>
</td>
</tr>
</table>
</form>
</body>
</html>
Please excuse my messy code.
I agree with #Dan that it might be a pain for a ux standpoint to make this an extra modal, but if that's the result you want, you can surround your table in a div and add javascript to make the box "popup". Add CSS styles to create the black transparent background on click, and you will have a very simple modal popup.
I created a codepen for a reference - http://codepen.io/anon/pen/brEHI

Have to click twice on a popup window/Dialog box

I am using a webkit browser and getting an bug as when I am trying to close the popup its not active only and the parent browser is active even after the pop up for uploading files is open.
I have to click on popup to activate it first and then again to make any selection on it.
How can I make the pop up active as soon as its open.
Is there a way to add event handler in the input tag only to make the pop up active and inactive the parent browser.
for eg
<form action="${ctx}/home/step11/uploadReport" method="POST" enctype="multipart/form-data" id="form_upload">
<table style="margin-left:25px">
<tr>
<td colspan="5" style="vertical-align:middle; font-size:100%">Demo Request Upload:</td>
</tr>
<tr>
<td style="vertical-align:middle"><input id="uploadFileId" name="fileName" type="file" multiple="true"/></td>
<td/>
<td>
<c:if test="${empty editable}">
<input id="btnImport" class="active small button" disabled="disabled" type="button" value="Import"/>
</c:if>
<c:if test="${not empty editable}">
<input id="btnImport" class="active small button" type="button" value="Import"/>
</c:if>
</td>
</tr>
</table>
</form>
Try creating an event which automatically clicks on the browser when its opened so it will be active after a couple of micro seconds

Edit one row in a list of records?

I have a list of records, e.g. addresses. It's displayed using the following html5/knockout code.
<section id="lists" data-bind="foreach: addresses, visible: addresses().length > 0">
<article>
<div>
<button>Edit</button>
<span data-bind="text: DisplayAddress"></span>
</div>
<p class="error" data-bind="visible: ErrorMessage, text: ErrorMessage"></p>
</article>
</section>
I want to show a table of editable input boxes () under the row after Edit button is clicked. Is there any way without generate a big html5 code?
I want to show the following editing html below the <div> after click the Edit button. (not completed)
<div>
<table>
<tr>
<th>Street address</th><th>Apt#</th><th>City</th><th>State</th><th>Zip</th>
</tr>
<tr>
<td><input type="text" class="col1"/></td>
<td><input type="text" class="col2"/></td>
<td><input type="text" class="col3"/></td>
<td><input type="text" class="col4"/></td>
<td><input type="text" class="col5"/></td>
</tr>
</table>
<button data-bind="click: saveAddress">Save</button>
<button data-bind="click: cancelAdding">Cancel</button>
</div>
There are a few reasonable options:
1) Use the if binding to control the rendering (not just visibility) of a block of HTML. Each row of data would have an observable property called isEditing. Then, add behavioral functions to control edit/cancel/etc. Your article template would include something like the following:
<div data-bind="if:isEditing">
<input type="text" data-bind="value: DisplayAddress" />
</div>
2) If it's just one field, you might want to create a custom binding handler that adds the behavior you want to an element (it would dynamically add/remove a field). There are a few good examples on Stackoverflow of this technique.

Categories

Resources