Want to open new window after click on collapse area
Below is my code
function Example() {
const [open, setOpen] = useState(false);
return (
<>
<Button
onClick={() => setOpen(!open)}
aria-controls="example-collapse-text"
aria-expanded={open}
>
Click Me
</Button>
<Collapse in={open}>
<div id="example-collapse-text">
<InformationForm/>
</div>
</Collapse>
</>
);
}
And below is my form code, want to open Below form after click on Click me button,
function InformationForm() {
return (
<Form>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="Check me out" />
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
);
}
export default InformationForm;
After add below code, no form is open, am using react-bootstrap forms
Related
I need to save the value selected from the input as a boolean to the database. In this way, the other button I use registers as 0 1 in the yield database. How can I save true as false. Note: it saves false no matter what you choose to the database. It has not changed before or after this procedure.
"showinrow": $(".message_sh:checked").val(),
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" class="message_sh" name="options1" value="True"> True
</label>
<label class="btn btn-primary">
<input type="radio" class="message_sh" name="options1" value="False" checked=""> False
</label>
</div>
As i say in the comment you can compare value with the string 'True';
$(".message_sh:checked").val() === 'True
Demonstration
$('.submit').on('click', function(){
const isTrue = $(".message_sh:checked").val() === 'True'
if(isTrue){
alert('This is true')
}else{
alert('This is false')
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" class="message_sh" name="options1" value="True"> True
</label>
<label class="btn btn-primary">
<input type="radio" class="message_sh" name="options1" value="False" checked=""> False
</label>
<button class="submit">submit</button>
</div>
i am making a blog on Laravel and i am trying to redirect form to different url based on different button click . you can also refer my code
<form action="{{url('/storepost')}}" id="submitform" method="POST" enctype="multipart/form-data">
#csrf
<input type="text" name="blogtitle" placeholder="Enter the blog Title" class="form-control" >
<textarea class="form-control" id="editor" name="editor" rows="3"></textarea>
<button class="btn btn-success" type="submit">Publish</button>
<span><button class="btn btn-warning">Save as Draft</button></span>
</form>
as i have two buttons that is publish and save as draft and i want to redirect the form to different url based on button clicks , i don't understand how to do this .
can anybody help me out on this .
Thanks .
You can submit your form with a name and in the controller check for the name of the input.
<form action="{{url('/storepost')}}" id="submitform" method="POST" enctype="multipart/form-data">
#csrf
<input type="text" name="blogtitle" placeholder="Enter the blog Title" class="form-control" >
<textarea class="form-control" id="editor" name="editor" rows="3"></textarea>
<input class="btn btn-success" type="submit" value="publish" name="publish" />
<input class="btn btn-success" type="submit" value="Save as Draft" name="draft" /></span>
</form>
And in the controller check for the input:
Controller
if(\request()->has('draft')){
\\ Do draft
} else {
\\ Do publish
}
There is a way you could work around with it
you need to change your button tag to input:submit and add a name="type" for example
and in your backend, you could check this value
<form action="{{url('/storepost')}}" id="submitform" method="POST" enctype="multipart/form-data">
#csrf
<input type="text" name="blogtitle" placeholder="Enter the blog Title" class="form-control" >
<textarea class="form-control" id="editor" name="editor" rows="3"></textarea>
<input type="submit" class="btn btn-success" name="type" value="Publish">
<span><input type="submit" class="btn btn-warning" name="type" value="Save as Draft"></span>
</form>
after that in your controller, you could simply check the value like this
public function store(Request $request){
if($request->input('type') == 'Publish'){
// do something
} else {
// do another thing
}
}
I am trying to disable the form Submit button until the required fields are filled. However my code does not seem to be looping properly through the condition as any input enables the submit button. https://codepen.io/ldanneman/pen/MWyGJMx?editors=0010
<form>
<div class="form-box">
<label for="fname">First Name<span>*</span></label>
<input type="text" id="fname" name="First Name" placeholder="First Name" required><br>
<label for="lname">Last Name</label>
<input type="text" id="lname" name="Last Name" placeholder="Last Name"><br>
<label for="email">Email<span>*</span></label>
<input type="email" id="email" name="Email" placeholder="abc#client.com" required><br>
<label for="phone">Phone<span>*</span></label>
<input type="tel" id="phone" name="Phone" placeholder="111-222-3333" required><br>
<label for="comments">Comments<span>*</span></label>
<textarea id="comments" name="comments" placeholder="Comments" required></textarea><br>
<button class="submit" type="submit">Submit</button>
</div>
</form>
</div>
JavaScript:
let requiredInputs = document.querySelectorAll("[required]");
let submitButton = document.querySelector(".submit");
submitButton.disabled = true;
for(let i = 0; i < requiredInputs.length; i++){
requiredInputs[i].addEventListener("input", buttonState)
};
function buttonState() {
if (requiredInputs.value === "") {
submitButton.disabled = true;
} else {
submitButton.disabled = false;
}
}
You're close, but the code in your callback, buttonState() is insufficient to accomplish what you want. It is checking for the value of requiredInputs which is a collection of HTML Input elements. What you want to do is loop through each item in that collection and check if their value is set:
function buttonState() {
submitButton.disabled = Array.from(requiredInputs).some(x => x.value === '');
}
The code above will use some() which will returns true if any callback results in true, in the case if the value of an input is an empty string.
I'm using reactive form in angular 8, and have a gender toggle radio button.
The toggle radio button don't return the value of selected.
html code
<form id="sb-signup-form" method="post" novalidate="" [formGroup]="registerForm" (ngSubmit)="register($event)">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input id="male" type="radio" class="custom-control-input" value="male" name="gender" formControlName="gender"> Male
</label>
<label class="btn btn-primary">
<input id="female" type="radio" class="custom-control-input" value="female" name="gender" formControlName="gender"> Female
</label>
</div>
</form>
.ts code
registerForm: FormGroup;
ngOnInit() {
this.registerForm = this.formBuilder.group({
gender: ['male']
});
}
register(e) {
console.log(this.registerForm.value);
}
always the value of gender is 'male', which is the default value.
This is because of data-toggle="buttons", remove it you will see it work & add active class to label by writing a custom function.
Try Like this
In HTML file:
<form [formGroup]="form">
<label>
<input type="radio" value="Male" formControlName="gender">
<span>male</span>
</label>
<label>
<input type="radio" value="Female" formControlName="gender">
<span>female</span>
</label>
</form>
In the TS file:
form: FormGroup;
constructor(fb: FormBuilder) {
this.name = 'Angular2'
this.form = fb.group({
gender: ['', Validators.required]
});
}
Hi I am using verifyjs to validate my form. But I want to write some code on submit button click and if form validate, I never want to submit form, I am just using 'form' for validation.
$('form').valid() is not valid, how can i validate my form on button click?
So;
<form>
<input type="text" data-validate="number" />
<input type="radio" name="a" value="asd" data-validate="required" />
<input type="radio" name="a" value="asd1" data-validate="required" />
<input type="radio" name="a" value="asd2" data-validate="required" />
<input type="button" value="submit" onclick="abc();" />
</form>
<script>
function abc() {
if ($('form').valid()) { // like this. But valid() is not working in verifyjs.
alert('ok');
}
}
Try $("#my-form").validate(...) for complete form or
$("#my-text-input").validate(...) for inputs