Level 19
just remove the form tag then submit using ajax
Jan 26, 2017
5
Level 10
Submit a Vue Form with a Submit Button outside the form
Hi Guys , I have a form in VUE and I want submit this form with a button submit outsite the form .
Normaly I do like this -
<form method="POST" action="" @submit.prevent="destroyItem( SubmitMyForm )">
<input name="name" type="text" >
<button type="submit" class="btn btn-success" >Submit</button>
</form>
It works fine like this upon , but I want do something like this below -
<form method="POST" action="" id="myForm" @submit.prevent="destroyItem( SubmitMyForm )">
<input name="name" type="text" >
</form>
<button type="submit" class="btn btn-success" @click.this.myForm.submit >Submit</button>
I wold like to submit this form from a button outsite the form , does some one knows the best way to do this ? Thanks
Level 10
I didnt understand . I am calling a function on Submit , like this -
<form method="POST" action="" @submit.prevent="submitItem()">
<input name="name" type="text" >
<button type="submit" class="btn btn-success" >Submit</button>
</form>
methods: {
submitItem(){
....
}
}
It is working , but I want to calll the submit outside the form like this -
<form method="POST" action="" @submit.prevent="submitItem()">
<input name="name" type="text" >
</form>
<button type="submit" class="btn btn-success" >Submit</button>
Level 9
If you give the form an ID, or some other identifier, you could trigger the submit function of the element after fetching it.
document.getElementById("formId").submit();
3 likes
Level 51
Sure you can just add '@submit.prevent('')' on the button and have no form action at all
Level 26
you could remove the click event and add it to the button, something like:
<form method="POST" action="" id="myForm">
<input name="name" type="text" >
</form>
<button type="submit" class="btn btn-success" @click="submitItem($event)">Submit</button>
Then as mentioned by @theUnforgiven
methods: {
submitItem(evt){
evt.preventDefault();
document.getElementById("myForm").submit();
}
}
not tested and might need a little more work?
2 likes
Please or to participate in this conversation.