This question already has answers here:
How do I check if an element is hidden in jQuery?
(65 answers)
Closed 9 years ago.
how can i check a if an element is visible or hidden with jquery and perform some action?
below given is my form related code,
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname"><br>
Full name: <input type="text" name="fullname"><br>
DOB: <input type="text" name="dob">
Address: <input type="text" name="address">
</form>
i need to hide the full name text field when first name text field or last name text field is displaying.
try something like this
if($('#testElement').is(':visible')){
//what you want to do when is visible
}
for your code
if($('input[name="firstname"], input[name="lastname"]').is(':visible')){
$('input[name="fullname"]').hide();
}
REFERENCE
http://api.jquery.com/visible-selector/
if($('input[name="firstname"], input[name="lastname"]').is(':visible') === true)
$('input[name="fullname"]').hide();
you should change
<input type="text" name="fullname">
to
<input type="hidden" name="fullname">
to make an input field hidden
this should work $(element).is(":visible")
I don't know the logic behind your question, but this demo should do the trick. DEMO
$(document).ready(function(){
if($('#firstname').is(':visible') || $('#lastname').is(':visible'))
$('#fullname').parent().hide();
})
I added some parent divs to hide the text and the input on once. If you want you can wrap the text in label tag for more clearly output.
Related
This question already has answers here:
Generic way to detect if html form is edited
(8 answers)
Closed 2 years ago.
I have a form which contains a lot of elements. Whenever I change an element (for example, a textbox or a text area), and then I go to another page, the browser will display a confirmation message for me to confirm if I'm sure I want to exit.
Here is my simple form, not the real one:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
So, when I edit the FirstName or the LastName and go to leave the page, the confirmation message will appear. But when I delete all the changes and go to leave the page, the confirmation message won't appear anymore. And because I also use my form when I insert and edit, I cannot just simply compare between the input fname and "" (for example), but I need to compare the original data and the new data.
Try Like this:
<input type="text" id="fname" name="fname" onfocus="fnm=this.defaultValue;" onblur="if(fnm!=this.value)confirm('Changed!');" >
may Help!
I am trying to get one input field that is higher up the page, move it's content to a form field at the bottom of the page and submit the form.
Please see what I have done here (doesn't work):
$('#move_down').click(function() {
$('#input_1').val($('#input_2').val())
});
<input type="text" id="input_1" value="">
<br>
<button id="move_down">Click Here</button>
<br>
<input type="text" id="input_2" value="">
<script src="//code.jquery.com/jquery-3.2.0.js"></script>
Moving the data is just the first part, I am also trying to get it to take the user down to the main form and submit it - is this possible with jQuery?
Updated the question to fix my silly error of omitting the ID selectors. Just need to figure out how to submit the form now.
You are right; just correct your query selector:
$('#move_down').click(function() {
$('#input_2').val($('#input_1').val())
});
http://jsfiddle.net/82x28ryr/4/
Missing the # prefix for id selector
Works fine doing
$('#move_down').click(function() {
$('#input_2').val($('#input_1').val())
});
<input type="text" id="input_1" value="">
<br>
<button id="move_down">Click Here</button>
<br>
<input type="text" id="input_2" value="">
<script src="//code.jquery.com/jquery-3.2.0.js"></script>
As for "moving down" you have only provided html in demo for 2 inputs. You need to update question with all relevant html in order to implement additional features
I have some HTML with two textboxes:
<input id="tb1" type="text" name="textbox1">
<input id="tb2" type="text" name="textbox2">
I want some JavaScript that will remove any content in textbox2 if the user has clicked/tabbed inside textbox1 (and vice versa).
I'm still learning JavaScript, but I think I need something like the following:
$('#textbox1').focus(function(){
SOMETHING HERE TO CLEAR TEXTBOX2
});
Any help gratefully received!
Your focus event is not working properly. The should use the hashtag sign and the element id (not the name).
$('#tb1').focus(function(){
$('#tb2').val('');
});
Working pen:
https://codepen.io/Rechousa/pen/ddJXeq
You can do this by binding the focus event on both inputs and then clearing the value of the one not focused. Ex:
$('#tb1, #tb2').focus(function() {
$('#tb1, #tb2').not(this).val('');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="tb1" type="text" name="textbox1">
<input id="tb2" type="text" name="textbox2">
This question already has answers here:
remove value attribute of input element using CSS only
(4 answers)
Closed 5 years ago.
I have a card reader which connects to computer via USB,it's supposed to print a 10 digit number when an input is focused on and a card is placed over the card reader, it works fine but I need the code to be invisible. when I hide the text using color:transparent, the text is hidden but when the user double clicks on the input it shows the text!
Thanks in advance.
Use this
<input type="password" name="pin" value="abc123">
And if you want to hide it completely then use
<input type="hidden" name="pin_hidden" value="abc123">
Please see below-
.hide {
text-indent: -99em;
}
<input type="text" value="123456789"><br>
<input class="hide" type="text" value="123456789">
<input id="value_1" type="text" name="values_1" value="somthing">
<input id="value_2" type="text" name="values_2" value="somthing">
<input id="value_8" type="text" name="values_8" value="somthing">
Hello everyone. I searched the forum and can not find solution for this. What I want is to catch input id by low to high number and fill it with text.
I have add button for fields
$("#value_1").val("something");
this method working for exactly id number
$( "span input" ).first().val("something");
this working great but i dont know how to catch second and third.
Please help and thanks in advance.
You can use :eq()
$('input:eq(0)').val(0);
$('input:eq(1)').val(1);
$('input:eq(2)').val(2);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<input id="value_1" type="text" name="values_1" value="somthing">
<input id="value_2" type="text" name="values_2" value="somthing">
<input id="value_8" type="text" name="values_8" value="somthing">
I don't recommend this ID naming convention, but if you must,
// Iterate through input elements, checking if the beginning of the string is 'value_'
$("input[id*='value_']").each(function() {
if ($(this).attr('id').startsWith('value_')) {
// Do what you'd like with the matched input element, being $(this)
}
});
EDIT: This might work better for you:
$("input[id^='value_']").each(function() {
// Do what you'd like with the matched input element, being $(this)
});
Found here: https://stackoverflow.com/a/5413862/5169684