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.
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 am not a developer but I do like to delve and in this case I have been asked to help out making some small changed to an old site, I have completed most of it like adding ReCapchta but I am struggling with just one thing I would like to add to it.
All I am trying to do is get a Text Box to show if a Radio Box is selected to "Other" and in addition this field should be REQUIRED but only if Other is selected in the Radio box above obviously.
I have tried a number of things, mostly based on this article...
Hide/display of 3 textboxes on selection of radio button
But I cannot get it to work it just never shows, if I remove the Hidden and Display tags it shows correctly so I know the layout etc. is right, it's just getting this JavaScript to play ball.
===========================================================
JavaScript located in Header...
<script type="text/javascript">
$(function() {
$('input[name="BodyType"]').on('click', function() {
if ($(this).val() == 'Other') {
$('#textboxes').show();
}
else {
$('#textboxes').hide();
}
});
});
</script>
===========================================================
HTML Table Defining the Radio Boxes
<table width="900" border="0" cellspacing="0" cellpadding="0">
<td align="center"><span class="tablebodytxt2"><strong>VEHICLE BODY TYPE:</strong></span><br>
<table>
<td width="0" align="center" valign="top">
<span class="tablebodytxt">
<input type="radio" name="BodyType" required value="Convertible" id="BodyType">Convertible
<input type="radio" name="BodyType" required value="Coupe" id="BodyType">Coupe
<input type="radio" name="BodyType" required value="Crossover" id="BodyType">Crossover
<input type="radio" name="BodyType" required value="Hatchback" id="BodyType">Hatchback
<input type="radio" name="BodyType" required value="MPV" id="BodyType">Multi-Purpose (MPV)
<input type="radio" name="BodyType" required value="Pick-Up" id="BodyType">Pick-Up (UTE)
<input type="radio" name="BodyType" required value="Sedan" id="BodyType">Sedan
<input type="radio" name="BodyType" required value="Saloon" id="BodyType">Saloon
<input type="radio" name="BodyType" required value="SUV" id="BodyType">Sports Utility (SUV)
<br>
<input type="radio" name="BodyType" required value="Other" id="BodyType">Other: (Please specify below!)</span></label></td>
</table>
===========================================================
DIV Header, this is what should appear only when OTHER has been selected in the Radio Table above...
<div id="textboxes" class="tablebodytxt21" style="display: none">
Specify:<input type="text" required class="formtxt" hidden="true"/>
</div>
===========================================================
It just does not show unless I removed the Hidden and Display tags, I have tried playing with the ID and NAME tags but no luck. :(
Thanks to anyone who looked at this but I managed to resolve this myself using my old trusted suck it and see method as I got lost trying to use the Google Debugger on my own code, oh well.
Anyway as I didn't get an answer here I repharsed the question here: Code to display boxes based on Radio Checkboxes not working
This in the end got me the result I was looking for.
Essentially the reaosn it was not working was I tried the Script Code in the Header & the Body both above and below the code.
However I did not try it below the body which was where it needed to sit apparently for reasons I don't understand and need to look into, thanks anyway to anyone who looked.
Hopefully this thread will help someone else with a simliar problem in the future.
I use Vue.js to create a table in which every row is form with a submit button, this is the code I use:
<div id="admin-user">
<table class="table">
<tr v-for="(user, index) in users">
<form action="/ajax/submit/admin/user.php">
<td class="spacer"><input type="text" class="form-control" :value="user.id" readonly></td>
<td class="spacer"><input type="text" class="form-control" name="fullname" :value="user.fullname"></td>
<td class="spacer"><input type="text" class="form-control" name="username" :value="user.username"></td>
<td class="spacer"><input type="text" class="form-control" name="email" :value="user.email"></td>
<td class="spacer"><input type="text" class="form-control" name="phone" :value="user.phone"></td>
<td class="spacer"><input type="text" class="form-control" name="company" :value="user.company"></td>
<input type="hidden" name="id" :value="user.id">
<td class="spacer"><button type="submit" class="btn btn-success btn-block btn-lg right"><i class="fa fa-floppy-o" aria-hidden="true"></i></a></td>
</form>
</tr>
</table>
</div>
Of course I also have the Vue.js code in JavaScript but I don't think its necessary to solve this problem and it is quite long so I wont bother anyone with it.
The styling turns out fine but the form doesn't work, so I took a look with the inspector tool and this is what I found
And it turns out the </form> tag got closed prematurely. I don't understand why this happend which also means I don't know how to solve it. I hope someone could explain why this is happening to me.
The problem is not because of Vue.js or even Javascript, the problem is because of HTML itself. HTML does not allow the use of a form tag directly inside a table (row). Take a look at this question which has some working solutions.
Is it possible to remove chrome/safari autocomplete feature , which asks to store password once you logged in to the application?
I have tried adding "autocomplete=off" in both form and input fields
<form id="formforlogin" autocomplete="off">
<input id="usernameforlogin" type="hidden" name="usrnm" autocomplete="off"/>
<input id="passwordforlogin" type="hidden" name="psswrd" autocomplete="off"/>
</form>
<table style="margin-left: auto;margin-right: auto;">
<tr>
<td>Username</td>
<td><input id="usernameforshow" type="text" placeholder="user" autocomplete="off" /></td>
</tr>
<tr>
<td>Password</td>
<td><input id="passwordforshow" type="password" placeholder="password" autocomplete="off'/></td>
</tr>
After adding the above snippet as well i am not able to get rid of autocomplete feature of chrome , which is asking to save password dialogue as soon as you login. My application is built using angular js and the routing is done using angular-ui-router.
It will be very much helpful if somebody helps to solve the above issue.
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.