second form in bootstrap template to send an email - javascript

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.

Related

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!

Django, JS/JQuery validate inputs and disable submit button

I have a simple input params that are required. I want to disable my submit button until all the required fields are satisfied. Granted I am new to django, and the particular code I am working on is very old. As a result, post like this or this are not helping.
Current code that I am trying from one of the posts linked and including my own template
<script type="text/javascript">
$(document).ready(function() {
validate();
$('input').on('keyup', validate);
});
function validate() {
var inputsWithValues = 0;
// get all input fields except for type='submit'
var myInputs = $("input:not([type='submit'])");
myInputs.each(function(e) {
// if it has a value, increment the counter
if ($(this).val()) {
inputsWithValues += 1;
}
});
if (inputsWithValues == myInputs.length) {
$("input[type=submit]").prop("disabled", false);
} else {
$("input[type=submit]").prop("disabled", true);
}
}
$('#submit').on('click', function() {
var zip = $('#zip').val();
var email = $('#email').val();
var name = $('#name').val();
//if inputs are valid, take inputs and do something
});
<form class="form-horizontal" action="" method="get" id="dataform">
<div class="form-group">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-3">
<input class="col-md-12" id="zip" type="text" placeholder="Enter zip code" aria-required="true">
</div>
<div class="col-md-3">
<input class="col-md-12" id="name" type="text" placeholder="Enter last name" aria-required="true">
</div>
<div class="col-md-3">
<input class="col-md-12" id="email" type="email" placeholder="Enter email address" aria-required="true">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="btn btn-primary" id="submit" type="submit">Submit</div>
</div>
</div>
</form>
any help on disabling my submit button until input fields are not validated/filled is much appreciated. Again, new to django and I am unable to use existing threads on said topic
From your current code, looks like your selector for the submit input is not actually getting the submit "button". Currently, your template defines the submit as a div and not an input, thus your selectors should be $("div[type=submit]") not $("input[type=submit]")
Better yet, just select by div id $('#submit')
Instead of targeting attributes, I was targeting props. Below is the fix for my particular issue.
if (inputsWithValues === 3) {
$("div[type=submit]").attr("disabled", false);
} else {
$("div[type=submit]").attr("disabled", 'disabled');
}

bootstrapvalidator submit button not allowed after validation error

I'm running a form with bootstrapValidator.
If I submit the form while there are still validation errors (for example, I forgot to input one of the fields), even when I finish filling all the form fields properly, the submit button maintains the "cursor: not-allowed" style that it got from the initial submission:
<form id="invoice_form" class="well form-horizontal" action="submit.php" method="post" data-toggle="validator"">
<fieldset>
...
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4" style="text-align: left;">
<button type="submit" class="btn btn-primary" > send <span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
</fieldset>
</form>
Thanks,
David
Edit:
I didn't succeed to run my code on fiddle, but I was able to locate the problem:
when I use the following code to force a value into one of the fields (service drop down calls the function to set the amount), the amount field remains considered invalid (label doesn't change to green), although the form can be submitted:
<script>
function showAmount() {
var amounts = {
"service_a": "300",
"service_b": "450",
"service_c": "500",
"other": ""
};
var x = document.getElementById("service").value;
document.getElementById("amountDiv").style.display = "block";
if (x != ''){
document.getElementById("amount").value = parseInt(amounts[x]);
} else {
document.getElementById("amount").value = '';
}
}
</script>
It seems to me that I need to manually run the validation on the forced value, once the value is entered...
Any suggestion on if and how it can be done?
Thanks

Validating form using jQuery Form Validator on ajax post ()

I am using form validator plugin to validate my forms.
It is working properly if I am not submitting data using jQuery post method.
On using jQuery post it is not validating the form on submit.
My code is
<form action="UpdatedProfile" method="post" name="updateprofile" id="UpdatedProfile" class="form-horizontal">
<div class=" form-group ">
<div class="col-lg-2">
<label>First Name</label>
</div>
<div class="col-lg-4">
<input type="text" name="fname" cssClass="form-control" data-validation="required" data-validation-error-msg="First Name is required"/>
</div>
</div>
</form>
<script>
$(document).ready(function () {
$.validate();
$(document).on('click', '#submit', function (event) {
event.preventDefault();
console.log($('#UpdatedBasicProfile').serialize());
$.post("Updated", $('#UpdatedProfile').serialize(), function (data)
{....});
});
});
</script>
How to achieve this?
put a submit button in the form and define validation rule in js like
$('#frm_registration').validate({
rules:
{
fname: required
},
messages:
{
fname : 'Please enter name'
}
});
or if the button is of type button then initiate validation on its click like:
$('#btn').click(function(){
$('#frm_registration').valid(); // will initiate the validation
})
If the validator is working when clicked on submit button, you could trigger a click event on the button rather then listening the document for any clicks and if the target is the given button.

How to submit forms input values using post to server side script

I have a lot of buttons, each opens its form . How do I get the input value of form opened at the moment, and post it on my server, like post("/addOrders", valueOfinputs)?
https://jsfiddle.net/ave6uvez/21/
<div class="rows">
<div class="row">
<button class="open">Buy</button>
<form id="myform" action="/index" method="post">
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="namee" name ="name" >
</div>
<div class="form-group">
<label for="exampleInputPassword1">Phone</label>
<input type="phone" name = "phone" >
</div>
<button class="ave" >Close</button>
<INPUT type="submit" id = "submit" class = "close" value="Submit">
<!---- <button id="submit" class="close"></button>-->
</form>
</div>
</div>
try this,
$("#submit").click(function(e){
$.post("/addOrders",$("#myForm").serialize());
return null;
})
.serialize() will put all form elements data into the request
Also you need to give different id for different Forms submit button and you have to do the above code for each submit button
Hope this works for you.
This is a simple reference:
// this is the id of the forms, set the form ids accordingly.
$("#idForm").submit(function(e) {
var url = "path/to/your/script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});

Categories

Resources