Multiple JS with submit button - javascript

I have created a form that is submitting the form in its entirety and preventing the page from reloading locally.
As soon as it is posted to the website and we try and plug in the handler (SalesForce). The form still submits but the page reloads and we cant have that. As there is data that reveals once the "submit" button is clicked. The button is controlling multiple JS and functions.
Can anyone look at the code and see where the problem lies?
<div>
<div class="columns medium-6">
<script type="text/javascript">
function randomnumber() {
document.forms[0].Code.value=(Math.round(Math.random()*999999+1)); }
onload=randomnumber
</script>
<div class="form-group">
<label for="firstname">First Name</label>
<input type="text" class="form-control" name="first_name" id="firstname" aria-describedby="firstname" placeholder="First Name">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" name="last_name" id="lastname" aria-describedby="lastname" placeholder="Last Name">
<label for="email">Email address</label>
<input type="text" class="form-control" name="email" id="email" aria-describedby="email" placeholder="Email">
<label for="phone">Phone</label>
<input type="text" class="form-control" name="phone" id="phone" aria-describedby="phone" placeholder="Phone">
<!--<input type="hidden" name="Owner" value="00G1a000001I7EA"> -->
<input type="hidden" name="form_type" value="CSF">
<input type="hidden" name="visitor_type" value="NEW-CUST">
<input type="hidden" name="party_size" value="1">
<input type="hidden" name="source" value="Love Happens Here">
<input type="hidden" name="webtoleadstoreid" value="a0C1a00000BJhea">
<input type="hidden" name="company" value="New Guest">
<input type="hidden" name="reason_visit" value="other">
<button type="submit" id="randomNumber" onclick="javascript:toggle(); return false;" class="btn btn-primary" value="Generate Code">Submit</button>
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("randomNumber");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "Submit";
}
}
function showdiv() {
var error = false;
//validate your form.
if(error == true){ return true;}
else
{
//show div
return false;
}
}
</script>
<div id="toggleText" style="display: none">
<label for="code">Code</label>
<input type="text" name="Code" readonly id="Code" aria-describedby="code" placeholder="code">
<p> Check your email for the coupon code and details. Thanks again for your participation in our Share & Win contest, winners will be announced on <strong>February 14th.</strong></p>
</div>
</div>
</form>
</div>
</div>

Like I said, you can use Ajax to achieve what you want.
Here are a few links that will help you in that direction
Ajax
Ajax
If they don't really help you, try googling Ajax, you will definitely find a site that will explain everything to you.

Related

Disable form submit button until all input/textarea fields are filled, without using for loop (no jQuery)

I have the following contact form:
<form id="post">
<label for="name">Name</label>
<input id="name" name="name" type="text">
<label for="surname">Surname</label>
<input id="surname" name="surname" type="text">
<label for="email">E-mail</label>
<input id="email" name="email" type="text">
<label for="subject">Object</label>
<input id="subject" name="subject" type="text">
<label for="text">Text</label>
<textarea id="text" name="text"></textarea>
<button type="submit" disabled>Submit</button>
<!-- Honeypot -->
<div style="position:absolute;left:-5000px" aria-hidden="true">
<input type="text" name="ijdssliouhois8ds8989sd" tabindex="-1" value="">
</div>
<!-- /Honeypot -->
</form>
In order to disable submit button until all input/textarea fields are filled, I'm using the following code:
post.oninput = function() {
var empty = false;
for (var i = 0; i < 5; i++) {
if (post[i].value.trim() === "") {
empty = true;
}
}
if (empty) {
post[5].disabled = true;
} else {
post[5].disabled = false;
}
};
It works perfectly.
post.oninput = function() {
var empty = false;
for (var i = 0; i < 5; i++) {
if (post[i].value.trim() === "") {
empty = true;
}
}
if (empty) {
post[5].disabled = true;
} else {
post[5].disabled = false;
}
};
<form id="post">
<label for="name">Name</label>
<input id="name" name="name" type="text">
<label for="surname">Surname</label>
<input id="surname" name="surname" type="text">
<label for="email">E-mail</label>
<input id="email" name="email" type="text">
<label for="subject">Object</label>
<input id="subject" name="subject" type="text">
<label for="text">Text</label>
<textarea id="text" name="text"></textarea>
<button type="submit" disabled>Submit</button>
<!-- Honeypot -->
<div style="position:absolute;left:-5000px" aria-hidden="true">
<input type="text" name="ijdssliouhois8ds8989sd" tabindex="-1" value="">
</div>
<!-- /Honeypot -->
</form>
But I would like to achieve the same result using methods such .filter, .find, .map or .some - if possible (the best one in terms of performance).
Would you give me some suggestions?
Use the :scope > [name] query string to select children of the form which are input-like, and if .some of them aren't filled, disable the button:
const post = document.querySelector('form');
post.oninput = function() {
post.querySelector('button').disabled = [...post.querySelectorAll(':scope > [name]')]
.some(input => !input.value.trim())
};
<form id="post">
<label for="name">Name</label>
<input id="name" name="name" type="text">
<label for="surname">Surname</label>
<input id="surname" name="surname" type="text">
<label for="email">E-mail</label>
<input id="email" name="email" type="text">
<label for="subject">Object</label>
<input id="subject" name="subject" type="text">
<label for="text">Text</label>
<textarea id="text" name="text"></textarea>
<button type="submit" disabled>Submit</button>
<!-- Honeypot -->
<div style="position:absolute;left:-5000px" aria-hidden="true">
<input type="text" name="ijdssliouhois8ds8989sd" tabindex="-1" value="">
</div>
<!-- /Honeypot -->
</form>
You could also use the required attribute, if it'll suit your needs, though the button won't appear disabled - rather, it'll redirect the user to the next required field:
<form id="post">
<label for="name">Name</label>
<input required id="name" name="name" type="text">
<label for="surname">Surname</label>
<input required id="surname" name="surname" type="text">
<label for="email">E-mail</label>
<input required id="email" name="email" type="text">
<label for="subject">Object</label>
<input required id="subject" name="subject" type="text">
<label for="text">Text</label>
<textarea required id="text" name="text"></textarea>
<button type="submit">Submit</button>
<!-- Honeypot -->
<div style="position:absolute;left:-5000px" aria-hidden="true">
<input type="text" name="ijdssliouhois8ds8989sd" tabindex="-1" value="">
</div>
<!-- /Honeypot -->
</form>

jQuery: Adding html elements dynamically using jquery

I want to add some html elements dynamically using jQuery inside a form tag but it is not working .
$(document).ready(function() {
var requirements = 0;
var container = $(document.createElement('div').addClass('form-group'));
$('#add-req').click(function() {
if (requirements <= 15) {
requirements = requirements + 1;
$(container).append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$('#requirement-div').after(container);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post">
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>
when I click add requirement button it should create another div tag and input element inside form element.
Just replace the code $(document.createElement('div').addClass('form-group')); to $(document.createElement('div')).addClass('form-group');
Try the following
We can directly Insert a html element to the targer Element as follow
$(document).ready(function(){
var requirements=0;
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
$('#requirement-div').after('<div class="form-group"><input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required=""></div>');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post" >
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>
you mixing between JS and JQuery, where document.createElemet('div') is a JS function while addClass is a JQuery function.
$(document).ready(function(){
var requirements = 0;
var container=$('<div>').addClass('form-group');
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
container.append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$(this).before(container);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post" >
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>
Replace the Below Code
<script>
$(document).ready(function(){
var requirements=0;
var container=$(document.createElement('div')).addClass('form-group');
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
$(container).append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$('#requirement-div').after(container);
}
});
});
</script>
I wrote a script here (Adding html elements dynamically using jquery) that you can test
<form action="#" method="post">
<div class="form-group">
<input type="text" class="form-control test" placeholder="Your Name" name="Course name" required="">
</div>
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<div class="styled-input">
<input type="button" class="btn btn-primary" value="Add Requirements" id="add-req">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</form>
JQuery Code
$(function() {
var requirements=0;
$('#add-req').click(function(e){
e.preventDefault();
$('.test').val('Okay');
if(requirements <= 15) {
$('.styled-input').prepend('<div class="form-group"><input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required=""></div>');
requirements++;
} else {
alert('Max requirement has been reached');
}
});
});

Multi section form that need validation before proceeding

I am creating a multiple section form that needs to validate each section before proceeding to show the next. When I hit continue I want to run a validation that triggers a response on the section above but not the whole form. In addition I want this in one form so that it can be uploaded into IBM forms. I know jQuery is powerful but I don't understand if you can have it all contained in the html.
<script language="JavaScript">
var currentLayer = 'page1';
function showLayer(lyr) {
hideLayer(currentLayer);
document.getElementById(lyr)
.style.visibility = 'visible';
currentLayer = lyr;
}
function hideLayer(lyr) {
document.getElementById(lyr).
style.visibility = 'hidden';
}
function showValues(form) {
var values = '';
var len = form.length - 1;
//Leave off Submit Button
for(i=0; i<len; i++) {
if (form[i].id.indexOf("C") != -1 || // if statement over this one validating visible form elements before continuing
form[i].id.indexOf("B") != -1)
//Skip Continue and Back Buttons
continue;
values += form[i].id;
values += ': ';
values += form[i].value;
values += '\n';
}
alert(values);
}
</script>
</head>
<body>
<div class="container">
<form action="javascript:void(0)" onSubmit="showValues (this)" method="post" enctype="text/plain">
<div id="page1" class="page" style="visibility:visible;">
<label for="firstname">First Name</label>
<input type="text" id="firstname" name="firstname" placeholder="Your first name.." required>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your last name.." required>
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Your Email.." required>
<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone" placeholder="Your Number.." required>
<center><p><input class="button" type="button" id="C1" value="Continue" onClick="showLayer('page2')"></p></center>
</div>
<!-- First Page Break -->
<div id="page2" class="page">
<label for="title">Title</label>
<input type="text" id="title" name="title" placeholder="Your Title.." required>
<label for="companyname">Company Name</label>
<input type="text" id="companyname" name="companyname" placeholder="Your Company Name.." required>
<input class="button" type="submit" value="Submit">

Getting value to dialog box

I have a span which is used to add some content to DB with the help of a popup box. My problem is that I don't know how to pass ID to dialog box.
HTML:
<span class="block"><span class="uid" style="display:none">1</span></span>
JS:
$(document).ready(function() {
$(function() {
$("#Relation").dialog({
autoOpen: false
});
$(".addRelation").on("click", function() {
var uid = $(this).find('span').html();
$("#Relation").dialog("open");
});
});
});
This function opens a dialog box which used for adding datas.
<div id="Relation" title="Add Relation">
<form action="#" method="post" enctype="multipart/form-data">
<div class="input-group">
<input class="form-control" name="userId" id="userId" value="userId" type="hidden" placeholder="Enter e-mail Id">
<input class="form-control" name="rq_id" id="rq_id" value="rq_id" type="hidden">
<input class="form-control" name="rltn_name" id="rltn_name" type="text" placeholder="Enter Name">
<input class="form-control" name="email_id" id="email" type="text" placeholder="Enter e-mail Id">
<input class="form-control" name="phone" id="phone" type="text" placeholder="Enter phone no">
<input class="" name="newpic" id="newpic" type="file">
<input type="radio" name="live_status" class="live_status" value="1">Alive <input type="radio" class="live_status" name="live_status" value="0">not Alive
<input class="btn btn-info" type="submit" name="submit" value="Add Now"/>
</div>
</form>
</div>
When I click the span, the span data inside the dialog box. I don't know how to implement this.
Then add an hidden field like
<input class="form-control" name="uid" id="r_uid" value="111" type="hidden">
then set the value of the hidden field before opening it
$(function () {
$("#Relation").dialog({
autoOpen: false
});
$(".addRelation").on("click", function () {
var uid = $(this).find('span').html();
$('#r_uid').val(uid)
$("#Relation").dialog("open");
});
});
If you want the span value in <input class="form-control" name="userId" id="userId" value="userId" type="hidden" placeholder="Enter e-mail Id">, try this.
$(document).ready(function() {
$(function() {
$("#Relation").dialog({
autoOpen: false
});
$(".addRelation").on("click", function() {
var uid = $(this).find('span.uid').html();
$('#userId').val(uid);
$("#Relation").dialog("open");
});
});
});

Javascript failing to validate form

I am having trouble pinpointing why my javascript code is failing to validate the form on the bottom. Any help is appreciated. I'm new and learning when in comes to javascript.
Here's the javascript:
<script type="text/javascript" language="javascript">
function validate(){
//Initialize array
var field = new Array;
var field = [document.getElementById('first_name'),document.getElementById('last_name'),document.getElementById('address'),document.getElementById('eadress'),document.getElementById('city'),document.getElementById('state'),document.getElementById('telephone'),document.getElementById('comments')];
//Error tracker
var error = 0;
//Validation Loop
for (i=0;i<field.length;i++)
{
if (field[i].value == "")
{
error++;
}
}
//If no errors are present, submit
if (error == 0)
{
document.contact-form.submit();
}
//Else, display alert
else {
alert("One or more fields are empty.");
return false;
}
}
Here's the form:
<div id="registration">
<form action="" method="post" onsubmit="return validate();" id="contact-form">
<h2>Contact Us
</h2>
<div>
<label for="first_name">First Name:</label>
<input id="first_name" name="first_name" type="text" class="required" />
</div>
<div>
<label for="last_name">Last Name:</label>
<input id="last_name" name="last_name" type="text" class="required" />
</div>
<div>
<label for="address">Address:</label>
<input id="address" name="address" type="text" />
</div>
<div>
<label for="city">City:</label>
<input id="city" name="city" type="text" />
</div>
<div >
<label for="state">State:</label>
<input id="state" name="state" type="text" />
</div>
<div >
<label for="zip">Zip:</label>
<input id="zip" name="zip" type="text" />
</div>
<div>
<label for="eaddress">Email address:</label>
<input id="eaddress" name="eaddress" type="text" class="required"/>
</div>
<div>
<label for="telephone">Telephone:</label>
<input id="telephone" name="telephone" type="text" />
</div>
<div>
<label>Comments:</label>
<textarea rows="4" cols="4" name="comments" id="comments" ></textarea>
</div>
<div>
<label></label>
<input id="submit" type="submit" value="Submit" />
<input id="reset" type="reset" value="Reset" />
</div>
</form>
I just corrected your code. it seems that in the array you are asking for eadress and the field is eaddress with 2 d's
In the script, you misspelt eaddress as eadress :)
You misspelled one of the fields ids in your array definition document.getElementById('eadress') is eaddress in HTML id attribute

Categories