Each time I am input a new value in input and when I submit it. It's adding in ul and the input getting blank but when I click the blank input it also adding blank li in ul how can I solve it.
this the is the code
<form>
<input type="text" id="addList">
<input type="button" id="submit" value="Add">
</form>
<ul id="listItem"></ul>
jquery
$(function (){
$('#submit').click(function(){
var $item = $('#addList').val();
$('ul#listItem').append('<li>'+ $item + '</li>');
$item = $('#addList').val(' ');
});
});
I couldn't see your code but I guess you just don't want any undefined value to be submitted.
Just check for null inputs;
if ($("#yourinput").val != "") myFunc(somevar);
Please provide your code instead of an image if you are asking for proper answers.
add not empty condition if($item !='')
$(function (){
$('#submit').click(function(){
var $item = $('#addList').val();
if($item.trim() !='')
{
$('ul#listItem').append('<li>'+ $item + '</li>');
$item = $('#addList').val(' ');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" id="addList">
<input type="button" id="submit" value="Add">
</form>
<ul id="listItem"></ul>
$("#addbtn").on("click",function(){
val = $("#lival").val();
if(val.trim() == ''){
alert("Please enter valid input!")
}else{
html= "<li>"+val+"</li>";
$("#ulid").append(html);
$("#lival").val('') ;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="lival"><button id="addbtn">Add</button>
<ul id="ulid">
</ul>
jsfiddle : https://jsfiddle.net/nbd5jjdx/
Related
I wrote the below code for changing the text of div that called active yes, based on value of each input with type hidden.
i want to change the text of this div if input with id enable to "Enable List" and if input with classname delete has value changes the div text to "Deleted list" and if both of them was null show "list".
my code does not work correctly.
what is my problem?
here is my snippet :
$(document).ready(function() {
tmpval = $('#enable').val();
if (tmpval == '') {
$('.activeyes').text('list');
} else {
$('.activeyes').text('Enable List');
}
tmpval2 = $('#delete').val();
if (tmpval2 == '') {
$('.activeyes').text('List');
} else {
$('.activeyes').text('Deleted List');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" value="aa" id="enable" />
<input type="text" value="" id="delete" />
<h1 class="activeyes"> List</h1>
You are overwriting effect of the first check by the second check; you need to check the 2 inputs value together. Still, it is unclear what will happen if both are non-empty.
$(document).ready(function() {
tmpval = $('#enable').val();
tmpval2 = $('#delete').val();
if (tmpval == '' && tmpval2 == '') {
$('.activeyes').text('list');
} else if( tmpval!='' ){
$('.activeyes').text('Enable List');
} else if( tmpval2!='' ){
$('.activeyes').text('Deleted List');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" value="aa" id="enable" />
<input type="text" value="" id="delete" />
<h1 class="activeyes"> List</h1>
what is my problem?
You need to check the value of input when it changes its value, so capture the change event.
$(document).ready(function() {
$('#enable, #delete').change(function() {
var $this = $(this);
var id = $this.attr("id");
var value = $this.val();
if (value.length == 0)
{
$('.activeyes').text('list');
}
else
{
id == "enable" ? $('.activeyes').text('Enable List') : $('.activeyes').text('Deleted List');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" value="aa" id="enable" />
<input type="text" value="" id="delete" />
<h1 class="activeyes"> List</h1>
I'm doing a task sheet. I dynamically add items to the list along with the delete button, but the button is not displayed. Why?
I can certainly write the code differently, but why does this code not work?
$(function() {
$("#button").click(function() {
var text = $("#text").val();
if(text != "")
{
var del = $("<input type='button' value='X'></input>").text();
//var item = $("<li></li>").text(text + del);
var item = $("<li></li>").text(text + del); // DONT WORK! WHY?
$("ul").append(item);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Введите текст:
<input id="text" type="text"></input>
<input id="button" type="submit"></input>
</div>
<div class="ul">
<ul>
</ul>
</div>
With this code I want to achieve this result. But I can not. Who will help explain where I'm wrong?
<li>Some Text <input type='button' value='X'></input></li>
In your code $("<input type='button' value='X'></input>").text() returns undefined.
Try this:
$(function() {
$("#button").click(function() {
var text = $("#text").val();
if(text != "")
{
var delHTML = "<input type='button' value='X'></input>";
var item = $("<li></li>").html(text + delHTML);
$("ul").append(item);
}
});
});
Your issue stemmed from not appending the delete button to the list item reference. As it's written I can add a list item to the ul but the button's delete button element was never attached to the list item.
Second, I removed .text() from var del = $("<input type='button' value='X'></input>").text();.
Here's my full solution.
$(function() {
$("#button").click(function() {
var text = $("#text").val();
if(text != "")
{
// Creating elements
var deleteBtn = $("<input type='button' value='X'></input>");
var item = $("<li></li>").text(text);
// Appending elements
item.append(deleteBtn);
$("ul").append(item);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Введите текст:
<input id="text" type="text"></input>
<input id="button" type="submit"></input>
</div>
<div class="ul">
<ul>
</ul>
</div>
The below code add a css class if the value of inputs are same but i have a condition where i want to Compare a specific class "User" text box with master if both's value matches then then make that text box value as yes if Dis matches then make that text box value to no.
HTML:
<input class="master" value="1">
<input class="user" value="1">
<input class="user" value="1">
<input class="user" value="0">
<input class="user" value="0">
JavaScript:
var inputs = $('input');
inputs.filter(function(i,el){
return inputs.not(this).filter(function() {
return this.value === el.value;
}).length !== 0;
}).addClass('red');
Try this example:
$(function() {
var master = $('input.master').get(0).value; // get the master value
var fn = function() {
return this.value === master ? "yes" : "no";//if current text-box matches master,then yes else no
};
$('input.user').val(fn); // loop and replace text for each user input
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="master" value="1">
<input class="user" value="1">
<input class="user" value="1">
<input class="user" value="0">
<input class="user" value="0">
var inputs = $('input.user');
$.each(inputs, function () {
var user = $(this).val();
var master = $('.master').val();
console.log($(this).val());
console.log($('.master').val());
if (user == master) {
$(this).val('NO');
}
})
demo
$("input.user").change(function(){
if($("input.master").val() == $(this).val()){
$(this).val('Yes');
}
else{
$(this).val('No');
}
});
Or even this
$("input.user").change(function(){
$("input.master").val() == $(this).val()) ? $(this).val('Yes') : $(this).val('No');
});
first wrap the inputs in a parent element, so you know you are comparing to the right master like so:
HTML
<div class="wrapper">
<!-- inputs here //-->
</div>
JAVASCRIPT
var wrappers = $('.wrapper');
$(wrappers).each(function(i,oWrapper){
var master_value = $(oWrapper).find('input.master:eq(0)').val();
var user_inputs = $(oWrapper).find('input.user');
$(user_inputs).each(function(i,oInput){
if($(oInput).val() === master_value){
$(oInput).addClass('red')
.val('yes');
}else{
$(oInput).removeClass('red')
.val('no');
}
});
});
that should do what you want
I try to add input dynamically. However each input I add is blank without a name.
$(document).ready(function() {
var moreUploadTag = '';
$('#attachMore').click(function() {
moreUploadTag += '<input type="text"/>';
jQuery(moreUploadTag).detach().appendTo("#boxed");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="boxed">
<input type="text" name="" />
</div>
<p id="attachMore">attachMore</p>
The purpose I left it blank without a name is I want to crate the name dynamically:
$('#addName').click(function(){
//$('input').attr("name", $(this).attr("name") + "test");
var named = $('input').val();
$('input').attr("name", $('input').attr("name") + named);
});
$(document).ready(function() {
$('#attachMore').click(function() {
var moreUploadTag = '';
moreUploadTag += '<input type="text"/>';
jQuery(moreUploadTag).detach().appendTo("#boxed");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxed">
<input type="text" name="" />
</div>
<p id="attachMore">attachMore</p>
<p id="addName">addName</p>
However it adds name to all input.
My question is how to add name input each of the inputs?
Thanks in advance for the help. Cheers.
Are you looking for something like this?
$('#addName').click(function(){
$('input').each(function(){
var input = $(this);
input.attr("name", input.val());
});
});
$(document).ready(function() {
$('#attachMore').click(function() {
var moreUploadTag = '';
moreUploadTag += '<input type="text"/>';
jQuery(moreUploadTag).detach().appendTo("#boxed");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxed">
<input type="text" name="" />
</div>
<p id="attachMore">attachMore</p>
<p id="addName">addName</p>
I think the problem is you need to tell jquery what name goes with what input.
var inputHtml = '<div class="inputGroup"><input type="text" /><button class="addName">add name</button></div>';
var yourname = 'allen';
$('.body').on('click', '.addInput', function() {
$('.target').prepend(inputHtml);
});
$('.body').on('click', '.addName', function() {
if($(this).siblings('input').length) {
$(this).siblings('input').attr('name', yourname);
// debug
alert($(this).parent().children('input').attr('name'));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="body">
<div class="target"></div>
<button class="addInput">add input</button>
</div>
I am trying to implement a way in which auto suggest would work with dynamically added input boxes. Everything is working fine with the static input types. i am able to request and retrieve result through ajax with static input types. But when i am trying to do the same thing with the dynamic inputs it is not working here is my code. any help would be appreciated.
<script src="js/jquery.js"></script>
<script src="js/jquery.autoSuggest.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script type="text/javascript">
$.noConflict();
jQuery(function(){
var rows = 0;
jQuery('#addRow').click(function(){
jQuery('#userRows').append('<div class="userRow"><input type="text" name="users['+rows+'][name]" /><input type="text" name="country" id="inputBox" /><input type="text" name="id-holder" id="id-holder"> <input type="text" id="price" name="users['+rows+'][price]" />Remove name="users['+rows+'][name]"<div>');
rows++;
location.reload();
});
jQuery(document).on('click', '.removeRow', function(){
jQuery(this).closest('.userRow').remove();
});
// Below just used to show the string on submit
});
</script>
<script type="text/javascript">
<?php
$pluginConf = "";
if(isset($_GET) && count($_GET) > 0){
extract($_GET);
if($limit == "") $limit = "10";
if($width == "") $width = "auto";
$pluginConf = '
$(function() {
$("#inputBox").autoSuggest({
ajaxFilePath : "server.php",
ajaxParams : "dummydata=dummyData",
autoFill : "'.$autofill.'",
iwidth : "'.$width.'",
opacity : "0.9",
ilimit : "'.$limit.'",
idHolder : "id-holder",
prices : "price",
match : "'.$match.'"
});
alert("Worked");
});';
} else {
$pluginConf = '
$(function() {
$("#inputBox").autoSuggest({
ajaxFilePath : "server.php",
ajaxParams : "dummydata=dummyData",
autoFill : false,
iwidth : "auto",
opacity : "0.9",
ilimit : "10",
idHolder : "id-holder",
prices : "price",
match : "contains"
});
alert("Worked");
}); ';
}
echo $pluginConf;
?>
</script>
</head>
<body>
<div>
Item Name # Price
</div>
<form method="post" id="usersForm">
<div id="userRows">
Add Row<br />
</div>
<input type="submit" id="submit" value="Submit" />
<!--<input type="text" name="xxx" id="inputBox">
<input type="text" name="id-holder" id="id-holder">
<input type="text" name="price" id="price"> -->
</form>
</body>
</html>
https://github.com/wuyuntao/jquery-autosuggest/blob/master/jquery.autoSuggest.js
Looking at the code, it seems it only attaches these events (focus) to elements that are created on page load. You would need to write some additional code to add "suggests" to generated input elements.
https://api.jquery.com/on/ use this function.