Jquery - Show/Hide a hidden input form field - javascript

I'm new to Javascript and trying to understand it better. I have a form which is generated by php, using data from POST. The form has some hidden form fields, which are supposed to be populated with values after validation.
The relevant html code:
<form action="" method="post" name="FormProcessor">
<b>Domain Name: </b>
<input type="text" name="MAIN_DOMAINNAME" value="" id="DomainField">
<input type="hidden" name="CONF_FILE" value="" id="ConfFile">
<div id="infomsg">
Javascript code:
$(document).ready (function()
{
$('#DomainField').blur(function() {
var DomField=$("#DomainField");
var DomText=DomField.val();
var fold="/var/lib/bind/db.";
alert(fold+DomText);
var ConfFile=$("#ConfFile");
ConfFile.val(fold+DomText);
ConfFile.show();
});
});
I'm trying to get the second <input> field to be 'unhidden' when the focus of the previous field is lost. The function gets executed, and the alert is shown.
On checking the source, I can see that it shows:
<input type="hidden" id="ConfFile" value="/var/lib/bind/db.g.com" name="CONF_FILE" style="display: inline;">
So the value is propogated, so I did address the object properly. Why isnt it becoming shown?

A hidden input field is supposed to remain hidden.
What I think you want to do is use a normal input field of the type text and hide it using css. Then you are able to show it using jQuery the way you are doing it now.
It should work if you replace your hidden field with:
<input type="text" name="CONF_FILE" value="" id="ConfFile" style="display:none">

using show() only sets the display property to something visible, but as the input has a type of hidden, it still won't show, you have to actually change the type for that:
$(document).ready (function() {
$('#DomainField').on('blur', function() {
var DomField = $("#DomainField");
var DomText = DomField.val();
var fold = "/var/lib/bind/db.";
var ConfFile = $("#ConfFile");
ConfFile.val(fold+DomText).prop('type','text');
});
});

As per your code input type is hidden and same is not shown even doing show forcefully as hidden have property to hide existence of control.So you need to change your input type.
You can replace your hidden
<input type="hidden" id="ConfFile" value="/var/lib/bind/db.g.com" name="CONF_FILE" style="display: inline;">
to
<input type="text" id="ConfFile" value="/var/lib/bind/db.g.com" name="CONF_FILE" style="display: none;">
or
<input type="label" id="ConfFile" value="/var/lib/bind/db.g.com" name="CONF_FILE" style="display: none;">

You should change attribute from hidden to text before showing:
ConfFile.attr('type', 'text');
ConfFile.show();

use code for hide
$(document).ready(function () {
$('#ConfFile').hide();$('#ConfFile').show();
});

Related

Event will not trigger

I have a form that has multiple inputs. One input is where user can input an ID. I need to verify the ID is unique. I want to call a JavaScript function for a onchange event. However, I can't get it to trigger. I have a console.log but it never hits when I make a change in the input so I am doing something wrong.
This is the function I am trying to call on the on change
function checkUniqueID() {
console.log("here");
var $counter = 0;
var tag = document.forms["userform"]["new_id"].value;
while ($counter < $totalItems) {
}
};
<div class="six wide field">
<label for="ID">ID</label>
<input type="text" id="new" name="new_id" placeholder="ID" onchange="checkUniqueID()">
</div>
I can't even get the console.log ("here") to trigger
The onchange HTML attribute triggers when the input loses focus.
So, if you correctly have your input#new_id inside a form like this:
<form name="userform">
<div class="six wide field">
<label for="ID">ID</label>
<input type="text" id="new" name="new" placeholder="ID">
</div>
</form>
Adding an eventListener in your script file would be enough.
document.userform.new_id.onchange=function(){
alert("ID changed to: "+this.value);
};
With jQuery would be as easy as:
$("#new").change(function(){
alert("ID changed to: "+$(this).value;
}
Here is a working fiddle:
https://jsfiddle.net/edbL3kgp/

How to control related text input element with a button?

I have a list of text-field + button that gets rendered dynamically. The user hits the button and I want to control the input field when a button is clicked.
I figure you could do something like:
<input id="1"><button onclick="doSomething(1)">Something</button>
<input id="2"><button onclick="doSomething(2)">Something</button>
<!--...-->
<input id="3"><button onclick="doSomething(3)">Something</button>
But wonder if there's a different and more sophisticated solution because the code I'm modifying passes an an anonymous function to onclick and I can't pass a unique ID like the method above.
This is very easy to achieve in vanilla Javascript (as most things). No jQuery overhead required here.
let buttons = [...document.getElementsByClassName('inputbutton')]
function doSomething(i) {
console.log(i);
}
for (const button of buttons) {
button.addEventListener('click', (e) => {
const i = e.target.previousSibling.id
doSomething(i);
})
}
<input id="1"><button class="inputbutton" type="button">Something</button>
<input id="2"><button class="inputbutton" type="button">Something</button>
<!--...-->
<input id="3"><button class="inputbutton" type="button">Something</button>
If you modify your dynamic HTML like the following and add this jQuery, you will be able to access the value of the previous input field.
var buttons = $(".inputs-and-buttons #button-after-input-field");
buttons.click(function() {
console.log($(this).prev("input").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inputs-and-buttons">
<input id="1" value="1"><button id="button-after-input-field">Something</button>
<input id="2" value="2"><button id="button-after-input-field">Something</button>
<!--...-->
<input id="3" value="3"><button id="button-after-input-field">Something</button>
</div>
You can generate dynamic Id for both input field and button with index or row number or you can add custom attribute for row number as below.
You can generate dynamic related control with specific Id for textbox and button as well. e.g. txtFirstName_1, txtLastName_1, btnAdd_1. here textbox and button distinguished by its id and number after Underscore "_" .
$(function(){
// Register click on button
//here you can pass specific class name for button if all are have same functionality
$("button").click(function(e){
console.log(this);
var btnId=$(this).attr("id");
//console.log(btnId);
// Way 1
//Split btnId with "_" e.g btn_1 will splited with ["btn","1"]
var rowIndex=btnId.split("_")[1];
console.log(btnId.split("_"),rowIndex);
$("#txt_"+rowIndex).val("Upate value by btn"+rowIndex); // Or fetch value
// Way 2
// You can directly use custom attribute data-row and do your work
var rowIndex1=$(this).attr("data-row");//$(e).prop("data-row");
console.log(rowIndex1);
//$("#txt_"+rowIndex1).val("Upate value"); // Or fetch value
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txt_1" data-row="1"><button id="btn_1" data-row="1">Something</button>
<input id="txt_2" data-row="2"><button id="btn_2" data-row="2">Something</button>
<input id="txt_3" data-row="3"> <button id="btn_3" data-row="3">Something</button>

OnInvalid html event triggering after Required modifier removed through JS

I have three input fields I am attempting to enforce validity on. Currently, I have them all set as required, but removing the modifier with Javascript on submit if one of them is filled out; essentially, one must fill out at least one, but not none of these fields.
Here is an example of the fields:
jQuery(function ($) {
var $inputs = $('input[name=Input1],input[name=Input2], input[name=Input3]');
$inputs.on('input', function () {
// Set the required property of the other input to false if this input is not empty.
$inputs.not(this).prop('required', $(this).val().length > 0 && $(this).val() != 0)
});
});
jQuery(function ($) {
$("#Input1, #Input2").oninvalid = (function() {
$(this).setCustomValidity("Please enter a valid Input1, Input2, or Input3")
});
});
var Input3default = document.getElementById('Input3')
if (Input3.value.length == 0) Input3.value = "0";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="input-group mb-3">
<form action="" method="get" autocomplete="off">
<div class="row" style="text-align:justify; width: 100%; display:inline">
<div class="">
<label for="text3">Input1:</label>
<input type="text" id="Input1" name="Input1" required oninvalid="this.setCustomValidity('Please enter a valid Input1, Input2, or Input3')" />
</div>
<div class="">
<label for="text4">Input2:</label>
<input type="text" id="Input2" name="Input2" required oninvalid="this.setCustomValidity('Please enter a valid Input1, Input2, or Input3')"/>
</div>
<div class="">
<label for="text5">Input3:</label>
<input type="text" id="Input3" name="Input3" required placeholder="0" pattern="[0-9]*" onsubmit="Input3default" oninvalid="this.setCustomValidity('Please enter a valid Input3')"/>
</div>
</div>
<p>
<input type="submit" value=" Submit " />
</p>
</form>
</div>
</div>
This seems to work fine if I leave it default; I have Input1 and Input2 empty by default, and Input3 has a value of "0" by default. If I enter Input1 or Input2, my submission goes through just fine. However, the problems begin if I alter Input3.
Problem 1: Any time I enter Inputs 1 and 2 but leave 3 blank, it triggers invalidity; my Input3default never seems to trigger, and it is passed blank and caught by the oninvalid tag.
Problem 2: Along with that, if I do not specify an Input2 along with my Input1 while Input3 is blank, it triggers invalidity on Input2. Using Chrome Debugger, I can see that the Required tag is removed, but my OnInvalid pop-up still comes up no matter what is remedied.
Essentially, I am trying to solve the second problem: When I remove the required html tag from my input, after invalidating another input with a Javascript-enforced default, my inputs refuse to validate on the front end.
I appreciate any advice and conjecture as to why this may be the case, and believe that the two problems are connected.
EDIT: Upon adding an = to my original oninvalid JQuery function, I removed a JS error. It appears that my Input3 default function triggers on pageload, but not on submit; I added an onsubmit function to input3, but am still receiving oninvalid events for input2.
I was able to fix this issue on my own, using the OnInput event.
The setCustomValidity function, when triggered, does not allow a submission while a CustomValidity is set. In order to fix this, I edited my inputs as so:
<input type="text" id="Input1" name="Input1" required oninvalid="this.setCustomValidity('Please enter a valid Input1, Input2, or Input3')" oninput="this.setCustomValidity('')"/>
I still have a few kinks to iron out, but this fixed my main problem in that the validity of an input was not being reset.
I'll leave this answer unaccepted at first to allow others to pitch in.

Trying to disable div section of form only if the values of 2 fields are 1 and checked

I am trying to disable a section of a form if it has been signed by a supervisor using 2 fields.
The problem is it works too good. It disables the section on a new form. For brevity here are the 2 fields, the hidden values of those fields and the jquery script.
This is the code of the fields when adding a new form or record.
These 2 forms are within the div with the id supersection.
Here is the html for the 2 fields
First the hidden values of the fields in the form then the html of the fields themselves.
<div id="supersection" style="border: none;">
<input type="hidden" name="supersignoff" value="0"/>
<input type="hidden" name="superdeclare" value="0"/>
<label class="padd2left" for="supersignoff">
<input type="checkbox" value="1" id="supersignoff" name="supersignoff" />
Complete and sign</label>
<label for="superdeclare">
<input type="checkbox" value="1" id="superdeclare" name="superdeclare" />
I have completed with the best info from all parties</label>
Below is the jquery script. This disables the whole section.
$(function(){
var signoff = $("#supersignoff").val();
var sdeclare = $("#superdeclare").val()
if(signoff=="1" && sdeclare=="1"){
$("#supersection *").prop("disabled",true);
}
})
Again the section is being disabled even when it is a new form.
Any ideas?
$(function(){
var signoff = $("#supersignoff").prop('checked');
var sdeclare = $("#superdeclare").prop('checked')
if(signoff && sdeclare){
$("#supersection *").prop("disabled",true);
}
});
.prop('checked') will give you the status of checkbox is checked or not, but not .val().
Ref: .prop() and .val()

How to make non editable text box to editable when i click on check box corresponding to it

There are one check box and a non editable text box corresponding to it. When I click on check box, corresponding non editable text box should become an editable text box. How can I achieve this?
Basically:
$('#some-checkbox').click(function() {
$('#some-textfield').prop('disabled', !$(this).is(':checked'));
});
Now, how you go about finding the corresponding text box depends on your markup. One way could be to give the text box a class that is the ID of the checkbox. Applying that to all checkboxes might look something like this:
$(':checkbox').click(function() {
var box = $(this);
$('.' + box.attr('id')).prop('disabled', !box.is(':checked'));
});
Otherwise, the text field may be located by its position on the DOM:
<div class="wrapper">
<input type="checkbox">
...
<div>
<input type="text" disabled="disabled" />
</div>
</div>
You might then do something like:
$(':checkbox').click(function() {
var box = $(this);
box.closest('.wrapper').find('input[type=text]').prop('disabled', !box.is(':checked'));
});
This code actually works fine, and ready to use.
This is the form stuff:
<form id="myGame" name="myGame" action="" method="post">
<input type="radio" name="checkme" id="checkme" onClick="openTheHouse();" >Open Sesame
<input name="open_id" id="openid" type=text disabled="disabled">
</from>
And the Script: its pretty cool actually, nothing complicated in this script.
<script type="text/javascript">
function openTheHouse()
{
if(document.myGame.checkme.checked == true)
{
document.myGame.openid.disabled = false ;
}
}
</script>
thats it, all done. Certainly i believe it works.

Categories

Resources