Have a flask project where I'd like to replace a standard file upload form with something a little bit nicer:
<form action="" method=post enctype=multipart/form-data>
<input type=file name=file>
<input type=submit value=Upload>
</form>
Have been looking into using jasny's bootstrap upload widget, but, after loading the correct .js and .css files and incorporating the following HTML
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input span3">
<i class="icon-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-file">
<span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span>
<input type="file" />
</span>
Remove
</div>
</div>
I'm not sure how to set up the event to actually upload the file in question. I'm guessing that I hook a different button up to a submit event, but I'm not certain what to do here.
It looks like that plugin works by binding events to existing DOM objects. Did you call
$('.fileupload').fileupload()
after the DOM was ready? If you called it before the element was added to the DOM, it wouldn't find any element to bind events to.
Related
There are so many answers for this on stackoverflow. But unfortunately none of them is working for me. I will tell you what I have tried one by one.
<form (keydown.enter)="$event.preventDefault()" ...>
<button (keyup.enter)="skillsHandleEnter($event, skillString)"></button>
#Component(...)
class MyComponent {
skillsHandleEnter(event, skillString) {
event.preventDefault();
// ... your logic
}
}
But none of the approach is working. I am using ngx-tags-input which allows me to apply some tags separated by enter key. This creates a problem. The moment I press Enter key, my form gets submitted with just one tag that i was able to enter. Trust me I've tried almost everything to prevent this and also I dont want to over complicate the things. Please ignore naming conventions. I will fix them later.
Here's my blog.component.html before implementing any solution.
<form [formGroup]="editorForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="exampleInputEmail1">
<h3>Title</h3>
</label>
<input type="text" class="form-control" id="inputTitle" aria-describedby="emailHelp" placeholder="Enter a question that explains your problem exactly">
<br>
<label for="editor">
<h3>Editor</h3>
</label>
<quill-editor [styles]="editorStyle" [modules]="config" formControlName="editor"></quill-editor>
</div>
<ngx-tags-input class="form-control input-lg" name="tags"></ngx-tags-input>
<button class="btn btn-primary mt-3 mb-3">Submit</button>
</form>
Please correct me.
I followed these two simple steps:
1) I added an attribute in my form tag.
(keydown.enter)="$event.preventDefault()"
2) Added (click) listener on the submit button
So the entire HTML code looks like:
<div class="container">
<div class="row pt-5">
<div class="col-md-12 col-lg-12 col-sm-12 bg-light">
<form [formGroup]="editorForm" (keydown.enter)="$event.preventDefault()">
<div class="form-group">
...
</div>
<button class="btn btn-primary (click)="onSubmit()">Submit</button>
</form>
</div>
</div>
</div>
The problem was that I was using click listener with the form tag itself along with keydown.enter.
the html button element has a three valid type
submit : the button submits the form data to the server. This is the default 🔥🔥 if the attribute is not specified, or if the attribut is dynamically changed to an empty or invalid value.
reset: The button resets all the controls to their initial values,
like . button: The button has no default
behavior and does nothing when pressed. It can have client-side
scripts associated with the element's events, which are triggered
when the events occur.
button: the button has no default behavior and does nothing when
pressed. It can have client-side scripts associated with the
element's events, which are triggered when the events occur.
so to solve the probleb just set the button type to button like this
<button type="button" (click)="onSubmit()" class="btn btn-primary mt-3 mb-3">Submit</button>
The only reason to use ngSubmit is to submit the form on "enter".
So you can remove the ngSubmit event listening and replace it by the click event of the button. I also removed the submit emitting from the button by adding type="button".
<form [formGroup]="editorForm">
<div class="form-group">
<label for="exampleInputEmail1">
<h3>Title</h3>
</label>
<input type="text" class="form-control" id="inputTitle" aria-describedby="emailHelp" placeholder="Enter a question that explains your problem exactly">
<br>
<label for="editor">
<h3>Editor</h3>
</label>
<quill-editor [styles]="editorStyle" [modules]="config" formControlName="editor"></quill-editor>
</div>
<ngx-tags-input class="form-control input-lg" name="tags"></ngx-tags-input>
<button type="button" (click)="onSubmit()" class="btn btn-primary mt-3 mb-3">Submit</button>
</form>
I have a child component file-upload which i use in parent component multiple times like below
<form>
<fieldset>
<legend>Input Files</legend>
<file-upload id="s" imgpath="Image/saham.png" title="saham"></file-upload>
<file-upload id="q" imgpath="Image/sandoq.png" title="sandoq"></file-upload>
<file-upload id="o" imgpath="Image/oraq.png" title="oraq"></file-upload>
<button type="submit" class="btn btn-success" (click)="save()" [disabled]="!cansave">Save</button>
</fieldset>
in UI everything is fine, but in action it seems that there is only one object instance of file-upload which is working and every input changes in each of file-upload components applies only to one of them(the first one).
the problem is for input and the way I am using it..when i use a simple button, every thing is fine. here is the html of file-upload
<div class="upload" (dragover)="allowDrop($event)" (drop)="drop($event)">
<p>{{title}}</p>
<div class="drop-zone" [ngClass]="{'showdropzone' : showdropzone}">
Drop Here Or...
<div class="clickhere">
<label for="files">Click Here</label>
<input id="files" type="file" class="file" (change)="fileSelect($event)"><!--does not work-->
<button (click)="fileSelect($event)">Click Me</button> <!--this is working-->
</div>
</div>
<circle-progress class="myprogress" #circleProg1 [percent]="50" [ngClass]="{'showprogress' : showprogress}"></circle-progress>
<span class="glyphicon glyphicon-warning-sign status" [ngClass]="{'warninput' : haswarning}"></span>
<span class="glyphicon glyphicon-ok-circle status" [ngClass]="{'successinput' : succeeded}"></span>
</div>
You have a singleton FileService that's why they all have the same instance of that service. I am assuming you inject your provider in your AppModule, so remove it and try to inject your service at the component level like this
#Component){
providers: [FileService]
...
}
export class FileUploadComponent
For more information about multiple service instances, take a look at this from official docs.
Hope this helps
Given the following code:
<form ng-app="fileUpload" name="form">
<div ngf-select ng-model="fileFront" name="fileFront" ngf-pattern="'image/*'" ngf-accept="'image/*'" ngf-max-size="2MB">
<span>Click hereto upload photo</span>
</div>
<i ng-show="form.fileFront.$error.maxSize">File too large</i>
</form>
I cannot make the bullet tag to be displayed, I think the problem is related to the fact that form does not contains the fileFront.
Is there a way I can do that?
I have this form in html
<form class="form-horiz" role="form" action="" >
<div class="form-group-1" style="margin-left:5px">
<div class="col-sm-10">
<input type="text" class="form-control" id="adsend" placeholder="Enter your ad" >
</div>
</div>
<div class="form-group-1">
<div class="col-sm-offset">
<button type="submit" class="btn btn-default" name="send" id="send" >Send</button>
<button type="submit" class="btn btn-default" value="classify">Classify</button>
</div>
</div>
</form>
What I need to do is: The user will write something in text and after click on classify button js message will appear to the user with some results, is it possible to do something in action="" or there is another way to do it?
You can use event listeners for button clicks if you'd like instead of form actions. Check out this documentation, hopefully it'll help! I'd suggest something like this:
<form class="form-horiz" role="form" action="" >
<div class="form-group-1" style="margin-left:5px">
<div class="col-sm-10">
<input type="text" class="form-control" id="adsend" placeholder="Enter your ad" >
</div>
</div>
<div class="form-group-1">
<div class="col-sm-offset">
<button type="submit" class="btn btn-default" name="send" id="send" >Send</button>
<button id="classify" type="submit" class="btn btn-default" value="classify">Classify</button>
</div>
</div>
</form>
and then have this in some js file
document.getElementById("classify").addEventListener("click", function () {
// do some js stuff here
});
EDIT:
Another alternative would be to use an onclick attribute, which is also documented in the link I posted before, but this is a little antiquated, and your function has to be named in the global scope and it's not really a good idea in general. I'd go with an event listener!
I would suggest you to have jQuery added into your Application. It makes your life easier in your construction.
Check this https://jsfiddle.net/dqwLv8q7/
I added id in your button and made it preventDefault() as it fire us submit action of your form as you set it "type=submit". So your "classify" click button now just shows Alert message with value of your "adsend" ID input value. You can consider to use another tag and replace it with message to your user.
This form works when the form action is "submit". However, upon customizing it to a Salesforce Web-to-Lead, the script that says "The form submission was successful" doesn't appear.
Additionally, the code in here to redirect the site after submission doesn't work. I'm no a PHP/Java expert and I don't really know what's happening enough to understand why it isn't working.
See below. Redacted private info from Salesforce.
<div class="padpage padtop">
<h1>Let Us Call You</h1>
</div>
<!--end padpage-->
<div class="cutContainer moreUpperMargin">
<span class="cutTop"></span>
<span class="cutBottom"></span>
<div class="ui-widget successMessage">
<div class="ui-state-highlight ui-corner-all">
<p><span class="ui-icon ui-icon-info" style=""></span>
<strong>Success!</strong> Your mail has been sent.</p>
</div>
</div>
<h4> Write to us </h4>
<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" />
<input type=hidden name="oid" value="000000000000000">
<input type=hidden name="retURL" value="http://www.xxxxxxxx.com">
<input type=hidden name="company" value="Mobile Lead">
<!-- A bunch of Fields.... -->
<input type="submit" class="button buttonStrong right" value="Send" name="buttonSubmit" value="submit">
<div class="clearfix"></div>
</form>
</div>
<!--end cut container-->
Can you be more clear about the issue? If you want to use Salesforce standard functionality and presumably not program any custom PHP / Javascript, why don't you create another web page that includes the message, "The form submission was successful", and direct the user to that page through the retURL field upon submission?
Or, if you are using a popular CMS, try one of the plugins. Good ones exist for Wordpress and Drupal.
http://wordpress.org/plugins/salesforce-wordpress-to-lead/
https://drupal.org/project/sfweb2lead_webform
stony