This question already has answers here:
Show/hide 'div' using JavaScript
(15 answers)
Closed 1 year ago.
I am getting the dynamic input id custom_field_42, and i need to get the form-group div to change display to block from none, how can i do that?
<div class="form-group row g-mb-5" style="display:none;">
<label for="custom_field_42" class="col-sm-2 col-form-label g-mb-10 text-right">insteructyor</label>
<div class="col-sm-10">
<input type="text" class="form-control u-form-control rounded-0 custom_field_input" id="custom_field_42" name="insteructyor" placeholder="insteructyor">
</div>
</div>
I have tried this, it doesn't work.
$('#custom_field_42').closest('.form-group').show()
Community edit...
Actually, this works:
$('#custom_field_42').closest('.form-group').show();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row g-mb-5" style="display:none;">
<label for="custom_field_42" class="col-sm-2 col-form-label g-mb-10 text-right">insteructyor</label>
<div class="col-sm-10">
<input type="text" class="form-control u-form-control rounded-0 custom_field_input" id="custom_field_42" name="insteructyor" placeholder="insteructyor">
</div>
</div>
You can use Element.closest to find the first parent element which matches a selector, which, in our case, is .row:
const input = custom_field_42;
input.closest('.row').style.display="block";
<div class="form-group row g-mb-5" style="display:none;">
<label for="custom_field_42" class="col-sm-2 col-form-label g-mb-10 text-right">insteructyor</label>
<div class="col-sm-10">
<input type="text" class="form-control u-form-control rounded-0 custom_field_input" id="custom_field_42" name="insteructyor" placeholder="insteructyor">
</div>
</div>
Related
This question already has answers here:
Disabling Chrome Autofill
(68 answers)
Closed 3 years ago.
<div class="customDiv">
<div class="row text-center">
<div class="col-sm-5 my-1">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<div class="input-group-text">From</div>
</div>
<input type="text" name="customFrom" class="form-control" id="customFrom" placeholder="08-21-2019">
</div>
</div>
<div class="col-sm-5 my-1">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<div class="input-group-text">To</div>
</div>
<input type="text" name="customTo" class="form-control" id="customTo" placeholder="08-21-2019">
</div>
</div>
<div class="col-sm-2 my-1">
<button id="apply" class="btn btn-success btn-sm ">Apply</button>
</div>
</div>
</div>
How do I prevent the Google suggestion ?
You can use the autocomplete="off" in the form or the input.
For example
<form method="post" action="/form" autocomplete="off">
[…]
</form>
Documentation: https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
However some browsers, and user extensions might not respect that. Another trick can be renaming your input to something that the browser might not recognize, that way it will stop the suggestion.
I'm relatively new to JS and HTML and was following this tutorial ( https://www.youtube.com/watch?v=iaeCSh7YJDM&t=422s ) in order to turn a select box and input box into a dynamic form field in order to add as many of them as needed with an add button. The add button works perfectly, though after implementing the same code as in the video, the remove button does not function and I can't quite figure out why. I've gone back and rewatched and cross checked the videos code and mine though can't seem to see what I'm missing. Any help would be greatly appreciated. Below is the section of code I have.
HTML
<div class="form-group row" id = "addF" >
<label class="col-sm-3 col-lg-3 col-md-3 form-control-label">
Label
</label>
<div class="col-sm-4 col-lg-4 col-md-4">
<select class="form-control" id="xxxx" name="yyyyy" required>
<option class="placeholder" selected disabled value="" style="display:none;">Select Fact</option>
</select>
</div>
<div class="col-sm-3 col-lg-3 col-md-3">
<input type="text" class="form-control" id=vvvv" name="zzzz" required>
</div>
<div class="col-sm-1 col-lg-1 col-md-1">
<input type="button" id="add_fact()" onClick="addFact()" value="+">
</div>
</div>
JS
<script type="text/javascript">
var i =1;
function addFact(){
i++;
var div = document.createElement('div');
div.innerHTML = '<label class="col-sm-3 col-lg-3 col-md-3 form-control-label">Label '+i+'</label><div class="col-sm-4 col-lg-4 col-md-4"> <select class="form-control" id="xxxx'+i+'" name="yyyy_'+i+'" required><option class="placeholder" selected disabled value="" style="display:none;">Select Fact</option></select></div><div class="col-sm-3 col-lg-3 col-md-3"> <input type="text" class="form-control" id="vvvv" name="zzzz_'+i+'" required></div><div class="col-sm-1 col-lg-1 col-md-1"><input type="button" id="add_fact()" onClick="addFact()" value="+"></div><div class="col-sm-1 col-lg-1 col-md-1"><input type="button" value="-" onClick="removeFact(this)"></div>';
document.getElementById('addF').appendChild(div);
function removeFact(div) {
document.getElementById('addF').removeChild(div.parentNode);
i--;
}
</script>
In the "removeFact" function you are not receiving the div element; as you are calling it with "this" as parameter, you receive the button element, so to fix it, you must call the function like this
onClick="removeFact(this.parentNode)"
or change your function this way
function removeFact(button) {
document.getElementById('addF').removeChild(button.parentNode.parentNode);
i--;
}
You have to go one level deeper.
Try this :
<script type="text/javascript">
var i =1;
function addFact(){
i++;
var div = document.createElement('div');
div.innerHTML = '<label class="col-sm-3 col-lg-3 col-md-3 form-control-label">Label '+i+'</label><div class="col-sm-4 col-lg-4 col-md-4"> <select class="form-control" id="xxxx'+i+'" name="yyyy_'+i+'" required><option class="placeholder" selected disabled value="" style="display:none;">Select Fact</option></select></div><div class="col-sm-3 col-lg-3 col-md-3"> <input type="text" class="form-control" id="vvvv" name="zzzz_'+i+'" required></div><div class="col-sm-1 col-lg-1 col-md-1"><input type="button" id="add_fact()" onClick="addFact()" value="+"></div><div class="col-sm-1 col-lg-1 col-md-1"><input type="button" value="-" onClick="removeFact(this)"></div>';
document.getElementById('addF').appendChild(div);
}
function removeFact(div) {
document.getElementById('addF').removeChild(div.parentNode.parentNode);
i--;
}
</script>
I am trying to send the parameters to control and I am struck in between and need help.
There are multiple types of question inside the ng-repeat i.e 'question' and I am iterating these. The problem is when there are two question with same question type. When I give input into one question the other question is also taking the same data. Kindly help me out with this.
Below is the form.
<div ng-repeat="question in qgroup[grp_id].question" name="outerDiv">
<div ng-if="question.question_type === 'short_text'" class="row form-group">
<label class="control-label label-pad-top col-sm-6" for="short-text">{{question.name}}:</label>
<div class="col-sm-12">
<input type="f-name" name="shortText" class="form-control" id="first-name" placeholder="First Name" ng-model="data.answer.shortText">
</div>
</div>
<div ng-if="question.question_type === 'date_format'" class="row form-group">
<label class="control-label label-pad-top col-sm-6" for="short-text">{{question.name}}:</label>
<div class="col-sm-12">
<input type="d-type" name="date" class="form-control" id="date-type" placeholder="YYYY/MM/DD" ng-model="data.answer.date">
</div>
</div>
</div>
The problem is that the model you are using for the input is shared between questions of the same type.
A natural solution to this would be to put the answer onto the question object. i.e.
<input type="f-name" name="shortText" class="form-control" id="first-name" placeholder="First Name" ng-model="question.answer">
instead of
<input type="f-name" name="shortText" class="form-control" id="first-name" placeholder="First Name" ng-model="data.answer.shortText">
I have asked a similar question, but have since made a lot of progress so I wanted to share it.
Basically, I have form elements which can be dragged and dropped - it makes use of clone. It allows me to create my own forms. The problem is, an output might be something like so
<form id="content">
<div data-type="text" class="form-group">
<label class="control-label col-sm-5" for="text_input">Text Input</label>
<div class="controls col-sm-7">
<input type="text" name="text_input" class="form-control" id="text_input">
</div>
</div>
<div data-type="text" class="form-group">
<label class="control-label col-sm-5" for="text_input">Text Input</label>
<div class="controls col-sm-7">
<input type="text" name="text_input" class="form-control" id="text_input">
</div>
</div>
<div data-type="textarea" class="form-group">
<label class="col-sm-5 control-label green" for="textareaInput">Text Area:</label>
<div class="controls col-sm-7">
<textarea cols="50" name="textareaInput" id="textareaInput" class="form-control" rows="5"></textarea>
</div>
</div>
<div data-type="textarea" class="form-group">
<label class="col-sm-5 control-label green" for="textareaInput">Text Area:</label>
<div class="controls col-sm-7">
<textarea cols="50" name="textareaInput" id="textareaInput" class="form-control" rows="5"></textarea>
</div>
</div>
<div data-type="date" class="form-group">
<label class="control-label col-sm-5" for="dateInput">Date Input:</label>
<div class="col-sm-3">
<input type="text" name="dateInput" class="form-control date_picker" id="dateInput">
</div>
</div>
<div data-type="date" class="form-group">
<label class="control-label col-sm-5" for="dateInput">Date Input:</label>
<div class="col-sm-3">
<input type="text" name="dateInput" class="form-control date_picker" id="dateInput">
</div>
</div>
<input type="submit" value="Save Template" id="templateSubmit" class="btn btn-primary">
</form>
The problem with this is that if I clone 2 form elements of the same type, they both have the same name and id like shown above. So I need to make sure that each cloned element has a unique name and id. At the moment, I have a partial solution.
I have created a fiddle here Fiddle If you click Save Template, you will see what happens. The id numbers seem very strange, for instance textareaInput222. Really, each element type should start at 0, and 1 be added to it for each additional element of the same type.
Would this be possible? The other thing I am struggling with is setting the elements labels for attribute to be the same as the name which is set for that element.
How can I achieve this?
Thanks
$("#content").find(".form-group").each(function() {
$("textarea").each(function(index, value) {
my friend, these two each is the reason. There are around 6 .form-group element, so that textarea#each ran 6 times. And regard to DRY, here I gave my version https://jsfiddle.net/yjaL2zgL/2/
I'd use underscore.js's unique id function personally, or your own implementation of it and suffix every id with a unique number on the page that increments like "dateInput-345". Even just using a counter variable that everything uses would be easy enough instead of basing it on indexes in loops.
http://underscorejs.org/#uniqueId
your own counter:
instead of using
(index + 1)
you can use something like
var uid = 0; //this needs to be where you declared your other vars
then when you need an id:
var new_id = $(value).attr("id") + '-' + uid++;
just make sure you arent copying an id that already has a number attached to it or you need to deal with that too.
I have a row divided into two parts(col-md-5 and col-md-7). First part contains a question and the second part has 6 input fields(5 text inputs and 1 selectbox).
So, i divided the second part into 6 fields(col-sm-2). Everything works fine. Now i want to add input-group-addon to two of the text field. But when, i'm trying to add input-group to the parent div of that input box, the size of input box increases and it pushes all the input boxes(next to it) to the next row.
Here's the code
<div class="row">
<div class="col-md-5">
<p class="text-info">How many PRI"s? How much are you paying per month?</p>
</div>
<div class="col-md-7">
<div class="form-group">
<div class=" col-sm-2">
<input type="text" value="" name="pri_qty" class="form-control input-sm" placeholder="QTY">
</div>
<!-- i want to add input-group to the next input field -->
<div class=" col-sm-2">
<input type="text" value="" name="pri_mrate" class="form-control input-sm" placeholder="$/M">
</div>
<div class=" col-sm-2">
<select name="pri_competitor_id" class="form-control input-sm"><option selected="selected" value="">Provider</option><option value="1">ALLSTREAM</option><option value="2">BELL</option><option value="3">BV</option><option value="4">CONVERGIA</option><option value="5">DISTRIBUTEL</option><option value="6">ONE CONNECT</option><option value="7">TELSYNERGIE</option><option value="8">TELUS</option><option value="9">VIDEOTRON</option><option value="10">SELECTCOM</option><option value="11">OTHER</option></select>
</div>
<div class=" col-sm-2">
<input type="text" value="" name="pri_avaya" class="form-control input-sm" placeholder="Avaya">
</div>
<div class=" col-sm-2">
<input type="text" value="" name="pri_our_rate" class="form-control input-sm" placeholder="$/M">
</div>
<div class=" col-sm-2">
<input type="text" value="" name="pri_install" class="form-control input-sm" placeholder="Setup">
</div>
</div>
</div>
</div>
`
From the bootstrap docs on input-groups (http://getbootstrap.com/components/#input-groups):
Don't mix with other components
Do not mix form groups or grid column classes directly with input
groups.
Instead, nest the input group inside of the form group or grid-related element.
So, rather than adding .input-group-addon to your .col-sm-2, wrap the input in another div.input-group-addon.