How to click checkbox:
<div class="form-row in-focus-or-has-value">
<input type="checkbox" id="agree_terms_conditions_agree">
<label for="agree_terms_conditions_agree">
I agree with Terms and Policy
</label>
</div>
tried like this:
const idAgreeTermsConditionsAgree = await $('#agree_terms_conditions_agree')
idAgreeTermsConditionsAgree.checked = true;
await idAgreeTermsConditionsAgree.click()
$('label[for="agree_terms_conditions_agree"]').click()
presses <a href="/terms">
Can't click on checkbox
const idAgreeTermsConditionsAgree = await $("label[for=\'agree_terms_conditions_agree\']")
await idAgreeTermsConditionsAgree.click({ x: -10 })
Related
I am trying to create a component with four options. The user is supposed to choose only one option. So if the user chooses another option, the previosluy selected ones should change to false. This is my code:
const riddles_ = [{
id:2,
options: ['A grandson','A daughter','A father','A nephew'],
state_: [false,false,false,false]
}]
function toggleToDo(o){
riddles_.state_ = [false,false,false,false]
riddles_.state_[o] = true
console.log(riddles_.state_)
}
return (
<div>
<input type="checkbox" id="check1" checked={riddles_.state_[0]} onClick={(o)=>toggleToDo(0)}/>
{riddles_.options[0]}
<div className='space'></div>
<input type="checkbox" id="check2" checked={riddles_.state_[1]} onClick={(o)=>toggleToDo(1)}/>
{riddles_.options[1]}
<div className='space'></div>
<input type="checkbox" id="check3" checked={riddles_.state_[2]} onClick={(o)=>toggleToDo(2)}/>
{riddles_.options[2]}
<div className='space'></div>
<input type="checkbox" id="check4" checked={riddles_.state_[3]} onClick={(o)=>toggleToDo(3)}/>
{riddles_.options[3]}
</div>
)
}
When the user clicks on a checkbox, it just turns true or false, and generates no change in the others. I know the riddles_.state_ array is changing but the checkbox don´t seem to be able to take its value.
Its a best practice to use set method frome useState hooks when u work with state, using react functional components.
Example :
const init_state = [false,false,false,false]
const [checked_state, setCheckedState] = useState(init_state);
function toggleToDo(o){
const current_state = [false,false,false,false]
current_state[o] = true;
setCheckedState(current_state);
}
return (
<div>
<input type="checkbox" checked={checked_state[0]} onClick={(o)=>toggleToDo(0)}/>
option1
<div className='space'></div>
<input type="checkbox" checked={checked_state[1]} onClick={(o)=>toggleToDo(1)}/>
option2
<div className='space'></div>
<input type="checkbox" checked={checked_state[2]} onClick={(o)=>toggleToDo(2)}/>
option3
<div className='space'></div>
<input type="checkbox" checked={checked_state[3]} onClick={(o)=>toggleToDo(3)}/>
option4
</div>
)
}
I have the following:
<div class="csv-radio-group">
<input type="radio" id="csv" name="export-type" ng-value="csv" ng-click="$ctrl.setExportType($event, 'csv')">
<label for="csv">csv</label>
</div>
<div class="qfx-radio-group">
<input type="radio" id="qfx" name="export-type" ng-value="qfx" ng-click="$ctrl.setExportType($event, 'qfx')">
<label for="qfx">qfx</label>
</div>
<div class="ofx-radio-group">
<input type="radio" id="ofx" name="export-type" ng-value="ofx" ng-click="$ctrl.setExportType($event, 'ofx')">
<label for="ofx">ofx</label>
</div>
with the following in my controller:
const setExportType = (event, type) => {
exportTypeSelection = type;
if(event){
event.stopPropagation();
}
console.log(exportTypeSelection);
console.log(event);
}
When I click on the csv button I see:
csv
MouseEvent {isTrusted: true, isDefaultPrevented: ƒ,
stopImmediatePropagation: ƒ, isImmediatePropagationStopped: ƒ,
screenX: 1628, …}
undefined
undefined
How come the radio buttons are firing twice and how can I fix this? I'm aware I can use ng-model but if I were to use ng-click how would this be done? Thanks!
I have one checkbox and one textbox, now when I check the checkbox and write text in textbox at that time checkbox value and textbox value is inserted, but when I am uncheck the checkbox and write the text in textbox at that time textbox value is not inserted in database.
Here is my code
I used enum value for checkbox and textbox
Here is the enum code
public enum ChassisJobTypeEnum
{
LinerChange = 1,
ChainSetChange = 2
}
Here is the view design code
<div class="form-group row">
<label class="col-sm-3 col-form-label">Change Linear</label>
<div class="col-sm-3">
<input type="checkbox" class="form-group" id="ChassisJob#((int)ChassisJobTypeEnum.LinerChange)_Checked" placeholder="" />
</div>
<div class="col-sm-3">
<input type="text" class="form-group" id="ChassisJob.#((int)ChassisJobTypeEnum.LinerChange)_OtherJob" placeholder="" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Change Chain Set</label>
<div class="col-sm-3">
<input type="checkbox" class="form-group" id="ChassisJob#((int)ChassisJobTypeEnum.ChainSetChange)_Checked" placeholder="" />
</div>
<div class="col-sm-3">
<input type="text" class="form-group" id="ChassisJob.#((int)ChassisJobTypeEnum.ChainSetChange)_OtherJob" placeholder="" />
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<button type="submit" class="btn btn-primary" id="submit-form">Submit</button>
</div>
</div>
Now, when submit the form at that time ajax is calling to the controller
$('form').submit(function (event) {
event.preventDefault();
var chassisJobs = [];
chassisJob = {
ChassisJobsTypeId: #((int)ChassisJobTypeEnum.LinerChange),
Checked: $("#ChassisJob#((int)ChassisJobTypeEnum.LinerChange)_Checked").prop('checked'),
OtherJob: document.getElementById("ChassisJob.#((int)ChassisJobTypeEnum.LinerChange)_OtherJob").value,
};
chassisJobs.push(chassisJob);
chassisJob = {
ChassisJobsTypeId: #((int)ChassisJobTypeEnum.ChainSetChange),
Checked: $("#ChassisJob#((int)ChassisJobTypeEnum.ChainSetChange)_Checked").prop('checked'),
OtherJob: document.getElementById("ChassisJob.#((int)ChassisJobTypeEnum.ChainSetChange)_OtherJob").value,
};
chassisJobs.push(chassisJob);
var serviceJobData = {
'Id': document.getElementById("Id").value,
'ChassisJob': chassisJobs
};
$.ajax({
type: "POST",
url: '/ServiceJob/AddUpdate',
data: serviceJobData,
dataType: "json",
success: function (data) {
if (data.success == true) {
alert("Data has been update successfully");
//RefreshTable();
location.reload(true);
// set focus on edit form
document.getElementById("service-job-list").scrollIntoView();
//reste form
var frm = document.getElementsByName('service-job-form')[0];
frm.reset();
}
else {
alert("Unable to insert data")
}
error: function (xhr, ajaxOptions, thrownError) {
alert('Failed to add Detail.');
}
});
});
Here is the controller in which the addupdate method is calling at submit button.
[HttpPost]
public IActionResult AddUpdate(ServiceJobModel model)
{
ServiceJob serviceJob = new ServiceJob();
bool iSInsertData = true;
var chassisJobs = _Db.ChassisJob.Where(x => x.ServiceJobId == model.Id).ToList();
if (chassisJobs.Any())
{
_Db.ChassisJob.RemoveRange(chassisJobs);
_Db.SaveChanges();
}
return Json(new { success = true });
}
Now, this is code which I tried.
For more clear, let see task image.
When I check the checkbox and enter the value in textbox at that time insert data properly and at the fetch time it shows the checkbox and textbox value properly.
now, when I uncheck the checkbox and enter the value in textbox at that time data is not inserted and at the fetch time it does not show any thing.
If you any issue to understand the question then feel free to ask.
I am stuck with strange issue. Actually I am fetching the data from ajax and showing it on text boxes.
So, basically I have 3 text box (City, City1, City2). By default City textbox is visible rest will show if they have data from Ajax.
User can add city by clicking + button or remove by click on - button.
I am able to fetch and show the data properly on textboxes.
But when I want to add/show City1 or City by clicking on + button. It is simply executing form submit event.
Here is code for Ajax call.
formApp.controller('getprofile', function($scope,$http){
$http({
url: 'get_job_city.php',
method: "GET",
params: {uid: uid}
})
.success(function(data) {
if (data.success) {
$scope.formData.city1 = data.city1;
$scope.formData.city = data.city;
$scope.formData.city2 = data.city2;
}
});
})
Code for form save and show hide city textboxes.
var formApp = angular.module('formApp', []);
formApp.controller('formProfile1', function($scope,$http){
$scope.secondcity1city1 = false;
$scope.thirdcity2 = false;
$scope.hidecity1 = function() { $scope.secondcity1 = false; }
$scope.hidecity2 = function() { $scope.thirdcity2 = false; }
$scope.showcity = function() { $scope.secondcity1 = true; }
$scope.showcity1 = function() { $scope.thirdcity2 = true; }
$scope.formData = {};
$scope.formprofile1 = function() {
$scope.ajaxload = true;
var allData={'formData': $scope.formData, 'uid': uid}
$http({
method : 'POST',
url : 'city_update_exec.php',
data : allData,
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers
})
.success(function(data) {
$scope.ajaxload = false;
if (!data.success) {
$scope.errorcity = data.errors.city;
$scope.errorcity1 = data.errors.city1;
$scope.errorcity2 = data.errors.city2;
}else{
alert('City has been updated.');
}
});
};
})
HTML codes are below.
<div class="container" ng-controller="formProfile1">
<form name="formProfile1" method="post" id="formProfile1"
ng-submit="formprofile1()" role="form">
<div ng-controller ="getprofile">
<div id="firstcity">
<div class="col-xs-10">
<div class="topjob_resumetitle" ng-class="{ 'has-error' : errorcity }">
<input name="city" id="city" type="text"
class="form-control textbox1 txt-auto"
required="required" placeholder="Job Location* "
ng-model="formData.city">
<div class = "errorba" ng-show="errorcity">{{errorcity}}
</div>
</div>
</div>
<div class="col-xs-2">
<!--<button class="remove" ng-click="removeChoice()">-</button>-->
</div>
<button class="addfields" ng-click="showcity()">+</button><br>
</div>
<div ng-show="secondcity1">
<div class="col-xs-9"><div class="topjob_resumetitle" ng-class="{ 'has-error' : errorcity1 }">
<input name="city1" id="city1" type="text"
class="form-control textbox1 txt-auto"
placeholder="Job Location* " ng-model="formData.city1">
<div class = "errorba" ng-show="errorcity">{{errorcity1}}
</div>
</div>
</div>
<div class="col-xs-3">
<button class="remove" ng-click="hidecity1()">-</button>
<button class="addfields" ng-click="showcity1()">+</button><br>
</div>
</div>
<div ng-show="thirdcity2">
<div class="col-xs-10"><div class="topjob_resumetitle"
ng-class="{ 'has-error' : errorcity2 }">
<input name="city2" id="city2" type="text"
class="form-control textbox1 txt-auto"
placeholder="Job Location* "
ng-model="formData.city2">
<div class = "errorba" ng-show="errorcity2">{{errorcity2}}
</div>
</div>
</div>
<div class="col-xs-2">
<button class="remove" ng-click="hidecity2()">-</button>
</div>
More text boxes are here
</div>
The problem is that you have not set a type for your buttons, and therefore are defaulting to submit types, which will submit the first parent form found in the DOM when clicked. To allow your custom click handlers to execute properly, change your button types to "button" like so:
<button type="button" class="addfields" ng-click="showcity()">+</button><br>
Remove method="post" and add novalidate on form tag it will stop html5 validation
<form name="formProfile1" novalidate id="formProfile1"
ng-submit="formprofile1()" role="form">
Also if its still not works then change all your button to
<input type="button">//for rest of the buttons
<input type="submit">//for submit button
To make an http request you don't need to use the separate controller. Use factory method in your code for ajax and inject it as a dependency in your controller. Refer Angular Factory method
I have a checkbox and a radio button group and I want to know if the checkbox is checked and which radio button is selected.
How do I do this in dart?
Let's say we have your HTML with something like this:
<form >
<input type="radio" name="gender" id="gender_male" value="male">Male<br>
<input type="radio" name="gender" id="gender_female" value="female">Female
</form>
<form>
<input type="checkbox" id="baconLover">I like bacon<br>
</form>
Your Dart code to obtain their values would be something like the following, I also added an event to know when the checkbox is clicked.
import 'dart:html';
void main() {
// Adds a click event when the checkbox is clicked
query("#baconLover").on.click.add((MouseEvent evt) {
InputElement baconCheckbox = evt.target;
if (baconCheckbox.checked) {
print("The user likes bacon");
} else {
print("The user does not like bacon");
}
});
// Adds a click event for each radio button in the group with name "gender"
queryAll('[name="gender"]').forEach((InputElement radioButton) {
radioButton.onclick.listen((e) {
InputElement clicked = e.target;
print("The user is ${clicked.value}");
});
});
}
I found this solution for radio button, where catch event by "html" ... I have used this solution into my project.
my_example.html
<polymer-element name="my-example">
<template>
<div on-change="{{updateRadios}}">
Your favorite color is:
<div>
<label for="red">Red <input name="color" type="radio" id="red" value="red"></label>
</div>
<div>
<label for="green">Green <input name="color" type="radio" id="green" value="green"></label>
</div>
<div>
<label for="blue">Blue <input name="color" type="radio" id="blue" value="blue"></label>
</div>
</div>
<div>
You selected {{favoriteColor}}
</div>
</template>
<script type="application/dart" src="my_example.dart"></script>
</polymer-element>
my_example.dart
import 'package:polymer/polymer.dart';
import 'dart:html';
#CustomTag('my-example')
class MyExample extends PolymerElement {
#observable String favoriteColor = '';
MyExample.created() : super.created();
void updateRadios(Event e, var detail, Node target) {
favoriteColor = (e.target as InputElement).value;
}
}