I have been trying to get a function working with JQuery to add or remove form input text fields. I have been using an example I found as a starting point.
Here is what I have so far.,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml`enter code here`1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function valid_to(txt1id) {
var toval = document.getElementById(txt1id).value;
if(toval == "") {
alert("Text Field1 is Empty");
document.getElementById(txt1id).focus();
return false;
}
}
function calc_from(txt2id) {
if(document.getElementById(txt2id).value == "") {
alert("Text Field2 is Empty");
document.getElementById(txt2id).focus();
return false;
}
}
</script>
<script type="text/javascript">
$(document).ready(function(){
var max = 10, append_data, tabindex = 23;
/*If the add icon was clicked*/
$(".add").live('click',function(){
var divid = parseInt(document.getElementById("txt_rowcnt").value)+parseInt(1);
var id = parseInt(document.getElementById("txt_rowcnt").value)+parseInt(1);
if($("div[id^='txt_']").length <10){ //Don't add new textbox if max limit exceed
$(this).remove(); //remove the add icon from current text box
var tabindex2 = parseInt(tabindex)+1;
var append_data = '<div id="txt_'+divid+'" class="txt_div" style="display:none;"><div class="left"><input type="text" id="txt1_'+id+'" name="txt1_'+id+'" class="medium_input" dir="rtl" style="width:94px;" readonly="true" tabindex="'+tabindex+'" onblur="valid_to(this.id);"/><input type="text" id="txt2_'+id+'" name="txt2'+id+'" class="medium_input" dir="rtl" style="width:94px;" maxlength="5" tabindex="'+tabindex2+'" onblur="calc_from(this.id);"/></div><span class="right" style="float: left; margin-left: 7px; margin-top: 7px;"><img src="add.png" class="add"/> <img src="remove.png" class="remove"/></span></div>';
$("#text_boxes").append(append_data); //append new text box in main div
$("#txt_"+divid).effect("bounce", { times:3 }, 300); //display block appended text box with silde down
divid++;
id = parseInt(id)+1;
tabindex = parseInt(tabindex)+2;
} else {
alert("Maximum 100 textboxes are allowed");
}
document.getElementById("txt_rowcnt").value=parseInt(divid)-parseInt(1);
})
/*If remove icon was clicked*/
$(".remove").live('click',function(){
var prev_obj = $(this).parents().eq(1).prev().attr('id'); //previous div id of this text box
$(this).parents().eq(1).slideUp('medium',function() { $(this).remove(); //remove this text box with slide up
if($("div[id^='txt_']").length > 1){
append_data = '<img src="remove.png" class="remove"/>'; //Add remove icon if number of text boxes are greater than 1
}else{
append_data = '';
}
if($(".add").length < 1){
$("#"+prev_obj+" .right").html('<img src="add.png" class="add"/> '+append_data);
document.getElementById("txt_rowcnt").value=parseInt(document.getElementById("txt_rowcnt").value)-parseInt(1);
}
});
})
});
</script>
</head>
<body>
<form method="post" action="" enctype="multipart/form-data" >
<table>
<tr>
<td> Textboxes </td>
</tr>
<tr>
<td>
<div id="text_boxes">
<div id="txt_1" class="txt_div">
<div class="left">
<input type="text" name="txt1_1" id="txt1_1" tabindex="21" onblur="valid_to(this.id);" />
<input type="text" name="txt2_1" id="txt2_1" tabindex="22" onblur="calc_from(this.id);"/>
<span class="right" style="margin-top:7px;"> <img src="add.png" class="add"/> </span>
</div>
</div>
</div>
</td>
</tr>
<input type="hidden" name="txt_rowcnt" id="txt_rowcnt" value="1" />
</table>
</form>
</body>
</html>
What I am confused about is why, when I look at the page in the browser.
I can see two text fields with add image button but when I click add button it hides away instead getting new rows with add and remove button.
Can someone enlighten me on this?
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml`enter code here`1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery1.9.1.js"></script>
</head>
<script type="text/javascript">
function valid_to(txt1id) {
var toval = document.getElementById(txt1id).value;
if(toval == "") {
alert("Text Field1 is Empty");
document.getElementById(txt1id).focus();
return false;
}
}
function calc_from(txt2id) {
if(document.getElementById(txt2id).value == "") {
alert("Text Field2 is Empty");
document.getElementById(txt2id).focus();
return false;
}
}
</script>
<script type="text/javascript">
$(document).ready(function(){
var max = 10, append_data, tabindex = 23;
/*If the add icon was clicked*/
$(".add").click(function(){
alert('test');
var divid = parseInt(document.getElementById("txt_rowcnt").value)+parseInt(1);
var id = parseInt(document.getElementById("txt_rowcnt").value)+parseInt(1);
if($("div[id^='txt_']").length <10){ //Don't add new textbox if max limit exceed
$(this).remove(); //remove the add icon from current text box
var tabindex2 = parseInt(tabindex)+1;
var append_data = '<div id="txt_'+divid+'" class="txt_div" style="display:block;"><div class="left"><input type="text" id="txt1_'+id+'" name="txt1_'+id+'" class="medium_input" dir="rtl" style="width:94px;" readonly="true" tabindex="'+tabindex+'" onblur="valid_to(this.id);"/><input type="text" id="txt2_'+id+'" name="txt2'+id+'" class="medium_input" dir="rtl" style="width:94px;" maxlength="5" tabindex="'+tabindex2+'" onblur="calc_from(this.id);"/></div><span class="right" style="float: left; margin-left: 7px; margin-top: 7px;"><img src="add.png" class="add"/> <img src="remove.png" class="remove"/></span></div>';
$("#text_boxes").append(append_data); //append new text box in main div
//$("#txt_"+divid).effect("bounce", { times:3 }, 300); //display block appended text box with silde down
divid++;
id = parseInt(id)+1;
tabindex = parseInt(tabindex)+2;
} else {
alert("Maximum 100 textboxes are allowed");
}
document.getElementById("txt_rowcnt").value=parseInt(divid)-parseInt(1);
})
/*If remove icon was clicked*/
$(".remove").click(function(){
var prev_obj = $(this).parents().eq(1).prev().attr('id'); //previous div id of this text box
$(this).parents().eq(1).slideUp('medium',function() { $(this).remove(); //remove this text box with slide up
if($("div[id^='txt_']").length > 1){
append_data = '<img src="remove.png" class="remove"/>'; //Add remove icon if number of text boxes are greater than 1
}else{
append_data = '';
}
if($(".add").length < 1){
$("#"+prev_obj+" .right").html('<img src="add.png" class="add"/> '+append_data);
document.getElementById("txt_rowcnt").value=parseInt(document.getElementById("txt_rowcnt").value)-parseInt(1);
}
});
})
});
</script>
<body>
<form method="post" action="" enctype="multipart/form-data" >
<table> <tr>
<td> Textboxes </td> </tr>
<tr> <td> <div id="text_boxes">
<div id="txt_1" class="txt_div">
<div class="left">
<input type="text" name="txt1_1" id="txt1_1" tabindex="21" onblur="valid_to(this.id);" />
<input type="text" name="txt2_1" id="txt2_1" tabindex="22" onblur="calc_from(this.id);"/>
<span class="right" style="margin-top:7px;"> <img src="add.png" alt="add" class="add"/> </span>
</div> </div> </div> </td>
</tr>
<input type="hidden" name="txt_rowcnt" id="txt_rowcnt" value="1" />
</table>
</form>
</body>
</html>
Related
So, basically i have a textbox and file upload button . What i want when user enter integer in textbox for eg :10 then i want to display file upload button 10 times.
Here is a working demo hope it will helpful for you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function AppendRow(e) {
var val = e.value;
if (val !== "") {
var html ='';
for (var i = 0; i < val; i++) {
html +='<input type="file" id="file">';
}
$("#append").empty().append(html);
}
}
</script>
</head>
<body>
<input type="text" id="input1" onkeyup="AppendRow(this)"/>
<div id="append">
<div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").keyup(function(){
var val = $(this).val();
if (val !== "") {
var html;
for (var i = 0; i < val; i++) {
html = '<input type="file" id="file">';
$("#append").append(html);
}
}
});
});
</script>
</head>
<body>
<input type="text" id="input" />
<div id="append">
</div>
</body>
</html>
Please use the following code
<input [(ngModel)]="count" />
<div *ngFor="let item of [].constructor(count); ">
<input type='file'>
</div>
We will have a set of records where the user will select what color they want that section to be. As you can see I'm duplicating script code so that I can change the colors of a div. This value will be stored in mysql and retrieved when the user access the page again. Is there a way to format this code so that it's not duplicated 500 times? Thank you for your help. --newbie
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.4.3.min.js"></script>
<style type="text/css">
#full {
background-color: #ffffff;
}
</style>
<title></title>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function(){
$(".theme").change(function()
{var background = $("#color1").val();
$("#full").css("background-color", background);
});
$(".theme2").change(function()
{var background = $("#color2").val();
$("#full2").css("background-color", background);
});
$(".theme3").change(function()
{var background = $("#color3").val();
$("#full3").css("background-color", background);
});
});
});//]]>
</script>
<link rel="stylesheet" href="css/color_picker.css" type="text/css" />
<script language="javascript" type="text/javascript" src="js/jquery.colorpicker.js"/></script>
<script type="text/javascript">
//Run the code when document ready
$(function() {
$('#color1').colorPicker({showHexField: false});
$('#color2').colorPicker({showHexField: false});
});
</script>
</head>
<body>
<body >
<label for="color">Color :</label> </td><td>
<div id="full">
<form method="post" action="">
<input id="color1" type="hidden" name="color1" value="" class="theme"/>
</div>
<div id="full2" border="1" width="100%">
<input id="color2" type="hidden" name="color2" value="" class="theme2"/>
</div>
<div id="full3" border="1" width="100%">
<input id="color3" type="hidden" name="color3" value="" class="theme3"/>
</div>
</form>
</body>
instead of using Id's, you can use classes like full and theme, so your html for any given set would look like
<form method="post" action="">
<div class="full">
<input id="color1" type="hidden" name="color1" value="" class="theme"/>
</div>
<div class="full" border="1" width="100%">
<input id="color2" type="hidden" name="color2" value="" class="theme"/>
</div>
<div class="full" border="1" width="100%">
<input id="color3" type="hidden" name="color3" value="" class="theme"/>
</div>
</form>
Then your javascript would look like
$('.theme').change(function() {
var $this = $(this);
var background= $this.val();
$this.closest('.full').css("background-color", background);
})
edit: fixed bug, changed from parent to closest so that .full doesn't have to be a direct parent of the input.
You can achieve this with a simple for loop.
If the number of colors is not static you can use the jquery "starts with" selector to get all of the elements and then take the length.
$(window).load(function(){
$(document).ready(function(){
//if the count is static you can just hardcode it
var colorCount = $("[id^='color']").length;
for(var i = 1; i <= colorCount; i++) {
var color = "#color" + i;
var full = "#full" + i;
var theme = ".theme" + i;
//only necessary because your first div does not have the number
if(i === 1) {
full = "#full";
theme = ".theme";
}
$(".theme").change(function()
{
var background = $(color).val();
$(full).css("background-color", background);
});
}
});
});
Below is a working snippet. There were some issues with your HTML, and I'm not sure if you were setting the .change() event intentionally, but for the demo I just changed it directly.
$(window).load(function(){
$(document).ready(function(){
var colorCount = $("[id^='color']").length;
for(var i = 1; i <= colorCount; i++) {
var color = "#color" + i;
var full = "#full" + i;
var theme = ".theme" + i;
//only necessary because your first div does not have the number
if(i === 1) {
full = "#full";
theme = ".theme";
}
var background = $(color).val();
$(full).css("background-color", background);
}
});
});
.color-box {
background-color: #ffffff;
border: solid 2px black;
min-height: 30px;
margin: 5px;
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.4.3.min.js"></script>
<label for="color">Color :</label>
<form method="post" action="">
<div id="full" class="color-box">
<input id="color1" type="hidden" name="color1" value="lightblue" class="theme"/>
</div>
<div id="full2" class="color-box">
<input id="color2" type="hidden" name="color2" value="#226666" class="theme2"/>
</div>
<div id="full3" class="color-box">
<input id="color3" type="hidden" name="color3" value="rgba(140,15,110,.6)" class="theme3"/>
</div>
</form>
Hi I am trying to change the background style color of my div tag when the input matches one of the values in my list that I have, and when it doesn't, I want to create a div tag and append the missing value to the bottom of my list because it did not match.
I searched around and found this thread and used the same methods proposed, but no luck. Here is my attempt with my external js script:
function searchList()
{
var input = document.getElementById("search").value;
if ((input == "")||(input == null))
{
alert ('Error', 'values missing');
}
var childDivs = document.getElementById('courselist').getElementsByTagName('div');
for (i = 0; i < childDivs.length; i++)
{
var childDiv = childDivs[i];
if (input = childDiv)
{
document.getElementById("container").style.backgroundColor = yellow;
document.getElementById("courselist").style.backgroundColor = yellow;
}
else if (input != childDiv)
{
var div = document.createElement("div");
div.innerHTML = input;
document.courselist.appendChild(div);
}
}
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title> Work</title>
<style type="text/css">
fieldset {border:0px;}
#courselist {width:300px;}
#courselist div {border: 1px black solid;padding:10px;}
</style>
</head>
<body>
<div id="container">
<h2>Search a Course</h2>
<form action="" method="post" onsubmit="return searchList()">
<fieldset>
Enter the Course Name<br />
<input type="text" id="search" size="20" /><br />
<input type="submit" value="Search List" id="sub" />
<br /><br />
</fieldset>
</form>
<div id="courselist">
<div id="first"> </div>
<div> Machine Learning </div>
<div> Image Processing</div>
<div>Design and Analysis of Algorithms</div>
<div>Web Programming II </div>
<div>Advanced JAVA</div>
<div>Pattern Recognition</div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
What is correct way to change the style of a div with a function and to append a new div with javascript? Thanks in advance!
yellow should be a string and you need to find the correct element withing the page
function searchList()
{
var input = document.getElementById("search").value;
if ((input == "")||(input == null))
{
alert ('Error', 'values missing');
}
var childDivs = document.getElementById('courselist').getElementsByTagName('div');
for (i = 0; i < childDivs.length; i++)
{
var childDiv = childDivs[i];
if (input === childDiv)
{ if(input === 'Machine Learning'){
document.getElementById("#courselist").find('.machineLearning').style.backgroundColor = 'yellow';
}
}
else if (input != childDiv)
{
var div = document.createElement("div");
div.innerHTML = input;
document.courselist.appendChild(div);
}
}
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title> Work</title>
<style type="text/css">
fieldset {border:0px;}
#courselist {width:300px;}
#courselist div {border: 1px black solid;padding:10px;}
</style>
</head>
<body>
<div id="container">
<h2>Search a Course</h2>
<form action="" method="post" onsubmit="return searchList()">
<fieldset>
Enter the Course Name<br />
<input type="text" id="search" size="20" /><br />
<input type="submit" value="Search List" id="sub" />
<br /><br />
</fieldset>
</form>
<div id="courselist">
<div id="first"> </div>
<div class = 'machineLearning'> Machine Learning </div>
<div> Image Processing</div>
<div>Design and Analysis of Algorithms</div>
<div>Web Programming II </div>
<div>Advanced JAVA</div>
<div>Pattern Recognition</div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Pass yellow as string, as there is no yellow variable holding value
Test the Element.textContent property, not the element itself or else result will always be false
Break the loop if value is found
Keep a variable to test value is found, else append the element
Use document.getElementById('courselist') instead of document.courselist to access the element
Use return false; in function to prevent form submission
function searchList() {
var input = document.getElementById("search").value;
if ((input == "") || (input == null)) {
return alert('Error', 'values missing');
}
var childDivs = document.getElementById('courselist').getElementsByTagName('div');
var found = false;
for (i = 0; i < childDivs.length; i++) {
var childDiv = childDivs[i];
if (input == childDiv.textContent) {
document.getElementById("container").style.backgroundColor = 'yellow';
document.getElementById("courselist").style.backgroundColor = 'yellow';
found = true;
break;
}
}
if (!found) {
document.getElementById("container").style.backgroundColor = '';
document.getElementById("courselist").style.backgroundColor = '';
//If you want to remove the `backgroundColor`
var div = document.createElement("div");
div.innerHTML = input;
document.getElementById('courselist').appendChild(div);
}
return false;
}
fieldset {
border: 0px;
}
#courselist {
width: 300px;
}
#courselist div {
border: 1px black solid;
padding: 10px;
}
<div id="container">
<h2>Search a Course</h2>
<form action="" method="post" onsubmit="return searchList()">
<fieldset>
Enter the Course Name
<br />
<input type="text" id="search" size="20" />
<br />
<input type="submit" value="Search List" id="sub" />
<br />
<br />
</fieldset>
</form>
<div id="courselist">
<div id="first"> </div>
<div>Machine Learning</div>
<div>Image Processing</div>
<div>Design and Analysis of Algorithms</div>
<div>Web Programming II</div>
<div>Advanced JAVA</div>
<div>Pattern Recognition</div>
</div>
</div>
When I click on back button of next page the check box value should not be reset.
It should be same as I checked or unchecked. The code from the first and next page is below.
First Page
<!DOCTYPE html>
<html>
<body>
<form>
<input type="checkbox" name="code" value="ECE">ECE<br>
<input type="checkbox" name="code" value="CSE">CSE<br>
<input type="checkbox" name="code" value="ISE">ISE<br>
<br>
<input type="button" onclick="dropFunction()" value="save">
<br><br>
<script>
function dropFunction() {
var branch = document.getElementsByName("code");
var out = "";
for (var i = 0; i < branch.length; i++) {
if (branch[i].checked == true) {
out = out + branch[i].value + " ";
window.location.href="next.html";
}
}
}
</script>
</form>
</body>
</html>
Next Page
<html>
<head>
<title>Welcome to </title>
</head>
<body color="yellow" text="blue">
<h1>welcome to page</h1>
<h2>here we go </h2>
<p> hello everybody<br></p>
</body>
<image src="D:\images.jpg" width="300" height="200"><br>
<button onclick="goBack()">Go Back</button>
<script>
function goBack() {
window.location.href="first.html";
}
</script>
</body>
</html>
Full solution: example. First add ids to your checkboxes:
<input type="checkbox" name="code" value="ECE" id='1'>ECE<br>
<input type="checkbox" name="code" value="CSE" id='2'>CSE<br>
<input type="checkbox" name="code" value="ISE" id='3'>ISE<br>
<input id="spy" style="visibility:hidden"/>
Then change your dropFunction:
function dropFunction() {
var branch = document.getElementsByName("code");
var out = "";
localStorage.clear();
for (var i = 0; i < branch.length; i++)
if (branch[i].checked == true)
localStorage.setItem(branch[i].id, true);
for (var i = 0; i < branch.length; i++) {
if (branch[i].checked == true) {
out = out + branch[i].value + " ";
window.location.href="next.html";
}
}
}
And add some new javascript code to first.html:
window.onload = function() {
var spy = document.getElementById("spy");
if(spy.value=='visited')
for(var i=1;i<=3;i++)
if(localStorage.getItem(i))
document.getElementById(i).checked=true;
spy.value = 'visited';
}
I need to add product info from inputs to table by using jQuery library. I am trying for quite some time now, but I don't get anywhere. First I need to enter data to inputs, select appropriate radio button and than validate input fields. If there are no errors, product info should be added to table. I tried with the following code: jsFiddle
Nothing works as intended tho. What am I doing wrong?
JS code:
$(document).ready(function () {
//Global variables
var productName = "";
var price = 0;
var onStack = "N/A";
$("body > form").submit(function () {
//Check if any of requested inputs is empty
if ($("#name").val().length == 0) {
//Missing name alert
$("#errors").val('Missing product name');
break;
} else if ($("#price").val() == 0) {
//Missing price alert
$("#errors").val('Missing price');
break;
}
//Get values from text inputs
productName = $("#name").val();
price = $("#price").val();
//Check radio buttons and assign values
if ($('input[value = "true"]'.is(':checked')) {
onStack = "Product available";
} else if ('input[value = "false"]'.is(':checked') {
onStack = "Not available";
}
//Add values to table
$("table tr:last").after("<tr><td>$productName</td><td>$price</td><td>$onStack</td></tr>");
});
});
HTML code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="index.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<body>
<form method="" action="">
<input type="text" id="name" placeholder="Product name" />
<br />
<input type="text" id="price" placeholder="Price" />
<br/>
<input type="radio" name="stack" value="true">Product available
<br />
<input type="radio" name="stack" value="false">Product not available
<br />
<input type="submit" value="Submit">
</form>
<div id="errors"></div>
<br />
<table border="1">
<tr>
<th>Product name</th>
<th>Price</th>
<th>Stack</th>
</tr>
</table>
<div id="sumOnStack">Sum of available products</div>
<div id="SumNotOnStack">Sum of unavailable products</div>
<input type="button" id="resetForm" value="Reset form" />
<br />
</body>
</html>
$(document).ready(function () {
//Global variables
var productName = "";
var price = 0;
var onStack = "N/A";
$("body > form").submit(function ( e) {
//Check if any of requested inputs is empty
$("#errors").html('');
if ($("#name").val().length == 0) {
//Missing name alert
$("#errors").html('Missing product name');
return false;
} else if ($("#price").val() == 0) {
//Missing price alert
$("#errors").html('Missing price');
return false;
} else if($('input[name="stack"]:checked').length == 0) {
$("#errors").html('Missing product availibility');
return false;
}
//Get values from text inputs
productName = $("#name").val();
price = $("#price").val();
var stack = $('input[name="stack"]:checked');
console.log( $(stack).val() );
//Check radio buttons and assign values
if ($(stack).val() == 'true') {
onStack = "Product available";
} else {
onStack = "Not available";
}
//Add values to table
$("table tr:last").after("<tr><td>"+productName+"</td><td>"+ price +"</td><td>"+ onStack +"</td></tr>");
return false;
});
});
Please try this. Hope above code will help u.