I want to push form data with keys and values into JSON format from click on the submit button.
I don't want to create JSON manually. Please help me to short out this problem.
Use reactive forms from Angular.
Follow the steps below.
Create a Form Group and define the variables you need.
export class ProfileEditorComponent {
profileForm = new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl(''),
});
onSubmit() {
console.warn(this.profileForm.value);
}
}
Create your html file like below.
<form [formGroup]="profileForm">
<label>
First Name:
<input type="text" formControlName="firstName">
</label>
<label>
Last Name:
<input type="text" formControlName="lastName">
</label>
<button type="submit" >Submit</button>
Please find the guide for the same.
https://angular.io/guide/reactive-forms
Related
I have user_feedback in repeatable component in user table, how can I upload image to the newly added user feedback in strapi v3.
What currently I am doing
const data = await strapi.services["users"].update(
{ id: id },
{
...updatedData,
}
);
const newFeedback =
data.feedback_prototype_phase[data.feedback_prototype_phase.length - 1];
await strapi.entityService.uploadFiles(data, files, {
id: data.id,
model: "user.user_feedback",
field: "image",
});
Edited this answer, Its best to
Upload the image to Media-Folder, via http://localhost:1337/api/upload
Then use the same URL http://localhost:1337/api/upload and include this in your request as the doc says in https://docs.strapi.io/developer-docs/latest/plugins/upload.html#examples
<form>
<!-- Can be multiple files if you setup "collection" instead of "model" -->
<input type="file" name="files" />
<input type="text" name="ref" value="api::restaurant.restaurant" />
<input type="text" name="refId" value="5c126648c7415f0c0ef1bccd" />
<input type="text" name="field" value="cover" />
<input type="submit" value="Submit" />
</form>
<script type="text/javascript">
const form = document.querySelector('form');
form.addEventListener('submit', async (e) => {
e.preventDefault();
await fetch('/api/upload', {
method: 'post',
body: new FormData(e.target)
});
});
</script>```
Your ref-id will be the ID of your entry, by entry It means the ID of your table's row or in no-sql you would say your document id.
Your ref is your service name as it suggests, your table name per say
Your field is the name of the field of the entry you want to upload the media too
Your files is simple the files that you want to upload
I would highly recommend you to use the template code given on docs then modify it, Instead of working on it directly. Thats what I did.
I am programming in Spring and using Thymeleaf as my view, and am trying to create a form where users can update their profile. I have a profile page which lists the user's information (first name, last name, address, etc), and there is a link which says "edit profile". When that link is clicked it takes them to a form where they can edit their profile. The form consists of text fields that they can input, just like your standard registration form.
Everything works fine, but my question is, when that link is clicked, how do I add the user's information to the input fields so that it is already present, and that they only modify what they want to change instead of having to re-enter all the fields.
This should behave just like a standard "edit profile" page.
Here is a segment of my edit_profile.html page:
First Name:
Here is the view controller method that returns edit_profile.html page:
#RequestMapping(value = "/edit", method = RequestMethod.GET)
public String getEditProfilePage(Model model) {
model.addAttribute("currentUser", currentUser);
System.out.println("current user firstname: " + currentUser.getFirstname());
model.addAttribute("user", new User());
return "edit_profile";
}
currentUser.getFirstname() prints out the expected value, but I'm getting blank input values in the form.
Thanks.
Solved the problem by removing th:field altogether and instead using th:value to store the default value, and html name and id for the model's field. So name and id is acting like th:field.
I'm slightly confused, you're adding currentUser and a new'd user object to the model map.
But, if currentUser is the target object, you'd just do:
<input type="text" name="firstname" value="James" th:value="${currentUser.firstname}" />
From the documentation:
http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html
I did not have a form with input elements but only a button that should call a specific Spring Controller method and submit an ID of an animal in a list (so I had a list of anmials already showing on my page). I struggled some time to figure out how to submit this id in the form. Here is my solution:
So I started having a form with just one input field (that I would change to a hidden field in the end). In this case of course the id would be empty after submitting the form.
<form action="#" th:action="#{/greeting}" th:object="${animal}" method="post">
<p>Id: <input type="text" th:field="*{id}" /></p>
<p><input type="submit" value="Submit" /> </p>
</form>
The following did not throw an error but neither did it submit the animalIAlreadyShownOnPage's ID.
<form action="#" th:action="#{/greeting}" th:object="${animal}" method="post">
<p>Id: <input type="text" th:value="${animalIAlreadyShownOnPage.id}" /></p>
<p><input type="submit" value="Submit" /> </p>
</form>
In another post user's recommended the "th:attr" attribute, but it didn't work either.
This finally worked - I simply added the name element ("id" is a String attribute in the Animal POJO).
<form action="#" th:action="#{/greeting}" th:object="${animal}" method="post">
<p>Id: <input type="text" th:value="${animalIAlreadyShownOnPage.id}" name="id" /></p>
<p><input type="submit" value="Submit" /> </p>
</form>
I have a input box and user have to give their facebook user id on that so i make input box with default value https://www.facebook.com and then user give their user-profile-link then it will update data but i got this error when anything gonna type on input box
<div class="column">
<label class="label">Facebook Id::</label>
<input class="input is-medium" type="text" v-model="'https://www.facebook.com/'+data.fblink">
</div>
<script>
import contactInfo from './ContactInfo'
export default {
components: {contactInfo},
props: ['data'],
binding is for variables only, use this it works
<div class="column">
<label class="label">Facebook Id::</label>
<input class="input is-medium" type="text" v-model="facebook_link">
</div>
in your data variable add facebook_link as string. then if you want to update use this
'https://www.facebook.com/'+facebook_variable
v-model needs a variable to bind to, not a fixed string.
...
<input v-model="fbProfileLink"/>
...
export default {
components: {contactInfo},
props: ['data'],
data() {
return {
fbProfileLink: 'https://www.facebook.com/'
}
}
}
If you're making any requests to that link though, you probably shouldn't let the user manipulate it freely but put guards in place so you won't be making requests to a user provided URL blindly.
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 am using ASP.net for a program with a number of check boxes and a submit button which initiates an action depending on the selected check boxes.
However, one of my check boxes should behave as this submit button, i.e, upon selecting/deselecting this check box, the same action as the button must be triggered. Can someone please help me in doing this (or perhaps direct me to a tutorial)
I have a controller class and model.
Thanks you
EDIT
The program look like:
#using(Html.BeginForm("controllername", FormMethod.Get)) {
#html.CheckBox("check1");
#HTMl.Checkbos("check2");
<input type="submit" value="Submit" />
}
Everything else is pretty much handled in the controller.
You can use javascript to listen to the check event of your check box and then invoke the form submit.
Assuming your markup of view is like this
<form id="yourFormId" action="user/post">
<input type="checkbox" class="optionChk" value="1" /> One
<input type="checkbox" class="optionChk" value="2" /> Two
<input type="checkbox" class="optionChk" value="3" /> Three
</form>
<script type="text/javascript">
$(function(){
$(".optionChk").click(function(){
var item=$(this);
if(item.val()=="2") //check your condition here
{
item.closest("form").submit();
}
});
});
</script>
EDIT : As per the question edit.
Change the CheckBox Helper method usage like the below to add a css class to the checkbox so that we can use that for the jQuery selection.
#Html.CheckBox("check1",new { #class="optionChk"})
imagining you have something like this:
#using(Html.BeginForm()) {
<label class="checkbox">
<input type="checkbox" name="chb_a" id="chb_a"> Option A
</label>
<label class="checkbox">
<input type="checkbox" name="chb_b" id="chb_b"> Option B
</label>
<label class="checkbox">
<input type="checkbox" name="chb_c" id="chb_c"> Option C
</label>
<label class="checkbox">
<input type="checkbox" name="chb_d" id="chb_d"> Option D
</label>
<button type="submit" class="btn">Submit</button>
}
you can write a simple jQuery to complement:
$(".submit").click(function() {
// find the <form> the element belongs and submit it
$(this).closest('form').submit();
});
and with this, all you need is to add a class named submit to any checkbox or more buttons if you want them to submit
for example:
<label class="checkbox">
<input type="checkbox" name="chb_e" id="chb_e" class="submit"> Option E
</label>
You can bind the click events on the checkboxes.
$( '.myCheckboxes' ).click(function () {
var clickedBox = $( this );
// now do something based on the clicked box...
});
If you need to know which checkboxes are checked, that's just another selector.
$( '.myCheckboxes:checked' ).each(function () {
// Now you have access to each checked box.
// Maybe you want to grab their values.
});
Just bind the checkbox to a click event. Assuming you have a way of uniquely identifying the checkbox that submits the form.
$( '#formSubmitCheckbox' ).click(function() {
$( '#myForm' ).submit();
});