I have a situation like the one below:
var value = document.getElementById("value").value;
if (value = 'a') {
('.setting').append('<input type="text" name="name" placeholder="carname">');
}
elseif(value = 'b') {
('.setting').append('<input type="text" name="name" placeholder="fruitname">');
}
$(document).ready(function() {
$("input[name=name]").keyup(function() {
alert("The text has been changed.");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="username" placeholder="your name">
<select id="value"></select>
<div class="setting"></div>
The problem I have is that when I change the input the alert does not trigger. Does anyone know were am I messing up?
You're trying to select an input whose name property is "name", but the value you set in your HTML is name="username".
$(document).ready(function(){
$("input[name='username']").keyup(function(){
alert("The text has been changed.");
});
});
A better way yet is to give your input a unique id and select by that, so you don't have to use an attribute selector:
<input id="usernameInput" type="text" name="username" placeholder="your name">
$("#usernameInput").keyup(function(){ ... });
The $ is missing from ('.setting'), you should use .on to catch events of dynamically created elements and it's better to use it with classes, also use == or more likely === for conditions.
Live example
Your code modified:
<input type="text" name="name" class="example" placeholder="your name">
<select id="value"></select>
<div class="setting"></div>
<script>
var value = document.getElementById("value").value;
if(value==='a'){
$('.setting').append('<input type="text" name="name" class="example" placeholder="carname">');
}
else if(value==='b'){
$('.setting').append('<input type="text" name="name" class="example" placeholder="fruitname">');
}
</script>
<script>
$(document).ready(function(){
$('body').on('keyup', '.example', function() {
alert("The text has been changed.");
});
});
</script>
Related
If we have multiple fields of inputs each one having a difrent value of a string.
<input type="text" class="info" value="Enter Name">
<input type="text" class="info" value="Enter Lastname">
How would we be able to onfocus to the input fields inside . As an example i use the method of only ONE input field, as shown below in the code:
info.onfocus=function(){
if(info.value=="Enter Name"){
info.value=" ";
}
}
Now as i sad that code is only for one input field that i took as an example. How is it possible to focus on bouth of the input fields as i asked above. I know that i have to loop trough the input fields since bouth of them have the same class name. For any help from your friends i want to thank you in advanced.
You can set onFocus inside input field and then use event.target.value to access specified input value.
<html>
<script>
function _focus(ev) {
ev.target.value = '';
}
</script>
<input type="text" onFocus="_focus(event);" class="info" value="Enter Name">
</html>
EDIT:
<html>
<script>
function _focus(ev) {
ev.target.value = '';
}
function _blur(ev){
if(ev.target.value == ''){
if(event.target.id == 1) ev.target.value = "Enter Name"
if(event.target.id == 2) ev.target.value = "Enter Lastname"
}
}
</script>
<input id="1" type="text" onFocus="_focus(event);" onBlur="_blur(event)" class="info" value="Enter Name">
<input id="2" type="text" onFocus="_focus(event);" onBlur="_blur(event)" class="info" value="Enter Lastname">
</html>
I have three input fields and all the fields are enabled. Now When the user enters the text in any field then rest of the field should disable.
For example, The user enter in the name field the emp_id and temp_id field disabled or if enter in emp_id field then disable name and temp_id, or if enter temp_id the disable name and emp_id text field.
I am confused to use the logic in if-else the condition. Would you help me out in this?
$(document).ready(function(){
$('.disabled_field').on('keyup',function(){
if($(this).val().length >0){
// $("").prop('disabled','disabled');
}else{
// $("").removeProp('disabled','disabled');
}
});
});
<input type="text" name="name" class="disable_field" placeholder="name">
<input type="text" name="emp_id" class="disable_field" placeholder="emp_id">
<input type="text" name="temp_id" class="disable_field" placeholder="temp_id">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I think input event is better fit for this situation. Change the property based on the length of the value of the control. Simply use not:not() selector to disable all the inputs.
Try following:
$(document).ready(function(){
$('.disable_field').on('input',function(){
if($(this).val().length) // Checks if there is any value present or not
$('.disable_field').not(this).prop('disabled', true); // Disable all input except the current.
else
$('.disable_field').removeAttr('disabled'); // Enable all input by removing the "disabled" property from controls.
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name" class="disable_field" placeholder="name">
<input type="text" name="emp_id" class="disable_field" placeholder="emp_id">
<input type="text" name="temp_id" class="disable_field" placeholder="temp_id">
Try this.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input type="text" name="name" class="disable_field" placeholder="name">
<input type="text" name="emp_id" class="disable_field" placeholder="emp_id">
<input type="text" name="temp_id" class="disable_field" placeholder="temp_id">
<script>
$(document).ready(function(){
$('input.disable_field').keyup(function(){
if ($(this).val().length === 0) {
$('input.disable_field').prop('disabled', false);
} else {
$('input.disable_field').prop('disabled', true);
$(this).prop('disabled', false);
}
});
});
</script>
</body>
</html>
Here you go:
$(document).ready(function() {
var inputs = $('.disable_field');
inputs.on('keyup', function() {
if (this.value.length > 0) {
inputs.filter((i, f) => f !== this).prop('disabled', true);
} else {
inputs.prop('disabled', false);
}
});
});
<input type="text" name="name" class="disable_field" placeholder="name">
<input type="text" name="emp_id" class="disable_field" placeholder="emp_id">
<input type="text" name="temp_id" class="disable_field" placeholder="temp_id">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I got this code, that live-update text in a div when user type in a text area.
I'm not sure how to edit it, so i can re-use it for several matching div/input.
Is it possible to use some kind of wildcard?
My working code:
<textarea id="input-address" name="address" rows="5" class="form-control">{{ Auth::user()->address }}</textarea>
<div id="output-address">{{ Auth::user()->address }}</div>
$(function() {
$source=$("#input-address");
$output=$("#output-address");
$source.keyup(function() {
$output.text($source.val());
});
});
I was thinking about something like this, but not sure how to handle it:
<input type="text" id="input-first_name" name="first_name" class="form-control" value="{{ Auth::user()->first_name }}" required>
<textarea id="input-address" name="address" rows="5" class="form-control">{{ Auth::user()->address }}</textarea>
<div id="output-first_name">{{ Auth::user()->first_name}}</div>
<div id="output-address">{{ Auth::user()->address }}</div>
<script type="text/javascript">
$(function() {
$source=$("#input-[name-match]");
$output=$("#output-[name-match]");
$source.keyup(function() {
$output.text($source.val());
});
});
</script>
Yes you could use it as you described above, but you should attach a common dynamic input event like :
$(function() {
//Attach 'input' event to all elements that have an 'id' start with 'input-'
$('[id^="input-"]').on('input', function(){
var source_name = $(this).attr('name');
//Change the element that have 'id' equal to 'output-source_name'
$('#output-'+source_name).text( $(this).val() );
});
});
Hope this helps.
$(function() {
$('.input').on('input', function(){
var source_name = $(this).attr('name');
$('#output-'+source_name).text( $(this).val() );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="first_name" class="form-control input" value="first_name from controller" required>
<br>
<textarea name="address" rows="5" class="form-control input">address from controller</textarea>
<div id="output-first_name">first_name from controller</div>
<div id="output-address">address from controller</div>
$(document).ready(function () {
$(":text").keyup(function () {
$("p").text($(":text").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form>
User Name: <br>
<input type="text" >
<input type="submit" value="Submit">
</form>
<br>
<p>
</p>
Hope this will help to solve your problem.
$('#input-address').keyup(function() {
var address= $('#input-address').val();
$('#output-address').html(address);
});
I have 13 input text boxes simply to collect information from user. I'm trying to add a little bit of logic that when user clicks next button check to see if input field is blank and if so place a X image after the textbox. Where I'm getting up up at is if I put text in the box then it will not outline the box in red but still places an X after the form.
I've tried using the $.each() and $.filter()
Here is the js:
var invalid = '<img src="css/Filtration/img/x.png" /> ';
$('.btn').click(function () {
var inputs = $(":input").filter(function () {
return this.value === "";
});
if (inputs.length) {
$(inputs).css('border-color', 'red').after(invalid);
console.log(inputs.length);
}
});
Here is some of the input text boxes not all :
<label>First Name:</label>
<input type="text" name="First Name" class="txtbox" id="firstName" />
<label>Last Name:</label>
<input type="text" name="Last Name" class="txtbox" id="lastName" />
<label>Email Address:</label>
<input type="text" name="Email Address" class="txtbox" id="email" />
<label>Company:</label>
<input type="text" name="Company" class="txtbox" id="company" />
Try this:
var invalid = '<img src="css/Filtration/img/x.png" /> ';
$('.btn').click(function () {
$(":input").each(function () {
if($(this).val() == '' ){
$(this).css({borderColor: 'red'}).after(invalid);
}
});
});
Note that if you had not previously set other border css parameters, the color may not work. So this pattern can take care of it in that case:
.css({border: '1px solid red'})
Now, :input is a bit broad and therefore inefficient. Therefore, its better to say:
$(':text', '#container').each(...
Where #container is, of course, the container of all your inputs.
Please, consider use jquery Validate, you can see examples here and documentation here
1.The input element's id attribute and the corresponding label element should have a for attribute. The values of these two attributes must be equal. For this, needs to add a label tag for each input tag for the DOM using JQuery.
Example:
First Name :<input type="text" name="first_name" id="firstName" value="" maxlength="100" />
needs to add
<label for="firstName">First Name : <label>
<input type="text" name="first_name" id="firstName" value="" maxlength="100" />
2.
Or this will also be fine
<label> First Name : <input type="text" name="first_name" id="firstName" value="" maxlength="100" /></label>
Thank you so much in advance :) :)
You can use the wrap() like
jQuery(function ($) {
$('input').wrap(function () {
return $('<label />', {
for: this.id
}).append(this.previousSibling)
})
})
Demo: Fiddle
Or use .before() like
jQuery(function ($) {
$('input').before(function () {
return $('<label />', {
for: this.id
}).append(this.previousSibling)
})
})
Demo: Fiddle