I have a strange issue i cannot explain. i am using the play framework and when i try to run the View below it only works when i REPEAT the form action below... it works but i know it's not right. appreciative if anyone can help explain or correct.
#(errorMessage: String = "")(implicit messages: Messages)
#helper.form(routes.ApplicationHomeController.login) {
#main(title = messages("single.title")) {
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="userbox">
<form action="#{routes.ApplicationController.doLogin()}" method="post"></form>
<form action="#{routes.ApplicationController.doLogin()}" method="post">
<div style="color: red">#errorMessage</div>
<h1 id="logintxt" style="background-color: rgb(11, 146, 9);
background-position: initial;
background-repeat: initial;">Driver Service <b>ß</b>eta</h1>
<div id="submit_giff" style="display: none;">
<hi> Authenticating: <img src="/assets/images/loader-bar.gif" align="absmiddle"> </hi>
</div>
<input id="name" name="userName" placeholder="Username" style="opacity: 1;
background-color: rgb(255, 255, 255);
background-position: initial;
background-repeat: initial;">
<input id="pass" name="password" type="password" placeholder="Password" style="opacity: 1;
background-color: rgb(255, 255, 255);
background-position: initial;
background-repeat: initial;">
<p id="namealert" style="display: none;
opacity: 1;">Username:</p>
<p id="passal" style="display: none;
opacity: 1;">Password:</p>
<input id="loginbtn" style="opacity: 0.2;
cursor: default;" type="submit" value="Login">
</form>
</div>
<script src="/assets/javascripts/login.js"></script>
}
}
Two immediate observations.
One: #helper.form(...) will write a <form> element into the HTML that ultimately gets generated. Your view then includes other literal <form>s nested inside the first form. Nested forms are invalid HTML. You have one form submitting to routes.ApplicationController.doLogin and the other submitting to routes.ApplicationController.login. Who knows which of these the browser will actually submit to? We can't really predict because nested forms are invalid.
Two: you have your #main(...) view nested inside your #helper.form(...). I assume your main view contains <html>...</html>. This is going to result in HTML that starts with a <form> element, inside which is the <html> element. This is horribly invalid markup too.
My guess is one or both of these issues are your problem.
Try taking your generated HTML and running it through an HTML validator like https://validator.nu/. Fix any issues the validator finds, don't nest forms, and decide which (single) route the login form should actually submit to.
Related
In my Angular8 app, I have a drop zone where I can drag & drop files, such as PDF, MS Word, CSV, etc. I am using the technique found on this blog, but also documented by Mozilla MDN. The code works very well, but the one important thing I can't figure out is how to capture the file bytes being uploaded, so that I can save them to the database.
I placed a screenshot of the Opera browser source debugger below, showing the typescript and resulting fileObj and blobObj values. The debugger complains about readAsBinaryString(blobObj), saying that blobObj is not a Blob. Looking at the blobObj value, I can see it's not a Blob that I've seen before. And, looking at all the values, none stand-out to me as a Blob. Also, the file bytes aren't obvious either. Looking at the html, below, I can't think of a change that would reveal the bytes.
I'm hoping someone with drag and drop experience can explain how it's done.
Thanks!
Debugger Screenshot
HTML
<table class="table table-striped table-forum">
<tbody>
<tr>
<td>
<div class="container" style="float: left; padding-top: 10px; padding-left: 10px;" appDnd (fileDropped)="onFileDropped($event)" (itemDropped)="onItemDropped($event)">
<input type="file" #fileDropRef id="fileDropRef" multiple (change)="fileBrowseHandler($event.target.files)" />
<img src="assets/img/dnd/ic-upload-file.svg" alt="">
<h3>Drag and drop file here</h3>
<h3>or</h3>
<label for="fileDropRef" style="font-size: 14px; font-weight: 600; height: 25px; padding: 5px 5px;">Browse for File</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="files-list" style="width: 35%;">
<div class="single-file" *ngFor="let file of files; let i = index">
<img src="assets/img/dnd/ic-file.svg" width="45px" alt="file">
<div class="info">
<h4 class="name">
{{ file?.name }}
</h4>
<p class="size">
{{ formatBytes(file) }}
</p>
<app-progress [progress]="file?.progress" style="width: 200px;"></app-progress>
</div>
<img src="assets/img/dnd/ic-delete-file.svg" class="delete" width="20px" alt="file" (click)="deleteFile(i)">
</div>
</div>
</td>
</tr>
</tbody>
</table>
const reader = new FileReader();
// FileReader has an onload event that you handle when it has loaded data
reader.onload = (e: any) => {
const data = e.target.result as any;
console.log({type: 'GalleryComponent prepareFilesList - data:', data});
};
// this will kick off the onload handler above
reader.readAsDataURL(file);
I need to manage units associated to number input in html forms.
Forms are generated from xml files (that I can change if necessary) :
Voltage : <input type="number"/> V
Some layout may visually separate unit (V) from input : I want them to be tied together.
Ideally, unit is displaied inside the input, like an always visible placeholder.
I thought about using pseudo-element ::after but
In case you weren’t aware, an doesn’t allow ::before or ::after pseudo elements. None of the different input types do.
https://www.scottohara.me/blog/2014/06/24/pseudo-element-input.html
Does anyone have a good practise to easily support this ? (html or css)
This should give you a head start :
.input-with-unit {
white-space: nowrap;
}
.input-with-unit > input {
width: 100%;
padding-right: 2rem;
}
.input-with-unit > label {
position: absolute;
margin-left: -1rem;
margin-top: 0.125rem;
}
<div class="input-with-unit" style="width: 12rem;">
<input type="number" />
<label>V</label>
</div>
<div class="input-with-unit" style="width: 9rem;">
<input type="number" />
<label>A</label>
</div>
I have a form like this:
<form method="post" enctype="multipart-form-data" name="my_form" action="http://www.sms-online.web.id/kirim" >
<input class="field text small" type="text" maxlength="20" name="Phonenumbers" />
<br />
<textarea rows="5" cols="20" onKeyPress=check_length(this.form); onKeyDown=check_length(this.form); name=Text ></textarea>
<br />
<input id="saveForm" class="btTxt" type="submit" value="KIRIM" name="TOMBOL" />
</form>
Let's say that form is located at http://myurl.com/form How do I post to that form and then click the submit button? and what my file should look like? should it look like this or not:
Phonenumbers=08111111
Text=SMScontent
I already tried this but didn't work:
curl --data "Phonenumbers=0811111&text=testing&TOMBOL=KIRIM" http://myurl.com/form
I tried #sputnick suggestion but got the following error:
<!DOCTYPE html>
<html style="height:100%">
<head><title> 301 Moved Permanently
</title></head>
<body style="color: #444; margin:0;font: normal 14px/20px Arial, Helvetica, sans-serif; height:100%; background-color: #fff;">
<div style="height:auto; min-height:100%; "> <div style="text-align: center; width:800px; margin-left: -400px; position:absolute; top: 30%; left:50%;">
<h1 style="margin:0; font-size:150px; line-height:150px; font-weight:bold;">301</h1>
<h2 style="margin-top:20px;font-size: 30px;">Moved Permanently
</h2>
<p>The document has been permanently moved.</p>
</div></div><div style="color:#f0f0f0; font-size:12px;margin:auto;padding:0px 30px 0px 30px;position:relative;clear:both;height:100px;margin-top:-101px;background-color:#474747;border-top: 1px solid rgba(0,0,0,0.15);box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;">
<br>Proudly powered by <a style="color:#fff;" href="http://www.litespeedtech.com/error-page">LiteSpeed Web Server</a><p>Please be advised that LiteSpeed Technologies Inc. is not a web hosting company and, as such, has no control over content found on this site.</p></div></body></html>
You have a typo in the Text field (need to capitalize) so :
curl -d "Phonenumbers=0811111&Text=testing&TOMBOL=KIRIM" http://myurl.com/form
# ^
and to do such things, use cookies and a fake user-agent. Check
man curl
Use the -F flag to POST multipart-form-data as in:
curl -F "Phonenumbers=0811111&Text=testing&TOMBOL=KIRIM" http://myurl.com/form
You can use
curl--data "dob=2018&press=OK" http://blog.eduguru.in/testapp.cgi
I would like to have a form which has a horizontal layout on the first level, but then within one row there can be a form "inline" which I want to have a vertical (the default) layout. Is there an easy way to achieve this?
Note: .form-inline doesn't do what I'm looking for, as it doesn't put the inside labels on top of the inputs.
So far I have something like this:
<div class="form-horizontal">
<div class="control-group">
<label class="control-label">
outer label
</label>
<div class="controls ### SOMETHING TO CLEAR/OVERRIDE form-horizontal ###">
### INLINE FORM WITH SAME STRUCTURE IS HERE ###
</div>
</div>
</div>
Boostrap can't do this by default, but I've included this in my fork https://github.com/jasny/bootstrap/blob/master/less/jasny-forms.less#L40
Please consider using Jasny's extensions to Bootstrap http://jasny.github.com/bootstrap
or just use this CSS
.form-vertical .form-horizontal .control-group > label {
text-align: left;
}
.form-horizontal .form-vertical .control-group > label {
float: none;
padding-top: 0;
text-align: left;
}
.form-horizontal .form-vertical .controls {
margin-left: 0;
}
.form-horizontal .form-vertical.form-actions,
.form-horizontal .form-vertical .form-actions {
padding-left: 20px;
}
.control-group .control-group {
margin-bottom: 0;
}
With the HTML
<form class="form-horizonal">
# Horizal controls here
<div class="form-vertical">
<div class="control-group">
<label class="control-label">Label</label>
<div class="controls">Something here</div>
</div>
</div>
</form>
Here is #jasny-arnold-daniels CSS updated for Boostrap 3. In 3 form-group replaces control-group, form-control replaces control. Also needs #user9645 's change to width. New CSS is:
.form-vertical .form-horizontal .form-group > label {
text-align: left;
}
.form-horizontal .form-vertical .form-group > label {
float: none;
padding-top: 0;
text-align: left;
width: 100%
}
.form-horizontal .form-vertical .form-control {
margin-left: 0;
}
.form-horizontal .form-vertical.form-actions,
.form-horizontal .form-vertical .form-actions {
padding-left: 20px;
}
.form-group .form-group {
margin-bottom: 0;
}
You do not need to write custom CSS for Bootstrap 3. Instead of putting your class of form-horizontal on the form tag, only put a wrapper div with that class around the form elements that you want to be horizontal (and supporting column-size classes for the horizontal items).
For example, this would work:
<form>
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">I'm a horizontal form element</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="form-group">
<label>I'm a vertical form element</label>
<input type="text" class="form-control">
</div>
</form>
This works because the vertical form is automatically used for a form with no class explicitly stated. That 'lack of a class' can be seen in the docs here.
I was unsure exactly what you were looking for but I tried to guess.
I made a form with a two vertical lines the second line with multiple form elements.
I used inline-block to do this.
http://jsbin.com/icoduh/1/edit
I have a page with two submit buttons at the bottom of the page. One for the submit of the page that posts to an action and another to cancel that posts to a different action. For whatever reason IE has a problem with placing these two buttons side by side. Firefox has no issue.
Here is my script:
<div class="button_row">
using (Html.BeginForm("Edit", "Design"))
{ %>
<div class="button_cell_left">
<input type="submit" value="Update" />
</div>
<% } %>
<% Html.EndForm(); %>
using (Html.BeginForm("Review", "Design"))
{ %>
<div class="button_cell_right">
<input type="submit" value="Cancel"/>
</div>
<% } %>
<% Html.EndForm(); %>
Here is the css for those classes:
.button_row { float:left; width: 100%; }
.button_cell_left {float:left; width: 20%; }
.button_cell_right {float:left; width: 20%; }
The 20% width is plenty room wise for those buttons. Like i said in ie they won't stay on the same line but in firefox they will. My question is why given my code?
Thanks in advance,
Billy
You need to float the forms they're wrapped in as well, IE doesn't implement float properly, so if you want 2 floats on the same line, they must both be floated. This issue was annoying me yesterday as well
New CSS:
.button_row { float:left; width: 100%; }
.button_row form {float:left; width: 20%; }
Set a width in pixels, not %. IE have problems with % at times.
Your first input is missing it's self-closing slash.