Using Bootstrap 3 the following code is used for a Radio Group. This displays as a set of buttons that when checked set the button to the active state. (append the class .active)
HTML
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1">Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2">Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3">Option 3
</label>
Normal function in "checked" is the appended active class
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1">Option 1
</label>
When Kendo.all.web.js is used - all classes EXCEPT the active are stripped. Making the button change into a checkbox
<label class="active">
<input type="radio" name="options" id="option1">Option 1
</label>
How can this be corrected? I can't see anywhere where the code is coming from that is doing this.
Related
I have created a form that uses formsubmit.co to forward the message to my email account. When I tested it on my local computer using VS Code and Live Server it worked flawlessly. After I uploaded to the web it only partially works. I get the message data but lose the name and email data. Formsubmit activated successfully in both cases.
Here is my code:
<form
action="https://formsubmit.co/john.herring#hrtinspection.ca"
method="POST"
>
<div class="input-group">
<input name="name" type="text" id="name" required />
<label for="name"><i class="fa-solid fa-user"></i> Name: </label>
</div>
<div class="input-group">
<input name="email" type="email" id="email" required />
<label for="email"
><i class="fa-solid fa-envelope"></i> Email:
</label>
</div>
<div class="input-group">
<textarea
name="message"
id="message"
cols="35"
rows="8"
required
></textarea>
<label for="message">
<i class="fa-solid fa-comment"></i> Details:
</label>
</div>
<button type="submit">
<i class="fa-sharp fa-solid fa-paper-plane"></i> Send
</button>
</form>
I have tried removing the icons, changing the order the attributes are listed in, and deleting and replacing the file on the server.
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
}
}
In my .nercore razor page project I have a number of forms with multiple onPost handlers - different buttons for different events (eg. add / copy / edit / delete)
My problem is - I do not understand how I can differentiate client-side validation depending on the button pressed.
EDIT
Let's assume, I have the following .cshtml which defines two input data fields and two buttons. By pressing one button (Add) the first Field A should be validated, by pressing the second (copy) - another one (Field B):
#page "{id:int}/{modeR:int}"
#model MyProject.Pages.MyProjectDB.AddRecordModel
#{
ViewData["Title"] = "Add Record";
}
<div class="row">
<div class="col-md-7">
<form method="post" enctype="multipart/form-data">
<div class="form-group">
<label asp-for="myClass.FieldA" class="control-label"></label>
<input asp-for="myClass.FieldA" class="form-control" />
<span asp-validation-for="myClass.FieldA" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="myClass.FieldB" class="control-label"></label>
<input asp-for="myClass.FieldB" class="form-control" />
<span asp-validation-for="myClass.FieldB" class="text-danger"></span>
</div>
<div class="form-group">
<button type="submit" value="Add" class="btn btn-success">Add Record)</button>
<button type="submit" value="Copy" class="btn btn-warning">Edit Record</button>
</div>
</form>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
at the end of my .cshtml page, but it runs always when onPost is called.
I need to run validation "in groups": for one button set of one fields and ignore others, for another - another set and so on like written above
Is there any way to achieve it without writing custom javascript or do it on server side?..
ANOTHER EDIT
The answer was provided for the case where we have clear separation of input fields / buttons. But how can we handle this if we have two input fields and one button. Validation should NOT be fire if either of them is filled in and should fire if both are null. I understand, this sounds a bit strange, but in my example I have one input field and one dropdown-list. So, either a field should be filled-in or an item should be selected from the list, but for code simplicity let's stay with two input fields (Filed A and Field B, one of them should be filled) and one button:
#page "{id:int}/{modeR:int}"
#model MyProject.Pages.MyProjectDB.AddRecordModel
#{
ViewData["Title"] = "Add Record";
}
<div class="row">
<div class="col-md-7">
<form method="post" enctype="multipart/form-data">
<div class="form-group">
<label asp-for="myClass.FieldA" class="control-label"></label>
<input asp-for="myClass.FieldA" class="form-control" />
<span asp-validation-for="myClass.FieldA" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="myClass.FieldB" class="control-label"></label>
<input asp-for="myClass.FieldB" class="form-control" />
<span asp-validation-for="myClass.FieldB" class="text-danger"></span>
</div>
<div class="form-group">
<button type="submit" value="Add" class="btn btn-success">Add Record)</button>
</div>
</form>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
Thanks in advance!
By pressing one button (Add) the first Field A should be validated, by pressing the second (copy) - another one (Field B) should be validated
You can try to put them in separate <form> and specify handler method via the asp-page-handler attribute, like below.
<h1>Go Add Handler</h1>
<form method="post">
<div class="form-group">
<label asp-for="myClass.FieldA" class="control-label"></label>
<input asp-for="myClass.FieldA" class="form-control" />
<span asp-validation-for="myClass.FieldA" class="text-danger"></span>
</div>
<div>
<button type="submit" value="Add" class="btn btn-success" asp-page-handler="Add">Add Record</button>
</div>
</form>
<hr />
<h1>Go Copy Handler</h1>
<form id="myform" method="post">
<div class="form-group">
<label asp-for="myClass.FieldB" class="control-label"></label>
<input asp-for="myClass.FieldB" class="form-control" />
<span asp-validation-for="myClass.FieldB" class="text-danger"></span>
</div>
<div>
<button type="submit" value="Copy" class="btn btn-warning" asp-page-handler="Copy">Edit Record</button>
</div>
</form>
#section scripts{
#await Html.PartialAsync("_ValidationScriptsPartial")
}
Test Result
I have a form in razor page with 2 button.
<form method="post" class="form-group ">
<div class="form-group col-md-3">
<div class="input-group">
<input asp-for="DoctorViewModel.NationalCode" class="form-control" type="text" maxlength="10" required onblur="">
<div class="input-group-append">
<button class="btn btn-outline-primary " asp-page-handler="GetInfo" >search</button>
</div>
</div>
<span asp-validation-for="DoctorViewModel.NationalCode"></span>
</div>
.
.
<div class="form-group col-md-2">
<label asp-for="DoctorViewModel.Name" class="col-form-label"></label>
<input asp-for="DoctorViewModel.Name" class="form-control" type="text" maxlength="50" required>
<span asp-validation-for="DoctorViewModel.Name"></span>
</div>
.
.
.
.
<input type="submit" class="btn btn-success" value="Save"/>
</form>
and when click on search button i wants to load form info from a handler.
but when click this button get validation error.
How i can disable validation check for only search button. in asp.net form i used CauseValidation=false.
To skip validation while still using a submit-button, you can try to add the attribute formnovalidate :
<button class="btn btn-outline-primary" formnovalidate asp-page-handler="GetInfo">search</button>
The default type for a button is to submit the form it is contained within in most browsers.
You simply need to add a type of button and this should stop the submit and therefore the automatic validation will not trigger.
<button class="btn btn-outline-primary " type="button" asp-page-handler="GetInfo" >search</button>
I have two forms with the same action, and submit button text. Only the text inside changes
<li>
<form name="login" method="post" action="">
<input name="returnURL" value="/cap/dashboard/home" type="hidden">
<input name="destURL" value="" type="hidden">
<button name="login" type="submit" class="btn-primary">
<span aria-hidden="true">Continuer</span>
</button>
<h2>textA</h2>
</form>
</li>
<li>
<form name="login" method="post" action="">
<input name="returnURL" value="/cap/dashboard/home" type="hidden">
<input name="destURL" value="" type="hidden">
<button name="login" type="submit" class="btn-primary">
<span aria-hidden="true">Continuer</span>
</button>
<h2>textB</h2>
</form>
</li>
How can I submit the right form ?
You can use form_node to search for css/xpath:
page.forms.find{|f| f.form_node.at('h2:contains("textB")')}
It wouldn't matter though, in your example both forms do the same thing.