Develop Reference

Form onsubmit function restrain the form input value to be passed to servlet

Sorry in advance if this question has duplicates elsewhere. I have searched for many possible relevant references but just could not get a solution to fix the problem I faced.
I'm having a simple form in jsp which when the user click submit, it will generate an excel for user to download. The form code is as below:-
<form id="myform" class="form-horizontal" action="MyServlet" method="POST" onsubmit="startDownload(this)">
<div class="form-group">
<label class="control-label col-sm-offset-2 col-sm-2" for="userText">User Text:</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="userText" name="userText" placeholder="Enter Text">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-5">
<button type="submit" id="submitBtn" class="btn"><i class="fa fa-download"></i> Generate File </button>
</div>
</div>
</form>
During Form submit, the jsp page will show an loader and when the page prompts for file download it will hide the loader. I'm able to realize this, with reference to this post: Reenable a form submit button on response of a file download. The onSubmit JavaScript function is as followed:-
function startDownload(form) {
var token = new Date().getTime();
form.token.value = token;
showLoading(); //to show the loader
var pollDownload = setInterval(function() {
if (document.cookie.indexOf("download=" + token) > -1) {
document.cookie = "download=" + token + "; expires=" + new Date(0).toGMTString() + "; path=/";
stopLoading(); //to hide the loader
clearInterval(pollDownload);
}
}, 500);
}
The problem is when I enter some values in the input field form and clicked submit, the value is not passed to the servlet. When I use debugging to check on the variable, it gives 'null'. The code I use to get the form input in servlet :-
String userText = request.getParameter("userText");
But if I removed the onsubmit function, the value can be passed to servlet.
May I know why is this so and where am I doing wrong in the codes ?
Thank you so much for your kind help and time in advanced!

How can I get a input required with vuejs

I have my chat and I dont want people to send empty message so I would like that my input become required. Thanks for your help.
I tried to put "required='required'" in the input line, I also tried veeValidate but it broke my chat when I use it, I also tried to put "Required = true" in Props and data but without a good result
This is ChatForm.vue
<template>
<div class="input-group" >
<input id="btn-input" type="text" name="message" class="form-control input-sm" placeholder="Ecrire..." v-model="newMessage" #keyup.enter="sendMessage">
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" id="btn-chat" #click="sendMessage">
&#10003
</button>
</span>
</div>
</template>
<script>
export default {
props: ['user'],
data() {
return {
newMessage: '',
}
},
methods: {
sendMessage() {
this.$emit('messagesent', {
user: this.user,
message: this.newMessage
});
setTimeout(function() {
const messages = document.getElementById('mess_cont');
messages.scrollTop = messages.scrollHeight;
}, 200);
this.newMessage = '';
}
}
}
</script>
And this is my form in the app.blade.php
<div id="app" class="container-chat">
<div class="row">
<div class="col-md-12 col-md-offset-2">
<div class="col-md-12 col-md-offset-2">
<div class="panel-body panel-content" id="mess_cont">
<chat-messages id="mess" :messages="messages" :currentuserid="{{Auth::user()->id}}"></chat-messages>
</div>
<div class="panel-footer">
<chat-form
v-on:messagesent="addMessage"
:user="{{ Auth::user() }}"
></chat-form>
</div>
</div>
</div>
</div>
</div>

Try to change your ChatForm.vue like this:
<template>
<form #submit.prevent="sendMessage">
<div class="input-group" >
<input id="btn-input" type="text" name="message" class="form-control input-sm" placeholder="Ecrire..." v-model="newMessage" required>
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" type="submit" id="btn-chat">
&#10003
</button>
</span>
</div>
</template>
You are not treating the input in the correct way, the input which is required needs to be inside a form and the required keyword will prevent the form submission if the input field is empty.

There are a few things I would do differently.
1/ Wrap your chat form in a tag, and execute the sendMessage() method on submit. This will give your users a nicer experience, as they can just to submit the message.
2/ Convert the button into a submit button so it triggers the form.submit event.
3/ You can easily disable the button by checking whether newMessage has contents. I don't think you need vee validate or anything else to achieve this; for something as simple as a chat form, your user doesn't need much more feedback than seeing a disabled button to realise (s)he needs to write something first.
4/ in the addMessage method you can just check the contents of newMessage and not do anything when it's empty. This is perfectly fine because you already hinted the user by disabling the button too.
I think this is a subtle way where you guide your user, but don't overdo it.

Please add name attributes to all of your form elements. Some of the element in my form had name attribute and some didn't. Element which had name attributes worked correctly but the one's which didn't had name failed.

Can't submit a form with JavaScript function when selecting radio input

I write this html code with mojolicius code mixed. The idea is to submit the form when I select a radio input that is stylized as a Bootstrap button.
If I put a submit type input, I select the Bootstrap button and I submit it, it works perfectly. But when I use this function (submitForm(node)) to submit the form, it seems to submit it, but is doesn't do anything. The Firefox debugger doesn't throw any error.
<form method="post" id="runform">
%if (keys %$base) {
%for my $option (sort keys %$base) {
<div class="col-sm-4">
<div class="panel panel-success machine">
...
<div class="btn-group pannel-body" data-toggle="buttons">
<label class="btn btn-success" id="base_action" onclick="submitForm(<%= $option %>)">
<input name="id_base" id="submit<%= $option %>" type="radio" value="<%= $option %>"><strong> <i class="fa fa-play" aria-hidden="true"></i> Start this Machine</strong>
</label>
</div>
</div>
</div>
%}
</form>
The JavaScript Function:
function submitForm(node) {
var id = "submit"+ node ;
document.getElementById(id).checked=true;
document.getElementById("runform").submit();
}
Thanks

You lack an action attribute on the form, so it gets submitted to the current page, that's why it seems to submit, but does nothing, because it's likely you have configured your server to just reply with the same page to the request.
Point the form to the right URL.

Form won't submit due to button's conflicting interests

My website has a simple form that is linked with MailChimp. The problem is that the form's submit button has conflicting interests, specifically, there's javascript email-field validation code that
is requiring the button to have type="submit" written in the button code. But if I include type=submit, it prevents my form from submitting to MailChimp.
Here is the button code in 2 forms. The first is the form which allows javascript error validation to work but submission to MailChimp to NOT work (notice the type)
<button class='buttonmain' type="submit" >Submit Form</button>
The second form does not have type="submit" and so js validation won't work, but it will submit to MailChimp:
<button class='buttonmain'>Submit Form</button>
Here's the full form
<form id="form-signup_v1"
name="form-signup_v1"
method="POST"
action="http://mysite.us10.list-manage.com/subscribe/post"
>
<!-- MailChimp Code -->
<input type="hidden" name="u" value="g02362223cdaf329adf5">
<input type="hidden" name="id" value="32da65235dba0">
<div class="errorstyle">
<div class="field">
<div class="ui left labeled input">
<input id="MERGE0"
name="MERGE0"
placeholder="My Email Address"
type="text"
data-validation="[EMAIL]">
<div class="ui corner label">
<i class="asterisk icon">*</i>
</div>
</div>
</div>
</div>
<button class='buttonmain' type="submit" >Submit</button>
</form>
and here's the script for validating the e-mail field.
Notice how it calls on "submit".
<script>
$('#form-signup_v1').validate({
submit: {
settings: {
inputContainer: '.field'
},
callback: {
onBeforeSubmit: function (node) {
myBeforeSubmitFunction(':D', ':)', node);
},
onSubmit: function (node) {
console.log('#' + node.id + ' has a submit override.');
//node.submit();
}
}
},
debug: true
});
function myBeforeSubmitFunction(a, b, node) {
console.log(a, b);
$(node).find('input:not([type="submit"]), select, textarea').attr('readonly', 'true');
$(node).append('<div class="ui active loader"></div>');
}
$('#prefill-signup_v1').on('click', function () {
var form = $(this).closest('form');
form.find('#signup_v1-name').val('John Doe');
form.find('#signup_v1-username').val('RocketJoe');
form.find('#signup_v1-password').val('test123');
form.find('#signup_v1-password-confirm').val('test123');
form.find('#signup_v1-email').val('test#test.test');
form.find('#signup_v1-email-confirm').val('test#test.test');
});
</script>
How do I combine the 2 button code forms I posted at the beginning, so that the form IS validated with js and also submits to MC?
Thanks so much!

I solved it myself doing the following:
Changing the script to include:
function myBeforeSubmitFunction(a, b, node) {
document.getElementById("form-signup_v1").submit();

second form in bootstrap template to send an email

I've downloaded a bootstrap template which has 1 email form in it. I'm trying to add a second form with other fields on the same page. When I click the submit button in my second form, the values of the original form are always used.
Here is my html:
// second form added by me
<form name="sentMessage2" id="contactForm2" novalidate>
// input elements like for example #name
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-success">Send</button>
</div>
</div>
</form>
// original form
<form name="sentMessage" id="contactForm" novalidate>
// input elements like for example #name
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-success">Send</button>
</div>
</div>
</form>
And here is my javascript file contact_me.js (not adjusted):
$(function() {
$("input,textarea").jqBootstrapValidation({
// I dont understand how the form calls this method. There is no reference to the form's name/id
preventSubmit: true,
submitError: function($form, event, errors) {
// additional error messages or events
},
submitSuccess: function($form, event) {
event.preventDefault(); // prevent default submit behaviour
// get values from FORM
var name = $("input#name").val();
var email = $("input#emaill").val();
var phone = $("input#phone").val();
var message = $("textarea#message").val();
var firstName = name;
// when I debug here, I always see the values from the original form
How can I create a second form that sends an email?

Change the id properties on your second form and the jquery selectors. Eg. rename 'email' to 'email1', and such, as you did with the form.
A better solution would be to stop using id-s at all, and switch to "name" attributes.

Set id and class for each button
// second form added by me
<form name="sentMessage2" id="contactForm2" novalidate>
// input elements like for example #name
<div class="row">
<div class="form-group col-xs-12">
<button id"btn2" type="submit" class="btnSend btn btn-success">Send</button>
</div>
</div>
</form>
// original form
<form name="sentMessage" id="contactForm" novalidate>
// input elements like for example #name
<div class="row">
<div class="form-group col-xs-12">
<button id"btn1" type="submit" class="btnSend btn btn-success">Send</button>
</div>
</div>
</form>
Your jquery code will be like this
$( document ).ready(function() {
$(".btnSend ").click(function() {
var id = $(this).attr("id");
if(id==="btn1"){
$( "#contactForm" ).submit();
}
if(id==="btn2"){
$( "#contactForm2" ).submit();
}
});
});
I didnt test but it should work.