I have a form like that:
<form onSubmit={handleSubmit}>
<FieldArray name="items"/>
{???fields.length??? && <div className="controls">
<button type="submit">Submit</button>
</div>}
</form>
I want to show submit button only if I have at least one line. How I can do that?
You can use form value selectors, but it would be better to define good validation rules instead. You can write validation functions and then you will have valid props send to your form.
Than you can write something like
{this.props.valid && <div className="controls">
<button type="submit">Submit</button>
</div>}
Related
What I am trying to do set object user variable attribute based on click.
`
<form class="container" th:action="#{/processSignup}" method="post"
th:object="${user}">
<div class="switch">
<div class="MenteeSignUp" onclick="tab1();" th:onclick="*{}" >Mentee</div>
<div class="MentorSignUp" onclick="tab2();" th:value="MENTOR" th:field="*{userRole}">Mentor</div>
</div>
`
Trying to add different role-based what user click which either mentor or mentee which you can see from the screenshot.
I am kind of new to thyme leaf, so I tried to have th:onClick and then tried to assign it but it didn't work
form
The code you have there doesn't really make sense. <div />s do not have a value attribute, and the expression in a th:onclick must be valid javascript (instead you have a blank selection variable expressions: th:onclick="*{}"). Maybe you're looking for something like this?
<form class="container" th:action="#{/processSignup}" method="post" th:object="${user}">
<input type="hidden" th:field="*{userRole}" id="userRole" />
<div class="switch">
<div class="MenteeSignUp" onclick="document.getElementById('userRole').value = 'MENTEE';">Mentee</div>
<div class="MentorSignUp" onclick="document.getElementById('userRole').value = 'MENTOR';">Mentor</div>
</div>
I have a value i want to save to the database as a slug generated from the name. The problem is I cannot use both v-model and :value in the same input field. what is the solution to this? I am using laravel and vuejs. How can i solve this error?
<div class="modal-body">
<div class="form-group">
<label>Slug</label>
<input v-model="form.slug" :value="form.name | slugify" type="text" name="slug"
placeholder="downtown-dubai"
class="form-control" :class="{ 'is-invalid': form.errors.has('slug') }">
<has-error :form="form" field="slug"></has-error>
</div>
</div>
Just generate slug from the name on the backend.
From the Frontend, you only send name and other needed fields, while on the backend you use that name to create a slug.
The easiest and most direct way would by to use v-model="form.name" and get rid of the :value attribute, then just update form.slug using the data from form.name in the function that submits the form. Example:
submitForm() {
this.form.slug = this.$options.filters.slugify(this.form.name)
// Submit the form...
},
If the form.slug field is actually displayed on the page and needs to immediately be reactive, you could also update it using a watcher for form.name like this.
watch: {
'form.name'() {
this.form.slug = this.$options.filters.slugify(this.form.name)
},
},
I have a input wrapper, (input-wrapper.blade.php)
<div class="form-group">
#yield('input')
</div>
Called via:
#include('input.checkbox')
The checkbox file looks like:
#extends('input-wrapper')
#section('input')
<input type="checkbox" value="1">
#endsection
The issue I am having is when I call this with multiple inputs (I have one for different input types):
#include('input.checkbox')
#include('input.textarea')
....
I just get a rendering of the first item (checkbox) multiple times. i'm hoping to render each type of input.
Hi there I have an error when I submit the following form:
<div id="tabs">
<ul>
<li>Project Details</li>
<li>Project Attachments</li>
<li><a href="#Url.Action("Members", "ProjectNetwork", new { IsTab = true })">Project
Network</a></li>
<li>Bulleting Board</li>
<li>Bids Received</li>
</ul>
</div>
<div id="LowerButton">
#Html.Hidden("MainStatus", #Model.Status)
#using (#Html.BeginForm("Dashboard", "Dashboard"))
{
<button type="button" id="MakeComment">
Make a Comment
</button>
<input type="submit" id="GoDashBoard" value="Return to Project List" />
}
</div>
When I press the button "GoDashBoard", The method "Dashboard" in the controller "Dashboard" is not reached. Instead the following error appears:
It tells me that a model property is beign sent to the server. However, there are no model properties inside the dashboard form.. unless I'm sending many forms at the same time. But I dont think thats possible right? Do you guys have any idea of why is trying to set a model property when I'm not actually sending any?
Update:
this is the input of the dashboard action:
public ActionResult Dashboard(int page = 1)
{
var user = (User)Session["User"];
if (user != null)
{...
}}
the input is a default integer. However, I saw the trace of the calls and its submiting another form which is not related to the one im using:
That form is inside of one of the ajax tabs. I dont understand how one form submits another form and they are not nested. Anyone knows a good workaround? because im thinking of receiving both forms in both actions and make some validations.
I solved it by removing the form "Dashboard" and instead adding an invisible link. The button would reference the invisible link:
#*#using (#Html.BeginForm("Dashboard", "Dashboard"))
{ *#
<button type="button" id="MakeComment">
Make a Comment
</button>
<button name="button" type="button" onclick="document.location.href=$('#GoDashBoard').attr('href')">Return to Project List</button>
<a id="GoDashBoard" href="#Url.Action("Dashboard", "Dashboard")" style="display:none;"></a>
#*<input type="submit" id="GoDashBoard" value="Return to Project List" />*#
#* }*#
I am trying to invoke a form submit using javascript (jquery) to invoke a webflow transition. It works and the submit invokes the desired transition. But, the updated radio button values is not reflected on the model object which is posted.
Here is the code:
<form:form method="post" action="#" commandName="infoModel" name="pageForm">
<form:input type="input" path="testMsg" id="success" />
<input type="button" id="clearSelections" value="Clear Selections">
<div class="question">
<h4><c:out value="${infoModel.questionInfo.description}"/> </h4>
<form:radiobuttons path="infoModel.answerId"
itemValue="answerId" itemLabel="answerDescription" items="${infoModel.answers}" delimiter="<br/>" />
</div>
<input type="submit" name="_eventId_saveQualitativeInput" value="Save" id="save" />
$(document).ready(function() {
$('#tabs').tabs();
//Clear selections (copy is server-side)
$('#clearSelections').click(function() {
//$('input[type="radio"]').prop('checked', false);
$('input[type="radio"]').removeAttr('checked');
$('#save').trigger('click');
});
});
</form:form>
The form:radiobutton, generates the below html:
<div class="question">
<h4>Is this a general obligation of the entity representing a full faith and credit pledge? </h4>
<span>
<input type="radio" checked="checked" value="273" name="infoModel.answerId" id="infoModel.answerId1">
<label for="infoModel.answerId1">Yes</label>
</span>
<span><br>
<input type="radio" value="274" name="infoModel.answerId" id="infoModel.answerId2">
<label for="infoModel.answerId2">No</label>
</span>
<br>
<span class="error"></span>
</div>
The input id= "success" value is registered and when the control goes to the server, the value of input id= "success" is updated in the "infoModel" object. But the value of answerId is not updated on the "infoModel" object.
Thoughts if i am missing something in the form:radiobutton element or if there is something else wrong?
Thanks in advance!
EDIT:::::::
Thanks mico! that makes sense. I stripped of some of the code first time to make it precise, but i have a list which is being used for building the radio-buttons, below is the code:
<c:forEach items="${infoModel.list["index"]}" var="qa" varStatus="rowCount">
<div class="question">
<h4><c:out value="${question.questionInfo.description}"/> </h4>
<form:radiobuttons path="list["index"][${rowCount.index}].answerId" itemValue="answerId" itemLabel="answerDescription" items="${question.answers}" delimiter="<br/>" />
<br>
</div>
</c:forEach>
Could you please suggest how i could try this one out?
NOTE: The same code works on a regular form submit on click of a button of type submit. Its the javascript form submit which is not working. I also tried to do whatever i want to do in javascript and then invoke the button.trigger('click'); form got submitted but the changes made on form in my javascript didnt reflect.
With commandName inside a form:form tag you set "Name of the model attribute under which the form object is exposed" (see Spring Documentation). Then in path you should tell the continuation of the path inside the model attribute.
With this said I would only drop the extra word infoModel from path="infoModel.answerId" and have it rewritten as path="answerId" there under the form:radiobutton.