I have a static submit button on my web page.
I make an AJAX call which generates a list of radio buttons. The number of radio buttons is random, all depends on the number of items in a JSON object.
I am wanting to validate that all of the generated radio buttons have been selected before making the submit button available.
Currently my HTML looks like this:
<div id="toDo" class="col-sm-6 text-center">
<div id="manualChecks" class="panel panel-default">
<div class="panel-heading text-center"><strong>Manual Check</strong</div>
</div>
<span class="input-group-btn">
<button type="submit" class="btn btn-primary">Submit</button>
</span>
</div>
My ajax reads a .JSON file and generates a list of checkboxes via the following javascript:
var ul = $('<ul class ="list-group text-left">');
$.each(item, function (key, value) {
var li = $('<li class="list-group-item">').append(
$('<input type="radio">' + value.Description + '</input>')
);
li.appendTo(ul);
});
$('#manualChecks').append(ul);
}
All of this works like a charm. I am just wanting to "validate" this dynamicaly generated form. I do not want to be able to press the Submit button until all of the auto generated radio buttons have been selected.
Begin with your button disabled
<button id="submitBtn" disabled="disabled" type="submit" class="btn btn-primary">Submit</button>
then when you're done checking that all the buttons are selected, remove the disabled attribute.
$('#submitBtn').removeAttr('disabled');
To check all the buttons are selected you'd need to write some logic for that. Just add a handler on the radio buttons to listen for when they are changed and then select them all and see if the number that are unchecked === 0.
Disable button before AJAX request starts.
delegate an event to the form to check for change events on radio buttons within the list.
var $submit = $('#submitBtn');
var $todo = $('#toDo');
$todo.on('change', 'input[type="radio"]', function (e) {
var unCheckedInputs = $todo.find('input[type="radio"]:not(:checked)');
if (unCheckedInputs.length === 0) {
$submit.prop('disabled', false);
}
});
Side note your inputs are malformed. you are generating code that looks like this
<input type="radio">Some Label</input>
What you want to be making is something like
<label>
Some Label
<input type="radio" value="" />
</label>
Inputs are self closing tags and normally do not wrap text values.
Related
I have yet another question concerning this project but here's hoping ill learn a lot from it.
So I created a function, that creates a div inside a div (which will then contain a random number from dice roll) and it works when I add this function to a button click.
But clicking the button multiple times might not be ideal for a lot of dice, so I created a form and it shouldnt create the number of divs the user decides he wants, but it doesnt seem to work. I suspect it has to do with the form refreshing the page, so instead of handling the even withh addEventListener I used inline "onsumbit" and tried to return the function but it still doesnt seem to work. What am i doing wrong? Here is the HTML and JS bits:
<form>
<p>Pick how many dice you want to roll:</p>
<input id="diceNumber" type="number" name="diceNumber" onsubmit="return addMoreDice()">
</form>
<button onclick="addDice()">Add Dice</button>
<div id="diceTable">
</div>
and JS:
var numInput = document.querySelector("input");
function addDice(){
var div = document.createElement('div');
div.className = "diceStyle";
div.innerHTML = "<p> here will be a dice</p>";
document.getElementById('diceTable').appendChild(div);
};
function addMoreDice(){
for(var i = 0; i < numInput; i++){
addDice();
}
}
1.You should probably include onsubmit() in form tag and add a submit button inside form.
You can use onchange() method to invoke addMoreDice() whenever the value in input box is changed
you need to add onsubmit="yourfunction()" in side form tag
and than put an input type submit inside form tag like
<form action="#" onsubmit="addDice()">
<p>Pick how many dice you want to roll:</p>
<input id="diceNumber" type="number" name="diceNumber" onsubmit="return addMoreDice()">
<input type="submit" value="Submit">
</form>
<button onclick="addDice()">Add Dice</button>
<div id="diceTable">
</div>
Each time you submit a form, it gets you to a different page. Instead you could have this code as shown below, (remove form tags)
<p>Pick how many dice you want to roll:</p>
<input id="diceNumber" type="number" name="diceNumber"></input>
<input type="submit" onClick="addMoreDice()">
Clicking on submit after entering the input dynamically creates divisions per your need.
I have a form with a hidden input:
<input type="hidden" name="productID" id="productID" value="">
I have a hidden Alert (using Bootstrap for this):
<div id="alert_ajax_error" class="alert alert-danger text-center" role="alert" style="display:none">
You have not made a selection. Please select an Item and try again
</div>
<div class="text-center">
<button type="submit" name="buttonType" value="saveSelected" class="btn btn-success">Submit</button>
</div>
The hidden form input is populated via another script when users select from a table - it adds the productID as the value of the input.
I would now like to add some client side validation (have server side validation in place) so that if the user clicks Submit it checks to see if they have made a selection by checking for the presence of the hidden input to see if it has a value - if it is empty it will then show the hidden alert:
$("#alert_ajax_error").show();
I'm not sure if it's possible to check a hidden input with Javascript/JQuery and how to go about this if it is possible.
Basically you will want to check the value on submit using an if statement
$("form").submit(function(event) {
event.preventDefault();
if($('#productID').val() == '') {
$("#alert_ajax_error").show();
return false;
}
//.... more form actions if good ....
});
i am using bootstrap button-group checkbox with toggle. To easily identify selected option, using the toggle function (courtesy - one of the post here). Working example here.
<div class="form-group">
<label class="sr-only" for="Test">Boxes</label>
<div class="controls" name="Test">
<div class="btn-group" data-toggle="buttons-checkbox">
<div class="btn btn-default" class-toggle="btn-info">AA</div>
<div class="btn btn-default" class-toggle="btn-info">BB</div>
<div class="btn btn-default" class-toggle="btn-info">CC</div>
</div>
</div>
</div>
stumped with:
1) how to validate that user has to select at least 1 button and
2) how to capture value(s) of selected buttons to be sent to PHP (form).
very novice with web development. Need help. Thanks.
Suppose you have three buttons as shown below:
<input type="button" class="button" value="Button1">
<input type="button" class="button" value="Button2">
<input type="button" class="button" value="Button3">
You can make a hidden field there with an array as given below:
<input type="hidden" class="newField" name="buttonValue[]">
Now, use it in Jquery:
$(document).ready(function(){
$('.button').click(function(){
var values = $(this).val();
$('.hidden').val(values);
});
});
and now when you submit a form then you can easily get value from that field and make a validation accordingly.
there is many ways to do this if you want to submit a form with PHP than its very simple you can add a class and use a hidden fields on the click you can add a class and put a value on hidden field and after the submit you can easily get all the value form hidden fields. you can easily check value of hidden fields, so with this you can validate as well that user select any button or not..
I am using Twitter Bootstrap's Javascript radio toggle buttons and want to get form input based on the state of the toggle.
The simplest approach I could find is to add an invisible tag within the buttons -- here's the helpful jsFiddle example that someone threw up.
It works nicely, but it's still sort of a kludge. My question is: what's the clean way to get form input from these buttons, i.e. without the extra hidden radio inputs?
How about
$(this).children('input[name="is_private"]').val()
DEMO
I think I misread your question the first time... You can create a hidden form element (you need it to access the value when you submit the form unless you do AJAX) and use JS to set its value.
HTML
<input type="hidden" name="status" id="status" value="" />
JS
$('div.btn-group button').click(function(){
$("#status").attr('value', $(this).attr('id'));
})
DEMO
Actually you can avoid the html input element and the css using the index() function like this:
$('div.btn-group .btn').click(function(){
if ($(this).index() != $('div.btn-group .btn.active').index()){
alert($(this).index());
}
});
I also added a condition to not get the alert if the active button is already selected.
A solution that works well with plain form POST as well as AJAX is to have a hidden input field that represents the current state of the button group. You can then handle all these button groups the same using the following markup structure:
<form>
<div id="test-group" class="btn-group" data-toggle="buttons-radio" data-toggle-name="testOption">
<input type="hidden" name="testOption"/>
<button type="button" class="btn" data-toggle-value="one">One</button>
<button type="button" class="btn" data-toggle-value="two">Two</button>
</div>
</form>
And the following Javascript to setup any button groups on a page:
$(function () {
$('div.btn-group[data-toggle-name]').each(function () {
var group = $(this);
var form = group.parents('form').eq(0);
var name = group.attr('data-toggle-name');
var hidden = $('input[name="' + name + '"]', form);
$('button', group).each(function () {
$(this).on('click', function () {
hidden.val($(this).data("toggle-value"));
});
});
});
});
Try it out on jsFiddle
I have the below piece of code
<input type="text" />
<button> Submit </button>
Now, when the user types some input and clicks on the submit button, I want the input text to become non-editable but the text should still be there.Also, the submit button should dissapear. Moreover, below the input text box, i want to creat another input text with the similar to the original one with a submit button. So, this is somethings like a commenting system. Any idea on how to do this using javascript.
A very simple way to do this is below. For unobtrusive Javascript, however, you should bind the onclick event to the button programmatically. Or better yet, use jQuery, which always abstracts events, which is why we love it so.
<script>
function disableInput() {
document.getElementById("foo").disabled = true;
document.getElementById("bar").style.display = "none";
}
</script>
<input id="foo" type="text" value="Some Text" />
<button id="bar" onclick="disableInput();"> Submit </button>
Try this solution at jsFiddle
If you will be duplicating content be sure to remove id's. They must be unique per page. Here is the html:
<p class="comment">
<input type="text" value="Initial Text" />
<button>Submit</button>
</p>
Using jQuery we bind to all future buttons using live. When the button is clicked, clone the row, disable the field, and remove the button. Finally re-insert the cloned paragraph after this one:
// Execute when document is ready
$(function() {
// Bind click handler to all current and future button elements
$('.comment button').live('click', function() {
// Find the paragraph this button is in and clone it
var p = $(this).closest('p'),
row = p.clone();
// Disable text field
$(this).prev().attr('disabled',true);
// Hide submit button for this row
$(this).hide();
// Insert a new field/button pair below this one
p.after(row);
});
});
<input type="text" />
<button> Submit </button>
$('button').click(function() {
$(this).hide();
$('input').prop('disabled', true);
})
Example