I want to display a list of offers as styled radio buttons and I want them listed in a table with 3 offers in every row.
I style them in a css file like this:
input[type=radio].offer + label {
display:inline-block;
margin:-2px;
padding: 15px 12px;
margin-bottom: 0;
line-height: 20px;
width: 175px;
color: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
border-bottom-color: #b3b3b3;
}
input[type=radio].offer:hover + label {
background-color: #f8ad51;
}
My asp page is like this:
sql1 = "SELECT * FROM company,prices WHERE companyId = company_id"
Set rs1 = Connect.Execute(sql1)
if NOT rs1.eof then
count = 1%>
<table border="0" cellpadding="2" cellspacing="10" width="600">
<tr>
<%
do until rs1.eof
price = a lot of calculations.......%>
<td><input type="radio" id="offer<%=count%>" name="offer" value="<%=rs1("companyId")%>" class="offer" onClick="this.form.submit1.disabled = !this.checked;">
<label for="offer<%=count%>"><%=rs1("navn")%><br><font size="1"><%=rs1("city")%></font><br><font size="4"><%=price%></font></label>
</td>
<%
if count MOD 3 = 0 then%>
</tr><tr>
<%end if
count = count + 1
rs1.MoveNext
loop%>
</tr>
</table>
<%end if%>
Everything is working fine and my list is looking ok, but now I want the list to be created in $(document).ready
So I now have this table:
<table id="tbl_result" border="0" cellpadding="0" cellspacing="0" width="380"></table>
I do a lot of javascript stuff and end up with this for every offer I find:
final_list+='<td>';
final_list+='<input type="radio" id="offer'+data.id+'" name="offer" value="'+data.id+' class="offer" onClick="this.form.submit1.disabled = !this.checked;">';
final_list+='<label for="offer'+data.id+'">'+data.cmp+'<br><font size="1">'+besked+'</font><br><font size="4">'+data.price+' kr.'+'</font></label>';
final_list+='</td>';
if ((finalList_count % 3) == 0) {
final_list+='</tr><tr>';
}
finalList_count = finalList_count + 1
And finally I add it to the page like this:
$("#tbl_result").html(final_list);
$("#tbl_result").show();
My problem is that my new offers dont get styled by my css file and I dont know how I can do that. Anybody that can help me out here?
You are missing a double quote " before you class attribute while creating final_list. So instead of value="'+data.id+' class="offer" you need to use value="'+data.id+'" class="offer" (note a " before class).
So the first line of final_list becomes:
final_list += '<input type="radio" id="offer' + data.id + '" name="offer" value="' + data.id + '" class="offer" onClick="this.form.submit1.disabled = !this.checked;">';
See this jsFiddle for a working example.
Related
So, a few days ago, I posted this question (nearly identical) and received a very helpful response.
However, in order to make a table calculator, I already have a id set to every table row of a certain column to turn the table into a calculator, which kind of messes up the answer for the original question when I try to apply it for myself (the JavaScript parses the unit "kg" in with the number and displays a sum as "NaN").
As well, there is a visible text box displayed inside of every cell with the answer above, which looks kind of ugly. My current code has cells that don't appear as text boxes but are still editable, which makes for a much sleeker experience in my opinion (I know it makes no functional difference, but the appearance is something that bugs me a lot!)
Below is a mock-up of what I'd like the code to look like. I'm trying to make the numbers/input appear on the right side of the text box, but still on the left side of the unit ("kg").
Below is a mock-up of what I am trying to create (except the numbers would be on the right).
Here is the code I have:
<head>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 5px;
width: 100%;
}
th, td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 5px;
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tr>
<td>entry1</td>
<td id="entry1" oninput="myFunction()">4000</td>
</tr>
<tr>
<td>entry2</td>
<td id="entry2" oninput="myFunction()">200</td>
</tr>
<tr>
<td>Total</td>
<td id="total"></td>
</tr>
</table>
<script type="text/javascript">
document.getElementById("entry1").contentEditable = true;
document.getElementById("entry2").contentEditable = true;
function myFunction() {
var entry1 = document.getElementById("entry1").innerText;
var entry2 = document.getElementById("entry2").innerText;
var total2 = parseInt(entry1) + parseInt(entry2);
document.getElementById("total").innerHTML = total2;
}
myFunction();
</script>
</body>
As you can see, it adds up the numbers in the right column and displays a sum in the final row. However, I would like units to display here (e.g. "kg") on the side, that aren't editable and, more importantly, don't get parsed as a number in the JavaScript function. Would be great if the ugly textbox outline doesn't appear inside the cell, too.
Is this possible? Any answers appreciated!
You get NaN when you call parseInt on an empty string. To fix this, change following statement from
var total = parseInt(jack2) + parseInt(john2) + parseInt (joe2);
to
var total = (parseInt(jack2) || 0) + (parseInt(john2) || 0) + (parseInt (joe2) || 0);
and to display the unit alongside the number in the right column, add 2 span elements inside the td element and use flexbox to align them properly.
To make the number editable, add contentEditable attribute on the span element containing the number. span element containing the unit will be non-editable by default.
function myFunction() {
var jack2 = document.getElementById("jack").innerText;
var john2 = document.getElementById("john").innerText;
var joe2 = document.getElementById("joe").innerText;
var total = (parseInt(jack2) || 0) + (parseInt(john2) || 0) + (parseInt(joe2) || 0);
document.getElementById("total").innerHTML = total;
}
myFunction();
table {
width: 100%;
}
table,
tr,
th,
td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 5px;
}
th,
td {
padding: 5px;
}
td:last-child {
display: flex;
justify-content: space-between;
border: none;
}
td:last-child span:first-child {
flex-grow: 1;
margin-right: 10px;
outline: none;
text-align: right;
}
#total {
display: flex;
justify-content: flex-end;
}
<table>
<thead>
<tr>
<th>Person</th>
<th>Weight</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jack</td>
<td id="jack" oninput="myFunction()">
<span contentEditable="true">4</span>
<span>Kg</span>
</td>
</tr>
<tr>
<td>John</td>
<td id="john" oninput="myFunction()">
<span contentEditable="true">2</span>
<span>Kg</span>
</td>
</tr>
<tr>
<td>Joe</td>
<td id="joe" oninput="myFunction()">
<span contentEditable="true">3</span>
<span>Kg</span>
</td>
</tr>
<tr>
<td>Total</td>
<td id="total"></td>
</tr>
</tbody>
</table>
To avoid the result being "NAN", an if is added and we check the one of the seals is empty '' and replace it with a 0.
In the edit cell two divs are added one to edit the value and the other to add the text "kg".
<style>
table {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 5px;
width: 100%;
}
th, td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 5px;
padding: 5px;
}
.input_{
width: 90%;
float: left;
}
.peso{
width: 10%;
float: right;
}
</style>
<table>
<tr>
<th>Person</th>
<th>Weight</th>
</tr>
<tr>
<td>Jack</td>
<td>
<div class="input_" id="jack" oninput="myFunction()">1</div>
<div class="peso">kg</div>
</td>
</tr>
<tr>
<td>John</td>
<td>
<div class="input_" id="john" oninput="myFunction()">2</div>
<div class="peso">kg</div>
</td>
</tr>
<tr>
<td>Joe</td>
<td>
<div class="input_" id="joe" oninput="myFunction()">3</div>
<div class="peso">kg</div>
</td>
</tr>
<tr>
<td>Total</td>
<td id="total"></td>
</tr>
</table>
<script type="text/javascript">
document.getElementById("jack").contentEditable = true;
document.getElementById("john").contentEditable = true;
document.getElementById("joe").contentEditable = true;
function myFunction() {
var jack2 = document.getElementById("jack").innerText;
var john2 = document.getElementById("john").innerText;
var joe2 = document.getElementById("joe").innerText;
if(jack2==""){
jack2=0;
}
if(john2==""){
john2=0;
}
if(joe2==""){
joe2=0;
}
var total2 = parseInt(jack2) + parseInt(john2) + parseInt (joe2);
document.getElementById("total").innerHTML = total2+" kg";
}
myFunction();
</script>
I am trying to make a "My Favorite Movies" list page where users can add and rate movies. This program should include:
1) a form where you can add to the list and rate it
2) a table of all the things you've added
3) delete button for each row of the table that lets you remove elements from the list (what i'm having trouble on)
Instead of deleting only one row, it deletes every appended movie/rating in the table. Also if you click anywhere else, it deletes everything as well.
4) bonus: sort feature, so i can sort entries in the table by the their title or their rating.
example here: rithm school example
$(function() {
$('#addMovieButton').click(function() {
var addToTitle = $('#title').val();
$('#tableTitle').append('<tr><td>' + addToTitle + '</td></tr>');
var addToRating = $("#rating").val();
$('#tableRating').append('<tr><td>' + addToRating + '</td></tr>');
$('#tableDelete').append('<tr><td><input type="button" value="Delete All"</tr></td>');
$('#tableRow').on('click', function() {
$('#tableTitle').last().children().remove();
$('#tableRating').last().children().remove();
$('#tableDelete').last().children().remove();
});
});
});
h1 {
text-align: center;
}
table {
width: 100%;
border-radius: 10px;
}
table,
td {
border: 1px solid black;
padding: 15px;
}
th {
height: 50px;
text-align: center;
}
td {
text-align: center;
}
body {
font-family: helvetica;
}
form {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label><b>Title</b></label>
<input id="title" type="text" value="Movie Title">
<label><b>Rating</b></label>
<input id="rating" type="text" value="Rate The Movie from 0 to 10">
<button type='button' id="addMovieButton">Add Movie</button>
</form>
<table>
<tr id="tableRow">
<th id="tableTitle">Title</th>
<th id="tableRating">Rating</th>
<th id="tableDelete">Delete</th>
</tr>
</table>
<table> Structure
The structure of the appended "row" are not valid HTML. A <table> will have at least one <tbody>. If the user doesn't add it the browser will. Although most methods, function, and properties will treat the <table> as the direct parent of <tr>, there are some advantages to targeting <tbody> instead. If there's a <thead> then targeting the <tbody> can free you from extra steps trying to avoid the <th>.
Keep these rules in mind when structuring a <table>
<tbody> can only have <tr> as children (direct descendants)
<tr> can only have <td> and <th> as children
<td> and <th> can have anything as descendants.
Make sure rows are structured like so:
<tr><td</td>...<td></td></tr>
Add row to <table> or <tbody>
Demo
The following demo has detailed comments within the HTML, and CSS, as well as step by step details commented in the JavaScript
$(function() {
/*
Bind the <form> to the 'submit', 'click', and 'change' events.
Pass the Event Object thru
*/
$('form').on('submit click change', function(event) {
// Reference the type of event
let eType = event.type;
// if the 'submit' event was triggered...
if (eType === 'submit') {
// Stop the <form> from sending data to a server and resetting
event.preventDefault();
// Get the values of the <input>
let name = $('.title').val();
let rate = $('.rating').val();
// Declare a htmlString using a Template Literal
const row = `
<tr><td>${name}</td>
<td>${rate}</td>
<td><input class='sel' type='checkbox'>
</td></tr>`;
// Render the htmlString as the last child of the <tbody>
$('.data').append(row);
// Reset <form>
$(this).trigger('reset');
// ...otherwise if the 'click' event triggered...
} else if (eType === 'click') {
// ...and the clicked tag has class 'del'...
if ($(event.target).hasClass('del')) {
/*
Collect all checked <input class='sel'>
then on .each() one...
*/
$('.sel:checked').each(function(i) {
/*
Get the ancestor <tr> of the current .sel
and remove it
*/
$(this).closest('tr').remove();
});
// Reset the <form>
$('form').trigger('reset');
}
// ...otherwise if the 'change' event was triggered...
} else if (eType === 'change') {
// ...and the changed tag id is 'all'...
if (event.target.id === 'all') {
// Check if #all is checked or not
let allChk = $('#all').is(':checked');
// Loop thru each() <input class='sel'>...
$('.sel').each(function(i) {
/*
and check current .sel if #all is checked
or uncheck current .sel if #all is NOT checked
*/
$(this).prop('checked', allChk);
});
}
}
// Stop any events from bubbling any further up the event chain
event.stopPropagation();
});
});
:root {
font: 400 3vw/1.2 Arial;
}
form {
text-align: center;
}
table {
width: 100%;
border-radius: 10px;
table-layout: fixed;
margin: 12px auto
}
table,
td {
border: 1px solid black;
padding: 15px;
}
th {
height: 30px;
width: 20%;
}
th:first-of-type {
width: 60%;
}
td {
text-align: center;
}
button,
input,
label {
display: inline-block;
font-size: initial;
}
.all {
font-weight: 400;
padding: 3px 6px;
border: 1.5px inset rgba(0, 28, 255, 0.3);
margin-top: 3px;
}
.all::after {
content: 'Selected'
}
/*
When input#all is :checked the label.all that follows
#all will change
the content of its pseudo-element from 'Selected' to 'All'
*/
#all:checked+.all::after {
content: 'All'
}
button:hover {
cursor: pointer;
outline: 3px outset rgba(0, 28, 255, 0.4);
color: rgba(0, 28, 255, 0.6);
}
.all:hover {
cursor: pointer;
color: rgba(0, 28, 255, 0.8);
background: rgba(0, 28, 255, 0.2);
}
.rating {
text-align: right;
width: 4ch;
}
.title {
padding-left: 5px;
width: 27ch;
}
/*
The checkbox #all is not visible to user but is accessible through the label.all
which it is synced with (see comments in HTML
*/
#all {
display: none
}
<form>
<label>Title</label>
<!--
The [required] attribute enables built-in form validation
If the submit event is triggered
and either <input> is blank, the submit event is interrupted and
a tooltip will notify
user that the <input> cannot be empty
-->
<input class="title" type="text" placeholder="Pulp Fiction" required>
<label>Rating</label>
<!-- See previous comment -->
<input class="rating" type="number" min='0' max='10' placeholder="10" required>
<!--
<button type='submit'> or <input type='submit'>
or <button> within a <form> will trigger a submit event by default
-->
<button>Add Movie</button>
<table>
<thead>
<tr>
<th>Title</th>
<th>Rating</th>
<th>
<button class='del' type='button'>Remove</button>
<!--
A <label> and a form control (ie <input>, <textarea>, <select>, etc) can be synced by
matching the [for] attribute value to the form controls #id:
1. <label for='XXX'>
2. <input id='XXX'>
When synced, clicking one will remotely click the other
-->
<input id='all' type='checkbox'>
<label class='all' for='all'></label></th>
</tr>
</thead>
<!--
See post on <table> structure
-->
<tbody class='data'></tbody>
</table>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
you've put all titles in a parent, and all rating in another parent ,and all delete buttons in another one . you should place the information about each row in a parent and then you can delete by row easily.
(also you can add td,tbody it's just sample to showing the way)
$('#addMovieButton').click(function () {
var addToTitle = $('#title').val();
var addToRating = $("#rating").val();
$('#table').append('<tr><th>' + addToTitle + '</th><th>' + addToRating + '</th><th><input type="button" value="Delete All" class="tableDelete"></th></tr>');
$('.tableDelete').click(function () {
$(this).parents('tr').remove();
});
});
h1 {
text-align: center;
}
table {
width: 100%;
border-radius: 10px;
}
table,
td {
border: 1px solid black;
padding: 15px;
}
th {
height: 50px;
text-align: center;
}
td {
text-align: center;
}
body {
font-family: helvetica;
}
form {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label><b>Title</b></label>
<input id="title" type="text" value="Movie Title">
<label><b>Rating</b></label>
<input id="rating" type="text" value="Rate The Movie from 0 to 10">
<button type='button' id="addMovieButton">Add Movie</button>
</form>
<table id="table">
</table>
I am trying to make some kind of calendar where I can enter some tasks I already have the design template but I want to be able to add a new table (day) when I press a button.
In the image above you can see what I want to do.
This is the template I am using:
HTML
<tr>
<th>
<div class="dls">
<div class="select">
<select name="dls" id="dls">
<option value="1" selected="selected">Monday</option> <option value="2">Tuesday</option> <option value="3">Wednesday</option> <option value="4">Thursday</option> <option value="5">Friday</option> <option value="6">Saturday</option> <option value="7">Sunday</option>
</select>
</div>
</div>
</th>
</tr>
<tr>
<td>
<input type="text" name="publisher" form="pubName">
<input type="text" name="publisher" form="pubName">
<input type="text" name="publisher" form="pubName">
<input type="text" name="publisher" form="pubName">
</td>
</tr>
CSS
body { font-size: 13px; }
.dls { font-size: 13px; text-align: center; background: transparent; border: none; border-radius: 6px; overflow: hidden; position: relative; }
.dls .select{ height: 22px; width: 125px; background-position: center; text-align: center; }
.dls .select select{ background: transparent; line-height: 1; border: 0; padding: 0; border-radius: 0; width: 125px; height: 22px; position: relative; z-index: 10; font-size: 13px; color: #ffffff; }
table th { text-align: center; background-color: #006fc4; border: 1px solid #006fc4; color: #fff; width: 128px; height: 22px; }
table td { text-align: center; border: 1px solid #006fc4; padding: 2px 2px; width: 128px; height: 22px; }
ul { list-style-type: none; } input { text-align: center; width: 125px; height: 22px; font-size: 13px; }
As someone commented on your post, try and go through some tutorials about DOM Manipulation, but since he told you were to learn it, I'll give you the code to do this, and you can learn the rest later.
The easiest method to do what you want is just to insert a HTML tag in the code.
The first thing you should go ahead and do is make a variable with the div you need to insert/copy
var div = "<option value='1' selected='selected'>Monday</option>"
Now you have to insert the div somewhere.
document.getElementById("dls").innerHTML += div;
The code above inserts the HTML code you placed in the variable "div" into the element with the id of "dls".
Now obviously you don't just want to insert a bunch of divs with the text "Monday" and value="1"
So were going to make this more customizable...
First make we'll be making a function:
function insertNew(value, day) {
}
Now you have a function named insertNew() with two arguments, named value and day, so you can change it to insertNew(2, "Tuesday") but right now it does nothing no matter what, so we'll add a bit of code to the function.
First we'll be making a let variable in the function, so delete the original "div" variable, the difference between "var" and "let" is let only exists in that function and will be deleted after the function is done, it has a few more attributes but that's all you gotta worry about right now, but to be able to make the function easier to use we'll be making it more automatic.
function insertNew(value, day) {
let div = "<option value='" + value + "' selected='selected'>" + day + "</option>";
return div; // Return only spits the value out to the console, much like console.log(), but return stops the function from doing anymore code.
}
Now if you were to do insertNew(3, "Wednesday"), you'd get
<option value='3' selected='selected'>Wednesday</option>
So now you can then make it insert the code as well.
function insertNew(value, day) {
let div = "<option value='" + value + "' selected='selected'>" + day + "</option>";
document.getElementById("dls").innerHTML += div;
}
And it would insert with the right content, but to make the number automatically be filled out, you will have to create a variable outside the function, then every time the function has run increase the value of that function, and when you run the function instead of typing a number into the "value" argument of the function, simply type the name of the variable that counts up.
var number = 1;
function insertNew(value, day) {
number++; // ++ just simply adds one to the integer much like number = number + 1, they do the same.
let div = "<option value='" + value + "' selected='selected'>" + day + "</option>";
document.getElementById("dls").innerHTML += div;
}
Now when you wanna run the function just run insertNew(number, "Tuesday") and every time you run it, the number will be increased by one, and if you really wanted to automate it, you could also add all the names of the days to an array and then cycle through it, and therefore only have to execute the function and not worry about changing anything...
Hope this helps!
EDIT: I noticed the script was inserting the wrong divs compared to what you wanted, but the code is adaptable just by changing the HTML in the variables, you can easily fix it!
I have for example 3 fields that user can input a number a,b,c
So field C will check if number entered in field C is < a and > b.
In the form i have a button that create an additional line with
another a,b,c; so i don't know how to control same operation like before...
FIDDLE
$(".c").change(function() {
if ($('.c').val() > $('.a').val() || $('.c').val() < $('.b').val()) {
$('.c').css("backgroundColor", "#ff0000");
} else {
$('.c').css("backgroundColor", "#00FF00");
}
});
$('.add').click(function() {
var tr = '<tr>' + '<td>Cota1</td>' +
'<td><input type="text" name="tol_cota1[]" class="form-control a"></td>' +
'<td><input type="text" name="tolb_cota1[]" class="form-control b"></td>' +
'<td><input type="text" name="medido_cota1[]" class="form-control c"></td>' +
'<td><input type="button" class="btn btn-danger remove" value="Remove Line"></td>' + '</tr>';
$('.details').append(tr);
});
// delete row
$('.details').delegate('.remove', 'click', function() {
var con = confirm("Are you sure you want to remove the line?");
if (con) {
$(this).parent().parent().remove();
}
});
The change event doesn't bubble, which means you will need an event listener for every input in your form.
jQuery will take care of that automatically when using using the .on() method with a selector (its second parameter), which is equivalent to the old deprecated .delegate() method. From its description in the official docs, it will:
Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
So, if you do something like this:
$('.details').on('change', 'input', (event) => { ... });
This will listen for change events on any <input> element inside all elements matching the .details selector, regardless if they already existed when the method was called or if they were created afterwards as it is your case.
Now, once a change event occurs, you should use the .parent(), .eq and .find() methods to select the row in which the <input> that triggered the event is located, from there you get all 3 inputs based on their position or selector, their value, and do your logic to update that specific row.
Anyway, if instead of listening for change events you use input, which does bubble, you can benefit from event delegation. This means that a single event listener will be created for the whole <tbody> in this case, instead of one per <input>. Using event.target you will be able to distinguish which one triggered the event, which you need to use anyway to get the other inputs in the same row.
All together, it will look something like this:
// Better to keep the reference instead of getting it each time:
const details = $('#details');
details.on('input', 'input', (event) => {
const children = $(event.target).parents().eq(1).children();
const avgInput = children.eq(3).find('input');
const max = parseInt(children.eq(1).find('input').val());
const min = parseInt(children.eq(2).find('input').val());
const avg = parseInt(avgInput.val());
if (isNaN(max) ||isNaN(min)|| isNaN(avg)) {
// Don't do anything if any of them is blank.
return;
}
avgInput.css('backgroundColor', avg > max || avg < min ? '#ff0000' : '#00FF00');
});
details.on('click', '.remove', (event) => {
if (confirm('Are you sure you want to remove the line?')) {
$(event.target).parents().eq(1).remove();
}
});
$('#add').click(() => {
details.append(`
<tr>
<td>Cota1</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><button class="remove">DELETE</button></td>
</tr>
`);
});
body {
font-family: sans-serif;
font-size: .75rem;
}
table {
border-collapse: collapse;
table-layout: fixed;
position: relative;
}
table th,
table td {
width: 20%;
padding: 0;
border-bottom: 1px solid #EEE;
height: 1.75rem;
}
input {
width: 100%;
box-sizing: border-box;
padding: .5rem;
border: none;
outline: none;
text-align: center;
}
input:hover {
background: #FAFAFA;
}
input:focus {
background: #FFA;
}
.remove {
width: 100%;
box-sizing: border-box;
padding: .5rem;
border: none;
outline: none;
background: #FFF;
cursor: pointer;
}
.remove:hover {
background: #F44;
}
#add {
width: 100%;
border: none;
background: #FFF;
padding: .5rem;
border-radius: 2px;
color: #000;
text-transform: uppercase;
font-size: .75rem;
margin: 1rem 0 0;
box-shadow: 0 0 1rem rgba(0, 0, 0, .25);
transition: box-shadow ease-in .125s;
}
#add:hover {
box-shadow: 0 0 .5rem rgba(0, 0, 0, .25);
}
<table>
<thead>
<tr>
<th> </th>
<th>TOL +</th>
<th>TOL -</th>
<th>AVG</th>
<th></th>
</tr>
</thead>
<tbody id="details">
<tr>
<td>Cota1</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td> </td>
</tr>
</tbody>
</table>
<button id="add">ADD</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
the best way would be using the closest function
$(".c").change(function(){
if($(this).val() > $(this).closest('.a').val() || $(this).closest('.c').val() < $('.b').val())
{
$(this).closest('.c').css( "backgroundColor", "#ff0000" );
}else{
$(this).closest('.c').css( "backgroundColor", "#00FF00" );
}
});
I need to output multiple value from my function and access to outside variable, put into input hidden and POST variable to enable access data from php.
The data came from user input value from multiple row table which is the multiple row count and other value gets from database.
Javascript;
function validateForm() {
$('textarea.pc_1').each(function(event){
var thought= $(this).val();
$("input[name='status']").val(thought);
alert(status.value);
})
}
Javascript function above can alert multiple value but when value post into input hidden, only single value POST to pc1_process.php. All I need is output multiple value from this function and pass into input hidden. Access this value from POST on pc1_process.php.
pc1.php
<script type="text/javascript">
function validateForm() {
$('textarea.pc_1').each(function(event){
var thought= $(this).val();
$("input[name='status']").val(thought);
alert(status.value);
})
}
</script>
...
...
<form name="myForm" id="contact" method="post" action="../lpc/pc1_process.php" onsubmit="return validateForm()">
<table id="tftable" class="MyTable" style="font-size:12px; color:#333333; width:100%; border-width: 1px; border-color: #729ea5; border-collapse: collapse;" border="1" >
<thead>
<tr style="background-color:#acc8cc;">
<td style="font-size:12px; border-width: 1px; padding: 8px; border-style: solid; border-color: #729ea5;">Issues</td>
<td style="font-size:12px; border-width: 1px; padding: 8px; border-style: solid; border-color: #729ea5;">Notes <br></td>
<td style="font-size:12px; border-width: 1px; padding: 8px; border-style: solid; border-color: #729ea5;">Status <br></td>
</tr>
</thead>
<?php
if ($info6['datetime_submit'] != null){
$alert_null = "";
$check11 = mysql_query("select *
from (
select * from page1_table union all
select * from page2_table
) t
where t.submit = 'No' AND t.userid = '".$_SESSION['userid']."'") or die(mysql_error());
while($row = mysql_fetch_array($check11)) {
?>
<tr style="background-color:#d4e3e5;">
<td style="font-size:12px; border-width: 1px; padding: 8px; border-style: solid; border-color: #729ea5;"><?php echo $row["issues"];?></td>
<td style="font-size:12px; border-width: 1px; padding: 8px; border-style: solid; border-color: #729ea5;"><?php echo $row["notes"];?></td>
<td style="font-size:12px; border-width: 1px; padding: 8px; border-style: solid; border-color: #729ea5;">
<textarea class="pc_1" style="border: none;border-color: Transparent;overflow: auto;width: 100%;height: 100%;background-color:#d4e3e5;resize: none; "></textarea>
</td>
</tr>
<?php }
}?>
</table>
<br><br>
<input type="hidden" id="status" name="status"/>
<input style="float: right;" type="image" <?php echo $disabled?> src=<?php echo $button_off?> onMouseOver="this.src='../images/submit_button_on.png'" onMouseOut="this.src='../images/submit_button_off.png'">
</form>
pc1_process.php
<?php
$status = isset($_POST['status'])?filter_input(INPUT_POST, 'status', FILTER_SANITIZE_STRING):"";
echo($status);
?>
you can pass it like this:
function validateForm() {
var thought = $('textarea.pc_1').map(function(){
return this.value;
}).get();
$("input[name='status']").val(thought); // <--this holds ',' separated values
}
so in the above code the var thought holds an array of values like ['val1', 'val2', ...n] so now setting those values to the $("input[name='status']").
.map() is having some issues in ie 6, 7, 8 versions so you can do like below:
function validateForm() {
var thought = [];
$('textarea.pc_1').each(function(){
thought.push(this.value);
});
$("input[name='status']").val(thought); // <--this holds ',' separated values
}
Either you have to create multiple hidden variable with unique name or name attribute of input field should be an array(name='status[]') or append the value of textarea in same hidden variable by having some unique identifier so that you can explode them to have value of each.
If you set input name as array then you will have all values in array in php script like $_POST['status']
In above JS function you are assigning value to hidden variable so I think you are getting only last value in PHP script.
Why are you copying your textarea content into a hidden field?
If you add a name attribute to your textareas you can access those names in the PHP. Additionally, if you give each textarea the same name, but with [] at the end of the name, you can access the textarea values as an array:
while($row = mysql_fetch_array($check11)) {
?>
<tr style="background-color:#d4e3e5;">
<td style="font-size:12px; border-width: 1px; padding: 8px; border-style: solid; border-color: #729ea5;"><?php echo $row["issues"];?></td>
<td style="font-size:12px; border-width: 1px; padding: 8px; border-style: solid; border-color: #729ea5;"><?php echo $row["notes"];?></td>
<td style="font-size:12px; border-width: 1px; padding: 8px; border-style: solid; border-color: #729ea5;">
<textarea name="status[]" class="pc_1" style="border: none;border-color: Transparent;overflow: auto;width: 100%;height: 100%;background-color:#d4e3e5;resize: none; "></textarea>
</td>
</tr>
<?php }
pc1_process.php
<?php
$all_statuses = '';
if (isset($_POST['status'])) {
foreach($_POST['status'] as $status) {
// Add filtering here
$all_statuses .= $status;
}
}
echo($all_statuses);
?>