How can I check a radio box with applescript?
I've tried this but just get 'missing value'
do JavaScript "var elements = document.getElementsByName('radiobs');
for (i=0;i<elements.length;i++) {
if(elements[i].value == 'Help') {
elements[i].checked = true;
}
}" in document 1
Here's the radio box:
<input name="radiobs" id="radiobs" type="radio" value="No help">
<input name="radiobs" id="radiobs" type="radio" value="Help">
<input name="radiobs" id="radiobs" type="radio" value="Some help">
The way to call Javascript is different in Chrome:
tell application "Google Chrome"
tell window 1
execute tab (active tab index) javascript "var elements = document.getElementsByName('radiobs');
for (i=0;i<elements.length;i++) {
if(elements[i].value == 'Help') {
elements[i].checked = true;
}
}"
end tell
end tell
Related
I am having trouble using a Confirm pop-up when a user clicks a button.
Use-case #1: On Update button, require confirmation when form fields meet certain conditions. (See formSubmit() function.) Currently, when a user clicks the Update button, it successfully executes the "games/update" action (a Laravel route) as specified in the Form tag. I just can't get the function to fire.
Use-case #2: On Delete button, Require confirmation. (See formDelete() function.) Currently, when a user clicks the Delete button, it successfully executes the "games/delete" action (a Laravel route) as specified in the Delete button. Again, I just can't get the function to fire.
Form HTML:
<form method="post" action="/games/update" enctype="multipart/form-data">
<select id="status" class="form-control" name="status" required>
<option value="FINAL" selected>Final Score</option>
<option value="POSTPONED">Postponed</option>
<option value="OTHER">Not Final</option>
</select>
<input type="number" name="awayScore" id="awayScore" class="form-control" required/>
<input type="number" name="homeScore" id="homeScore" class="form-control" required/>
<button type="submit" id="updateBtn" onClick="formSubmit()" class="btn btn-primary pull-left">Update Game</button>
<button type="submit" id="deleteBtn" onClick="formDelete()" formaction="/games/delete" class="btn btn-danger pull-right">Delete Game</button>
</form>
Javascript:
<script>
function formSubmit() {
var status = document.getElementById('status').value;
var awayScore = document.getElementById('awayScore').value;
var homeScore = document.getElementById('homeScore').value;
if(awayScore == 0 && homeScore == 0 and status = 'FINAL') {
return confirm("You have entered a FINAL SCORE of 0-0. If this is correct, click OK. If not, click Cancel and update the Status / Score.");
}
else
{
return true;
}
}
function formDelete() {
return confirm("Are you sure you want to delete this game?");
}
</script>
Get the result once you click the button from confirm dialog.
var result = confirm("Are you sure you want to delete this game?");
if (result) {
//Logic goes here
}
Also check this: https://sweetalert2.github.io/ you can have customizable popup based on your need.
SOLVED!
First, instead of using an "onclick" on the BUTTON, I needed an "onsubmit" on the FORM tag (per my comment on the opening post).
And second, since I wanted the DELETE button to always fire a Confirm message but the UPDATE button to only fire a Confirm message in certain situations, I just separated the Delete button into its own form (since the form input fields were not relevant if user was deleting the record).
HTML:
<form method="post" action="/games/update" onsubmit="return validateForm()" enctype="multipart/form-data">
... all form fields ...
<button type="submit" id="updateBtn" class="btn btn-primary pull-left">Update Game</button>
</form>
<form method="post" action="/games/delete" onsubmit="return confirm('Are you sure you want to delete this game?');" enctype="multipart/form-data">
<button type="submit" id="deleteBtn" class="btn btn-danger pull-right">Delete Game</button>
</form>
Javascript:
function validateForm() {
var status = document.getElementById('status').value;
var awayScore = document.getElementById('awayScore').value;
var homeScore = document.getElementById('homeScore').value;
if(awayScore == 0 && homeScore == 0 && status == 'FINAL') {
var result = confirm("You have entered a FINAL SCORE of 0-0. If this is correct, click OK. If not, click Cancel and update the Status / Score.");
if (result) {
return true;
}
else {
return false;
}
}
else
{
return true;
}
}
I tried that a hundred ways, and it would never fire my function (onsubmit="validateForm()") but it would fire a simple return (onsubmit="return confirm('message')"). Finally, I found that the reason it was not firing my function is because I had a syntax problem in my function's IF statement, which must have been causing the entire function to be invalid. So I changed it:
From:
if(awayScore == 0 && homeScore == 0 and status = 'FINAL') {
To:
if(awayScore == 0 && homeScore == 0 && status == 'FINAL') {
I also found that a simple "return confirm('message');" did not work. I had to store the results of the Confirm message and then return true/false.
<table class="table">
<tr>
<td>
<input type="radio" id="radio1" name="1" checked="checked" class="radio"/>
</td>
<td>
<input type="radio" id="radio2" name="1" checked="checked" class="radio"/>
</td>
</tr>
</table>
I want to follow default behavior of radio group, but with one more functionality, Suppose any of radio is selected, now if same radio is selected/clicked then it will unchecked itself. I have tried using 'mouseup' event but its not working
function radioSearchFn(obj)
{
if(obj.checked == true)
{
obj.checked = false;
obj.removeAttribute("checked");
}
}
DEMO
Answer to your question here.
Radio buttons are meant to be required, therefore one of them must always be checked. If you want this attribute gone, you need to use checkboxes, which are meant to serve what you need.
More about checkboxes
If you still insist on using radio buttons, try this JQuery code, written in another answer in the post I referred to.
var radio_button=false;
$('.radio-button').on("click", function(event){
var this_input=$(this);
if(this_input.attr('checked1')=='11')
{
this_input.attr('checked1','11')
}
else
{
this_input.attr('checked1','22')
}
$('.radio-button').prop('checked', false);
if(this_input.attr('checked1')=='11')
{
this_input.prop('checked', false);
this_input.attr('checked1','22')
}
else{
this_input.prop('checked', true);
this_input.attr('checked1','11')
}
});
It's easy, you could add an attribute instead radio button is checked first time. Later you check this new attribute for next change. Example:
$("input[type='radio']").change(function () {
$(this).attr('checked_status', true);
});
$("input[type='radio']").click(function () {
if ($(this).attr('checked_status')) {
$(this).prop('checked', false);
$(this).attr('checked_status', false);
}
});
I do not understand how I can validate a form with jquery validate to display the Submit button or not.
My javascript is as follows:
ko.bindingHandlers.jqValidate = {
init: function (element, valueAccessor, option) {
var element = element;
var validateOptions = {
ignore: [":hidden:not(required)"],
focusCleanup: true,
onsubmit: true
};
function displaySubmitButton() { // Remove/Add class to submit button
if ($('form').valid()) $('.toSave').show();
else $('.toSave').hide();
}
$('form').bind('onchange keyup onpaste', function (event, element) {
if ($('form').valid() === true && $(element).not('.resetForm')) $('.toSave').show();
else if ($(element).not('.resetForm')) $('.toSave').hide();
});
}
};
My form :
<ol class="MutColor13 mouseOver" data-bind="jqValidate: {}">
<li class="rightCol">
<strong>
<label for="iEmailReply"><asp:Literal runat="server" ID="lEmailReply" /></label>
</strong>
<input id="iEmailReply" name="EmailReply" type="text" tabindex="2"
class="MutColor13 email"
data-bind="value: communication.Message.ReplyEmail, valueUpdate: 'afterkeydown'"
required="required" />
</li>
<li class="leftCol">
<strong>
<label for="iEmailFrom"><asp:Literal runat="server" ID="lEmailFrom" /></label>
</strong>
<input id="iEmailFrom" name="EmailFrom" type="text" tabindex="1"
class="MutColor13 email"
data-bind="value: communication.Message.SenderEmail, valueUpdate: 'afterkeydown'"
required="required" />
</li>
<!-- and more form input -->
</ol>
My submit button :
<div class="buttonBlock rightButton" data-bind="fadeVisible: validateMessage()">
<a class="MutButton3 toSave" data-bind="click: saveMessage"><span class="MutButton3">submit</span></a>
</div>
when I type "$ ('form'). valid ()" in the firebug console, all error messages appear. I do not think the submit button is the problem because I have not clicked at this point
How do I enable the display of the error message from the input short change while allowing the display of the submit button if fields (and any other form fields in the page) if all fields are valid?
I was inspired by this question: jquery validate: IF form valid then show submit button
a working demo : http://jquery.bassistance.de/validate/demo/
but the button is displayed continuously
ok I think this could work:
http://jsfiddle.net/Ay972/10/
what I did :
$('form').bind('change oninput', function (event, element) {
console.log('formLive :: ', $(event));
if ($('form').valid() === true && $(element).not('.resetForm')) $('.toSave').show();
else if ($(element).not('.resetForm')) $('.toSave').hide();
});
the 'change oninput' seems to work.
I have a directive that sets a CSS class on a form element based on its $valid value. I want to use it with a radio button list. There a multiple radio buttons in the set but I only need to add the directive to one of them because a) they all control the same model and b) the CSS ultimately will reveal a single image tag which I only want once per radio button list.
Here's some HTML:
<div ng-app="myApp">
<input required type="radio" ng-model="type" name="typeGroup" value="type1">Type 1
<input add-validation-class required type="radio" ng-model="type" name="typeGroup" value="type2">Type 2
</div>
Script:
angular.module('myApp', []).directive('addValidationClass', function() {
return {
require: '^ngModel',
link: function($scope, $element, $attrs, $ngModel) {
if (!$ngModel) return;
var update = function () {
alert($ngModel.$dirty);
$element
.removeClass()
.addClass($ngModel.$dirty ? ($ngModel.$valid ? 'valid' : '') : '');
};
$scope.$watch($attrs.ngModel, function (newValue, oldValue) {
update();
});
}
};
});
Fiddle: http://jsfiddle.net/JqBgs/
You can see from the fiddle that the watch fires update regardless of the radio button clicked on. This is what I expected because both radio buttons control the same model. However you can also see that the left radio button isn't dirty. So the CSS class isn't applied.
Why isn't it dirty?
I put this in the HTML:
<div ng-app="myApp">
<input ng-change="myForm.validateRadio.$dirty = true" required type="radio" ng-model="type" name="typeGroup" value="type1">Type 1
<input name="validateRadio" add-validation-class required type="radio" ng-model="type" name="typeGroup" value="type2">Type 2
</div>
What a ridiculous bug in Angular.
<input id="#question.QuestionId" type="radio" value="#question.QuestionDescription" name="#string.Format("name_{0}", question.Group)" checked=#question.IsSelected"checked":false /> #question.QuestionDescription
Depending on the question.IsSelected value the checkbox should be selected or not selected.
But regardless of true or false of the IsSelected property Radiobutton is always checked. Can you point where the error in checked attribute please
If you give it anything for the checked attribute it will be set to checked. I would optionally add the entire checked='checked' value based on the IsSelected property, omitting it when the value is false.
<input id="#question.QuestionId" type="radio" value="#question.QuestionDescription" name="#string.Format("name_{0}", question.Group)" #(question.IsSelected?"checked='checked'":"") /> #question.QuestionDescription
You could do it like this
#{
string checkedAttribute = string.Empty;
if (question.IsSelected)
{
checkedAttribute = "checked=\"checked\"";
}
}
<input id="#question.QuestionId" type="radio" value="#question.QuestionDescription" name="#string.Format("name_{0}", question.Group)" #checkedAttribute/>