I current have a login box with the text ID and PASSWORD displayed inside the textbox. When a user clicks on it, it disappears and allows the user to type in their password. However, I set textmode of the Password text box to "PASSWORD" and it seems to not be working for the password box anymore. Anyone have any clues?
HTML
<input name="Login1$UserName" type="text" value="NUID" id="Login1_UserName" class="txtbox" onfocus="if(this.value==this.defaultValue) {this.value='';$(this).css('color','black');}" onblur="if(this.value=='') {this.value=this.defaultValue;$(this).css('color','rgb(173,180,195)');}" style="width:240px;" />
<span id="Login1_UserNameRequired" title="User Name is required." style="color:#DA6426;visibility:hidden;">*</span>
</td>
</tr>
<tr>
<td>
<input name="Login1$Password" type="password" id="Login1_Password" style="width:240px;" />
<span id="Login1_PasswordRequired" title="Password is required." style="color:#DA6426;visibility:hidden;">*</span>
</td>
</tr>
<tr>
<td align="center" style="color:#DA6426;">
</td>
</tr>
<tr>
<td align="right">
<input type="submit" name="Login1$LoginButton" value="Log In" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("Login1$LoginButton", "", true, "Login1", "", false, false))" id="Login1_LoginButton" style="font-family:Arial;height:22px;" />
This can be done using the onfocus and onblur events in javascript and changing the type attribute of the input element. I have, however, run into issues on some browsers not changing the field back to a password input. Here's an article that does it with asp.net controls complete with validators.
http://planetofcoders.com/watermark-property-password-textbox-web-page/
Not very familiar with asp, but with javascript you cannot change the type of an input (for security reasons); if you want the effect of having visible text in the password input, you have to physically hide the password and display another input that swaps onfocus.
EDIT:
Here is a link to the password swapping function I created a while back that is part of my js library. For anyone else looking I realize that it does not use jQuery, but I created before I used jQuery and haven't had time or reason to update it.
http://jsfiddle.net/thundercracker/DXLe3/1/
EDIT:
I am pretty sure it is completely self contained. Just need to call it on window.onload with the IDs of the two inputs.
Also need the eventListener function at the bottom with it as well.
Related
Currently I am using this to submit a quantity of 1 product to my cart page with a simple Onclick add to cart button.
<td class="data_cell dataFontColor">
<label onClick="location.href='cart/?PartNo=#NPart#&Qty=1'">Add to
Cart</label></td>
<td class="data_cell dataFontColor">
<cfif IsDefined ("getPrice2.Price") AND getPrice2.Price eq "">
I am trying to implement a text box to submit any quantity the user wants, but on submit the page moves but nothing is added to cart. I know it's something wrong with the Qty= in the OnClick, but can't seem to figure it out. Any help would be appreciated!
<td class="data_cell dataFontColor">
<td><input type="text" name="Qty" size="4" value= "Qty" maxlength="9"/></td>
<td class="data_cell dataFontColor">
<label onClick="location.href='shop/?PartNo=#NPart#&Qty=#Trim (Qty)#'">Add to
Cart</label></td>
The reason this is not working is because you can't do what you're attempting using ColdFusion which processes the page server-side. User typed inputs are processed client-side.
First, I would add an id attribute to your input tag.
<input type="text" id="Qty" name="Qty" size="4" value= "Qty" maxlength="9"/>
Once your input has an ID, now you can now extract the value client-side using JavaScript.
<label onClick="location.href='shop/?PartNo=#NPart#&Qty="+document.getElementById("Qty").value.trim()>Add to Cart</label>
I'm creating a website, and I have a form that gets created by Django. Once the page is loaded, the user can add text inputs to the form by clicking a button. The problem is that when the submit button is clicked, only the text inputs that were originally created by Django get submitted. In other words, the extra text inputs that were added dynamically don't get submitted.
I'm guessing that this is due to the fact that the submit button is only "aware" of form elements that were present when the page was loaded, and not dynamically loaded elements. With that in mind, I'm guessing I need to use some kind of Javascript in order to submit all of the form elements, including the dynamically added ones, but I can't figure out how to do it.
I've tried the jQuery submit function, but I don't really know what I'm supposed to do with it. Any tips would be appreciated!
EDIT: Here's a code snippet, which shows what the HTML looks like after 2 more text inputs have been added dynamically to the "origin"
<table>
<form class="dataInput" action="/foner/116" method="post">
<input type='hidden' name='csrfmiddlewaretoken' value='YYuqTzXUVosu1s2HD3zS00DpoPwQ7N0k' />
<tbody class="origin">
<tr>
<th>
<label>Origin:</label>
</th>
<td>
<input id="id_Origin-0" maxlength="200" name="Origin-0" type="text" value="A native of Georgia" /> // PRESENT AT PAGE LOAD
</td>
<td>
<button class="adder origin">+</button> // USER CLICKS THIS TO APPEND MORE TEXT INPUTS TO THE FORM
</td>
</tr>
<tr>
<th>
</th>
<td>
<input type="text" value="" maxlength="200" name="origin[]"></input> // DYNAMICALLY ADDED
</td>
</tr>
<tr>
<th>
</th>
<td>
<input type="text" value="" maxlength="200" name="origin[]"></input> // DYNAMICALLY ADDED
</td>
</tr>
</tbody>
<tr>
<th>
<label>Notes:</label>
</th>
<td>
<input class="submitButton" type="submit" value="S" />
</td>
</tr>
</form>
</table>
Ok, I was able to solve the problem. I had a table that was arranging all of the text inputs for the form, and the table also enclosed the form itself. It turns out that by inverting this, and enclosing the table inside of the form, all of the dynamically generated inputs get POSTed successfully. Thanks again to those who gave input in the comments above -- it's always helpful to get other opinions & perspectives.
So my question is (I know you're not supposed to ask questions in answers, but in case anyone feels like responding...): How was I supposed to know this? If you're using a compiled language, this is something that a compiler would probably catch for you. Is it just the kind of thing that you get the hang of with experience? Are there any books that would help me to get a handle on elementary problems like this? I find web development to be very tedious and frustrating because I often get hung up for long periods of time on trivial errors like this, and I'm assuming it doesn't have to be this way; I just don't quite know how to improve.
I have google autocomplete form on my page. What I'm trying to do is to use on change on city field from the form to query base and display result on the page via ajax and php. If you are familiar with googles form autocomplete, user inputs something in one input field and when he has finished form is filled with data.
Problem is that nothing is firing when form is filled with googles function, but when I input manually something in city field everything is working like it should. I've tried with onchange and oninput event but no joy.
Here is html layout:
<div id="locationField">
<input id="place" placeholder="Enter your address"
onFocus="geolocate()" type="text"></input>
</div>
<table id="address">
<tr>
<td class="label">City</td>
<td class="wideField" colspan="3"><input class="field" id="locality"
disabled="true" **onchange="getCity(this.value)"**></input></td>
</tr>
</table>
Any other way to detect the change?
Most autocompletes will not trigger an onchange event (true of browser autocompletes too).
You'll need to bind the event you want to the Google Maps autocomplete object using .addListener().
For an example check out this other Stack Overlow answer (by Jorge) and the fiddle posted in the accepted answer there.
Also see Google's own documentation on how to handle events.
I am very much new to HTML CSS and java script i have a personal query. I am creating a software in which i have few text boxes and drop downs. i want to change focus of the the text box automatically when enter button is pressed.It should travel in a specific way every time and once all text box are over it should submit automatically when enter is pressed. I am quite good in PHP so i can code the rest of the parts. Kindly help me in this please .
I have not tried anything on this so far
` <table class="labelboxs">
<tr>
<td class="name" colspan="2" style="width:219px; float:left; margin-left:20px;">
<input id="ph_number" type="text" required="" onblur="checkus(this.value)" style="width:200px;" placeholder="Phone Number" name="uname">
</td>
<td class="name" colspan="2" style="float:left; width:219px; margin-left:20px;">
<input id="Name" type="text" required="" onblur="checkpassstr(this.value)" style="width:200px;" placeholder="Name" name="pswd">
</td>
</tr> `
kindly check it and give me a solution
Try adding this to your code
onkeydown="javascript:if (event.keyCode == 13) document.getElementById('name').focus()"
where 'name' is the ID of the next input box.
There are probably better options using jquery, but if you're trying to keep it simple, this should work.
I am using JQuery validation plugin jquery.validate for validating my form inputs in this manner like this:
<form id="loginForm" name="loginForm" action="" method="POST">
<input name="username" type="text" />
<input name="password" type="password" />
<input type="submit" value="Login!" />
</form>
</div>
<script>
$("#loginForm").validate({ rules: { username: "required", password: "required" } });
While above works fine, I also needed input validation for elements which are not inside a form and they are being sent to the server dynamically using jQuery etc. so my question is, is it possible to validate such individual elements which are not inside form elements using jQuery Validation, like these:
<tr>
<td><label>Product Name</label></td>
<td colspan="2">
<select name="prdNme" id="prdNme" placeholder="Enter Product Name..." >
<option data-id='' data-pnme='' data-price='' value=''></option>
</select></td>
</tr>
<tr>
<td><label>Quantity</label></td>
<td colspan="2">
<input type="text" style="width: 80px" placeholder="Quantity" id="qntty" /></td>
</tr>
If yes than how? and if no than how can i validate them without writing my whole new validating functions?
Quote OP:
"... I also needed input validation for elements which are not inside a form ... so my question is, is it possible to validate such individual
elements which are not inside form elements using jQuery Validation"
No. It is not possible to validate any input elements not contained within <form></form> tags using the jQuery Validate plugin.
All input elements must be contained within form tags and .validate() attached to the form element to initialize the plugin. There is no other way. This is by design.
See: documentation...
"Validate forms like you've never been validating before!"
Quote OP:
"if no, then how can I validate them without writing my whole new validating functions?"
Why would you need to re-write anything? Simply wrap your input elements within a set of <form></form> tags.