when i am clicking on first textbox auto autocomplete function is working.but after inserting another textbox in script autocomplete function is not working.So please suggest me how to append autocomplete class in script.
html:
<form id="smart-form-register" class="smart-form client-form" method="post" enctype="multipart/form-data">
<fieldset>
<section>
<label class="input"> <i class="icon-append fa fa-user"></i>
<input type="text" name="product_name" placeholder="product Name">
<b class="tooltip tooltip-bottom-right">Needed to enter product Name</b> </label>
</section>
<section>
<table style="width:100%;">
<tr>
<th style="padding-bottom:10px;">Material Name</th>
<th style="padding-bottom:10px;">Material Quantity</th>
</tr>
<tr>
<td><input name="last[]" class="auto" id="last[0]" size="40"></td>
<td><input name="first[]" id="first[0]" size="40"></td>
</tr>
</table>
</section>
<section>
<span class="glyphicon glyphicon-plus" style="margin-left:580px;" value="Add" onclick="insert()"></span>
</section>
</fieldset>
<input type="submit" name="submit" value="Register" class="btn btn-primary">
</form>
script:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
//autocomplete
$(".auto").autocomplete({
source: "search1.php",
minLength: 1
});
});
</script>
<script>
var i=0
var j=0
function insert()
{
last=document.getElementById("last["+i+"]")
i++
first=document.getElementById("first["+j+"]")
j++
last.insertAdjacentHTML("AfterEnd", '<br><input class="auto" name="last[]" id="last['+i+']" size="40">')
first.insertAdjacentHTML("AfterEnd", '<br><input name="first[]" id="first['+j+']" size="40"<br>')
}
</script>
just you call autocomplete script function after insert new row.
Add this function "autocomplete()" to end of "insertAdjacentHTML()"
<script>
var i=0
var j=0
function insert()
{
last=document.getElementById("last["+i+"]")
i++
first=document.getElementById("first["+j+"]")
j++
last.insertAdjacentHTML("AfterEnd", '<br><input class="auto" name="last[]" id="last['+i+']" size="40">').autocomplete();
first.insertAdjacentHTML("AfterEnd", '<br><input name="first[]" id="first['+j+']" size="40"<br>').autocomplete();
}
</script>
Related
I have created multiple dynamic input fields but I want to add jquery autocomplete with all the input fields but problem is this is only working with only first input field not with every dynamically added input fields. I have tried many SO answers but none of them are working for me or May be I could not understand.
Someone will help me with this problem.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dynamic add/remove input fields in PHP Jquery AJAX</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div class="card text-center" style="margin-bottom:50px;">
<h1>Dynamic Add/Remove input fields in PHP Jquery AJAX</h1>
</div>
<div class="container">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<div class="form-group">
<form name="add_name" id="add_name">
<table class="table table-bordered table-hover" id="dynamic_field">
<tr>
<td>
<div class="ui-widget">
<td><input type="text" name="uname" placeholder="Enter your Name" class="form-control name_list" /></td>
</div>
<td><input type="text" name="name[]" id="automplete-2" placeholder="Enter your Name" class="form-control name_list" /></td>
<td><input type="text" name="email[]" placeholder="Enter your Email" class="form-control name_email"/></td>
<td><button type="button" name="add" id="add" class="btn btn-primary">Add More</button></td>
</tr>
</table>
<input type="submit" class="btn btn-success" name="submit" id="submit" value="Submit">
</form>
</div>
</div>
<div class="col-md-1"></div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
<?php
$js_array = json_encode($name);
echo "var availableTutorials = ". $js_array . ";\n";
?>
$("#automplete-2").autocomplete({
source: availableTutorials,
autoFocus: true
});
var i = 1;
$("#add").click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" id="automplete-2" name="name[]" placeholder="Enter your Name" class="form-control name_list"/></td><td><input type="text" name="email[]" placeholder="Enter your Email" class="form-control name_email"/></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("#submit").on('click',function(){
var formdata = $("#add_name").serialize();
$.ajax({
url :"action.php",
type :"POST",
data :formdata,
cache :false,
success:function(result){
alert(result);
$("#add_name")[0].reset();
}
});
});
});
</script>
So finally I read the code again and i find this solution and it's working now.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dynamic add/remove input fields in PHP Jquery AJAX</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div class="card text-center" style="margin-bottom:50px;">
<h1>Dynamic Add/Remove input fields in PHP Jquery AJAX</h1>
</div>
<div class="container">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<div class="form-group">
<form name="add_name" id="add_name">
<table class="table table-bordered table-hover" id="dynamic_field">
<tr>
<td>
<div class="ui-widget">
<td><input type="text" name="uname" placeholder="Enter your Name" class="form-control name_list" /></td>
</div>
<td><input type="text" name="name[]" id="automplete-2" placeholder="Enter your Name" class="form-control name_list" /></td>
<td><input type="text" name="email[]" placeholder="Enter your Email" class="form-control name_email"/></td>
<td><button type="button" name="add" id="add" class="btn btn-primary">Add More</button></td>
</tr>
</table>
<input type="submit" class="btn btn-success" name="submit" id="submit" value="Submit">
</form>
</div>
</div>
<div class="col-md-1"></div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
var i = 1;
$("#add").click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" id="automplete-2" name="name[]" placeholder="Enter your Name" class="form-control name_list"/></td><td><input type="text" name="email[]" placeholder="Enter your Email" class="form-control name_email"/></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
$('#dynamic_field').find('input[name^="name"]').autocomplete({
source: availableTutorials
});
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("#submit").on('click',function(){
var formdata = $("#add_name").serialize();
$.ajax({
url :"action.php",
type :"POST",
data :formdata,
cache :false,
success:function(result){
alert(result);
$("#add_name")[0].reset();
}
});
});
<?php
$js_array = json_encode($name);
echo "var availableTutorials = ". $js_array . ";\n";
?>
// $("#dynamic_field").autocomplete({
// source: availableTutorials,
// autoFocus: true
// });
$("input[name^='name']").autocomplete({
source: availableTutorials
});
});
</script>
I am having table with 6 fields and there is update button in the last field, onclick of that one popup appears but popup is taking only first entry of the in the table every time even if pressing the second or third entry's update button.
Here is my JSP Code `
<%#taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<title>Report</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-sm-2"></div>
<div class="col-sm-8">
<div class="panel panel-primary">
<div class="panel-heading">Details of Students</div>
<div class="panel-body">
<button id="newbtn" type="button"
class="form-control btn btn-success">Add New Student</button>
<button id="shwbtn" type="button"
class="form-control btn btn-success">show</button>
<div style="margin-top: 40px;">
<table class="table table-bordered" id="updatedetailsFrm">
<thead>
<tr style="background-color: #E0E0E1;">
<th>Sr.No.</th>
<th>Name</th>
<th>Surname</th>
<th>Contact No</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<s:if test="noData==true">
<s:iterator value="beanList">
<tr>
<td><s:property value="srNo" /></td>
<td><s:property value="name" /></td>
<td><s:property value="surname" /></td>
<td><s:property value="contactno" /></td>
<td><s:property value="email" /></td>
<td>
<a href="#popupLogin" data-rel="popup"
data-position-to="window" id="updateBtnfirst"
class="ui-btn ui-corner-all ui-shadow" data-transition="pop">Update</a>
<div data-role="popup" id="popupLogin" data-theme="a"
class="ui-corner-all">
<form id="updatedetailsFrm" method="post">
<div style="padding: 10px 20px;">
<h3>Update Your Data</h3>
<input id="name" placeholder="Name" type="text" name="name"
value='<s:property value="name"/>'>
<input id="surname" placeholder="Surname" type="text"
name="surname" value='<s:property value="surname"/>'>
<input id="contactno" placeholder="Contact No" type="text"
name="contactno" value='<s:property value="contactno"/>'>
<input id="email" class="disabled" placeholder="Email" type="text"
name="email" value='<s:property value="email"/>'>
<button value="update" type="button" id="updateBtn">Update</button>
</div>
</form>
</div>
<button class="btn btn-danger" id="deleteBtn">Delete</button>
</td>
</tr>
</s:iterator>
</s:if>
</table>
<s:else>
<div style="color: red;">No Data Found.</div>
</s:else>
</div>
</div>
</div>
</div>
<div class="col-sm-2"></div>
<script>
$("#updateBtn").click(function() {
var id = document.forms["updatedetailsFrm"]["email"].value;
var userName = document.forms["updatedetailsFrm"]["name"].value;
var surName = document.forms["updatedetailsFrm"]["surname"].value;
var contactNo = document.forms["updatedetailsFrm"]["contactno"].value;
window.location = "updatedetails.action?email="+id+"&name="+userName+"&surname="+surName+"&contactno="+contactNo;
})
// $('#updateBtnfirst').click(function() {
// document.getElementById("email").disabled = true;
// })
$('#newbtn').click(function() {
window.location.href = "insert.jsp";
})
$('#shwbtn').click(function() {
window.location = "report";
})
$("#deleteBtn").click(function() {
var id = $(this).closest("tr").find('td:eq(4)').text();
window.location.href = "deleterecord.action?&email=" + id;
})
</script>
</body>
</html>
`
So, my question is, popup should bring the row wise details in popup, in particular row.
Your iterator generates all of your rows with the same ID's over and over again. Update your iterator to generate unique ID's for each form in each row. I would then remove the ID from the update button and use a class instead so it's easy to bind your click event and use an HTML "data" attribute to hold the form ID value. Then when an update button is clicked, your JavaScript will be able to grab the data attribute value and then target the correct form via unique ID.
Example update button:
<button value="update" type="button" class="updateBtn" data-form-id="updatedetailsFrm-1">Update</button>
Example form ID:
<form id="updatedetailsFrm-1" method="post">
With duplicate ID's, you'll only ever retrieve the first instance of what you're trying to target in the DOM. There are other ID's in your iterator you'll want to look at too. ID's should be unique.
I've got a problem trying to display datepickers in a new JSP, after called it with Jquery.load function. No datapcikers are showing up unless I use this command:
$("#ui-datepicker-div").remove();
But if I do, the others datepickers that I have in the main jsp stop working.
The new JSP is called from the main like this:
$('#divNewJSP').load("myServlet?OP=1, function() {
$('#divNewJSP').slideDown();
The servlet executes correctly and I have the following code running in the new JSP, at the beggining fo the document:
$(document).ready(function() {
$('#dateField').datepicker($.datepicker.regional["pt"]);
$('#dateField').datepicker("show")
...
I've been trying several options but no one seems to work...Any ideas please?
Thx in advance.
EDIT
<link type="text/css" rel="stylesheet" href="/css/monitor.css"/>
<link type="text/css" rel="stylesheet" href="/css/jquery.dataTables.css" />
<script type="text/JavaScript" src="/js/jquery-1.11.1.js"></script>
<script type="text/JavaScript" src="/js/jquery.form.js"></script>
<script type="text/JavaScript" src="/js/jquery-ui.js"></script>
<script type="text/JavaScript" src="/js/jquery.ui.datepicker-es.js"> </script>
<script type="text/javascript" src="/js/jquery.dataTables.js?ver=a0.8185263484592263"></script>
<script>
$(document).ready(function() {
createDatatable();
// Datepickers
/*$("#ui-datepicker-div").remove();*/ <------ IT WORKS WITH THIS
//*** ORIGINAL DATEPICKERS INIT ***//
/* $('#dateField1').datepicker($.datepicker.regional["es"]);
$('#dateField2').datepicker($.datepicker.regional["es"]);
$('#dateField3').datepicker($.datepicker.regional["es"]);
$('#dateField4').datepicker($.datepicker.regional["es"]);*/
});
<body>
<div id="blockResult">
<div id="formCriteraRC"><br/>
<fieldset style="float:left;border:1px solid #007E3A;padding:0.5em;margin-bottom:0.5em;width:98%;">
<legend class="caption">Search Criteria</legend>
<table>
<tr>
<tr>
<div class="intrnot_small">
<span class="labelDateField">Date 1:</span>
<input type="text" class="bloquesinmargen campo" id="dateField1" value="" />
<span class="labelDateField">Date 2:</span>
<input type="text" class="bloquesinmargen campo" id="dateField2" value="" />
</div>
</tr>
<tr>
<div class="intrnot_small>
<span class="labelDateField">Date 3:</span>
<input type="text" class="bloquesinmargen campo" id="dateField3" value="" />
<span class="labelDateField">Date 4:</span>
<input type="text" class="bloquesinmargen campo" id="dateField4" value="" />
</div>
</tr><br/>
<tr>
<div class="intrnot_small">
<input type="button" id="search value="Search" disabled>
<input type="button" id="clean" value="Clean">
</div>
</tr>
</table>
</fieldset>
</div> <!-- end form -->
<div id="listData">
<table id="datatableReg" class="display nowrap" cellpadding="0" cellspacing="0" width="100%" style="table-layout:fixed;">
<thead>
<tr>
<th width="15px">Sel.</th>
<th width="120px">Id</th>
<th width="90px">Origin</th>
<th width="80px">Códe</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div> <!-- end -->
</div>
<div id="divDetailResult" class="bloquesinmargen" style='overflow-x: hidden; height: 99%; width: 99%; max-width:99%; display: none; top:0px;'> </div>
</body>
</html>
EDIT 2: MAIN JSP CALLING (from its .js)
function openNewJSP(){
$('#divNewJSP').load("myServlet?OP=1", function() {
$('#divNewJSP').slideDown();
$('#dateField1').datepicker($.datepicker.regional["pt"]);
$('#dateField2').datepicker($.datepicker.regional["pt"]);
$('#dateField3').datepicker($.datepicker.regional["pt"]);
$('#dateField4').datepicker($.datepicker.regional["pt"]);
});
}
You have to execute the datepicker function inside of your callback:
$('#divNewJSP').load("myServlet?OP=1", function() {
$('#divNewJSP').slideDown();
$('#dateField').datepicker($.datepicker.regional["pt"]);
$('#dateField').datepicker("show");
});
Remove the following code from your JSP (servlet response):
$(document).ready(function() {
$('#dateField').datepicker($.datepicker.regional["pt"]);
$('#dateField').datepicker("show");
});
I am making a shopping cart.
This is the code where a user clicks on a dd to cart button to add items to the cart table:
<div class="container">
<a class="addToCart" href="#" data-name="Java" data-price="150"><a/>
<img src="1.jpeg" id="book1" width="200" height="175" />
<div class="center">Java Basics</div>
<p> 150 SAR </p>
<div>
<label for="qty-1">Quantity</label>
<input type="text" name="qty-1" id="qty-1" class="qty" value="1" size="5"/>
</div>
<p><input id="addToCart" type="submit" value="Add to cart" class="btn"/></p>
</div>
<div class="container1">
<a class="addToCart" href="#" data-name="PHP" data-price="100"><a/>
<img src="1.jpeg" id="book1" width="200" height="175" />
<div class="center">PHP Basics</div>
<p> 100 SAR </p>
<div>
<label for="qty-1">Quantity</label>
<input type="text" name="qty-1" id="qty-1" class="qty" value="1" size="5"/>
</div>
<p><input id="addToCart" type="submit" value="Add to cart" class="btn"/></p>
</div>
<div class="container2">
<a class="addToCart" href="#" data-name="PHP" data-price="100"><a/>
<img src="1.jpeg" id="book1" width="200" height="175" />
<div class="center">JavaScript Basics</div>
<p> 200 SAR </p>
<div>
<label for="qty-1">Quantity</label>
<input type="text" name="qty-1" id="qty-1" class="qty" value="1" size="5"/>
</div>
<p><input id="addToCart" type="submit" value="Add to cart" class="btn"/></p>
</div>
with this jQuery script:
and I have javascript file that contains function of the cart like add to cart, remove from car and calculating total.
<script src="js/functions.js"></script>
<script>
// some jQuery function added to the links
$("#totalCart").html();
$(".addToCart")click(function(event){
eventpreventDefault(); //prevent the links from doing the default behaviour when they are clicked
var name= $(this).att("data-name"); //this represents the link that you click on / attr to access one of the attributes
var price= Number($(this).att("data-price"));
addItemtoCart(name, price, 1);
displayCart();
});
function displayCart() { //display cart content into the page as a list
var cartArray = listCart();
var output = "" ;
for ( var i in cartArray) {
output += "<li>" +cartArray[i].name+" "+cartArray[i].quantity+"</li>"
}
$("#showCart").html(output); //html(output) to replace everything in showCart with text we want
$("#totalCart").html(total Cart());
}
and this the cart.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form id="shopping-cart" action="cart.html" method="post">
<table style="width:80%">
<tr>
<th> Item </th>
<th> Quantity </th>
<th> Price </th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
my question is that I want to link add to cart button to the cart.html page with implementing the functions, I do not know how to glue them all together. Using only HtML, JavaScript and a little bit of jQuery.
PS: no database is used.
I have an issue with my toggleElement function, it will not change the style to block and then none. I don't know if I coded the function wrong or if I'm not calling it correctly.
Any feedback would be great!!
Thanks
<link href="chat.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.3.2.js" ></script>
<script type="text/javascript" src="chat.js" ></script>
<title>Chat Room | BetterGamerzUnited</title>
<script>
function toggleElement(x){
var x = document.getElementById(x);
if(x.style.display == 'block'){
x.style.display = 'none';
}else{
x.style.display = 'block';
}
}
</script>
</head>
<?php include $path . '/includes/header.php'; ?>
<div id="colorpickerB" style='display:none;'>
<div id="colorpicker">
<img src="/members/chat/palette.png" id="palette" alt="Color Palette" border="1"/>
<br />
<input id="color" type="hidden" readonly="true" value="#000000" />
</div>
</div>
<table id="content">
<tr id="chat-top">
<td>
<div id="scroll">
</div>
</td>
</tr>
<tr id="chat-btm">
<td colspan="2">
<div id="items">
<input type="text" class="" id="messageBox" placeholder="Enter your message here" maxlength="2000" size="30" />
</div>
<div id="color">
<button type="button" id="sampleText" class="chat-btn" onclick="toggleElement(colorpickerB);">
Color
</button>
</div>
<input type="hidden" class="" id="userName" value="<?php echo $log_username; ?>" maxlength="20"/>
<input type="button" class="chat-btn" value="Send" id="send" />
<?php
if ($user_ok === true) {
if (($log_userlevel == '7') || ($log_userlevel == '8')) {
echo '<input type="button" class="chat-btn" value="Delete All" id="delete" />';
}
}
?>
</td>
</tr>
</table>
</div>
<footer></footer>
</body>
</html>
You don't seem to have ever defined colorpickerB before calling toggleElement(colorpickerB);. Perhaps you meant to pass in the string 'colorpickerB' instead of an identifier:
toggleElement('colorpickerB');