It seems the onChange is still broken (refer to similar question here).
The onChange will fire however you cannot use event.target.value as the event.target is on a parent of the element with the value attribute. For example, I have something like this:
<ToggleButtonGroup type="radio" name="detect" defaultValue={1} onClick={event => this.onInputMethodChange(event.target)}>
<ToggleButton value={1}>Translate</ToggleButton>
<ToggleButton value={2}>Detect</ToggleButton>
</ToggleButtonGroup>
when I console.log(event.target) I get a label element but the value is on the input element.
<label>
<input value="2" >
</label>
Is there a way to get this input value? It's not ideal but I could at least work with it. Thanks!
Related
I want to do something seemingly simple in livewire. I want to set the value of a hidden input field based on an attribute from a button that's clicked. I can console.log the ID I'm looking for, and it works. I can see that the value of the input is updated in the UI, however, it's updated to what appears to be the Livewire hash or ID of the element. I just want the regular id. Am I doing this wrong?
here's the link that's clicked, and I want to put the $status->id into the hidden input:
<a role="button" id="task_status_{{ $status->id }}" class="add-task-btn"><i class="mdi mdi-plus-circle h5 text-muted" data-bs-toggle="modal" data-bs-target="#createOrUpdateTask"></i></a>
The input:
<input id="status_id_input" value="" hidden>
The js:
$('.add-task-btn').on('click', function(el) {
let status = el.currentTarget.id.split('_')[2];
$("input[id=status_id_input]").val(status);
});
Maybe I'm not thinking about this in a livewire-y way, but this is something I've done countless times in the past.
If I console.log the status I get a number, like 2, for example.
But when I look at the markup, the value of the input is like this:
wTz06yjQoQErKT3p36EKP4zZwWjJgIsUOttX4URL
I was wanting to do this without a round-trip to the server since it's just a simple thing.
Change your code from this
<input id="status_id_input" value="" hidden>
To this
<input id="status_id_input" value="yourvalue" type="hidden">
I have a list of similar looking DIVs without any Div ID, except one has a check box checked and others doesn't. What i need is to find the value from a child tag only if a radio button is selected.
Below is a simpler version of my code.
<div class = "XYZ">
<input type="radio" checked>
<input type="hidden" value="This is a great thing 1">
</div>
<div class = "XYZ">
<input type="radio">
<input type="hidden" value="This is a great thing 2">
</div>
Result needed is
This is a great thing 1
Unfortunately the source code cannot be changed.
Your xpath should look for a div that contains the checked input and to get the value for the one that has value attribute.
First selector returns the input, the second returns the value.
//div[.//input[#checked]]/input[#value]
//div[.//input[#checked]]/input/#value
As an alternative you can use the following sibling:
//input[#checked]/following-sibling::input
If you want to also use the class of the parent div:
//div[#class='XYZ']/input[#checked]/following-sibling::input
I'm trying to validate that a radio button has been selected via server side in ColdFusion. The text input errors out if empty, however, the radio button group does not trigger an error if none are selected. I cannot seem to find any documentation on this.
<cfform name="mobile_device_request" id="form" action="">
Text Box:
<cfinput type="Text" name="subscriber" message="Please enter in a subscriber" required="yes" validateat="onserver">
Subscriber:
<cfinput type="Radio" name="service_provider" value="AT&T" required="yes" validateat="onserver"><span class="label">AT&T</span>
<cfinput type="Radio" name="service_provider" value="Sprint" required="yes" validateat="onserver"><span class="label">Sprint</span>
<cfinput type="Radio" name="service_provider" value="Verizon" required="yes" validateat="onserver"><span class="label">Verizon</span>
Explanation:
To answer your question, while I have never used that feature, I would say it is a bug.
According to the documentation onServer validation works by automatically appending hidden form fields with a special naming convention. The CF server then inspects all requests for certain patterns in form field names, such as ones ending in _required or _cfformrequired, and if found performs validation on the related field.
If you view the source of your cfform, notice CF has added several hidden fields:
<input type='hidden' name='subscriber_CFFORMREQUIRED' value='Please enter in a subscriber'>
<input type='hidden' name='service_provider_CFFORMREQUIRED' value='Error in service_provider text.'>
<input type='hidden' name='service_provider_CFFORMREQUIRED' value='Error in service_provider text.'>
<input type='hidden' name='service_provider_CFFORMREQUIRED' value='Error in service_provider text.'>
Those should trigger CF's server side validation for both fields. However, as you discovered it only works with the text field, not the radio buttons. Though curiously, it works just fine if you manually add a hidden field ending in _required:
<input type="hidden" name="service_provider_required"
value='You forgot to select a service_provider'>
Answer:
Again, I think the behavior you are seeing may be a bug. Frankly, one of many with cfform. Personally, I would recommend ditching cfform/cfinput. Use plain html inputs and write your own validation instead. Since it is a radio button, the field will only be defined if one of the buttons was checked. So you can either test for the existence of the field:
<cfif NOT structKeyExists(FORM, "service_provider")>
no service_provider selected. do something
</cfif>
... OR assign a default, and test for that value:
<!--- default to empty string --->
<cfparam name="FORM.service_provider" default="">
<cfif NOT len(FORM.service_provider)>
no service_provider selected. do something
</cfif>
I have this simple kendo-template script:
<!-- popup editor template -->
<script id="userEditor" type="text/x-kendo-template">
<div id="popServerErrorSummaryPlaceholder" style="display:none"></div>
<div class="control-row">
<label class="span2" for="FirstName">Vorname</label>
<input Id="FirstName" class="span4" data-bind="value:FirstName" maxlength="50" name="FirstName" required="true" type="text" />
<span class="k-invalid-msg" data-for="FirstName"></span>
</div>
<div class="control-row">
<label class="span2" for="LastName">Nachname</label>
<input Id="LastName" class="span4" data-bind="value:LastName" maxlength="50" name="LastName" required="true" type="text" />
<span class="k-invalid-msg" data-for="LastName"></span>
</div>
</script>
Which is used while editing a single row within the Kend-UI grid.
I have got right now two issues:
a) The documentation states that I can control the position for validation messages via a "span" element that has a class "k-invalid-msg".
The behaviour right now is that this span Element gets replaced with a div element and it is positioned below the label element. I would like to get the message next to the input.
b) The validation is triggered immediately when the pop up is displayed.The validation should be trigger either when leaving the input or clicking the "update" button.
Someone out there who can help me here?
Things I am not quite sure how to handle:
c) Some validations are performed at the server. I get them back to the browser via the DataSource error event (custom JSON which is basically a list of field name and associated error messages). I would like to display the error messages within the validation span. I can create custom validation rules as documented here.
How do I get the validator that is associated with the pop up editor window? Or is there foreach input a validator created?
Anyone did this before?
Thanks for any help!
Updates:
regarding to point a)
OnaBai pointed me to the right direction. Thanks for that.
I have a problem with checkbox. I have a list of checkbox, and I want to mark only one check and unmark other.
I want do that this in the same view , is it posible?
How can I do that?
<div><input type="checkbox" id="<%= id %>" onchange='submit();'/> </div>
thanks
Sounds like you really need a radio button instead. Radio buttons are mutually exclusive if you give them the same name:
<input type="radio" name="something" ... />
<input type="radio" name="something" ... />
If you really want checkboxes you will have to write some JavaScript logic.
Use radio buttons, not checkboxes.
<div>
foreach (var foo in model.Foos) {
<input type="radio" name="foo" id="foo_#foo.Id" value="#foo.Id" />
<label for="foo_#foo.Id">#foo.Value</label> <br />
}
</div>
Something like that should create a list of radio buttons.
Also, why are you submitting when the selection is changed? You should be using jQuery to do any selection-based manipulation to the page on the client side.
You could use jQuery. on document.Ready you'll have to bind a change event on checkboxes to some function, then in your function you want to reset all other checkboxes. That's assuming you don't want to use radio buttons as suggested above.