Good evening everybody!
I'd like to hide a profile field if the user meta is blank.
For example, in the image, I'd like to hide the billing_ateco row because billing_ateco field is empty.
I have no idea where to start, if you have the solution or suggest me one similar thread (I didn't find anything in the similar questions section when I posted this) It would be a great help, thanks in advance!
If by user meta you mean user input, one approach would be to find all input elements, check if their value is empty and then hide their parent tr element.
// Find all <input> elements:
document.querySelectorAll("input").forEach( input =>{
// Check to see if the value is empty:
if ( input.value.trim() === "" ){
// Find the closest <tr> parent of the input and
// hide it:
input.closest("tr").style.display = "none";
}
});
<table>
<tr>
<td>
<label for="a">Label A</label>
</td>
<td>
<input id="a" />
</td>
</tr>
<tr>
<td>
<label for="b">Label B</label>
</td>
<td>
<input id="b" />
</td>
</tr>
<tr>
<td>
<label for="c">Label C</label>
</td>
<td>
<input id="c" value="Value" />
</td>
</tr>
</table>
Related
Revised Question:
How can you display the text entered into an html text field in JavaScript?
https://jsfiddle.net/bjc7em1w/
<tr>
<td id="number1"> (1)</td>
<td> <input type="radio" name="radio1" id="standardA1"> </td>
<td> <input type="radio" name="radio1" id="standardI1"> </td>
<td id="standard1">Describe the reason for the development of
the plan and its annexes.</td>
<td> <input type="text" id="comments1"> </td>
</tr>
Since the discription of the problem was rather confusing to read, I will answer just the question:
var text = document.querySelector("#textbox").value;
alert("The textbox value is: " + text);
If you have any questions about this or want me to elaborate please say so.
If I understand correctly, you are looking to add feedback messages related to your form. You can add an empty span tag to the section where you want the message to display and call it on blur.
For example, add something like:
<tr>
<td id="number1"> (1)</td>
<td> <input type="radio" name="radio1" id="standardA1"> </td>
<td> <input type="radio" name="radio1" id="standardI1"> </td>
<td id="standard1">Describe the reason for the development of the
plan and its annexes.</td>
<td> <input type="text" id="comments1" onblur="message()">
<span class="message" id="message"></span>
</td>
</tr>
When the user leaves the section calling onblur, the message can be called like this:
function message() {
document.getElementById("message").innerHTML = "message written here";
}
You can add functionality to determine when and how the message is shown.
Using ng-repeat I'm displaying Item related textboxes and on click of SaveAll button I want to read all text box values based on ITEM ID and Save it to DB.
<tr>
<td>
<table ng-repeat="item in itemDtls">
<tr>
<td>
<label for="lblItemName">Item ID: </label> {{item.ITEM_ID}}
</td>
</tr>
<tr>
<td>
<label for="lblPriority">Item Priority </label>
<input type="text" id="inpPriority" ng-model="ValuesPriority" value="{{item.PRIORITY}}" />
</td>
</tr>
<tr>
<td>
<label for="lblComment">Comment</label>
<input type="text" id="inpComment" ng-model="ValuesComment" value="{{item.COMMENT}}" />
</td>
</tr>
<tr>
</table>
</td>
<tr>
<td>
<button type="submit" ng-click="SaveAll()">SaveAll</button>
</td>
</tr>
Do not use "value" tag instead use "ng-model" only.
Eg:
<td>
<label for="lblComment">Comment</label>
<input type="text" id="inpComment" ng-model="item.COMMENT" />
</td>
So whatever comments you change, it will update in that variable.
Later you can send "itemDtls" in backend to store in DB.
You must need a backend to store in DB.
I am trying to click a check box in a list of Table rows
the only way I can think to access this level is by the span tag with its corresponding name.
cy.get('tr > td > span').contains('newCypressTestCore').siblings('td > input').click();
Although this would only return the siblings of the span tag when I actually need to access the cousin of the span tag.
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<span> newCypressTestCore </span>
</td>
</tr>
Cypress uses jquery, so this answer is useful How do I get to cousin elements with JQuery.
The closest() selector scans up the tree, use it to get the row, then within that the input.
spec
describe('cousins', () => {
it('scans up the table', () => {
cy.visit('app/table.example.html')
cy.get('tr > td > span').contains('newCypressTestCore')
.closest('tr')
.find('input')
.should('have.class', 'target')
})
})
app/table.example.html (sandboxed - Cypress can optionally act as your web server)
<table>
<tr>
<td>
<input type="checkbox" class="not.the.input.you.are.looking.for" />
</td>
<td>
<span> something </span>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="target" />
</td>
<td>
<span> newCypressTestCore </span>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="not.the.input.you.are.looking.for" />
</td>
<td>
<span> another thing </span>
</td>
</tr>
</table>
Could you use with .parents() to identify the parent class of the table and then use find() to narrow down till the input checkbox field is identified. See the below piece of code and see if that work;
cy.get('input[type="checkbox]').parents('.lh-copy').find('tr').find('td').find('input').click();
or may be try with immediate parent class of td
cy.get('input[type="checkbox]').parents('.hover-bg-near-white').find('td').find('input').click();
I have search lot of about this but haven't found any solution. I want to validate multiple array named file inputs and dropdowns in JQuery validate.
<td> <input type="text" class="times" name="times[]" /> </td>
</tr>
<tr>
<td> <input type="text" class="times" name="times[]" /> </td>
</tr>
<tr>
<td> <input type="text" class="times" name="times[]" /> </td>
</tr>
I have added JQuery Validate Code like this:
$("#formname").validate(
{
rules:{
times:{required:true, digits:true}
}}
);
But its only validating first input and showing error message there only whether 2nd or 3rd input field entered or not.
I don't want to change this "times[]" name because functionality is depending on this. Only I want validation using JQuery validate.
Is there any trick available for this?
Any help would be appreciated.
Thanks
The plugin doesn't handle fields with the same name well. Here's how I solved it in my application.
I gave all the repetitive fields distinct names, and put the validation method names in the class.
<td> <input type="text" class="times required digits" name="times[0]" /> </td>
</tr>
<tr>
<td> <input type="text" class="times required digits" name="times[1]" /> </td>
</tr>
<tr>
<td> <input type="text" class="times required digits" name="times[2]" /> </td>
</tr>
You can remove the indexes before submitting with code like this:
$("#formname").validate({
...
submitHandler: function(form) {
$(form).find(":input[name*='[']").each(function() {
this.name = this.name.replace(/\[\d+\]/, '[]');
}
form.submit();
}
});
I have a table with 2 columns, I'm using PHP to generate dynamically rows to the table. Every table row have the following fields:
Input Type="checkbox"
Two Inputs type="text" inside a div
What I like to do is to hide the div containing the two inputs type text when the checkbox is checked, I tried to get the parent of the clicked checkbox using Jquery and then hide the corresponding div inside the currrent <tr> but it's not working.
This is the HTML code to see how is my table generated:
<table>
<tr>
<th>Hide?</th>
<th>Inputs</th>
</tr>
<tr>
<td>
<input type="checkbox" name="checkBoxes[]">
</td>
<td>
<div class="two-inputs">
<input type="text" name="inputs[]">
<input type="text" name="inputs[]">
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkBoxes[]">
</td>
<td>
<div class="two-inputs">
<input type="text" name="inputs[]">
<input type="text" name="inputs[]">
</div>
</td>
</tr>
Try This. jsfiddle
$("input:checkbox").click(function(){
if(this.checked){
$(this).parent().next().find("div").hide();
}
else{
$(this).parent().next().find("div").show();
}
});
$('input:checkbox').click(function() {
if (!$(this).is(':checked')) {
$(this).parent().next('.two-inputs').hide();
}
});