The following is an excerpt of a rails form
<%= form_with(model: #usercontent) do |form| %>
where the following html renders a collection
<div class='alert'>
<select class='image-picker show-html' name="ki_id" id="ki_id">
<div class='row'>
<div class='buttonselector'>
<label for="usercontent_ki_id_1">
<input class="invisi-selector" type="radio" value="1" name="usercontent[ki_id]" id="usercontent_ki_id_1" />
<img src='/assets/ki/circle-15-1c2a221aa37a24e5b23acd7124cd47ae2a17434af589353a063633a6ef5abca6.svg'>
<div></div>
</label>
</div>
</div>
<div class='row'>
<div class='buttonselector'>
<label for="usercontent_ki_id_2">
<input class="invisi-selector" type="radio" value="0" name="usercontent[ki_id]" id="usercontent_ki_id_2" />
<img src='/assets/ki/aerialway-15-621960ddf5e9930f1b1102faa4ee23542e11163f48a67470f1fe245abbc27955.svg'>
<div></div>
</label>
</div>
</div>
[...]
</select>
</div>
However, when the user selects an item, the parameter being submitted is "ki_id"=>"0". Where is the above structure wrong?
It is submitted due to name="ki_id" in
<select class='image-picker show-html' name="ki_id" id="ki_id">
Can you show the full code for the view.
Related
Ckeditor ruby gem is adding a ">" at the end of my content entries every time a user edits the content.
Here is a video of it happening: https://drive.google.com/file/d/16sus8LGxHBZLFs_ts5_SJJSwLfisJzom/view?usp=sharing
Here is my update_row controller code for the text_component model. The textarea input is being saved in the content column.
def update_row
#text_component = TextComponent.find(params.fetch("id_to_modify"))
#text_component.tab_id = params.fetch("tab_id")
#text_component.content = params.fetch("content")
if #text_component.valid?
#text_component.save
redirect_to("/guides/"+params.fetch("guide_id"), :notice => "Text component updated successfully.")
else
#guide = Guide.find(params.fetch("guide_id"))
render("guide_templates/show.html.erb")
end
end
ANSWERED: here is the working form code in my edit_form view:
<form action="/update_text_component/<%= #text_component.id %>" method="post">
<!--input for guide_id -->
<div class="form-group">
<input type="hidden" id="guide_id" name="guide_id" class="form-control" value="<%= params.fetch("guide_id") %>">
</div>
<!-- input for tab_id -->
<div class="form-group">
<input type="hidden" id="tab_id" name="tab_id" class="form-control" value="<%= params.fetch("tab_id") %>">
</div>
<div class="form-group">
<label for="content">
Content
</label>
<textarea id="content" name="content" class="ckeditor" rows="10"><%= raw #text_component.content %></textarea>
</div>
<button class="btn btn-block btn-outline-secondary">
Update text component
</button>
</form>
<form action="/update_text_component/<%= #text_component.id %>" method="post">
<!--input for guide_id -->
<div class="form-group">
<input type="hidden" id="guide_id" name="guide_id" class="form-control" value="<%= params.fetch("guide_id") %>">
</div>
<!-- input for tab_id -->
<div class="form-group">
<input type="hidden" id="tab_id" name="tab_id" class="form-control" value="<%= params.fetch("tab_id") %>">
</div>
<div class="form-group">
<label for="content">
Content
</label>
<textarea id="content" name="content" class="ckeditor" rows="10"><%= raw #text_component.content %></textarea>
</div>
<button class="btn btn-block btn-outline-secondary">
Update text component
</button>
</form>
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>
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
Since I have save button in the right menu. so when I pressed save in the right menu, it should save the values into the bean without submitting the form.
<form action="personal-info.action" id = "userform" name="userform" method="post">
<div class="clearfix">
<h2>Basic Information</h2>
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="form-group clearfix col-sm-12 col-xs-6">
<label>Title</label>
<div>
<s:select list="titleList" listKey="displayKey" onChange="jsFunction()" listValue="displayValue" name="title" id ="title" cssClass="selectpicker show-tick" required="true" />
<!-- <select class="selectpicker show-tick" data-width="auto" name="title" required>
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
</select> -->
</div>
</div>
<div class="form-group clearfix col-sm-12 col-xs-6">
<label>Gender</label>
</form>
With succes I've created a page that uses the set of radio buttons that are formatted jquery. But as soon as I add the div's need to position the content on the page, the radio buttons are still formatted, but do not act as radio buttons anymore (they act like checkboxes). This is my code, what's wrong with it?
<script>
$(document).ready(function() {
$("#dt_hel").buttonset();
});
</script>
<!-- end script radiobuttons -->
<div class="demo">
<div id="ContentContainerLeft" >
<form id="dt_this_form" name="dt_this_form" action="this.php" method="post">
<p>
</div>
<div id="ContentContainerMiddle" >
<P>
<div id="dt_hel" style="font-size:80%;">
<input type="radio" id="radio1" name="dt_hel" value="0" /><label for="radio1">Lower</label>
<input type="radio" id="radio2" name="dt_hel" value="1" /><label for="radio2">Equal</label>
<input type="radio" id="radio3" name="dt_hel" value="2" checked/><label for="radio3">Higher</label>
</div>
<P></P>
</div>
<div id="TweetContainer" >
<P>
</div> <!-- end tweetcontainer -->
</div><!-- End demo -->
</form>
If you follow the rule of closing the most recent tag before closing older tag (ie set the form opening tag above the tag) then it should work e.g.
<form id="dt_this_form" name="dt_this_form" action="this.php" method="post">
<div class="demo">
<div id="ContentContainerLeft" >
<p>
</div>
<div id="ContentContainerMiddle" >
<P>
<div id="dt_hel" style="font-size:80%;">
<input type="radio" id="radio1" name="dt_hel" value="0" /><label for="radio1">Lower</label>
<input type="radio" id="radio2" name="dt_hel" value="1" /><label for="radio2">Equal</label>
<input type="radio" id="radio3" name="dt_hel" value="2" checked/><label for="radio3">Higher</label>
</div>
<P></P>
</div>
<div id="TweetContainer" >
<P>
</div> <!-- end tweetcontainer -->
</div><!-- End demo -->
</form>