validate and capture selected button-group checkbox - javascript

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..

Related

Check Hidden Form Input has Value on Form Submit

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

How to change display value of the Submit button on page load using jquery

I am new to JQuery and need suggestions on following requirement.
I have a form with a submit button as below. Page accepts locale as an input parameter. Depending on the value of locale, on page load I am populating the labels of the input fields in respective language using jQuery.i18n.properties.js plug-in, but I could not update the display value of the button.
Please suggest solution or if there is another way to achieve this.
HTML code:
<input type="submit" data-inline="true" id="submit" value="Submit"/>
Have tried below jQuery options to update the button label:
$("#submit").val($.i18n.prop('submit'));
$("#submit").html($.i18n.prop('submit'));
$("#submit").prop('value',($.i18n.prop('submit')));
$("#submit").text($.i18n.prop('submit'));
None of them worked. But I see the value gets updated as below in Developer tools window, for this button.
<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">
Submit
<input type="submit" id="submit" value="New Text">
</div>
Try $("#submit")[0].value = $.i18n.prop('submit');. Does that work for you?
(Even though it's a JS workaround, not a JQuery solution)
If your button is an input tag, use the jQuery val:
function changeBtnText() {
$("#submit").val("My new button text");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" id="submit" value="My button">
<button type="button" onclick="changeBtnText()">Change button text</button>
If your button is a button tag, use the jQuery text (or html):
function changeBtnText() {
$("#submit").text("My new button text");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" id="submit">My button</button>
<button type="button" onclick="changeBtnText()">Change button text</button>
Note: I recommend giving your button an ID different from "submit" to avoid confusion.

How to stop changing text inside textbox with same ng-model

I have more forms like this:
<form ng-submit="addReply(x)" class="dd animated slideInDown" >
<div class="form-group">
<text-angular ng-model="form.reply"></text-angular>
</div>
<div class="form-group">
<input type="submit" class="btn btn-default pull-right" value="Send" />
</div>
</form>
Have problem with text area because of ng-model="form.reply" when I change some textarea all other text areas are automatically changed... How to prevent it?
Here is example:
http://jsfiddle.net/oLv61qtr/
I just need change one not both...
The answer is: You can't do it.
If you have multiple text fields using the same model variable, they will always display the same value. At the end of the day it is the same variable, so how can it have different values in different places?
Use different model variable on different forms if you need. That seems like the best solution.

Disable button until AJAX generated radio buttons have been selected

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.

Using two buttons (submit button and a normal button) which should submit the same form differently

I have used jquery wizard plugin to create this form.
The form get submitted when I use the ID = "next" submit button.
when I use the ID = "quick" button it will redirect to the Feedback.Form but it will not submitted properly. (I cant see the db has been updated properly.)
$j("#quick").click(function(){
$j('#feedbackForm').submit();
});
<form id="feedbackForm" method="post" action="<openmrs:contextPath/>/module/feedback/addFeedback.form" class="bbq" enctype="multipart/form-data" >
<div id="bottomNavigation">
<input id="back" value="Back" type="reset" />
<input id="next" value="Next" type="submit" />
<input id="quick" value="Just submit now with all the defaults!" type="button" />
</div>
Please can any one help me on this?
Thanks,
Harsha
Full source : https://gist.github.com/3227043
Convert the "next" button to normal button and add and if or switch selection into the jquery code. So both buttons were normal and Jquery will decide which ones takes to submit getting the name of the button who calls the click event. Or you can do it trough a javascript function, well, you can do it in any way as you want, but both buttons must be "button" type

Categories