I have an existing jquery code where it hides divs if the radio button is selected. However, when the page loads.. if this radio button is already checked, I want to be able to hide divs without clicking anything.
<script>
$('input[name=resident]').click(function () {
if (this.id == "residentNo") {
$(".d").hide('slow');
$('.d').find('#precinctNum').val('');
$('.d').find('#yearStartedLiving').val('');
} else {
$(".d").show('slow');
$('.d').find('#precinctNum').val('');
$('.d').find('#yearStartedLiving').val('');
}
});
</script>
html form:
<label class="radio-inline"><input type="radio" class = "res" id = "residentYes" name="resident" value="Yes" checked> Yes</label>
<label class="radio-inline"><input type="radio" class = "res" id = "residentNo" name="resident" value="No" > No</label>
<div class="d item form-group" >
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Precinct Number <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="precinctNum" class="form-control col-md-5 col-xs-12" name="precinctNum" data-validate-length-range="7" required="required" type="number">
</div>
</div>
<div class="d item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Start of Residency (Year) <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="yearStartedLiving" name="yearStartedLiving" class="form-control col-md-5 col-xs-12" required="required" data-inputmask="'mask': '9999'">
</div>
</div>
I've been trying for hours and it doesn't seem to work. Your help will be much appreciated!! Thank you!
document.addEventListener("DOMContentLoaded", function(event) { // Will check after DOM is ready
if($('#residentNo').is(':checked')){ // Check if residentNo is checked
toggleDiv("residentNo")
}
});
$('input[name=resident]').click(function () {
toggleDiv(this.id)
})
function toggleDiv(id){
if (id == "residentNo") {
$(".d").hide('slow');
$(".d").find('#precinctNum, #yearStartedLiving, #birthplace, #weight, #height, #income').val('');
} else {
$(".d").show('slow');
$(".d").find('#precinctNum, #yearStartedLiving, #birthplace, #weight, #height, #income').val('');
}
};
JSFIDDLE
NOTE: In this example I have set residentNo to checked to demo it
You can trigger the event click on field of your interest:
$('input[name=resident][value="No"]').trigger('click');
$(function () {
$('input[name=resident]').click(function () {
if (this.id == "residentNo") {
$(".d").hide('slow');
} else {
$(".d").show('slow');
}
$('.d').find('#precinctNum, #yearStartedLiving').val('');
});
$('input[name=resident][value="No"]').trigger('click');
});
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<label class="radio-inline"><input type="radio" class = "res" id = "residentYes" name="resident" value="Yes" checked> Yes</label>
<label class="radio-inline"><input type="radio" class = "res" id = "residentNo" name="resident" value="No" > No</label>
<div class="d item form-group" >
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Precinct Number <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="precinctNum" class="form-control col-md-5 col-xs-12" name="precinctNum" data-validate-length-range="7" required="required" type="number">
</div>
</div>
<div class="d item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Start of Residency (Year) <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="yearStartedLiving" name="yearStartedLiving" class="form-control col-md-5 col-xs-12" required="required" data-inputmask="'mask': '9999'">
</div>
</div>
You can do it like below. Just add the code in $(document).ready. Hope it helps.
if($('#residentNo').is(':checked')){
$(".d").hide();
$('.d').find('#precinctNum, #yearStartedLiving').val('');
}
$('input[name=resident]').click(function () {
if (this.id == "residentNo") {
$(".d").hide('slow');
$('.d').find('#precinctNum, #yearStartedLiving').val('');
} else {
$(".d").show('slow');
$('.d').find('#precinctNum, #yearStartedLiving').val('');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="radio-inline"><input type="radio" class = "res" id = "residentYes" name="resident" value="Yes" checked> Yes</label>
<label class="radio-inline"><input type="radio" class = "res" id = "residentNo" name="resident" value="No" > No</label>
<div class="d item form-group" >
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Precinct Number <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="precinctNum" class="form-control col-md-5 col-xs-12" name="precinctNum" data-validate-length-range="7" required="required" type="number">
</div>
</div>
<div class="d item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Start of Residency (Year) <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="yearStartedLiving" name="yearStartedLiving" class="form-control col-md-5 col-xs-12" required="required" data-inputmask="'mask': '9999'">
</div>
</div>
Related
I have created a web application (i.e. an Ecommerce site). Here I have implemented a radio button where I am selecting one from two options. When I select any of them, then other elements should be visible. For example: I have a time slot option. When I click on multi option (from radio button check) then there are 5 or 6 more options should be displayed. And when I select uni option (from radio button check) then there are 1 option should be visible. I have done with that part. I got stuck where I need to send all those parameters to my servlet controller.
I want when multi option selected then only those 5 or 6 parameters should be sent when forms submitted. Below code is to show and hide div for selected radio button. I am facing problem when I select uni option, then I am getting as message - some parameters missing.
function selectoption(id){
if(id == 'multitime'){
document.getElementById('multidiv').style.display= 'contents';
document.getElementById('unidiv').style.display = 'none';
}else{
document.getElementById('unidiv').style.display = 'contents';
document.getElementById('multidiv').style.display = 'none';
}
}
Below code is to submit all data of form and send to controller of springboot.
function setpincode(){
var pincode = document.getElementById('pincode').value;
var delivercityid = document.getElementById('deliverycityid').value;
var status = "";
if(document.getElementById('activestatus').checked){
status = document.getElementById('activestatus').value;
}else{
status = document.getElementById('inactivestatus').value;
}
var timeslot = "";
if(document.getElementById('multitime').checked){
timeslot = document.getElementById('multitime').value;
}else{
timeslot = document.getElementById('unitime').value;
}
var nightservice = "";
if(document.getElementById('multinightservice').checked){
nightservice = document.getElementById('multinightservice').value;
}else{
nightservice = document.getElementById('uninightservice').value;
}
var midnightcharge = document.getElementById('midnightcharge').value;
var morningservice = "";
if(document.getElementById('activeservice').checked){
morningservice = document.getElementById('activeservice').value;
}else{
morningservice = document.getElementById('inactiveservice').value;
}
var earlymorningcharge=document.getElementById('morningcharge').value;
var fixedtimeservice = "";
if(document.getElementById('afixedtimeservice').checked){
fixedtimeservice=document.getElementById('afixedtimeservice').value;
}else{
fixedtimeservice=document.getElementById('inacfixedtimeservice').value;
}
var fixedcharge = document.getElementById('fixedcharge').value;
var fixedtimeslot = document.getElementById('fixedtimeslot').value;
var deliverycharge = document.getElementById('deliverycharge').value;
var deliveryslot = document.getElementById('deliveryslot').value;
var unitimeslot = document.getElementById('unitimeslot').value;
var deliverytime = document.getElementById('deliverytime').value;
document.getElementById('addpincodeform').submit();
}
Below is my HTML code:
<form action="addpincode" method="post" id="addpincodeform"
name="addpincodeform" enctype="multipart/form-data">
<div class="floating-form">
<div class="row">
<div class="col-md-6 col-12 mt-4">
<div class="floating-label">
<input class="floating-input" type="text" name="pincode"
id="pincode" placeholder=" ">
<span class="highlight"></span>
<label>Pin Code</label>
</div>
</div>
<div class="col-md-6 col-12 mt-4">
<div class="floating-label">
<input class="floating-input" type="text" name="city"
id="city" placeholder=" ">
<span class="highlight"></span>
<label>City</label>
</div>
</div>
<div class="col-md-6 col-12 mb-4">
<div class="row">
<div class="col-md-6 col-12">
<h6>Status</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="status" id="activestatus" value="1">Active
</div>
<div class="col-md-3 col-12">
<input type="radio" name="status" id="inactivestatus" value="0">
InActive
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Time Slot</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="timeslot" id="multitime" value="multi"
onchange="selectoption('multitime')">Multi
</div>
<div class="col-md-3 col-12">
<input type="radio" name="timeslot" id="unitime" value="uni"
onchange="selectoption('unitime')">Uni
</div>
</div>
</div>
<div style="display:none;" id="multidiv">
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Mid Night Service</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="nightservice" id="multinightservice"
value="yes">Yes
</div>
<div class="col-md-3 col-12">
<input type="radio" name="nightservice" id="uninightservice"
value="no">No
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="floating-label">
<input class="floating-input" type="text" name="midnightcharge"
id="midnightcharge" placeholder=" ">
<span class="highlight"></span>
<label>Mid Night Charge</label>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Early Morning Service</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="morningservice" id="activeservice"
value="yes">Yes
</div>
<div class="col-md-3 col-12">
<input type="radio" name="morningservice" id="inactiveservice"
value="no"> No
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="floating-label">
<input class="floating-input" type="text" name="earlymorningcharge"
id="morningcharge" placeholder=" ">
<span class="highlight"></span>
<label>Early Morning Charge</label>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Fixed Time Service</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="fixedtimeservice" id="afixedtimeservice"
value="yes">Yes
</div>
<div class="col-md-3 col-12">
<input type="radio" name="fixedtimeservice" id="inacfixedtimeservice"
value="no"> No
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="floating-label">
<input class="floating-input" type="text" name="fixedcharge"
id="fixedcharge" placeholder=" ">
<span class="highlight"></span>
<label>Fixed Charge</label>
</div>
</div>
<div class="col-md-6 col-12">
<div class="floating-label">
<input class="floating-input" type="text" name="deliverycharge"
id="deliverycharge" placeholder=" ">
<span class="highlight"></span>
<label>Standard Delivery Charge</label>
</div>
</div>
<div style="display:none;" id="unidiv">
<div class="col-md-6 col-12">
<div class="floating-label">
<input class="floating-input" type="text" name="unitimeslot"
id="unitimeslot" placeholder=" ">
<span class="highlight"></span>
<label>Uni Time Slot</label>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="floating-label">
<input class="floating-input" type="text" name="deliverytime"
id="deliverytime" placeholder=" ">
<span class="highlight"></span>
<label>Last Delivery Time</label>
</div>
</div>
<div class="col-12 mt-4">
<button type="button" class="btn btn-outline-danger px-5"
onclick="setpincode()">Save</button>
</div>
</div>
</div>
</form>
I have div with multiple tags in it. I want to add the with so i can convert my existing to bootstrap grid view. Here is my html as below:
<div class="render-wrap" id="fb-render-wrap">
<div class="fb-text form-group customdiv col-md-12 field-text-1505825076921">
<label for="text-1505825076921" class="fb-text-label">Name<span class="fb-required">*</span></label>
<input type="text" name="text-1505825076921" id="text-1505825076921" required="required" aria-required="true" data-msg="Name is requird.">
</div>
<div class="fb-date form-group customdiv col-md-12 field-date-1505825086301">
<label for="date-1505825086301" class="fb-date-label">From Date<span class="fb-required">*</span></label>
<input type="date" name="date-1505825086301" id="date-1505825086301" required="required" aria-required="true" data-msg="From Date is requird.">
</div>
</div>
And I want the output as below:
<div class="render-wrap" id="fb-render-wrap">
<div class="fb-text form-group customdiv col-md-12 field-text-1505825076921">
<div class="col-md-3">
<label for="text-1505825076921" class="fb-text-label">Name<span class="fb-required">*</span></label>
</div>
<div class="col-md-5">
<input type="text" name="text-1505825076921" id="text-1505825076921" required="required" aria-required="true" data-msg="Name is requird.">
</div>
</div>
<div class="fb-date form-group customdiv col-md-12 field-date-1505825086301">
<div class="col-md-3">
<label for="date-1505825086301" class="fb-date-label">From Date<span class="fb-required">*</span></label>
</div>
<div class="col-md-3">
<input type="date" name="date-1505825086301" id="date-1505825086301" required="required" aria-required="true" data-msg="From Date is requird.">
</div>
</div>
</div>
I have tried to iterate through div using customdiv css but don't know how to append the div.
$('.customdiv').children().each(function () {
if ($(this).prop("tagName").toLowerCase() == "label") {
$(this).prepend('<div class="col-md-3">');
$(this).append("</div>");
} else {
$(this).prepend('<div class="col-md-5">');
$(this).append("</div>");
}
});
Somebody help me out to achieve this in best way.
Create a div and append the child and then add the new element into the parent, so that you can achieve your result html
$(document).ready(function() {
$(".form-group").each(function(i, obj) {
var tt = $('<div class="col-md-3"></div>');
$(tt).append($(obj).find("label"));
$(obj).append(tt);
var tt = $('<div class="col-md-5"></div>');
$(tt).append($(obj).find("input, select, textarea"));
$(obj).append(tt);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="render-wrap" id="fb-render-wrap">
<div class="fb-text form-group customdiv col-md-12 field-text-1505825076921">
<label for="text-1505825076921" class="fb-text-label">Name<span class="fb-required">*</span></label>
<input type="text" name="text-1505825076921" id="text-1505825076921" required="required" aria-required="true" data-msg="Name is requird.">
</div>
<div class="fb-date form-group customdiv col-md-12 field-date-1505825086301">
<label for="date-1505825086301" class="fb-date-label">From Date<span class="fb-required">*</span></label>
<input type="date" name="date-1505825086301" id="date-1505825086301" required="required" aria-required="true" data-msg="From Date is requird.">
</div>
</div>
Have a look:
$('.customdiv').children().each(function () {
if ($(this).is('label')) {
$(this).wrap('<div class="col-md-3"></div>');
} else {
$(this).wrap('<div class="col-md-5"></div>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="render-wrap" id="fb-render-wrap">
<div class="fb-text form-group customdiv col-md-12 field-text-1505825076921">
<label for="text-1505825076921" class="fb-text-label">Name<span class="fb-required">*</span></label>
<input type="text" name="text-1505825076921" id="text-1505825076921" required="required" aria-required="true" data-msg="Name is requird.">
</div>
<div class="fb-date form-group customdiv col-md-12 field-date-1505825086301">
<label for="date-1505825086301" class="fb-date-label">From Date<span class="fb-required">*</span></label>
<input type="date" name="date-1505825086301" id="date-1505825086301" required="required" aria-required="true" data-msg="From Date is requird.">
</div>
</div>
Quite new to angular JS and need some help. How do I use ng-if to display or hide different input fields? I'm currently using ng-show but it doesn't completely remove the DOM, therefore making it difficult during validation. I want the input fields displaying within a specific div to become mandatory ONLY when selected.
When I click Select Fund, I want the showme2 div to display and the fields to become mandatory. When I click Select Product, I want the showme1 div to display and the fields to become mandatory. See my current code below:
<div ng-show="showme1">
<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Product details</h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product1</label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="productName" class="form-control" id="productName1" required="required" placeholder="Product 1">
</div>
</div>
<<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Product details</h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product2</label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="productName" class="form-control" id="productName2" required="required" placeholder="Product 2">
</div>
</div>
<div class="form-group">
<label class="col-xs-12 col-sm-3 control-label"></label>
<div class="col-xs-12 col-sm-6" align="center" ng-click="showme2=true; showme1=false"><a>(or Select Fund)</a><br /></div>
</div>
</div>
<div ng-show="showme2">
<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Fund details</h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product1</label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="fundName" class="form-control" id="fundName1" required="required" placeholder="Fund 1">
</div>
</div>
<<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Product details</h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product2</label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="fundName" class="form-control" id="fundName2" required="required" placeholder="Fund 2">
</div>
</div>
<div class="form-group">
<label class="col-xs-12 col-sm-3 control-label"></label>
<div class="col-xs-12 col-sm-6" ng-click="showme1=true; showme2=false" align="center"><a>(or Select Product)</a></div>
</div>
</div>
Reference this stackoverflow answer to understand how ng-if is used.
You can use ng-if to achieve if(){..} else{..} in Angular.js.
<div ng-if="data.id == 5">
<!-- If block -->
</div>
<div ng-if="data.id != 5">
<!-- Your Else Block -->
</div>
Additionally, I've modified your code snippet in a CodePen to use ng-if, see here. https://codepen.io/silicaRich/pen/PjwwPv
JS
var TestApp = angular.module("TestApp", []);
HTML
<html>
<head>
</head>
<body ng-app='TestApp'>
<!-- Will display if showme == true -->
<div ng-show="showme">
<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Product details // showme1</h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product1"></label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="productName" class="form-control" id="productName1" required="required" placeholder="Product 1">
</div>
</div>
<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Product details // showme1</h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product2"></label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="productName" class="form-control" id="productName2" required="required" placeholder="Product 2">
</div>
</div>
<div class="form-group">
<label class="col-xs-12 col-sm-3 control-label"></label>
<div class="col-xs-12 col-sm-6" align="center" ng-click="showme=false;"><a>(or Select Fund) // showme2</a><br /></div>
</div>
</div>
<!-- Will display if showme == false -->
<div ng-show="!showme">
<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Fund details // showme2 </h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product1"></label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="fundName" class="form-control" id="fundName1" required="required" placeholder="Fund 1">
</div>
</div>
<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Fund details // showme2 </h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product2"></label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="fundName" class="form-control" id="fundName2" required="required" placeholder="Fund 2">
</div>
</div>
<div class="form-group">
<label class="col-xs-12 col-sm-3 control-label"></label>
<div class="col-xs-12 col-sm-6" ng-click="showme=true;" align="center"><a>(or Select Product) // showme1</a></div>
</div>
</div>
</body>
</html>
Hope this helps.
I am trying to push values to an array whenever i check the radio button. How can I accomplish this?
<div class="form-group" show-errors>
<div class="col-sm-12" >
<div class="form-group col-xs-12 nopadding" >
<label class="control-label" for="mobile">Have you taken any admission tests? (eg. IELTS, GRE, etc)</label>
<div class="btn-group col-xs-12 nopadding" data-toggle="buttons">
<label class="col-xs-6 btn btn-white" ng-click="checkMultiSelect(vm.studentObj,admission)" ng-class="{'active':vm.studentObj.test_taken === 'Y'}">
<input type="radio" name="test_taken" ng-model="vm.studentObj.test_taken" value="Y"> Yes
</label>
<label class="col-xs-6 btn btn-white" ng-click="checkMultiSelect(vm.studentObj,'test_taken','N')" ng-class="{'active':vm.studentObj.test_taken === 'N'}">
<input type="radio" name="test_taken" ng-model="vm.studentObj.test_taken" value="N"> No
</label>
</div>
</div>
</div>
</div>
<div class="form-group" show-errors>
<div class="col-sm-12" >
<div class="form-group col-xs-12 nopadding" >
<label class="control-label" for="mobile">Educational Info (High School/ Secondary/ Primary/ Pre School)</label>
<div class="btn-group col-xs-12 nopadding" data-toggle="buttons">
<label class="col-xs-6 btn btn-white" ng-click="checkMultiSelect(vm.studentObj,Educational)" ng-class="{'active':vm.studentObj.test_taken === 'Y'}">
<input type="radio" name="test_taken" ng-model="vm.studentObj.test_taken" value="Y"> Yes
</label>
<label class="col-xs-6 btn btn-white" ng-click="checkMultiSelect(vm.studentObj,'test_taken','N')" ng-class="{'active':vm.studentObj.test_taken === 'N'}">
<input type="radio" name="test_taken" ng-model="vm.studentObj.test_taken" value="N"> No
</label>
</div>
</div>
</div>
</div>
My function
$rootScope.checkMultiSelect = function (data, key) {
if (!data) {
data = [];
}
var idx = data.indexOf(key);
if (idx > -1) {
data.splice(idx, 1);
} else {
data.push(key);
}
};
You don't need to manually push data to get an object representing the form. The data-binding in Angular does this for you.
<form ng-form="studentForm">
<div class="form-group" show-errors>
<div class="col-sm-12" >
<div class="form-group col-xs-12 nopadding" >
<label class="control-label" for="mobile">Have you taken any admission tests? (eg. IELTS, GRE, etc)</label>
<div class="btn-group col-xs-12 nopadding" data-toggle="buttons">
<label class="col-xs-6 btn btn-white" ng-class="{'active':studentObj.test_taken === 'Y'}">
<input type="radio" name="test_taken" ng-model="studentObj.test_taken" value="Y"> Yes
</label>
<label class="col-xs-6 btn btn-white" ng-class="{'active':studentObj.test_taken === 'N'}">
<input type="radio" name="test_taken" ng-model="studentObj.test_taken" value="N"> No
</label>
</div>
</div>
</div>
</div>
<div class="form-group" show-errors>
<div class="col-sm-12" >
<div class="form-group col-xs-12 nopadding" >
<label class="control-label" for="mobile">Educational Info (High School/ Secondary/ Primary/ Pre School)</label>
<div class="btn-group col-xs-12 nopadding" data-toggle="buttons">
<label class="col-xs-6 btn btn-white" ng-class="{'active':studentObj.edu_info === 'Y'}">
<input type="radio" name="test_taken" ng-model="studentObj.edu_info" value="Y"> Yes
</label>
<label class="col-xs-6 btn btn-white" ng-class="{'active':studentObj.edu_info === 'N'}">
<input type="radio" name="test_taken" ng-model="studentObj.edu_info" value="N"> No
</label>
</div>
</div>
</div>
</div>
</form>
Say someone fills out the form with the first radio as yes and the second as no. The output of studentObj will be
{
test_taken: 'Y',
edu_info: 'N'
}
This is the beauty of Angular. You don't need to manually push values, the data-binding does all of this for you and you don't need to clutter up your controller with unnecessary code.
I am developing an application in which I send form data using ajax. After success function data add into the database but it does not display any messages and complete form data appends to url.
In this I am using "POST" method.
Why this data appends to form and not showing any messages to result field.
This is my html code
<form class="form-horizontal form-label-left" id="myForm" novalidate>
<span class="section">Personal Info</span>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="fname"> First Name <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="fname" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="1" name="fname" placeholder="First Name" required="required" type="text">
</div>
</div>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="lname"> Last Name <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="lname" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="1" name="lname" placeholder="Last Name" required="required" type="text">
</div>
</div>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="username"> Username <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="username" class="form-control col-md-7 col-xs-12" data-validate-length-range="0,25" data-validate-words="1" name="username" placeholder="Username" required="required" type="text">
</div>
</div>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Email <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="email" id="email" name="email" required="required" class="form-control col-md-7 col-xs-12" placeholder="abc#gmail.com">
</div>
</div>
<div class="item form-group">
<label for="password" class="control-label col-md-3">Password <span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="password" type="password" name="password" data-validate-length="6,8" class="form-control col-md-7 col-xs-12" required="required">
</div>
</div>
<div class="item form-group">
<label for="password2" class="control-label col-md-3 col-sm-3 col-xs-12">Repeat Password</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="password2" type="password" name="password2" data-validate-linked="password" class="form-control col-md-7 col-xs-12" required="required">
</div>
</div>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="telephone">Telephone <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="tel" id="telephone" name="telephone" required="required" data-validate-length-range="8,20" class="form-control col-md-7 col-xs-12">
</div>
</div>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="status">Status</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select id="status" name="status" class="form-control col-md-7 col-xs-12">
<option>Select Status</option>
<option value="ACTIVE" >Active</option>
<option value="INACTIVE">Inactive</option>
<option value="VACATION">Vacation</option>
</select>
</div>
</div>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="role">Role</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select id="role" name="role" class="form-control col-md-7 col-xs-12">
<option value="ACTIVE" >Select Role Name</option>
<option value="Manager" >Manager</option>
<option value="Operator">Operator</option>
<option value="Admin">Admin</option>
</select>
</div>
</div>
<div class="ln_solid"></div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<button type="reset" id="reset" class="btn btn-primary">Cancel</button>
<button id="send" type="submit" class="btn btn-success">Submit</button>
</div>
</div>
<div id="result"></div>
</form>
After submit I call js file in which I am using ajax.
ajax function
function processForm( e ){
alert(e);
$.ajax({
url: 'add_user_check.php',
dataType: 'text',
type: 'post',
contentType: 'application/x-www-form-urlencoded',
data: $(this).serialize(),
success: function( data, textStatus, jQxhr )
{
alert(data);
var split = data.split(',');
var display = split[0];
var msg = split[1];
$('#result').html( msg );
},
error: function( jqXhr, textStatus, errorThrown ){
$('#result').html( "Connection error :"+errorThrown);
}
});
e.preventDefault();
}
$('#myForm').submit( processForm );
If data is submitted successfully it returns success message and will display to result field. But message is not display and complete data appends to the url. As shown in fig.
Why this happens? and why it does not display proper message to result field.
Thanks in advance.
In short because there is no real error. PHP is not processing your request and so goes about its normal business. The URL has the POST data stuck in there as it normally would, only it isnt being flushed out since it isnt being redirected.
This is because you haven't actually specified a method for the form.
You need to use
<form method="post" ....
use method="post" in html form .