how to check dynamically if user hasn't deleted value from textarea - javascript

I want to make buttons enable when all textboxes have values and radiobutton is checked.
It works, as long as I don't try to delete some values. Then one of textboxes is empty but buttons are still enable, while I want them to be disable. how to change it?
<body>
<h2>#ViewBag.Title.</h2>
<div class="row">
<div class="col-md-8">
<section>
#using (Html.BeginForm("Add", "Question", new {ReturnUrl = ViewBag.ReturnUrl}, FormMethod.Post, new {#class = "form-horizontal", role = "form"}))
{
#Html.AntiForgeryToken()
<h4>//</h4>
<hr/>
#Html.ValidationSummary(true, "", new {#class = "text-danger"})
#Html.TextAreaFor(m => m.QuestionContent, new {#class = "form-control", #rows = "7", #cols = "50", #id= "a", #type = "textarea" })
#Html.TextAreaFor(m => m.AnswerA, new {#class = "form-control", #rows = "7", #cols = "50", #style = "margin-top: 15px", #id = "a", #type = "input" })
#Html.TextAreaFor(m => m.AnswerC, new {#class = "form-control", #rows = "7", #cols = "50", #style = "margin-top: 15px",#id = "a", #type = "input" })
#Html.TextAreaFor(m => m.AnswerD, new {#class = "form-control", #rows = "7", #cols = "50", #style = "margin-top: 15px; margin-bottom: 30px", #id = "a", #type = "input" })
#Html.RadioButtonFor(m => m.CorrectAnswer, "a", new {#type="radio"})
#Html.RadioButtonFor(m => m.CorrectAnswer, "b", new { #type = "radio" })
#Html.RadioButtonFor(m => m.CorrectAnswer, "c", new { #type = "radio" })
#Html.RadioButtonFor(m => m.CorrectAnswer, "d", new { #type = "radio" })
<input id="addNewQuestion" type="submit" value="Dodaj nowe pytanie" class="btn btn-default" style="margin-top: 30px; margin-left: -80px !important"/>
<input id="finish" type="submit" name="AddAndFinish" value="Zakończ dodawanie testu" formaction="AddAndFinish" class="btn btn-default" style="margin-top: 30px; margin-left: 10px !important"/>
</div>
</div>
</div>
}
</section>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('input[type="submit"]').attr('disabled', true);
$('input[type="text"],textarea').on('keyup', function () {
var questionContentValue = $("#questionContentArea").val();
var answerAValue = $('input[name="ans_a"]').val();
var answerBValue = $('input[name="ans_b"]').val();
var answerCValue = $('input[name="ans_c"]').val();
var answerDValue = $('input[name="ans_d"]').val();
var clicked = false;
$('[type="radio"]').change(function() {
clicked = true;
if ((questionContentValue != '') && (answerAValue != '') && (answerBValue != '') && (answerCValue != '') && (answerDValue != '')&& clicked == true) {
$('input[type="submit"]').attr('disabled', false);
} else {
$('input[type="submit"]').attr('disabled', true);
}
});
});
});
</script>
</body>
There're also other stufs in code to make my html look good, but they're not important.

I think this will work for you. I've updated it to include radio buttons and closer match your example's selectors and what you're doing. This might be more straightforward for you to incorporate into your document ready() function.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
function disableButtons() {
$("input[type='submit']").attr("disabled", true);
}
function enableButtons() {
$("input[type='submit']").attr("disabled", false);
}
$(document).ready(function() {
//start with buttons disabled.
disableButtons();
var $textInputs = $('input[type="text"],textarea');
//when any inputs/textareas change, re-evaluate all inputs and toggle buttons appropriately
$('input,textarea').on('change', function() {
//filter text inputs to the empty ones and see if there are any
var anyEmpty = $textInputs.filter(function() { return this.value == ""; }).length > 0;
//see if any radio buttons are selected
var anyClicked = $('input[type="radio"]:checked').length > 0;
if (!anyEmpty && anyClicked) {
enableButtons();
} else {
disableButtons();
}
});
});
</script>
</head>
<body>
<div><input type="text" name="input1" value="" class="input"></div>
<div><input type="text" name="input2" value="" class="input"></div>
<div><textarea name="input3" rows="8" cols="80" class="input"></textarea></div>
<div>
<input type="radio" name="radioInput" value="Radio 1">
<input type="radio" name="radioInput" value="Radio 2">
</div>
<div class="buttons">
<input type="submit" name="button1" class="button" value="Submit 1" />
<input type="submit" name="button2" class="button" value="Submit2" />
</div>
</body>
</html>

Related

jQuery how to DRY the similar onclick event calls

I want to listen to two input change events, when one of the changes, check the checkbox and disable the element. Likewise, it needs to roll the checkbox back to the previous state when the value of input boxes back to the default values. The click function looks like 90% resemblance, how to DRY them?
var payment = 'old payment';
var billAdr = 'old billAdr';
$('#payment').val(payment);
$('#bill-adr').val(billAdr);
$('#payment').on('input', function() {
var newPayment = $('#payment').val();
if(newPayment !== payment) {
$("#save-nxt-time").attr('checked', true);
$("#save-nxt-time").prop('disabled', true);
} else {
var newBillAdr = $('#bill-adr').val();
if(newBillAdr === billAdr) {
$("#save-nxt-time").prop('disabled', false);
$("#save-nxt-time").attr('checked', false);
}
}
});
$('#bill-adr').on('input', function() {
var newBillAdr = $('#bill-adr').val();
if(newBillAdr !== billAdr) {
$("#save-nxt-time").attr('checked', true);
$("#save-nxt-time").prop('disabled', true);
} else {
var newPayment = $('#payment').val();
if(newPayment === payment) {
$("#save-nxt-time").prop('disabled', false);
$("#save-nxt-time").attr('checked', false);
}
}
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form action="/#">
<label for="payment">payment</label>
<input type="text" id="payment" name="payment">
<br>
<label for="bill-adr">bill address</label>
<input type="text" id="bill-adr" name="bill-adr">
<br>
<input type="checkbox" id="save-nxt-time">
<label for="save">Save to next time</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
const oldPa = 'old payment';
const oldBi = 'old billAdr';
const $next = $('[name="save-nxt-time"]');
const $paym = $('[name="payment"]').val(oldPa);
const $bill = $('[name="bill-adr"]').val(oldBi);
const $paBi = $paym.add($bill);
$paBi.on('input', () => {
const bool = $paym.val() !== oldPa || $bill.val() !== oldBi;
$next.prop({disabled: bool, checked: bool});
});
form label {display: block;}
<form action="/#">
<label><span>Payment</span> <input type="text" name="payment"></label>
<label><span>Billing address</span> <input type="text" name="bill-adr"></label>
<label><input type="checkbox" name="save-nxt-time"> <span>Save to next time</span></label>
<input type="submit" value="Submit">
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Like this ?
// first load
checkTest(true);
$('#payment, #bill-adr').on('input', function() {
checkTest(false, $(this).attr('id'), $(this).val(), "#save-nxt-time");
});
function checkTest(init = false, id, value, input) {
var payment = 'old payment', billAdr = 'old billAdr';
if (init === true) {
$('#payment').val(payment);
$('#bill-adr').val(billAdr);
}
console.clear();
console.log(value);
if (value === billAdr || value === payment) {
$(input).prop('disabled', false).attr('checked', false);
} else {
$(input).attr('checked', true).prop('disabled', true);
}
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form action="/#">
<label for="other">payment</label>
<input type="text" id="payment" name="fname">
<br>
<label for="other">bill address</label>
<input type="text" id="bill-adr" name="fname">
<br>
<input type="checkbox" id="save-nxt-time">
<label for="save">Save to next time</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
how about putting the text and ids of the elements in an array and looping through
run snippet below
$(document).ready(function() {
const p = new PaymentMgr();
p.init();
});
class PaymentMgr {
constructor() {
this.data = [{
text: 'old payment',
id: 'payment'
}, {
text: 'old bill address',
id: 'bill-adr'
}];
}
init() {
this.data.forEach(element => $(`#${element.id}`)
.val(element.text)
.on("input", (e) => {
['checked', 'disabled'].forEach(attribute =>
$("#save-nxt-time")
.attr(attribute, $(e.target).val() !== element.text))
})
);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/#">
<label for="payment">payment</label>
<input type="text" id="payment" name="payment">
<br>
<label for="bill-adr">bill address</label>
<input type="text" id="bill-adr" name="bill-adr">
<br>
<input type="checkbox" id="save-nxt-time">
<label for="save">Save to next time</label><br><br>
<input type="submit" value="Submit">
</form>

More efficient way of duplicating the code

Every time I click the + button I want the same input to display
The way I do it here works fine but seems like the worst way of doing it as just repeating the same code and changing the id's (also if I want for example 5 inputs I would have to repeat this code 5 times). What would be a better way of doing this?
<html>
<head>
<script language='JavaScript' type='text/javascript'>
function show3(){
document.getElementById('div2').style.display = 'block';
}
</script>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<div>
<input type="range" min="0" max="1500" value="0" class="slider2" id="one"/>
<p>Value(mm): <input type="text" id="two" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
<script>
var slider1 = document.getElementById("one");
var output2 = document.getElementById("two");
output2.value = slider1.value;
slider1.oninput = function() {
output2.value = this.value;
}
</script>
<div id="div2" class="hide">
<input type="range" min="0" max="1500" value="0" class="slider2" id="three"/>
<p>Value(mm): <input type="text" id="four" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
<script>
var slider2 = document.getElementById("three");
var output3 = document.getElementById("four");
output2.value = slider1.value;
slider2.oninput = function() {
output3.value = this.value;
}
</script>
</body>
</html>
<html>
<head>
<script language='JavaScript' type='text/javascript'>
function show3(){
document.getElementById('div2').style.display = 'block';
}
</script>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<div>
<input type="range" min="0" max="1500" value="0" class="slider2" id="one"/>
<p>Value(mm): <input type="text" id="two" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
<script>
var slider1 = document.getElementById("one");
var output2 = document.getElementById("two");
output2.value = slider1.value;
slider1.oninput = function() {
output2.value = this.value;
}
</script>
<div id="div2" class="hide">
<input type="range" min="0" max="1500" value="0" class="slider2" id="three"/>
<p>Value(mm): <input type="text" id="four" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
<script>
var slider2 = document.getElementById("three");
var output3 = document.getElementById("four");
output2.value = slider1.value;
slider2.oninput = function() {
output3.value = this.value;
}
</script>
</body>
</html>
This will work for all the sliders. But you need to keep in mind a couple of things :
This will work only for the sliders that are already rendered in the DOM (even if they are hidden) if you render new sliders to the DOM you will need to attach the event listener as I did it in the foreach loop.
The input id (e.g "one") needs to match the output data-range="one"
function show3(){
document.getElementById('div2').style.display = 'block';
}
var sliders = document.querySelectorAll(".slider"); // slider = common class name
sliders.forEach(( slider ) => {
slider.addEventListener('input', (e) => {
const sliderId = e.target.id;
const output = document.querySelector(`[data-range=${sliderId}]`);
output.value = e.target.value;
});
});
<html>
<head>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<div>
<input type="range" min="0" max="1500" value="0" class="slider" id="one"/>
<p>Value(mm): <input type="text" data-range="one" id="two" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
<div id="div2" class="hide">
<input type="range" min="0" max="1500" value="0" class="slider" id="two"/>
<p>Value(mm): <input type="text" data-range="two" id="four" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
</body>
</html>
Might be easier to include the code in the element and clone it (parentNode is the div) :
<div>
<input type="range" min="0" max="1500" value="0"
oninput="this.parentNode.getElementsByTagName('INPUT')[1].value = this.value"/>
<p>Value(mm): <input type="text" size="10" /></p>
<button type="button"
onclick="this.parentNode.parentNode.append(this.parentNode.cloneNode(true))">+</button>
</div>
I would recommend you to create some kind of class which let you create slider components dynamically.
Here's a quick example (not optimized):
var SliderComponent = (function(doc) {
var defaults = {
containerSelector: 'body',
value: 0,
min: 0,
max: 1500,
inputSize: 10,
inputClass: 'special',
sliderClass: 'slider',
buttonClass: 'button'
}, options;
function SliderComponent(options) {
options = Object.assign({}, defaults, options || {});
this.container = getContainer(options);
this.input = createInput(options);
this.slider = createSlider(options);
this.removeButton = createButton(options.buttonClass, '-');
this.addButton = createButton(options.buttonClass, '+');
this.element = render.apply(this);
this.events = [];
this.events.push(
addEventListener.call(this, 'click', this.removeButton, function() {
this.destroy();
}),
addEventListener.call(this, 'click', this.addButton, function() {
new SliderComponent(options);
}),
addEventListener.call(this, 'input', this.slider, function(event) {
this.input.value = event.target.value;
}),
addEventListener.call(this, 'input', this.input, function(event) {
this.slider.value = event.target.value;
})
)
}
SliderComponent.prototype.destroy = function() {
this.events.forEach(function(e) {
e();
});
this.element.remove();
}
function addEventListener(name, element, listener) {
listener = listener.bind(this);
element.addEventListener(name, listener);
return function() {
element.removeEventListener(name, listener);
};
}
function getContainer(options) {
var container = doc.querySelector(options.containerSelector);
if(!container) {
throw new Error('Container for selector %s not found', options.containerSelector);
}
return container;
}
function createInput(options) {
var input = doc.createElement('input');
input.setAttribute('type', 'number');
input.setAttribute('min', options.min);
input.setAttribute('max', options.max);
input.setAttribute('size', options.inputSize);
input.classList.add(options.inputClass);
input.value = options.value;
return input;
}
function createSlider(options) {
var input = doc.createElement('input');
input.setAttribute('type', 'range');
input.setAttribute('min', options.min);
input.setAttribute('max', options.max);
input.classList.add(options.sliderClass);
input.value = options.value;
return input;
}
function createButton(klass, text) {
var button = doc.createElement('button');
button.setAttribute('type', 'button');
button.classList.add(klass);
button.textContent = text;
return button;
}
function render() {
var element = doc.createElement('div');
element.appendChild(this.slider);
element.appendChild(this.input);
element.appendChild(this.removeButton);
element.appendChild(this.addButton);
return this.container.appendChild(element);
}
return SliderComponent;
})(document);
var sliders = new SliderComponent();

Adding lines in a form an autocomplete function breaks

In a form I have 2 inputs. In the 1st input I use a datalist which I load it through JSON and the 2nd input is autocomplete it when the 1st input is changed.
Till here all works!
Then I added an add button where I add the same lines. The problem is that because I use id to select the input, when I add the new line I have the same id.. So the autocomplete doesn't work..
How can I solve this? Here the jssFiddle.
counter = 0;
var dataList = document.getElementById('products');
var jsonOptions = [{
"product": "11111",
"description": "description 1"
}, {
"product": "22222",
"description": "description 2"
}, {
"product": "33333",
"description": "description 3"
}];
jsonOptions.forEach(function(item) {
var option = document.createElement('option');
option.value = item.product;
option.text = item.description;
dataList.appendChild(option);
$(function() {
$('#product').on('change keyup', function() {
var i = this.value;
var description = "";
var productsInBox = 0;
jsonOptions.forEach(function(a) {
if (a.product == i) {
description = a.description;
productsInBox = a.productsInBox;
}
});
$('#description').val(description);
});
});
});
$('#form1')
// Add button click handler
.on('click', '.addButtonDED', function() {
counter++;
var $template = $('#addLineInDed'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('data-index', counter)
.insertBefore($template);
// Update the name attributes
$clone
.find('[name="product"]').attr('name', 'product-' + counter).end()
.find('[name="description"]').attr('name', 'description-' + counter).end()
})
// Remove button click handler
.on('click', '.removeButtonDED', function() {
var $row = $(this).parents('.form-group'),
index = $row.attr('data-index');
counter--;
// Remove element containing the fields
$row.remove();
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<div class="col-xs-2">
<input type="text" id="product" list="products" class="form-control" name="product-0" />
<datalist id="products"></datalist>
</div>
<div class="col-xs-4">
<input id="description" type="text" class="form-control" name="description-0" />
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default addButtonDED"><i class="fa fa-plus"></i></button>
</div>
</div>
<div id="addLineInDed" class="form-group hide">
<div class="form-group">
<div class="col-xs-2">
<input type="text" id="product" list="products" class="form-control" name="product-0" />
<datalist id="products"></datalist>
</div>
<div class="col-xs-4">
<input id="description" type="text" class="form-control" name="description-0" />
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default removeButtonDED"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
<div class="col-md-10 ">
<button type="submit" name="formAction" value="next" class="btn btn-primary">Submit</button>
</div>
</fieldset>
</form>
Use classes, rename your selecs to array values:
counter = 0;
var dataList = $('.products');
var jsonOptions = [{
"product": "11111",
"description": "description 1"
}, {
"product": "22222",
"description": "description 2"
}, {
"product": "33333",
"description": "description 3"
}];
jsonOptions.forEach(function(item) {
var option = '<option value="' + item.product + '">' + item.description + '</option>';
dataList.append(option);
});
$(function() {
$('body').on('input', '.product,.products', function() {
var i = this.value;
var description = "";
var productsInBox = 0;
jsonOptions.forEach(function(a) {
if (a.product == i) {
description = a.description;
productsInBox = a.productsInBox;
}
});
$(this).closest('.form-group').find('.description').val(description);
});
});
$('#form1').on('click', '.addButtonDED', function() {
var $template = $('.form-group:last').clone(true, true).find('input').val('').end()
.find('.addButtonDED').removeClass('addButtonDED').addClass('removeButtonDED').end()
.find('i').removeClass('fa-plus').addClass('fa-minus').end();
$template.insertAfter('.form-group:last');
})
// Remove button click handler
.on('click', '.removeButtonDED', function() {
var $row = $(this).closest('.form-group');
$row.remove();
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<div class="col-md-2">
<input type="text" list="products" class="form-control product" name="product[]" />
<datalist id="products" class="products"></datalist>
</div>
<div class="col-md-4">
<input id="" type="text" class="form-control description" name=" description[]" />
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default addButtonDED"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="col-md-10 ">
<button type="submit" name="formAction" value="next" class="btn btn-primary">sUBMIT</button>
</div>
</fieldset>
</form>
</fieldset>
</form>
to read the values do a loop:
foreach($_POST['product'] as $product) {
//do stuf
}
Seeing as you said you've tried to use classes,
How about encapsulating your code so that you'll have a function like so:
function FilldatalistOptions(element,options)
You can then have the 2 datalists with different id's (products1 and products2 perhaps).
And just call the function like so:
var dataList1 = document.getElementById('products1');
var dataList2 = document.getElementById('products2');
FilldatalistOptions(datalist1, jsonOptions);
FilldatalistOptions(datalist2, jsonOptions);

pass the json object to angular form

[ https://drive.google.com/open?id=0B2PqgB8bPJ5xVmpjdTBOakdoTk0 ] this is the image link This is my ng-app and controller of my form:
<!DOCTYPE>
<html>
<head>
<title>Student EditForm</title>
<script src = "javascript/QueryData.js"></script>
<script src = "jquery/jquery-1.10.2.min.js"></script>
<script src = "jquery/jquery-ui.js"></script>
<script src = "angularjs/angular.min.js"></script>
<link rel = "stylesheet" href = "css/jquery-ui.css" />
<link rel = "stylesheet" href = "css/bootstrap.min.css" />
<style>
body{
background-color:#FFFFE0;
width: 1038px;
float: right;
}
form{
width: 400px;
margin: 60px 10px 10px 10px;
}
.form-control{
background-color:#FFFAFA;
}
#btn,#btn1{
margin-top: 10px;
background-color:#ADFF2F;
}
ul{
list-style-type: none;
margin: 0;
padding:0;
width: 25%;
height: 100%;
position: fixed;
background-color: #f1f1f1;
overflow: hidden;
border: 1px solid #000000;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a{
display: block;
color: white;
text-align: left;
padding: 14px 20px;
text-decoration: none;
}
li{
border-bottom: 1px solid black;
}
li a:hover{
background-color: red;
}
</style>
</head>
<body ng-app = "MyForm" ng-controller = "StudentControl as stdCtrl">
<div class = "content-container col-sm-3">
<table>
<nav>
<ul>
<li><a class = "active" href = "studentForm.html">Student-Registration</a></li>
<li><a class = "active" href = "studentDetails.html">Student-Details</a></li>
<li><a class = "active" href = "studentEdit.html">Student-Update</a></li>
</ul>
</nav>
</table>
</div>
<div class = "bodycontainer col-lg-9">
<form name = "logForm" class = "col-lg-12" novalidate ng-repeat = "x in fType" ng-submit = "stdCtrl.StudentCtrl()">
<input type = "hidden"
id = "studentid"
name = "studentid"
ng-model = "stdCtrl.stdId"
class = "form-control" />
<div class = "form-group col-lg-6">
<label>Firstname</label>
<input type = "text"
id = "first"
name = "fname"
ng-required = "true"
ng-model = "stdCtrl.fName"
class = "form-control"
autofocus
placeholder = "FirstName">{{x.firstname}}</input>
<span class = "help-block"
ng-show = "logForm.fname.$invalid && !logForm.fname.$pristine">FirstName Required</span>
</div>
<div class = "form-group col-lg-6">
<label>Lastname</label>
<input type = "text"
name = "lname"
ng-required = "true"
ng-model = "stdCtrl.lName"
class = "form-control"
placeholder = "LastName">{{x.lastname}}</input>
<span class = "help-block"
ng-show = "logForm.lname.$invalid && !logForm.lname.$pristine">LastName Required</span>
</div>
<div class = "form-group col-lg-12">
<label>Gender:&nbsp&nbsp&nbsp</label>
<input type="radio" name="gender" ng-model="stdCtrl.gender" value="male" required>Male{{x.gender}}</input>
<input type="radio" name="gender" ng-model="stdCtrl.gender" value="female" required>Female{{x.gender}}</input>
<span class = "help-block"
ng-show = "logForm.gender.$invalid && !logForm.gender.$pristine">Gender Required</span>
</div>
<div class = "form-group col-lg-6">
<label>Email</label>
<input type = "email"
name = "email"
ng-required = "true"
ng-model = "stdCtrl.Email"
class = "form-control"
placeholder = "Your Email" >{{x.email}}</input>
<span class = "help-block"
ng-show = "logForm.email.$invalid && !logForm.email.$pristine">Email Required</span>
</div>
<div class = "form-group col-lg-6">
<label>Fathername</label>
<input type = "text"
name = "fathername"
ng-required = "true"
ng-model = "stdCtrl.Fname"
class = "form-control"
placeholder = "Father's Name">{{x.fathername}}</input>
<span class = "help-block"
ng-show = "logForm.fathername.$invalid && !logForm.fathername.$pristine">FatherName Required</span>
</div>
<div class = "form-group col-lg-6">
<label>Mothername</label>
<input type = "text"
name = "mothername"
ng-required = "true"
ng-model = "stdCtrl.Mname"
class = "form-control"
placeholder = "Mother's Name"/>{{x.mothername}}
<span class = "help-block"
ng-show = "logForm.mothername.$invalid && !logForm.mothername.$pristine">MotherName Required</span>
</div>
<div class = "form-group col-lg-6">
<label>DOB</label>
<input type = "text"
id = "birthdayPicker"
name = "birthdy"
ng-required = "true"
ng-model = "stdCtrl.brthdy"
class = "form-control"
placeholder = "DOB-Date Of Birth">{{x.birthday}}</input>
<span class = "help-block"
ng-show = "logForm.birthdy.$invalid && !logForm.birthdy.$pristine">BirthDay Required</span>
</div>
<div class = "form-group col-lg-12">
<label>Home-Address</label>
<textarea name = "address"
ng-required = "true"
ng-model = "stdCtrl.address"
class = "form-control"
placeholder = "PresentAddress"
row = "10" cols = "50" >{{x.address}}</textarea>
<span class = "help-block"
ng-show = "logForm.address.$invalid && !logForm.address.$pristine">PresentAddress Required</span>
</div>
<div class = "form-group col-lg-6">
<label>10<sup>th</sup>-Percentage</label>
<input type = "number"
name = "ten"
ng-required = "true"
ng-model = "stdCtrl.tenth"
class = "form-control"
placeholder = "10th percentage">{{x.tenth}}</input>
<span class = "help-block"
ng-show = "logForm.ten.$invalid && !logForm.ten.$pristine">10th-percentage Required</span>
</div>
<div class = "form-group col-lg-6">
<label>12<sup>th</sup>-Percentage</label>
<input type = "number"
name = "twelve"
ng-required = "true"
ng-model = "stdCtrl.twelfth"
class = "form-control"
placeholder = "12th percentage">{{x.twelfth}}</input>
<span class = "help-block"
ng-show = "logForm.twelve.$invalid && !logForm.twelve.$pristine">12th-percentage Required</span>
</div>
<div class = "form-group col-lg-6">
<input type = "submit"
id = "btn"
ng-disabled = "!logForm.$valid"
name = "Nextpage"
class = "form-control"
value = "Update" />
</div>
<div id = "form-group" class = "col-lg-6">
<input type = "submit"
name = "Cancel"
id = "btn1"
ng-click = "CancelForm()"
ng-disabled = "!logForm.$valid"
class = "form-control"
value = "Cancel" />
</div>
</form>
</div>
<script>
var app = angular.module('MyForm',[])
app.controller('StudentControl',['$scope','$http',function($scope,$http){
this.StudentCtrl = function(){
alert("bye");
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function(m,key,value) {
vars[key] = value;
});
return vars;
}
var fType = JSON.parse(decodeURIComponent(this.StudentCtrl()['data']));
console.log(fType);
$scope.fType = fType;
}]);
$(function(){
$("#birthdayPicker").datepicker({
dateFormat: "yy-mm-dd",
yearRange: '1980:2017',
changeMonth: true,
changeYear: true
});
});
</script>
</body>
</html>
What Im trying to do is Im getting the json object data in the above code but I have no idea to how to assign to my form fields.
Please give a suggestion guys
Your variables are in $scope.stdCtrl, try to console.log that
this.StudentCtrl = function() {
console.log($scope.stdCtrl);
}
JSFiddle
Try to pass the object in ng-submit like this:
<form name = "logForm" class = "col-lg-12" novalidate ng-repeat = "x in fType" ng-submit = "stdCtrl.StudentCtrl(stdCtrl)">
Or
Why not simply define a function inside the StudentCtrl like this
$scope.submitFunc = function(stdCtrl){
console.log(stfCtrl);
}
And change your form tag like this:
<form name = "logForm" class = "col-lg-12" novalidate ng-repeat = "x in fType" ng-submit = "submitFunc(stdCtrl)">

Hide/clear input field with prototype

I have the following script:
if (Object.isUndefined(Axent)) { var Axent = { } }
Axent.SelfLabeledInput = Class.create({
initialize: function() {
var labelSelector = arguments[0] || 'label';
$$(labelSelector).findAll(function(l) {return (l.readAttribute('for') !== null)}).each(function(l){
l.hide();
$(l.readAttribute('for'))._value = l.innerHTML;
if ($(l.readAttribute('for')).value.empty()) {
$(l.readAttribute('for')).value = $(l.readAttribute('for'))._value
}
$(l.readAttribute('for')).observe('blur',function(e){if(Event.element(e).value == '') Event.element(e).value = Event.element(e)._value;});
$(l.readAttribute('for')).observe('focus',function(e){if(Event.element(e).value == Event.element(e)._value) Event.element(e).value = '';});
});
}
});
And the following form :
<form name="comform" action="#" method="post" id="commentform">
<div class="input">
<p>
<label for="comment">Type your comment here...</label>
<textarea name="comment" id="comment" rows="8" cols="10" class="" ></textarea>
</p>
</div>
<div class="input">
<p>
<label for="author">Name (required)</label>
<input type="text" name="author" id="author" size="22" class=""/>
</p>
</div>
<div class="input">
<p>
<label for="email">Email (gravatar enabled) (required)</label>
<input type="text" name="email" id="email" size="22" class=""/>
</p>
</div>
<div class="input">
<p>
<label for="url">Website (optional)</label>
<input type="text" name="url" id="url" size="22" />
</p>
</div>
<div class="submit">
<input type="submit" name="submit" id="sub" value="Leave comment" />
<input type="hidden" name="comment_post_ID" id="hidden" value="">
</div>
</form>
<script type="text/javascript">
//<![CDATA[
new Axent.SelfLabeledInput('#commentform label');
//]]>
</script>
I want to write a function from this script such that when I press the submit on this form, and an input field is focused, it hides/clears it, so it doesn't get submitted to the database.
This works with the latest Prototype lib. I don't know any JavaScript, so I need your help. I'm using this form for my WordPress comments area.
I finally got it to work! Here's the final code if someone else wants to run it:
if (Object.isUndefined(Axent)) { var Axent = { } }
Axent.SelfLabeledInput = Class.create({
initialize: function() {
var labelSelector = arguments[0] || 'label';
$$(labelSelector).findAll(function(l) {return (l.readAttribute('for') !== null)}).each(function(l){
l.hide();
var el = $(l.readAttribute('for'));
el._value = l.innerHTML;
if (el.value.empty()) {
el.value = el._value
}
el.observe('blur',function(e){if(Event.element(e).value == '') Event.element(e).value = Event.element(e)._value;});
el.observe('focus',function(e){if(Event.element(e).value == Event.element(e)._value) Event.element(e).value = '';});
$(el.form).observe( 'submit', (function(thisel) { return function(e) {
if( thisel.value == thisel._value ) { thisel.value = '' }
}})(el));
});
}});
You don't have to worry, labels won't get submitted.
This script will remove the labels from the DOM on submit tho. It has to be run after the DOM is loaded (well, at least the form) and if your form elements are inside the labels they will disappear too!
document.getElementById( 'commentform' ).onsubmit = function() {
var labels = this.getElementsByTagName( 'label' );
while( labels[0] ) {
labels[0].parentNode.removeChild( labels[0] );
}
return true;
}
This is not a prototype script. It's Plain Old Javascript.
The elements are pre-filled with the label text. On focus the default text disappears and reappears on blur if the element is still empty.
You could try this. I don't use prototype, so it's a guess in places.
if (Object.isUndefined(Axent)) { var Axent = { } }
Axent.SelfLabeledInput = Class.create({
initialize: function() {
var labelSelector = arguments[0] || 'label';
$$(labelSelector).findAll(function(l) {return (l.readAttribute('for') !== null)}).each(function(l){
l.hide();
var el = $(l.readAttribute('for'));
el._value = l.innerHTML;
if (el.value.empty()) {
el.value = el._value
}
el.observe('blur',function(e){if(Event.element(e).value == '') Event.element(e).value = Event.element(e)._value;});
el.observe('focus',function(e){if(Event.element(e).value == Event.element(e)._value) Event.element(e).value = '';});
$(el.form).observe( 'submit', (function(thisel) { return function(e) {
if( thisel.value == thisel._value ) { thisel.value = '' }
}})(el));
});
}

Categories