Show/hide text boxes depending on checkbox - javascript

I want to hide/show text boxes when user click on check boxes. I already searched in stack overflow, but I didn't get the solution..
Here is my code:
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Email" id="email" name="email" >
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Mobile Number" name="mobile_number" >
<span class="glyphicon glyphicon-phone form-control-feedback"></span>
</div>
I want to give one check box name display contact info or not. If user click on yes I want to show these two fields. If user click no I want to hide these two fields.
Can anyone help me?
Thanks in advance.

You can achieve this simple task by jQuery. Suppose you have checkbox with an id of contact-info you have to check that is checked with the help of :checked seudo class and display input type display none and display block.
if('#contact-info').is(":checked")){
$('#email,#mobile').css("display","block");
}else{
$('#email,#mobile').css("display","none");
}

function check(opt){
if(opt == 'yes'){
document.getElementById('email').style.display="";
document.getElementById('mobile').style.display="";
document.getElementById("no").checked=false;
}
else
if(opt == 'no'){
document.getElementById('email').style.display="none";
document.getElementById('mobile').style.display="none";
document.getElementById("yes").checked=false;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group has-feedback">
<input style="display:none;" type="text" class="form-control" placeholder="Email" id="email" name="email" >
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Name" id="name" name="name" >
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input style="display:none;" type="text" class="form-control" placeholder="Mobile Number" name="mobile_number" id="mobile" >
<span class="glyphicon glyphicon-phone form-control-feedback"></span>
</div>
Yes : <input type="checkbox" onclick="check('yes');" id="yes" />
No : <input type="checkbox" onclick="check('no');" id="no" />

Please check
$(function(){
$('your checkbox id or name').prop(true/false);
checkBoxOnchange();
});
function checkBoxOnchange() {
if ($('your checkbox id or name').is(":checked")) {
$("input[name='email']").show();
$("input[name='mobile_number']").show();
} else {
$("input[name='email']").hide();
$("input[name='mobile_number']").hide();
}
}
and in ur checkbox on-change event call checkBoxOnchange()

Related

How to display value in nearby input text box

I have got two input type textboxes
<div class="col-sm-3">
<div class="input-group">
<span class="input-group-addon icon_change"><i class="fa"></i></span>
<input type="text" class="form-control locur" name="locale[]" id="locale" placeholder="Enter the value" maxlength="10" value="" />
</div>
</div>
<div class="col-sm-3" id="usr" class="usr">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-usr"></i></span>
<input type="text" class="form-control usr" name="ustate[]" id="ustate" placeholder="Enter the rate" maxlength="10" value="" />
</div>
</div>
When I enter values in one text box ,the jquery script I prepared calculates with the vlaues and result should be shown in name="ustate[]" text box
$('.locur').live('change',function(){
var local_id = $("#curr_id").val();
var amt = $(this).val();
var convertedcost = convert_amt(amt,local_id);
$(this).find('.usr input[type="text"]').val(convertedcost);
//$(this).closest('usr').find('input[type="text"]').val(convertedcost);
});
I have tried above script,but it didn't work.
Note: There will be multiple set of these two text boxes as its looped throught a PHP script.
Any solutions ?
I'd suggest to wrap each of these sets with a div with a class say wrap, like this:
<div class="wrap">
<div class="col-sm-3">
<div class="input-group">
<span class="input-group-addon icon_change"><i class="fa"></i></span>
<input type="text" class="form-control locur" name="locale[]" id="locale" placeholder="Enter the value" maxlength="10" value="" />
</div>
</div>
<div class="col-sm-3" id="usr" class="usr">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-usr"></i></span>
<input type="text" class="form-control usr" name="ustate[]" id="ustate" placeholder="Enter the rate" maxlength="10" value="" />
</div>
</div>
</div>
then:
$(this).parents(".wrap").first().find("#ustate")
without wrapping:
$(this).parents(".col-sm-3").first().next().find("#ustate")
add a 'newclass' in the top most div class that will also work.
<div class="col-sm-3 newclass">
<div class="input-group">
<span class="input-group-addon icon_change"><i class="fa"></i></span>
<input type="text" class="form-control locur" name="locale[]" id="locale" placeholder="Enter the value" maxlength="10" value="" />
</div>
</div>
<div class="col-sm-3" id="usr" class="usr">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-usr"></i></span>
<input type="text" class="form-control usr" name="ustate[]" id="ustate"
placeholder="Enter the rate" maxlength="10" value="" />
</div>
</div>
then use :
$(this).parents(".newclass").first().next().find("#ustate");
its better to use a different class name than a bootstrap class name.

How to submit values of a php form and a javascript pop up?

I have created a PHP page which have some form information and at the end of the form i have a submit button. I know how to take all the user inputs from the form using the PHP post method. My problem is the following, how can i create a mini pop up form which will pop up after the user clicks the submit button. The pop up form will ask from the user if the submission of the information is urgent or not, the user will just choose between urgent or not urgent and click a button in the mini pop up form("proceed") that will close the pop up and send all information of the user inputs along with the pop up in a different PHP page. Can someone please guide with this problem?
The source code of my form at the moment is the following
<?php include "includes/tasksheader.php"; ?>
<link href="https://fonts.googleapis.com/css?family=Oleo+Script:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Teko:400,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="main1">
<div class="contact-section">
<div class="container">
<form>
<div class="col-md-6 form-line">
<div class="form-group">
<label for="exampleInputUsername">Social Ensuarance Number</label>
<input type="text" class="form-control" id="" placeholder="Ensuarance Number">
</div>
<div class="form-group">
<label for="exampleInputEmail">Land Regisrty Department</label>
<input type="email" class="form-control" id="exampleInputEmail" placeholder="Land Registry">
</div>
<div class="form-group">
<label for="telephone">Income Tax Office</label>
<input type="tel" class="form-control" id="telephone" placeholder="Tax Office">
</div>
<div class="form-group">
<label for="telephone">Court</label>
<input type="tel" class="form-control" id="telephone" placeholder="Court">
</div>
<div class="form-group">
<label for="telephone">Limassol District Administration</label>
<input type="tel" class="form-control" id="telephone" placeholder="District Administration">
</div>
<div class="form-group">
<label for="telephone">Municipality</label>
<input type="tel" class="form-control" id="telephone" placeholder="Municipality">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputUsername">VAT Department</label>
<input type="text" class="form-control" id="" placeholder="VAT">
</div>
<div class="form-group">
<label for="exampleInputEmail">RCB Bank</label>
<input type="email" class="form-control" id="exampleInputEmail" placeholder="RCB Bank">
</div>
<div class="form-group">
<label for="telephone">Hellenic Bank</label>
<input type="tel" class="form-control" id="telephone" placeholder="Hellenic Bank">
</div>
<div class="form-group">
<label for="telephone">Bank of Cyprus</label>
<input type="tel" class="form-control" id="telephone" placeholder="Bank of Cyprus">
</div>
<div class="form-group">
<label for="telephone">CDB Bank</label>
<input type="tel" class="form-control" id="telephone" placeholder="CDB Bank">
</div>
<div class="form-group">
<label for="telephone">Other</label>
<input type="tel" class="form-control" id="telephone" placeholder="Other">
</div>
</div>
<div class="form-group">
<label for ="description"> Message</label>
<textarea class="form-control" id="description" placeholder="Enter Your Message"></textarea>
<div>
<button type="button" class="btn btn-default submit"><i class="fa fa-paper-plane" aria-hidden="true"></i> Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
Thanks in regards
I'm guessing you'll need to do the following:
first create the popup form(having two buttons...) then you'll need to write the following in your javascript file:
$('form').on("submit", function(e){
e.preventDefault();
$('popup').fadeIn();
...
}
or
$('button').on("click", function(e){
e.preventDefault();
$('popup').fadeIn();
...
}
then in your popup you'll again need to preventDefault and do whatever is on your intention.
I hope it helps:)
You could change the button to a submit button and set an onsubmit for the form:
<button type="submit">
<form method="post" onsubmit="openPopup();return false">
And then use javascript to open the popup with all the data you need.
I hope this helps.

AngularJS ng-minlength ng-required not working

I am new in AngularJS. I want to set Validation for input like minimum length is 5 and maximum length is 6.
I have to set 5 to 6 Digits only into my textbox.
For this I am using below code but it is not working
<div class="input-wrap lg-input">
<input type="text" name="num" class="form-input" placeholder="Enter 5-6 digits" ng-minlength="5" maxlength="6"
ng-model="profInfo.Number" ng-required="true">
<div class="error" ng-show="profInfoForm.$submitted || profInfoForm.num.$touched">
<span ng-show="profInfoForm.num.$error.required">Required Field</span>
<span ng-show="profInfoForm.num.$error.minlength">Invalid input</span>
</div>
</div>
<div class="button-ctr">
<button class="button" ng-class="profInfoForm.$valid ? 'active' : 'disable'">Next</button>
</div>
Currently this is working like below:
When textbox is empty and I clicked on Next button it showing Required Field error message that is correct.
I cannot type more than 6 digits that is correct.
When I type 1 digit into textbox and clicked on button it showing Required Field error message that is wrong.
When I type 5th digits it showing Invalid input error message that is wrong.
I am using AngularJS v1.5.5.
Change ng-show="profInfoForm.$submitted || profInfoForm.num.$touched" to ng-show="(profInfoForm.num.$dirty || submitted)"
<input type="text" name="num" class="form-input" placeholder="Enter 5-6 digits" minlength="5" maxlength="6" ng-model="profInfo.Number" ng-required="true">
<div class="error" ng-show="(profInfoForm.num.$dirty || submitted)">
<span ng-show="profInfoForm.num.$error.required">Required Field</span>
<span ng-show="profInfoForm.num.$error.minlength">Invalid input</span>
</div>
</div>
Have a look at demo
1) Try out this -
<input type="text" name="num" class="form-input" placeholder="Enter 5-6 digits" ng-minlength="5" ng-maxlength="6" ng-model="profInfo.Number" required>
<div class="error" role="alert">
<span ng-show="profInfoForm.num.$error.required">Required Field</span>
<span ng-show="profInfoForm.num.$error.minlength">Too Short!</span>
<span ng-show="profInfoForm.num.$error.maxlength">Too Long!</span>
</div>
2) But I will prefer this below solution for angular form validations.
<form role="form" name="FORMNAME" ng-submit="vm.submitForm(formData)" novalidate>
<div class="form-group form-md-line-input" ng-class="{ 'has-error' : FORMNAME.num.$invalid && !FORMNAME.num.$pristine}">
<label class="col-md-3 control-label">Number <span style="color:red;">*</span></label>
<div class="col-md-8">
<input type="text" class="form-control" name="num" ng-model="formData.number" placeholder="Enter 5-6 digits" ng-minlength="5" ng-maxlength="6" required>
<span class="help-block" ng-show="FORMNAME.num.$error.required">Please enter name</span>
<span class="help-block" ng-show="FORMNAME.num.$error.minlength">Too Short!</span>
<span class="help-block" ng-show="FORMNAME.num.$error.maxlength">Too Long!</span>
</div>
</div>
</form>
Use bootstrap "has-error" class and with this your element will turn into red if any validation fails, "has-error" class works with control-label, form-control classes.
"novalidate" will block chrome html5 validations.

Toggle element visibility based on validation results

Given the following HTML
<form class="form-horizontal"
asp-controller="Installation"
asp-action="CreateUser"
method="post">
<fieldset>
<!-- Form Name -->
<legend>Account Creation</legend>
<!-- Username input-->
<div class="form-group">
<label class="col-md-4 control-label" for="userName">Username</label>
<div class="col-md-4">
<input id="UserName" name="UserName" asp-for="UserName" type="text" placeholder="Username" class="form-control input-md" required="">
<span id="usernameTip" class="help-block hidden">Enter a unique Username</span>
<span class="has-error" asp-validation-for="UserName"></span>
</div>
</div>
<!-- Email input-->
<div class="form-group">
<label class="col-md-4 control-label" for="email">E-mail</label>
<div class="col-md-4">
<input id="email"
name="email"
type="text"
placeholder="jane#doe.com"
class="form-control input-md"
required=""
asp-for="Email">
<span class="help-block">Enter your e-mail address</span>
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="password">Password</label>
<div class="col-md-4">
<input id="password"
name="password"
type="password"
placeholder="password"
class="form-control input-md"
required=""
asp-for="Password">
<span class="help-block">Enter a password that is at least 8 characters, fewer than 30</span>
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="confirmPassword">Confirm Password</label>
<div class="col-md-4">
<input id="confirmPassword"
name="confirmPassword"
type="password"
placeholder="password"
class="form-control input-md"
required=""
asp-for="PasswordConfirmation">
<span class="help-block">Re-enter your password</span>
</div>
</div>
<!-- Submit -->
<div class="form-group">
<label class="col-md-4 control-label"
for="createAccount"></label>
<div class="col-md-4">
<button id="createAccount" type="submit" name="createAccount" class="btn btn-primary">Create Account</button>
</div>
</div>
</fieldset>
</form>
I would like to hide/show the usernameTip span, when the asp-validation-for span contains a validation error, along with any other span that i'm using as a tip when there is an adjacent asp-validation-for span.
Reading this post I can get the JavaScript needed to show/hide the span. The only thing I can't figure out is if the View actually has knowledge of the validation errors in a manor that lets me conditionally hide/show that usernameTip span if errors exist.
Does anyone know what I need to do in order to toggle the visibility based off the data annotation errors on my model?
When looking in Chrome, asp-validation-for span is turned into this at compile time:
<span class="has-error field-validation-error" data-valmsg-for="UserName" data-valmsg-replace="true">Usernames must be between 2 and 50 characters</span>
EDIT
When validation fails, there is a ==$0 appended to the end.
Usernames must be between 2 and 50 characters == $0
I do not see any classes being added or removed from the span when the validation fails.
Edit 2
I got this working using the accepted answer. For those looking in the future however, you can use MVC's ViewData property in the view to determine if there are errors.
<div class="col-md-4">
<input id="UserName" name="UserName" asp-for="UserName" type="text" placeholder="Username" class="form-control input-md" required="">
#if (ViewData.ModelState[nameof(AccountCreationViewModel.UserName)] == null || ViewData.ModelState[nameof(AccountCreationViewModel.UserName)].Errors.Count == 0)
{
<span class="help-block">Enter a unique Username</span>
}
else
{
<span class="label label-danger" role="alert" asp-validation-for="UserName"></span>
}
</div>
<div class="col-md-4">
<input id="UserName" name="UserName" asp-for="UserName" type="text" placeholder="Username" class="form-control input-md" required="">
<span id="usernameTip" class="help-block hidden">Enter a unique Username</span>
<span id="error" class="has-error" asp-validation-for="UserName"></span>
</div>
<script>
if( $("#error").text().length>0){
//show usernameTip
}
</script>

Check above form field is correctly fill out?

I have a HTML form with some form fields.
My Markup is something similar to this -
<form>
<div class="form-group">
<label for="exampleInputEmail1">First Name</label>
<input type="text" class="form-control" placeholder="First Name">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Email address</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
My question is, I want to keep second form field inactively (in this form it is `email field) till first form field is correctly fill out. Inactive mean user cannot type or paste any thing there.
Can anybody tell is this possible in jquery, if so tell me how?
Hope someone will guide me to correct path.
Thank you.
Add disabled attribute to email and enable/disable on name keyup
HTML
<form>
<div class="form-group">
<label for="exampleInputEmail1">First Name</label>
<input type="text" class="form-control name" placeholder="First Name">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Email address</label>
<input type="email" class="form-control email" placeholder="Enter email" disabled>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
jQuery
$(function () {
$('input.name').keyup(function () {
if ($(this).val()) {
$('input.email').removeAttr('disabled');
} else {
$('input.email').attr('disabled', true);
}
});
});
Fiddle
http://jsfiddle.net/m2h5fc9b/

Categories