I am new to C# and .NET MVC. I have a View page with a radio button with two options, those are tied to a controller. When I try to add a new radiobutton by copying the radio button code in the View page, the newly added radiobuttons act like a continuation of the existing radiobuttons with the same input. I would like to differentate both radio buttons and use the input from the newly added radiobuttons elsewhere. Parts from my controller and Viewpage are below. Please ask me if you need more information.
Viewpage:
<div class="form-group">
<div class="control-label col-md-2"></div>
<div class="col-md-10">
<div class="clearfix">
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="1" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.locale</label>
</div>
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="2" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.foreign</label>
</div>
</div>
</div>
</div>
// ....
<div class="form-group">
<div class="control-label col-md-2"></div>
<div class="col-md-10">
<div class="clearfix">
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="3" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.locale</label>
</div>
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="4" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.foreign</label>
</div>
</div>
</div>
</div>
When I add the second radiobutton with values 3 and 4, I want it to be treated as a different input, not the same as the first radiobutton.
Can you help me with this?
Thanks!
You will need to give the second radio button a different name, so in the below code I have given it the name="radiobtn2"
<div class="clearfix">
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="1" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.locale</label>
</div>
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn2" value="2" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.foreign</label>
</div>
</div>
So within a form no two radio buttons should have the same name attribute if you want them to perform different actions.
I would also suggest reading id vs. name
Try this solution , it should fix your problem, it seems you are referring two different ratio buttons with same name radiobtn. that is causing issue.
Here i updated two radio buttons names like
<input type="radio" name="radiobtnFirst" value="3" class="clsradio" />
<input type="radio" name="radiobtnSecond" value="4" class="clsradio" />
Complete Form:
<div class="form-group">
<div class="control-label col-md-2"></div>
<div class="col-md-10">
<div class="clearfix">
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="1" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.locale</label>
</div>
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="2" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.foreign</label>
</div>
</div>
</div>
</div>
// ....
<div class="form-group">
<div class="control-label col-md-2"></div>
<div class="col-md-10">
<div class="clearfix">
<div class="pull-left inline-radio">
<input type="radio" name="radiobtnFirst" value="3" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.locale</label>
</div>
<div class="pull-left inline-radio">
<input type="radio" name="radiobtnSecond" value="4" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.foreign</label>
</div>
</div>
</div>
</div>
Related
I'm trying to change the size of inputs in a multiple-input row (Bootstrap 5). I can change the label size but not the two inputs next to it. I want one to be col-7 and the other col-1. But the two inputs stay the same in size (see screenshot).
Here is the code:
<div class="row">
<!-- left column -->
<div class="col-5">
<div class="input-group my-3">
<label class="col-4 col-form-label"><?php echo $label['client-name']; ?>: *</label>
<input type="text" class="form-control col-7" name="clientname" value="<?php echo (isset($clientname)? $clientname : ""); ?>" />
<input type="text" class="form-control col-1" name="clientID" value="<?php echo (isset($clientID)? $clientID : ""); ?>" />
</div>
you can use width for input text.use this code:
<div class="row">
<!-- left column -->
<div class="col-5">
<div class="input-group my-3">
<label class="col-form-label">
clientname:
</label>
<div class="d-flex">
<input type="text" class="form-control w-25" name="clientname"
value="" />
<input type="text" class="form-control " name="clientID"
value="" style="width: 10%;" />
</div>
</div>
</div>
You should put your label in a separated column giving it a width like I did here so that the label column always takes col-3 and the content column always takes col-9.
Then you can treat the content column as another row and split it in 7-2 (but the bootstrap canonic layout would expect 12 cols in total).
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-3">
<label class="col-4 col-form-label">Label</label>
</div>
<div class="col-9">
<div class="row input-group">
<div class="col-7">
<input
type="text"
class="form-control"
name="clientname" value="***" />
</div>
<div class="col-2">
<input
type="text"
class="form-control"
name="clientID"
value="***" />
</div>
</div>
</div>
</div>
I use SpringBoot, Thymeleaf.
I want to update the value only for part of form in update page.
<form id="form" class="needs-validation col-sm-6" th:action="#{'/user/edit/' + ${userInfo.id}}" th:object="${userInfo}" method="post" novalidate>
<input type="hidden" name="_method" value="put"/>
<input type="hidden" name="id" th:value="${userInfo.id}"/>
<div class="form-group">
<label for="name">Name</label>
<h4 id="name" th:text="${userInfo.name}" th:value="${userInfo.name}"></h4>
<input type="hidden" name="name" th:value="${userInfo.name}"/>
</div>
<hr>
<div class="form-group">
<label for="nickname">Nickname</label>
<input id="nickname" type="text" name="nickname" th:value="${userInfo.nickname}" placeholder="enter nickname" required minlength="2">
</div>
<hr>
<div class="form-group">
<label for="volunteerTime">Volunteer Time</label>
<span id="volunteerTime" th:text="${userInfo.volunteerTime}+'hour'" name="volunteerTime" th:value="${userInfo.volunteerTime}"></span>
<input type="text" size="5px" placeholder="hour"/>
<button type="button" name="action" value="plus" onclick="ajax()">plus</button>
<button type="button" name="action" value="minus" onclick="ajax()">minus</button>
</div>
<div class="form-group">
<input type="submit" value="update">
</div>
</form>
The "volunteerTime" section of the above code seeks to update and show values added to existing data according to the number entered.
The same goes for Minus.
I created a dropdown menu to log in instead of logging in at Login.cshtml but i can't seem to be able to use the model that contains the email password etc. I am not sure how to explain this but here is what i made so far:
I created the dropdown form and placed it in _LoginPartial.cshtml so it shows on the navbar
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Log-In
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="width: 300px" >
<!----------->
<div class="col-lg-12">
<div class="text-center">
<h3><b>Log In</b></h3></div>
<form id="ajax-login-form" method="post" role="form" autocomplete="off">
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="" autocomplete="off">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password" autocomplete="off">
</div>
<div class="form-group">
<div class="col-xs-5">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-danger" value="Log In">
</div>
</div>
<div class="col-xs-5" align="Center">
<input type="checkbox" tabindex="3" name="remember" id="remember">
<label for="remember"> Remember Me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<a tabindex="5" class="forgot-password">Forgot Password?</a>
</div>
</div>
</div>
</div>
</form>
</div>
and after this, i thought i can easily just insert #model loginmodel and i can start using that model but i'm met with so many errors. Any advice on how to do this? I am also open to other approaches too
I can't seem to align an input-group-addon correctly in an ASP.NET View.
<form asp-action="Create">
<div class="form-horizontal">
<h4>Category</h4>
<hr />
<div asp-validation-summary="ValidationSummary.ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Hex" class="col-md-2 control-label"></label>
<div class="col-md-10">
<div class="input-group">
<div class="input-group-addon"><i></i></div>
<input asp-for="Hex" class="form-control" value="" />
<span asp-validation-for="Hex" class="text-danger" />
</div>
</div>
</div>
<div class="form-group">
<label asp-for="CompanyId" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="CompanyId" asp-items="Model.Companies" class="form-control">
<option value="">--Please Select--</option>
</select>
</div>
</div>
<div class="form-group">
<label asp-for="Name" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
</form>
This looks fine in JSFiddle (after adding labels back in). But looks like this when I run the View:
If I swap the input-group-addon and the input the addon floats off to the right.
Could this be something to do with the way a child View is rendered by the _layout view?
Could this be something to do with the way a child View is rendered by the _layout view?
Yup. Especially with renderbody.
I have this in an MVC view
<form id="fileupload" action="#Url.Action("Save")" method="POST" enctype="multipart/form-data">
<div class="container">
<div class="row">
<div class="form-group">
<label for="datepicker1">Invoice Date</label>
<div class='bfh-datepicker' id='datepickerDiv'>
<input type='text' id="datepicker1" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="InvoiceNumberTB">Invoice Number</label>
<input type="text" class="form-control" id="InvoiceNumberTB" />
</div>
<div class="form-group">
<label for="NetAmountTB">Net Amount</label>
<input type="text" id="NetAmountTB" class="form-control text-right" placeholder="0.00" />
</div>
<div class="form-group">
<label for="TaxAmountTB">Sales Tax</label>
<input type="text" id="TaxAmountTB" class="form-control text-right" placeholder="0.00" />
</div>
<div class="form-group">
<label for="InvoiceTotalTB">Invoice Total</label>
<input type="text" id="InvoiceTotalTB" class="form-control text-right" placeholder="0.00" />
</div>
<div class="form-group">
<label for="InvoiceDescriptionTB">Description</label>
<input type="text" id="InvoiceDescriptionTB" class="form-control" />
</div>
<div class="form-group">
<label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label>
<span class="btn btn-success fileinput-button">
<span>Add File...</span>
<input type="file" id="DocumentUploadTB" class="form-control" />
</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-plus-sign"></span> Save</button>
</div>
</div>
</div>
But the label for the file upload is not formatting as I would have hoped (at the top of the field as the others) but looks like this
Could someone point me in the correct direction?
Thanks
Wrap the content after the label in a form-control-static div and lose the form-control class on the input:
<div class="form-group">
<label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label>
<div class="form-control-static">
<span class="btn btn-success fileinput-button">
<span>Add File...</span>
<input type="file" id="DocumentUploadTB" />
</span>
</div>
</div>
You want your btn span to display as a block element. Try adding a display: block; style to it, or use a simple bootstrap utility class like .show:
<div class="form-group">
<label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label>
<span class="btn btn-success fileinput-button show">
<span>Add File...</span>
<input type="file" id="DocumentUploadTB" class="form-control" />
</span>
</div>
Example: http://codepen.io/kspearrin/pen/PqpgYq