Pass a field in required when a radio button value is clicked - javascript

Basically I am using react hook form, I want to trigger a field to be required if I click a specific value in my radio button. Obviously it is dynamic so there could be anything in the radio button. I want to get the selected value from the radio and then depending on the selected value trigger another field to be required.
I have no clue on how to do it with react hook form; mayne someone has come across the same issue and have an example to show me

you can use validate function from react hook form
<input
{...register("test", {
validate:{ required: value => getValues().radioBtn }
})}
/>

You can follow these steps:
trigger a function once your desired radio button was clicked.
get hew value How to get value from radio button
set the attribute 'required' to true 'Required' attribute
let me know if that helps you

Related

react-final-form: how to submit per change in fields without button?

I have a text field, dropdown, date picker, and etc. My form won't have a save button so I don't have any type of "submit". For text field, I want the onSubmit to trigger to happen when the user enters enter button. For dropdown and date picker, it would call onSubmit when a user picks a different value aka onChange. It seems like you need a button or something of type submit to trigger onSubmit but it's not like I can put two types per Field. Any ideas on how I can trigger submit per field without any clicking any buttons?
here is a sandbox where I tried to trigger onSubmit per field.
https://codesandbox.io/s/react-final-form-external-submit-button-forked-gz40r3
one of the parameters that is getting passed in the Form's render is a reference to "form". You can trigger form.submit() in onChange or pass it as a param to another function and call it within that function.

Form group validation is not working with custom created components

I have components which having some dropdown. Once the dropdown is get selected a custom component is loaded and which contains a textbox.
For example, there is 3 controls on one page and the 4th textbox is get loaded form a separate component once the user selects a specific option from the dropdown.
How I disable my submit button if a 4th textbox is empty.
following is the HTML code for Custom component
<input class="form-control" type="text" value=""
[(ngModel)]="configurationData.sno" name="sno" required>
To disable a button you could use Angular attribute binding and pass a variable which holds the form valid state, as such:
<button [disabled]="!ValidForm">Click</button>
If the form is valid don't disable, if the form is invalid then add disable property to the button
Or using your input component we can pass the ngModel for that input, if the input is empty it will return an empty string which evaluates as false, if there is a value then it will evaluate as true:
<button [disabled]="!configurationData.sno">Click</button>
We use the '!' before your ngModel variable because we want to variable to turn off disabled property for 'false' or empty string.

Multiple autofocus on radio input select option

I'm using a Twitter Bootstrap 3 form with (4) Radio form controls. When a user clicks on any of the four radio controls, an <input type="text"> appears. How do I make it, so that the first input, on any radio option select is "autofocus".
To see code, if you may, please visit: https://von.host/cart.php?a=add&pid=20
It just seems silly to have the user click a radio button, than click again on the input field and type, than click once more on submit button...instead of three clicks, I wish to make it two.
p.s. - i added "autofocus" to all (4) input fields, but it only worked for the first one...of course ^ _ ^
I think, you can this only with a little part of javascript :) for example:
$('input[type="radio"]').focus(function(){
$(this).parent().find('input[type="text"]').focus();
});
In nutshell, this code pass the focus for the input field, when the radio give it.
Keep the autofocus attribute in the first one and use this jQuery code:
$('.domainoptions .option input:radio[name="domainoption"]').change(
function(){
$(this).parent().next().find('input[type="text"]').first().focus();
}
);

jquery - Autocomplete how to force select from list or user can type value from list and Submit form

I have a form in which have one autocomplete text field and submit button. on Autocomplete text I have below code which uses change event which basically empty out the text field if value is not part of the list, and on button- onSubmit i check if field is null or not, if its null then it displays error saying it can not be null. All these work fine if I type in text and click somewhere else except submit button and then click on button. for eg. if I type xyzxyx (which is not part of select list) on textbox and I click on submit button then it accepts whatever value is typed and takes it to next screen. It seems like on OnSbumit event is firing first before onChange of Autocomplete field, how do i resolve this?
$(#testBox).autocomplete(
{
soruce: url,
change:function(event,ui){
if(ui.item=null)
{
$(#testBox).val('');
alert("entered item is not part of the list");
}
}
In your if you have to use a double "=":
if(ui.item==null)
Check Below Jquery Tutorial :
https://forum.jquery.com/topic/jquery-validation-on-jquery-autocomplete

remove submit button with value , create onchange form

I need an onchange select to submit value 1 to a name. I sow some questions but I couldn't do it. like this
If you're looking to force the form to submit the value of 1 then I'd create a simple function that sets an input in the form to 1 (possibly hidden) and then submit it as per the link you provided.

Categories

Resources