prevent form default behavior in Vue.js - forms

I'm building a Vue.js app with a form and I was wondering is there a way to prevent the HTML 5 forms default behavior using Vue.js built in .prevent? I have tried <form.prevent> and <form v-on:submit.prevent> but to no avail. Any help here would be great?

The v-on directive (shorthand #) is to bind a Vue instance method or a JS expression to an event:
Attaches an event listener to the element. […] The expression can be a method name, an inline statement, or omitted if there are modifiers present.
Therefore even if you do not specify a method or an expression / inline statement, your .prevent modifier should work in any case:
new Vue({
el: '#app',
methods: {
formSubmit() {
console.log('form submitted');
},
},
});
<script src="https://unpkg.com/vue#2"></script>
<div id="app">
<form #submit.prevent>
<span>Form WITH submit.prevent and no expression attached</span>
<button type="submit">Submit form</button>
</form>
<form #submit.prevent="formSubmit">
<span>Form WITH submit.prevent</span>
<button type="submit">Submit form</button>
</form>
<form #submit="formSubmit">
<span>Normal form without prevent</span>
<button type="submit">Submit form</button>
</form>
</div>

Related

How to debug the javascript inside a handlebars template in vscode?

I have some client-side javascript inside a handlebars template as follows :
customerloans.handlebars:
<h1> Form to view Upcoming loans for a customer </h1>
<div id="submitviewcustomerloansID">
<form action="/customerloans">
<label for="CustomerIdLoansForStyling"> Customer ID </label>
<input type="text" id="CustomerIdLoansForStyling" name="customerIDLoans">
<button type="submit"> Submit </button>
</form>
</div>
<div id="responseviewcustomerloansID"> </div>
<script>
document.getElementById('submitviewcustomerloansID')
.addEventListener('submit', evt => {
evt.preventDefault()
const form = evt.target
const body = JSON.stringify({
custID: form.elements.customerIDLoans.value
})
</script>
The browser is invoked from a node.js app
How can I put a breakpoint inside the javascript in VSCode ?
I have tried the instructions here but this does not seem to work for handlebars: https://www.youtube.com/watch?v=EXxbDVJ01wM

trigger events on ejs template?

I have an EJS script running a forEach generating html cards.My console.log event works on the first instance of my ejs template, but not the proceeding ones. How do I get event listener working on the proceeding ones??
EJS code snippet:
<form id="likesForm">
<button type="submit" class="dislike btn" id="dislikebtn" style="height: 24px;" value ="<%=i._id%>"><img src="/images\votedwn.png"></button>
<%=i.likes%>
<button type="submit" class="like btn" id="likebtn" style="height: 24px;" value ="<%=i._id%>"><img src="/images\voteup.png"></button>
</form>
Client.js:
const likesForm = document.getElementById("likesForm");
likesForm.addEventListener("submit", () => {
console.log("hi");
});
The reason you are not selecting one and only one is because the ID's need to be unique, and they can not be unique since they are being repeated. You will have to have your event listener in a parent element like a div and work with that instead.
<div id="grabThis">
<form id="likesForm">
<button type="submit" class="dislike btn" id="dislikebtn" style="height: 24px;" value ="<%=i._id%>"><img src="/images\votedwn.png"></button>
<%=i.likes%>
<button type="submit" class="like btn" id="likebtn" style="height: 24px;" value ="<%=i._id%>"><img src="/images\voteup.png"></button>
</form>
</div>
change your ejs to this:
const likesForm = document.getElementById("grabThis");
likesForm.addEventListener("submit", () => {
console.log("hi");
});

How to reset a form on JSP page?

I want to reset a form which will blank all input field and checkbox.
But here's my code doesn't work.
<form id="rwdPromotionDetailsAdd">
<input type="button" onclick="resetForm()" value="Reset form">
</form>
<script>
function resetForm() {
document.getElementById("rwdPromotionDetailsAdd").reset();
}
<script>
How can i reset a form ? Any better suggestion ?
You just need to insert this within a form
<input type="reset" value="Reset form">
Don't even have to attach a listener to it
<form id="rwdPromotionDetailsAdd">
<input type="button" onclick="resetForm($('#rwdPromotionDetailsAdd'))" value="Reset form">
</form>
<script>
function resetForm($form) {
$form.find('input:text, input:password, input:file, select, textarea').val('');
$form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
}
<script>

How to use Parsley.js with dynamic content

I am using parsley.js 2.0.2. for client side form validation.
Now I noticed on the Parsley Website that parsley 2.x has dynamic form validation.
I have a form on my page with parsley. It works correctly and does validate. Now on the same page I have a link that dynamically adds a form from an external file. Issue is now parsley.js won't validate the newly added form.
On the parsley website they have an example where one can use JavaScript to validate but I tried it and it does not work. Here is the snippet code of the example:
<script src="jquery.js"></script>
<script src="parsley.min.js"></script>
<form id="form">
...
</form>
<script type="text/javascript">
$('#form').parsley();
</script>
I am aware that the content in the DOM changed but is there a way that I can tell parsley to validate this newly added form or something that will trigger the validation process?
I will appreciate the help!
Thanks
Here is my form on the index.php page (This form does successfully validate):
<form action="server.php" method="post" name="main-form" id="myForm" data-parsley-validate>
<div>
<label for="njsform-name">Name</label>
<input name="name" type="text" id="njsform-name" placeholder="Mike" data-parsley-required="true" data-parsley-minlength="2">
</div>
<div>
<label for="njsform-email">Surname</label>
<input name="email" type="text" id="njsform-email" placeholder="Gates" data-parsley-required="true" parsley-minlength="2">
</div>
<div class="submitWrap">
<input class="submit" type="submit" value="Apply Now" />
</div>
Here is the link that gets the external content
<ul class="services-list">
<li><a class="s-option" href="views/form-short_term_loans.php">My Link</a></li>
</ul>
Here is the code I am using to dynamically change the content (does successfully retrieve external form and populates):
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('.services-list li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #form-section';
$('#form-section').load(toLoad)
}
});
$('.services-list li a').click(function(){
var toLoad = $(this).attr('href')+' #form-section';
$('#form-section').hide('fast',loadContent);
$('#load').remove();
$('#intro-section').append('<span id="load">Getting required form...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#form-section').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#form-section').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
The second form is just a duplicate but the form id is myForm2 and the name second-form
Add a call to
$('#xxxxxx').parsley();
After the load of the new form. With xxxxx the id of the new form inserted in the DOM

Checking if text area is blank prior to form submission?

So I wrote this code so that every time someone clicks the submit button, a javascript
function, called check, will see if the text area is empty. If it is not, then the form will be submitted.
This is my code. Why isn't it working?
<form method=post name='form_post' id='form_post' action='SUBMITIT.PHP'>
<textarea id=message name=message class=post onfocus=this.className='post_focus';
placeholder='Share your thoughts' maxlength=500></textarea>
<br>
<button onclick='check()' id=button name=button>Post</button>
</form>
<script type="text/javascript">
function check()
{
if(!document.textArea.message.value=="")
{
document.forms["form_post"].submit();
}
}
</script>
Thanks!
EDIT: I finally got it to work. Here's a template if you are having a similar problem.
<!--The form-->
<form action="mypage.php" method="post" name="myForm" id="myForm">
<textarea name=myTextArea id=myTextArea>
</textarea>
</form>
<br>
<button onclick='check()'>
Post
</button>
<!--The script that checks-->
<script type="text/javascript">
function check(){
String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ""); };
var textAreaValue=document.getElementById('myTextArea').value;
var trimmedTextAreaValue=textAreaValue.trim();
if(trimmedTextAreaValue!="") {
document.forms["myForm"].submit();
}
}
</script>
The following woks, and it also wipes unnecessary spaces, the form will only submit when given a character
<form action="yourpage.php" method="post" onsubmit="return check(this)">
<textarea id="message"></textarea>
<input type="submit" value="Post" />
</form>
<script>
function check(form){
if (form.message.value.trim() == ""){
return false
}
}
</script>
This is the most simple way to do this, and the advised one.
You could simply add "required" to the textarea field in HTML.
Note: Although the question is quite old, I am adding the answer for the future references.