How to clear search input from a text box in html? [duplicate] - html

This question already has answers here:
Disable text input history [duplicate]
(2 answers)
Closed 4 years ago.
I have a simple problem. How do I code a line to clear the search input history whenever I want to type in something new into the search box? I am writing a form which interacts with the YouTube search bar so whatever I type inside the search box, it will link to YouTube.
Below is the image file in which shows the input history I have typed in and it does not clear whenever I refresh the browser. I am fairly new at html.
Search Input :
<table class="tborder" cellpadding="$stylevar[cellpadding]"
cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="right">
<tr>
<td class="thead" width="100%">
<div style="text-align: left;">
<strong>YouTube Search</strong>
</div>
</td>
</tr>
<tr>
<td class="alt1" width="100%">
<div class="smallfont" style="text-align: left;">
<form id="vb_yt_search-form" action="http://www.youtube.com/results" method="get" target="_blank">
<input id="vb_yt_search-term" name="search_query" type="text" maxlength="128" />
<select name="search_type">
<option value="" >Videos</option>
<option value="search_users">Channels</option>
</select>
<input type="submit" value="Search" />
</form>
</div>
</td>
</tr>
</table>

You should use attribute autocomplete="off"

The best way is
<form autocomplete="off">
</form>
Hope that helps

Related

Table with identical submit button in every row: first submit button doesn't work (multiple same ids?)

I have a table which show product's files. A file can have a note added. If a note was added, it is displayed in a row. If not, text area field with submit button is displayed instead.
Short story, it all works, except for the first row without a note. After typing a note and clicking submit button nothing happens.
HTML:
<div id="files-list" style="display: none">
<table class="table">
<thead>
<tr>
<th>File</th>
<th>Date</th>
<th>Notes</th>
<th></th>
</tr>
</thead>
<tbody>
<c:if test="${fn:length(bean.product.files)>0}">
<c:forEach items="${bean.product.files}" var="na">
<tr>
<td>${na.name}</td>
<td><fmt:formatDate value="${na.created}" pattern="yyyy-MM-dd HH:mm" /></td>
<td>
<c:if test="${empty na.note}">
<form:form id="${na.id}" method="POST" modelAttribute="bean" action="${pageContext.request.contextPath}/app/updateFile.ajax?id=${bean.product.id}&fileId=${na.id}" style="display: inline">
<form:textarea path="prodFiles" rows="1" cols="50" />
<input type="hidden" name="version" value="${bean.product.version}">
<input type="submit" id="submitButton" value="Save it!" />
</form:form>
</c:if>
<c:if test="${not empty na.note}">
<div style="max-width: 400px">${na.note}</div>
</c:if>
</td>
<td><button type="button" class="btn btn-xs btn-danger" onclick="$().mkdelformTable('${pageContext.request.contextPath}/app/deleteFile.ajax?id=${bean.product.id}&fileId=${na.id}', this)">Delete it!</button></td>
</tr>
</c:forEach>
</c:if>
</tbody>
</table>
</div>
Possible hints:
When I open the table (it's a pop-up) console shows multiple [DOM] Found X elements with non-unique id errors
Checking elements in dev's tools I noticed that the first row doesn't include the form part. Possibly connected with the multiple-same-ids problem. Example:
<td>
<textarea id="prodFiles" name="prodFiles" rows="1" cols="50"></textarea>
<input type="hidden" name="version" value="181">
<input type="submit" id="submitButton" value="Save it!">
</td>
VS
<td>
<form id="65" style="display: inline" action="/oferty/app/updateFile.ajax?id=12701&fileId=65" method="POST">
<textarea id="prodFiles" name="prodFiles" rows="1" cols="50"></textarea>
<input type="hidden" name="version" value="181">
<input type="submit" id="submitButton" value="Save it!">
</form>
</td>
Edit: Also, new files can be added so hard-coding different names/ids can't be done, if suggested.
As I found out, there was some legacy code. I managed to get rid of 'multiple same ids' etc. errors by adding a note in an additional pop-up - on a previos page, instead of an input, I included a button to the new pop-up.

How to put polymer iron form inputs within html table

am trying to develop a basic form using polymerjs.
using iron-forms element alone i was able to create a form using the
second example in the following link reference :
https://elements.polymer-project.org/elements/iron-form?view=demo:demo/index.html&active=iron-form
but am not able to incorporate this with normal html table.
what i want to create is to make each input within the table cells seperately, similar as follows:
<form is="iron-form" method="get" action="/" id="submitOptions">
<table style="width: 95%;" align= "center">
<tr>
<td style="width: 50%;text-align: left;">
<paper-input name="User Name" label="User Name" required auto-validate autofocus style="width: 70%;" error-message="Username is required"> </paper-input>
</td>
<td style="width: 50%;c">
<paper-input label="Employer (Optional)" style="width: 70%;">
</paper-input>
</td>
</tr>
<tr>
<td style="width: 50%;text-align: left;">
<paper-input name="password" label="Password" type="password" required char-counter maxlength="10" style="width: 70%;" auto-validate allowed-char-counter minlength="6" error-message="Must be at least 6 characters."></paper-input>
</td>
</tr>
<div class="card-actions">
<tr>
<td colspan="2" align="center"
</br> <paper-button raised onclick="_submit(event)">Submit</paper-button>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<paper-button raised onclick="_reset(event)">Reset</paper-button>
</td>
</tr>
</div>
<tr>
<td colspan="2" align="center">
<div class="output"></div>
</td>
</tr>
</table>
</form>
script code:
<script>function _submit(event) {
Polymer.dom(event).localTarget.parentElement.submit(); }function _reset(event) {
var form = Polymer.dom(event).localTarget.parentElement
form.reset();
form.querySelector('.output').innerHTML = ''; }submitOptions.addEventListener('iron-form-submit', function(event) {
this.querySelector('.output').innerHTML = JSON.stringify(event.detail);}); </script>
I think you should avoid using tables for layout purposes and use the iron-flex-layout or flexboxes themselves.
This will also help you achieve a responsive layout, i.e. a layout that will change depending on screen size.
See this question: How do I use flexbox together with Polymer to make tables
Guides:
iron-flex-layout: https://elements.polymer-project.org/guides/flex-layout
flexboxes: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Exerpt from http://www.w3schools.com/html/html_layout.asp
"HTML Tables The element was not designed to be a layout tool!
The purpose of the element is to display tabular data. So, do
not use tables for your page layout! They will bring a mess into your
code. And imagine how hard it will be to redesign your site after a
couple of months.
Tip: Do NOT use tables for your page layout!"
w3schools.com has got some guides on how to use bootstrap which will help you as well. I find bootstrap trickier than just using flexboxes myself so far.
So I suggest you have a read up on the alternatives and edit your question or submit a new question when you run into problems with the alternative you have gone for!
Hope it helps.

Centered textbox with an offset label?

I have a textbox centered on a page. What I would like to have is an error label display to the right of it, if necessary, and keep the textbox centered on the page. The page contains a Panel, which is centering the entire page.
<asp:Panel ID="pnlStart" runat="server" CssClass="center">
...
...
...
<tr>
<td>
<div>
<input type="text" id="pName" name="pName" runat="server" class="pName" style="color:#7A0000;width:33%;"
value="Enter Your Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" />
<asp:Label ID="pNameValidationLabel" style="width:33%;" name="pName" runat="server" Text="*Please enter your name." class="pName" visible="false"></asp:Label>
</div>
</td>
</tr>
On page load, the textbox is centered properly. but when the visibility of the pNameValidate Label appears, it tries to force both object into the Center.
Is there a way for the textbox to be centered and the label off centered, to the right?
Many thanks for looking.
You can try and add text-align:right; to the style tag in the pName element.
I went with a table and this quickly provided me what I needed...
<tr>
<td>
<table width="100%">
<tr>
<td width="33%"> </td>
<td width="33%">
<div id="shaker">
<input type="text" id="pName" autocomplete="false" clientidmode="Static" name="pName" runat="server" class="pName"
value="Please Enter Your Name Here" onfocus="inputFocus(this)" onblur="inputBlur(this)" />
</div>
</td>
</tr>
</table>
</td>
</tr>

html field alignment

Good afternoon,
I am new to html. I have added html form fields into my application. The textfields are not aligned and they look really untidy. This is because i have field names like 'first tag' and 'second tag' which have a text field beside it. The text field for second tag appears more towards the left compared to the first. Is there a way i can align them without using a table? if i use a table, may i know how should i do it? i am sorry i cant upload any photos since i am a new user.
below is my html code.
Thank you for any help!
Cheers,
ZhengHong
<div class="rightsettings">
<form name="addsubject" action="html_form_action.asp" method="get">
<br>Subject: <input type="text" name="user" /></br>
<br>Number of tags<select name="addnoofsubject" id = "addnoofsubject" onchange="checktags()">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
</select></br>
<div id="addfirsttag">
<br>First Tag: <input type="text" name="tag1"/></br>
<div id = "addsecondtag" style="visibility:hidden">
<br>Second Tag: <input type="text" name="tag2"/></br>
</div>
<div id = "addthirdtag" style="visibility:hidden">
<br>Third Tag: <input type="text" name="tag3"/></br>
</div>
<div id = "addfourthtag" style="visibility:hidden">
<br>Fourth Tag: <input type="text" name="tag4"/></br>
</div>
<div id = "addfifthtag" style="visibility:hidden">
<br>Fifth Tag: <input type="text" name="tag5"/></br>
</div>
<br><input type="submit" value="Submit" /></br>
</form>
</div>
I recommend you to insert your forms into tables.
<div class="rightsettings">
<form name="addsubject" action="html_form_action.asp" method="get">
<table cellpadding="1" cellspacing="1" border="0">
<tr><td>Subject:</td><td><input type="text" name="user" /></td></tr>
<tr><td>Number of tags::</td><td><select name="addnoofsubject" id = "addnoofsubject" onchange="checktags()">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
</select></td></tr>
<tr><td>First Tag:</td><td><div id="addfirsttag"><input type="text" name="tag1"/></div></td></tr>
<!-- all your tags like the one above -->
<tr><td colspan="2" align="center"><input type="submit" value="Submit" /></td></tr>
</table>
</form>
</div>
try this one
<table>
<tr style="visibility:hidden"><td>First tag :><td><input type="text" name="tag1"/></td></tr>
<tr style="visibility:hidden"><td>Second tag :><td><input type="text" name="tag2"/></td></tr>
<tr style="visibility:hidden"><td>Third tag :><td><input type="text" name="tag3"/> </td></tr>
<tr><td colspan="2" align="center"><input type="submit"></td></tr>
</table>
with a table
<table>
<tr><td>First Tag</td><td><input ... /></td></tr>
<tr><td>Second Tage</td><td><input ... /></td></tr>
...
</table>
with css
css part :
label
{
display: block;
width: 150px;
float: left;
}
html part :
<label for="tag1">First Tag:</label><input ... /><br />
<label for="tag2">Second Tag:</label><input ... /><br />

converting 2 html files into a single .vm file

I am making 2 different web application for smart phones, using jQuery mobile and webapp-net.
so far I have the following codes: (its just a part of these codes, since I can not put the whole thing here)
<div data-role="collapsible" data-collapsed="true">
<h3>Eenmalige machtiging </h3>
<div data-role="fieldcontain" >
<form >
<input type="number" pattern="[0-9]*" id="anum" maxlength="9" placeholder="Account Number" autocomplete="off" onBlur="isValidAnum()" onFocus="emptyAnum('anum')"/>
<input type="text" id="bname" placeholder="Beneficiary Name" autocomplete="off" onBlur="isValidBname()" onFocus="emptyBname('bname')"/>
<table>
<tr><td>
Select Your Bank
</td>
<td>
<select name="select-bank" id="select-bank" class="select-bank" data-inline = "true" >
<option value="abn">ABN Amro</option>
<option value="rabo">Rabo Bank</option>
<option value="ing">ING Bank</option>
<option value="overige"> --Overig--</option>
</select>
</td>
</tr>
</table>
<table>
<tr>
<td>I Agree </td>
<td><input type="checkbox" class = "checkbox" name="cbox" id="cbox2"/></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<br/>
<a data-role = "button" type="submit" data-icon = "check" data-theme="b">Pay</a>
</form>
</div>
</div>
</div>
</div>
and:
<button class="form_header" id="last_method"><img src="appimages/directdebit_NL.png" align="middle" /> Eenmalige Machtiging</button>
<div class="form_body">
<fieldset>
<ul>
<li>
<input type="number" pattern="[0-9]*" id="anum" maxlength="9" placeholder="Account Number" autocomplete="off" onBlur="isValidAnum()" onFocus="emptyAnum('anum')"/>
</li>
<li>
<input type="text" id="bname" placeholder="Beneficiary Name" autocomplete="off" onBlur="isValidBname()" onFocus="emptyBname('bname')"/>
</li>
<li>
<table>
<tr><td>
Select Your Bank
</td>
<td>
<select name="select-bank" id="select-bank" class="select-bank" data-inline = "true" >
<option value="abn">ABN Amro</option>
<option value="rabo">Rabo Bank</option>
<option value="ing">ING Bank</option>
<option value="overige"> --Overig--</option>
</select>
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<td>I Agree </td>
<td><input type="checkbox" class = "checkbox" name="cbox" id="cbox2" /></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<input type="submit" value="Pay" class="pay_button"/>
</li>
</ul>
</fieldset>
</div>
</div>
</div>
Now I have to create a .vm file using these two codes, in order to do that I need to see what are the difference in html between these two. I tried to make it look alike each other as much as I could, I dont think I can change them any more. I was also trying to work with their css but I didnt change anything.
my question is there a possible way to put these html in a single .vm file??? if you know how to do it please help me, also if you need more info just ask me.
Are you talking about file diff? Where you check the differences in two files and merge them?
There is winmerge http://winmerge.org/
There is examdiff. Do a google search for file comparison or file diff