Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Hi guys I have been making this form that has different inputs but they all have the same class:
<input type="text" name="username" class="field" />
<input type="text" name="email" calss="field" />
what i want to do is when ever the input filed is clicked i want to change the border color with JQuery(only the element that is clicked not all at the same time)
any one got an idea?
<input type="text" name="username" class="field" />
<input type="text" name="email" calss="field" />
$('.field').click(function(){
$(this).css('attributeName','value'); //here $(this) represents current element.
});
Bind a click event to all inputs, then use $(this) to target the one that was actually clicked .
$('.field').on('click', function() {
$('.field').removeClass('clicked'); // Remove previous
var $this = $(this);
$this.addClass('clicked'); // If you want to add the CSS with a class, which i recommend.
$this.css('border', '[css-border-values]'); // Inline CSS
});
<input type="text" name="username" class="field" />
<input type="text" name="email" calss="field" />
$('input[type=text]').focus(function(){
$('input[type=text]').css({'border':''});
$(this).css({'border':'solid 2px #ccc'});
});
http://jsfiddle.net/jCpfH/
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I want the text i type in
<input type="text" name="text1">
will automatically be updated in
<input type="text" name="text2">
by using JavaScript.
Anyone know how to solve it?
Thanks in advance
You can use the onkeyup event and populate the second <input> with the text of the first one, like this:
var inp1 = document.getElementsByName('text1')[0],
inp2 = document.getElementsByName('text2')[0];
inp1.addEventListener('keyup', function(e) {
inp2.value = this.value;
});
<p>Input 1: <input type="text" name="text1" placeholder="write something here..."></p>
<p>Input 2: <input type="text" name="text2" placeholder="ant it will show up here..."></p>
Test it using the "Run code snippet" button.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
I made a sign up form and i want to allow user to press the create account button only if he check the checkbox and if not the button is unclickable.The form looks like this:
<input type="text" name="nume" value="" placeholder="Nume" /><br />
<input type="text" name="prenume" value="" placeholder="Prenume" /><br />
<input type="text" name="username" value="" placeholder="Username" /><br />
<input type="password" name="password1" value="" placeholder="Parola" /><br />
<input type="email" name="email1" value="" placeholder="E-mail" /><br />
<input type="checkbox" name="reguli" id="reguli" required >
<label for="reguli">I agree with the website rules</label><br />
<input type="submit" name="cont" value="Creare cont" />
Found what I search : Toggle Button
Give id to your button like
<input type="submit" name="cont" id="btnsubmit" disabled="true" value="Creare cont" />
Then add following code to your javascript and you are done
$("#reguli").change(function(){
$("#btnsubmit").prop("disabled",!this.checked);
});
Fiddle here
use the jquery validate plugin
$('#signup form').validate({
rules: {
reguli: {
required: true,
}}});
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
i have a text field , where i input the value to filter ....
<input type="text" name="filter" id="filter">
<input type="radio" name="item" id="item" value="1">apple
<input type="radio" name="item" id="item" value="2">banana
<input type="radio" name="item" id="item" value="3">grapes
<input type="radio" name="item" id="item" value="4">mango
<input type="radio" name="item" id="item" value="5">orange
<input type="radio" name="item" id="item" value="6">pineapple
if i input apple in text field, only radio button with apple has text value should appear , rest must hide . Is der any way to do that ?
Check out the jquery selectors page:
"Attribute Contains Selector [name*="value"]"
var name2lookFor = $('#filter').val();
var $matchingElements = $('input[type="radio"]').filter('[name*="'+name2lookFor +'"]');
There are a lot of other selectors, just find the one you need. You might need a combination to make a bit more custom search, but this should put you in the right track.
Offtopic: An id must be unique, you cant call them the same in the ID attribute.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm trying to design a Login form let's say something like this:
<form action="target.php" method="POST">
Username: <input type="text" name="user" id="user" /><br /><br />
Password: <input type="password" name="pass" id="pass" /><br /><br />
<input type="submit" value="submit" id="submit" />
</from>
what I'm trying to do is to make the form show some pic.gif for 3 seconds when user hits submit and then continue I don't want it to start the next process directly.
Have your image initially with style "display:none" and modify your form declaration to hanlde "onsubmit" event:
<form action="target.php" method="POST" onsubmit = "mySubmit(this)">
and then define function:
function mySubmit(frm) {
document.getElementById("myImg").style.display = 'block';
setTimeout(function() {frm.submit()}, 3000);
return false;
}
It will display your image and cancel original submit request. But after 3 seconds it will submit form from code.
It sounds like you can just use the setTimeout() function.
<input type="submit" value="submit" id="submit" onclick="window.setTimeout(doStuffAfter, 30000)">
You call it in whatever way you want with func being the called after the delay. So you can open the image and then navigate away once the delay is done.
window.setTimeout(func, delay, [param1, param2, ...]);
https://developer.mozilla.org/en-US/docs/Web/API/window.setTimeout
Try
$('form').submit(function () {
if (showPic()) {
return true;
} else {
return false;
}
}
From a UX perspective I recommend giving them a prompt in your pic.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
HTML:
<form id="myform" method="post">
<input name="email" type="email" required=""/>
<input name="fname" type="text" required="" />
<input name="zip" type="text" />
<input type="button" value="button" />
</form>
Here I want to just check email by applying javascript function for html5 can we do that?
Edit
It has been unclear/misunderstood before. My question is do we have boolean valid check like form.email.valid() so that we can do check for email only with using javascript?
You should change your button input. A HTML5 submit button needs to look like the following:
<button type="submit">Submit</button>
Also, giving your e-mail a placeholder would be nice:
<input name="email" type="email" placeholder="me#example.com" required=""/>
Example jsFiddle.