I would like to have 2 mutually exclusive fields.
One will be a FileField and other TextBoxField.
Is there a ready html form I can get my hands on to.
I have searched the web and couldnt find any.
Oh I am a little sorry..
I meant that I wanted to do this via Django Templates
You can make an onInput event listener and handle it using javascript, so that if the user types in one field it empties the other.
For example:
<form>
<label for="first">Fill This:</label>
<input type="text" name="first" id="first" oninput="run('first')"><br><br>
<label for="second">Or This:</label>
<input type="text" name="second" id="second" oninput="run('second')"><br><br>
<input type="submit" value="Submit">
</form>
<script>
function run(activeField) {
if (activeField == 'first') {
const second = document.querySelector('#second')
second.value = ''
} else {
const first = document.querySelector('#first')
first.value = ''
}
}
</script>
For Your textbox, you can use this:
<input type="text" name="name" placeholder="Please enter your name">
And for your files:
<input type="file" name="fileName">
But for file name it needs to be encrypted. HTML won't let you submit a form with a file. But you can override this in the form attr, like this:
<form action="dirToForm.py" method="POST" enctype="multipart/form-data"></form>
I have two forms (ref https://jsfiddle.net/svejdo1/f7uwt6jo/12/)
Second form (the on the bottom) is inside iframe.
The autofill seems to work for both cases - i.e. if I type into "street" it allows me to select from "street" fields I recently submitted. However there is one significant difference - when I select email it also prefill the whole form with my profile - but just for the non-iframed form. When I attempt to do the same for iframed form it doesn't work.
Is there a trick to make it working ? Or is this a bug in chromium ? Or is this security feature of some sort ?
<form id="form" action="#">
<label for="street">Street</label>
<input type="text" id="street" name="street" />
<label for="zip">ZIP</label>
<input type="text" id="zip" name="zip" />
<label for="email">Email</label>
<input type="text" id="email" name="email" />
<input type="submit" value="Submit" />
</form>
<iframe id="iframe"></iframe>
<script>
var cln = document.getElementById('form').cloneNode(true);
document.getElementById('iframe')
.contentWindow.document.children[0].children[1].appendChild(cln);
</script>
In a page, for getting field values I didn't use form tag, instead used Anchor tag's click event to get the values and used AJAX call to pass it to server.
Later tried out the HTML 5 pattern validation, it didn't work out; after so much try added form tag and then modified "anchor" to "button", then it worked.
Old
<div id="div1">
<input type="text" id="message" pattern="[a-zA-Z]{3}" required title="Enter valid Station" />
<a id="add" onclick="addMessage();">Add</a>
</div>
New
<form id="addMessage">
<div id="div1">
<input type="text" id="message" pattern="[a-zA-Z]{3}" required title="Enter valid Station" />
<button id="add">Add</button>
</div>
</form>
Is using a form tag and form submission the only way to trigger Pattern validation or are there any workarounds?
There's a nice overview of constraint validation in HTML5 on HTML5Rocks.
You can manually validate fields by calling the checkValidity() method on the DOM element in JavaScript:
document.getElementById('add').addEventListener('click', function() {
if (document.getElementById('message').checkValidity()) {
window.alert('valid station name');
// addMessage();
} else {
window.alert('invalid station name!');
}
});
<div id="div1">
<label>
Station
<input type="text" id="message" pattern="[a-zA-Z]{3}" required title="Enter valid Station" maxlength="3">
</label>
<a id="add" role="button">Add</a>
</div>
And also for reference: HTMLInputElement
I have a standard HTML form.
<form method="post" name="myemailform" action="form-to-email.php">
Enter Name: <input type="text" name="name">
Enter Email Address: <input type="text" name="email">
Enter Message: <textarea name="message"></textarea>
<input type="submit" value="Send Form">
</form>
The problem is that when a value is input that is larger than the field size, upon clicking away, the field skips back to the beginning of the field so the end is cut off.
Is there a way to get it so that the view of the field stays where the carat was?
This is a javascript problem (client side), not a PHP one (server side).
You need to do this:
<input type="text" name="name" size="10" onblur="if (this.length > 10) {this.dir = 'rtl';} else {this.dir = 'ltr';}">
just check what is the proper length to use in order to change the input direction
You can use the HTML attribute size.
I want to provide the user with a hint on what he needs to enter into my text field. However, when I set the value, it does not disappear once a user clicks on the text field. How can you make it disappear?
<form action="input_password.htm">
<p>Username:<br><input name="Username" value="Enter username.." type="text" size="20" maxlength="20"></p>
</form>
With a bit of JavaScript:
<input
value="Enter username..."
onfocus="if (this.value === 'Enter username...') this.value=''" ... />
HTML5 has a nice attribute for this, called placeholder:
<input placeholder="Enter username.." ... />
but this attribute is not supported in old browsers.
the best way to give a hint is placeholder like this:
<input.... placeholder="hint".../>
You'd need attach an onFocus event to the input field via Javascript:
<input type="text" onfocus="this.value=''" value="..." ... />
I think for your situation, the easy and simple for your html input , you can
probably add the attribute title
<input name="Username" value="Enter username.." type="text" size="20" maxlength="20" title="enter username">
With HTML5, you can now use the placeholder attribute like this:
<form action="demo_form.asp">
<input type="text" name="fname" placeholder="First name"><br>
<input type="text" name="lname" placeholder="Last name"><br>
<input type="submit" value="Submit">
</form>
http://www.w3schools.com/tags/att_input_placeholder.asp
I have the same problem, and I have add this code to my application and its work fine for me.
step -1 : added the jquery.placeholder.js plugin
step -2 :write the below code in your area.
$(function () {
$('input, textarea').placeholder();
});
And now I can see placeholders on the input boxes!
This is exactly what you want
$(document).tooltip({ selector: "[title]",
placement: "top",
trigger: "focus",
animation: false});
<form id="form">
<label for="myinput1">Browser tooltip appears on hover but disappears on clicking the input field. But this one persists while user is typing within the field</label>
<input id="myinput1" type="text" title="This tooltip persists" />
<input id="myinput2" type="text" title="This one also" />
</form>
[ref]
If you mean like a text in the background, I'd say you use a label with the input field and position it on the input using CSS, of course. With JS, you fade out the label when the input receives values and fade it in when the input is empty. In this way, it is not possible for the user to submit the description, whether by accident or intent.
If you don't insist on the hint being displayed inside the input field, a modern solution would use a label element with the for attribute referring to the id of the input field, like this:
<form action="input_password.htm">
<label for="username" title="This is your user name...">Username: </label><input id="username" name="Username" type="text" size="20" maxlength="20"></p>
</form>
If you click the label, the input field will get the input focus.
If you hover over the label, it will show a longer explanation.
Generally the label should describe well enough what the user has to enter (in the case of user name it should be very much obvious).
Define tooltip text
<input type="text" id="firstname" name="firstname" tooltipText="Type in your firstname in this box">
Initialize and configure the script
<script type="text/javascript">
var tooltipObj = new DHTMLgoodies_formTooltip();
tooltipObj.setTooltipPosition('right');
tooltipObj.setPageBgColor('#EEE');
tooltipObj.setCloseMessage('Exit');
tooltipObj.initFormFieldTooltip();
</script>