Why appended input field submit not working? - javascript

When user enter the key press I used Jquery to submit form and after I append another <input> field for another input. But the problem is appended input field submit not working... Instead it expecting the old one.
Code
// html
<div class="ten columns">
<input id="txt_name" class="u-full-width" name="a" type="text" autofocus>
</div>
// javascript
$('#txt_name').keypress(function (e) {
if (e.which == 13) {
$.getJSON('/_main_submit', {
a: $('input[name="a"]').val(),
}, function(data){
$('.after_sub').append(
'<div class="ten columns">'+
'<input id="txt_name" class="u-full-width" name="a" type="text" autofocus>'+
'</div>'
)
$('div input').focus();
})
return false;
}
});

You can only have one element with a certain id in the DOM. Use classes instead of id's for your input fields. Your new input also has the same name, that should be changed, too, if you expect the form to have more than one input field.

Related

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.

JQuery validation on blur

I have a form that I want to validate using JQuery.
When the user leaves the form field without entering anything the class of that input changes to show an error by becoming red.
I have created a jsfiddle file
http://jsfiddle.net/mTCvk/
The problem I am having is that the it will only work on the first text input and the other text inputs will adjust according to the state of the first input.
The JQuery
$(document).ready(function(){
$('.text-input').focusout(function () {
if ($(":text").val().length == 0) {
$(this).removeClass("text-input").addClass("text-input-error");
} else {
$(this).removeClass("text-input-error").addClass("text-input");
}
});
});
Here is the HTML for the form
<form method="post" action="">
<div class="text-input">
<img src="images/name.png">
<input type="text" name="name" placeholder="*Name:">
</div>
<div class="text-input">
<img src="images/mail.png">
<input type="text" name="email" placeholder="*Email:">
</div>
<div class="text-input">
<img src="images/pencil.png">
<input type="text" name="subject" placeholder="*Subject:">
</div>
<div class="text-input">
<img src="images/phone.png">
<input type="text" name="phone" placeholder="Phone Number:">
</div>
<textarea name="message" placeholder="*Message:"></textarea>
<input type="submit" value="Send" class="submit">
It's a DOM issue. It needs to check the :text child for that specific element
$(document).ready(function(){
$('.text-input').focusout(function () {
if ($(this).find(":text").val().length == 0) {
$(this).removeClass("text-input").addClass("text-input-error");
} else {
$(this).removeClass("text-input-error").addClass("text-input");
}
});
});
Updated Fiddle http://jsfiddle.net/mTCvk/2/
It's easy, you have selected the first input type text found : $(":text").val().. You must select the input type type on the .text-input blured :
$(":text", $(this)).val()... // First :text, on $(this) parent
http://jsfiddle.net/mTCvk/1/
PS : for your class management, don't delete .text-input juste add and remove an other class .text-input-error when you have an error
You can use this:
$(":text").focusout(function () {
if ($(this).val().length == 0) {
$(this).parent().removeClass("text-input").addClass("text-input-error");
} else {
$(this).parent().removeClass("text-input-error").addClass("text-input");
}
});
Use following code....
$('.text-input, .text-input-error').focusout(function () {
if ($(this).find(':text').val().length == 0) {
$(this).removeClass("text-input").addClass("text-input-error");
} else {
$(this).removeClass("text-input-error").addClass("text-input");
}
});
I changed your code to use the .on method, and gave it the event blur. Then we create a variable for the closest text-input class (which would be its parent text-input div). Rather than checking the .length, we just check to see if it is an empty string. You would also need to wrap your textarea in the save text-input div for this to work properly.
http://jsfiddle.net/43e2Q/
$('input, textarea').on('blur', function () {
var $closestParent = $(this).parent();
if ($(this).val() == '') {
$closestParent.removeClass("text-input").addClass("text-input-error");
console.log('error');
} else {
$closestParent.removeClass("text-input-error").addClass("text-input");
console.log('valid');
}
});

Jquery - Show/Hide a hidden input form field

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();
});

Input field hidden dynamically can not be shown later

I have a form with a text input and a radio button pair used to select yes/no. For purposes of keeping this simple, the radio button click event checks the value and if yes, it shows the input text field. If no, it hides the input field. I also check the initial state on document ready and show/hide the input text field.
I find that clicking No results in the input hiding using a jQuery .hide() method. But when I select Yes the resulting .show() method call does not show the input. If I set the radio to Yes and then refresh the page then the input shows up just fine.
Firebug show no input tag. It's like clicking No radio deleted the input from the DOM.
Here's the JS code sample:
$(document).ready(function() {
if ($('#cost_sharing_yes').attr('checked') == 'checked') {
$('input#Institutional_CS_TP').show();
} else {
$('input#Institutional_CS_TP').hide();
}
$('#cost_sharing_yes').click(function() {
$('input[id="Institutional_CS_TP"]').show();
});
$('#cost_sharing_no').click(function() {
$('input#Institutional_CS_TP').fadeOut("fast");
});
}
You are missing ) for closing ready function:
$(document).ready(function() {
} // <--
For getting the checked property of the inputs perperly you should use prop method instead of attr.
$(document).ready(function() {
var isChecked = $('#cost_sharing_yes').prop('checked');
$('#Institutional_CS_TP').toggle(isChecked);
// ..
})
I figured out my problem. It was a self-inflicted coding problem.
To keep the example simple I had removed another function call in the mix that I didn't think had any bearing on the problem. I was wrong. In that function I had
$('td#Institutional_CS_TP).text('$0');
$('input[name="Institutional_CS_TP"]').val('0.00');
This resulted in only the td value showing, not the input inside that same td.
Both my td and the input tags inside the td had the same ID values...not a good idea.
html code
<div id="myRadioGroup">
Value Based<input type="radio" name="cars" value="2" />
Percent Based<input type="radio" name="cars" value="3" />
<br>
<div id="Cars2" class="desc" style="display: none;">
<br>
<label for="txtPassportNumber">Commission Value</label>
<input type="text" id="txtPassportNumber" class="form-control" name="commision_value" />
</div>
<div id="Cars3" class="desc" style="display: none;">
<br>
<label for="txtPassportNumber">Commission Percent</label>
<input type="text" id="txtPassportNumber" class="form-control" name="commision_percent" />
</div>
</div>
Jquery code
function myFunction() {
var x = document.getElementById("myInput");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
function myFunction1() {
var y = document.getElementById("myInput1");
if (y.type === "password") {
y.type = "text";
} else {
y.type = "password";
}
}

How can I show input fields only when previous input has a valid value?

I have a form that requires between 3 and 10 text input items. When the form first loads it will show 3 inputs (minimum).
I'd like to efficiently show input rows as the previous row has a valid value (let's assume greater than 3 characters for example). So if you fill out the first 3, you will automatically see a 4th optional input row.
Can you help me loop through this quick list efficiently in jQuery?
HTML:
<input type="text" class="item_1" name="item_1">
<input type="text" class="item_2" name="item_2">
<input type="text" class="item_3" name="item_3">
<input type="text" class="item_4" name="item_4">
<input type="text" class="item_5" name="item_5">
<input type="text" class="item_6" name="item_6">
<input type="text" class="item_7" name="item_7">
<input type="text" class="item_8" name="item_8">
<input type="text" class="item_9" name="item_9">
<input type="text" class="item_10" name="item_10">
CSS:
.item_4,.item_5,.item_6,.item_7,.item_8,.item_9,.item_10 { display:none }
This is pretty simple - you shouldn't even need a loop if you let jQuery's chaining do the work. I'd do something like:
$("#myform input").change(function(){ //If an input in your form is changed,
if ($(this).val() == 42){ //replace with your validation logic :)
$(this).next('input').show(); //This shows the next sibling element to the triggering element
} else { //but if it fails validation...
$(this).nextAll('input').hide().val(""); //hide them and delete the contents to stop the form from uploading invalidated data!
}
});
This does what you asked, and for bonus points it hides and empties later boxes if their predecessors are later changed to be invalid.

Categories

Resources