Theres a multi smtp form I found online. However the next and previous buttons are embedded into each fieldset and I would like them to be outside of thefieldset so they can be used for all the sets. Not just one.
And for the last one I'd .show() the submit button. As well as hide the previous button for the very first one.
Can this be done?
<fieldset>
<input type="text" name="firstname" placeholder="First Name">
<input type="button" name="next" class="next" value="Next">
</fieldset>
<fieldset>
<input type="text" name="lastname" placeholder="Last Name">
<input type="button"name="previous" class="previous" value="Previous">
<input type="button" name="next" class="next" value="Next">
</fieldset>
<fieldset>
<input type="text" name="email" placeholder="E-mail">
<input type="button" name="previous" class="previous" value="Previous">
<input type="submit" name="submit" value="Submit">
</fieldset>
$(document).ready(function(){
var current = 1,current_step,next_step,steps;
steps = $("fieldset").length;
$(".next").click(function(){
current_step = $(this).parent();
next_step = $(this).parent().next();
next_step.show();
current_step.hide();
setProgressBar(++current);
});
$(".previous").click(function(){
current_step = $(this).parent();
next_step = $(this).parent().prev();
next_step.show();
current_step.hide();
setProgressBar(--current);
});
setProgressBar(current);
});
You just need to keep track of the fieldsets and the current position.
Then, wrapping them in jQuery calls everything is easy. See this example, based on your code:
$(document).ready(function() {
var current = 0,
$form = $("form"),
$steps = $form.find("fieldset"),
numSteps = $steps.length;
function setProgressBar(pos) {
console.log("Step: " + pos);
}
function checkButtons() {
if (current <= 0) {
$(".prev").hide();
} else {
$(".prev").show();
}
if (current >= numSteps - 1) {
$(".next").hide();
$(".submit").show();
} else {
$(".next").show();
$(".submit").hide();
}
}
$(".next").click(function() {
$($steps[current]).hide();
$($steps[++current]).show();
setProgressBar(current);
checkButtons();
});
$(".prev").click(function() {
$($steps[current]).hide();
$($steps[--current]).show();
setProgressBar(current);
checkButtons();
});
checkButtons();
setProgressBar(current);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset>
<input type="text" name="firstname" placeholder="First Name">
</fieldset>
<fieldset style="display:none">
<input type="text" name="lastname" placeholder="Last Name">
</fieldset>
<fieldset style="display:none">
<input type="text" name="email" placeholder="E-mail">
</fieldset>
</form>
<input type="button" style="display:none" name="prev" class="prev" value="Previous">
<input type="button" style="display:none" name="next" class="next" value="Next">
<input type="submit" style="display:none" name="submit" class="submit" value="Submit">
You also need to take care of the visibility of the buttons, which is what the checkButtons function is for. I am sure more elegant approaches are possible, but this one works.
Also note the display: none styles on the elements which are hidden at start.
Related
I am using HTML and javascript to getting some values from the user. I have one input text and two buttons on the page. first button for adding input text to form and the second button for sending data to javascript script. my code is like the following code :
function add_input_function() {
var html = "<input type='text' placeholder='Your text' id='text_input[]'/><br/>";
$("#container").append(html);
}
function send_function() {
var inputs = document.getElementById("text_input");
for (var i = 0; i < inputs; i++) {
console.log(inputs.value);
}
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<form method="post">
<div id="container">
<input class="input" type="text" placeholder="Your text" id="text_input[]" /><br/>
</div>
<br/>
<input onclick="add_input_function()" type="button" id="add" value="Add Input">
<br/>
<input onclick="send_function()" type="button" id="add" value="Send">
</form>
I want to get all of the values and show them in the console and separate with -. Can you help me?
(My for loop doesn't work now)
Add some class for each input, then when you click on send button, grab all element by class selector, and iterate loop on element to get value
<form method="post">
<div id="container">
<input class="input info" type="text" placeholder="Your text" /><br/>
</div>
<br/>
<input onclick="add_input_function()" type="button" id="add" value="Add Input">
<br/>
<input onclick="send_function()" type="button" id="add" value="Send">
</form>
<script>
function add_input_function() {
var html = "<input type='text' class='info' placeholder='Your text' /><br/>";
$("#container").append(html);
}
function send_function() {
var inputText = [];
var inputs = document.getElementsByClassName("info");
for (var i = 0; i < inputs.length; i++) {
console.log(inputs[i].value);
inputText.push(inputs[i].value)
}
var finalContent = inputText.join(' - ');
console.log(finalContent);
}
</script>
This is an alternative
function add_input_function() {
var html = "<input type='text' placeholder='Your text' id='text_input[]'/><br/>";
$("#container").append(html);
}
function send_function() {
let result = '';
$('input[type="text"]').each(function(index){
result += $(this).val() + '-';
});
alert(result);
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<form method="post">
<div id="container">
<input class="input" type="text" placeholder="Your text" id="text_input[]" /><br/>
</div>
<br/>
<input onclick="add_input_function()" type="button" id="add" value="Add Input">
<br/>
<input onclick="send_function()" type="button" id="add" value="Send">
</form>
i hope it helps...
var index=1;
var inpidarr=[];
inpidarr.push("text_input0")
function add_input_function() {
var html = "<input type=\"text\" placeholder=\"Your text\" id=\"text_input".concat(String(index))+"\"/><br/>";
$("#container").append(html);
inpidarr.push("text_input".concat(String(index)))
index++;
}
function send_function() {
;
for(i=0;i<inpidarr.length;i++)
{
console.log(document.getElementById(inpidarr[i]).value);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<form method="post">
<div id="container">
<input class="input" type="text" placeholder="Your text" id="text_input0"/><br/>
</div>
<br/>
<input onclick="add_input_function()" type="button" id="add" value="Add Input">
<br/>
<input onclick="send_function()" type="button" id="add" value="Send">
</form>
Ok, so this is a bit confusing to explain but basically, I am creating a checkout page which users can either choose "delivery" or "Pickup", once chosen it 'unhides' the corresponding form which once filled out will send data to the next page. The problem is that I want to use the same id's for both forms but just add an address to the delivery one but it seems like it will only take data from the first/top form which is the takeaway-
function Delivery1() {
var x = document.getElementById("Pickup");
var y = document.getElementById("Delivery");
var w = document.getElementById("btn1");
var z = document.getElementById("btn2");
if (y.style.display === "none") {
x.style.display = "none";
y.style.display = "block";
w.style.backgroundColor = "#b20c0c";
z.style.backgroundColor = "#cc1400";
} else {
y.style.display = "none";
}
}
function Pickup1() {
var y = document.getElementById("Delivery");
var x = document.getElementById("Pickup");
var w = document.getElementById("btn1");
var z = document.getElementById("btn2");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none";
z.style.backgroundColor = "#b20c0c";
w.style.backgroundColor = "#cc1400";
} else {
z.style.backgroundColor = "#cc1400";
x.style.display = "none";
}
}
<center>
<button id="btn1" onclick="Delivery1()" class="btn" style="height:90px; width: 180px">Delivery</button>
<button id="btn2" onclick="Pickup1()" class="btn" style="height:90px; width: 180px">Pickup</button>
</center>
<div id="Pickup" style="display: none;">
<form action="order.html" method="post" id="checkout-order-form">
<fieldset id="fieldset-billing">
<legend>Pickup</legend>
<div>
<label for="name">Name</label>
<input type="text" name="name" id="name" data-type="string" data-message="This field cannot be empty" />
</div>
<div>
<label for="email">Phone Number</label>
<input type="text" name="email" id="email" data-type="expression" data-message="Not a valid phone address" />
</div>
<div>
<label for="country">Select Store</label>
<select name="country" id="country" data-type="string" data-message="This field cannot be empty">
<option value="">None</option>
<option value="Leopold">Leopold</option>
</select>
</fieldset>
<p><input type="submit" id="submit-order" value="Submit" class="btn" /></p>
</div>
</form>
<div id="Delivery" style="display: none;">
<form action="order.html" method="post" id="checkout-order-form">
<fieldset id="fieldset-shipping">
<legend>Delivery</legend>
<div>
<label for="name">Name</label>
<input type="text" name="name" id="name" data-type="string" data-message="This field cannot be empty" />
</div>
<div>
<label for="email">Phone Number</label>
<input type="text" name="email" id="email" data-type="expression" data-message="Not a valid phone number" />
</div>
<div>
<label for="address">Address</label>
<h3>(Must be in or in neighbouring suburbs of leopold no more than 10km)</h3>
<input type="text" name="address" id="address" data-type="string" data-message="This field cannot be empty" />
</div>
</fieldset>
<p><input type="submit" id="submit-order" value="Submit" class="btn" /></p>
</div>
</form>
</div>
</div>
<footer id="site-info">
Copyright © Fu Chinese
</footer>
If its needed i can post the javascript form but its quite long. If anyone can help me with a solution or easier way to do this that would be great. Thanks :)
You cannot have more than one element with the same Id.
The purpose of the ID is to identify elements on page, therefore, you can have only one element per ID.
You can have multiple elements with the same "name" but not with the same ID.
To solve your problem, do the following:
Put a different ID for each form.
Put the attribute form in the input tag in your form.
Form 1:
<form action="order.html" method="post" id="checkout-order-form-billing">
<input type="submit" id="submit-order" value="Submit" class="btn" form="checkout-order-form-billing" />
Form 2:
<form action="order.html" method="post" id="checkout-order-form-shipping">
<input type="submit" id="submit-order" value="Submit" class="btn" form="checkout-order-form-shipping" />
This way, the input tag knows which form to submit.
Hope it helps.
Basically, I want to prepend a div only if the div I'm prepending isn't already showing.
$(".loginForm").submit(function() {
var username = $("input.username").val();
var password = $("input.password").val();
var errorvisible = $("body").has(".alert.error");
if (!username || !password && errorvisible == false) {
$('body').prepend("<div class=\"error alert\">One or more field(s), have been left empty</div>");
setTimeout(function() {
$('.error.alert').fadeOut('1000', function() {
$('.error.alert').remove();
});
}, 6000);
event.preventDefault();
}
});
At the moment, I'm trying to make it so the jquery will only do the if empty if statement if the error isn't currently visible however it's not working...
<div class="pageCont">
<div class="title">
<h1>LetsChat</h1>
<h4>The new way of interaction.</h4>
</div>
<div class="login box">
<form method="POST" action="#" class="loginForm">
<input type="text" class="loginInput username" placeholder="Aquinas Email or Number" /><br>
<input type="password" class="loginInput password" placeholder="Password" /><br>
<div class="checkBox">
<input type="checkbox" id="checkBoxLink">
<label for="checkBoxLink">Remember Me</label>
Forgotten your password?
</div>
<input type="submit" value="Submit" class="login btn green" />
<input type="reset" value="Clear Fields" class="reset btn green" />
</form>
</div>
<div class="signup box">
<form method="POST" action="#" class="signupForm">
<input type="text" class="signupInput" placeholder="First Name" /><br>
<input type="text" class="signupInput" placeholder="Last Name" /><br>
<input type="text" class="signupInput" placeholder="Aquinas Email" /><br>
<input type="password" class="signupInput" placeholder="Password" /><br>
<input type="submit" class="purple btn signup" value="Sign Up Today!">
</form>
</div>
</div>
The below should work if I'm understanding your question correctly?
$(".loginForm").submit(function() {
var username = $("input.username").val();
var password = $("input.password").val();
var errorvisible = $("body").has(".alert.error").length;
if (!username || !password)
{
if(errorvisible == 0)
$('body').prepend("<div class=\"error alert\">One or more field(s), have been left empty</div>");
setTimeout(function() {
$('.error.alert').fadeOut('1000', function() {
$('.error.alert').remove();
});
}, 6000);
event.preventDefault();
}
});
I have used this type of code many times:
if(!$('#myFancyDiv').is(':visible')) {
//prepend or do whatever you want here
}
BTW just for clarity, this code checks if 'myFancyDiv' is not visible.
You can check whether the .error.alert elements exists, if so don't do anything else create a new one
$(".loginForm").submit(function() {
var username = $("input.username").val();
var password = $("input.password").val();
var errorvisible = $("body").has(".alert.error");
if (!username || !password && errorvisible == false) {
if (!$('.error.alert').length) {
$('body').prepend("<div class=\"error alert\">One or more field(s), have been left empty</div>");
setTimeout(function() {
$('.error.alert').fadeOut('1000', function() {
$(this).remove();
});
}, 6000);
}
event.preventDefault();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="#" class="loginForm">
<input type="text" class="loginInput username" placeholder="Aquinas Email or Number" />
<br>
<input type="password" class="loginInput password" placeholder="Password" />
<br>
<div class="checkBox">
<input type="checkbox" id="checkBoxLink">
<label for="checkBoxLink">Remember Me</label>
Forgotten your password?
</div>
<input type="submit" value="Submit" class="login btn green" />
<input type="reset" value="Clear Fields" class="reset btn green" />
</form>
In a Form, there are multiple div Panels
<form>
<div class="panel1">
<input type="text" value="" name="bank0" id="bank0">
<input type="text" value="" name="shank0" id="shank0">
<input type="text" value="" name="dhank0" id="dhank0">
<input type="text" value="" name="raank0" id="raank0">
</div>
<hr>
<div class="panel2">
<input type="text" value="" name="bank1" id="bank1">
<input type="text" value="" name="shank1" id="shank1">
<input type="text" value="" name="dhank1" id="dhank1">
<input type="text" value="" name="raank1" id="raank1">
</div>
</form>
Requirement:
If user left panel1 blank and entered text to panel 2;
then we want to shift all values from panel 2 to panel 1; during final submission of form.
In real use case we have 10 such panels.
Fiddle: https://jsfiddle.net/rop5f0d6/
Try this.
var inputsValue = [];
$("button").click(function () {
$(".panel2 input").each(function () {
inputsValue.push(this.value);
});
$(".panel1 input").each(function (i, value) {
$(this).val(inputsValue[i]);
});
inputsValue = [];
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="panel1">
<input type="text" value="" name="bank0" id="bank0">
<input type="text" value="" name="shank0" id="shank0">
<input type="text" value="" name="dhank0" id="dhank0">
<input type="text" value="" name="raank0" id="raank0">
</div>
<hr>
<div class="panel2">
<input type="text" value="" name="bank1" id="bank1">
<input type="text" value="" name="shank1" id="shank1">
<input type="text" value="" name="dhank1" id="dhank1">
<input type="text" value="" name="raank1" id="raank1">
</div>
<hr>
<button>Submit</button>
This will only move the data from panel 2 to panel 1 if the first panel is left blank (what I read from the requirements).
Also it wipes panel 2 data to prevent duplicate form data being posted. From your question I think this is what you are aiming for?
Here is how you can implement this functionality in jQuery:
$("button").click(function(){
var moveData = true, formvalues = [];
$(".panel1 input").each(function(e, field){
if( field.value != '' ){
moveData = false;
return false;
}
});
// only move data if first panel is blank
if( moveData ){
$(".panel2 input").each(function(){
formvalues.push( this.value );
this.value = '';
});
$(".panel1 input").each(function (i) {
this.value = formvalues[i];
});
}
});
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div class="panel1">
<input type="text" value="" name="bank0" id="bank0">
<input type="text" value="" name="shank0" id="shank0">
<input type="text" value="" name="dhank0" id="dhank0">
<input type="text" value="" name="raank0" id="raank0">
</div>
<hr>
<div class="panel2">
<input type="text" value="" name="bank1" id="bank1">
<input type="text" value="" name="shank1" id="shank1">
<input type="text" value="" name="dhank1" id="dhank1">
<input type="text" value="" name="raank1" id="raank1">
</div>
<hr>
<button>Submit</button>
I've also written the solution in vanilla JS for your reference (possibly useful) as plain JS is more efficient in performance.
var submitBtn = document.getElementsByTagName("button")[0];
submitBtn.addEventListener("click", function(){
var moveData = true,
formvalues = [],
panel1 = document.getElementsByClassName("panel1"),
panel1Fields = panel1[0].getElementsByTagName("input"),
panel2 = document.getElementsByClassName("panel2"),
panel2Fields = panel2[0].getElementsByTagName("input");
for(var i=0; i < panel1Fields.length; i++){
if( panel1Fields[i].value != '' ){
moveData = false;
return false;
}
}
// only move data if first panel is blank
if( moveData ){
for(var i=0; i < panel2Fields.length; i++){
formvalues.push( panel2Fields[i].value );
panel2Fields[i].value = '';
}
for(var i=0; i < panel1Fields.length; i++){
panel1Fields[i].value = formvalues[i];
}
}
});
<div class="panel1">
<input type="text" value="" name="bank0" id="bank0">
<input type="text" value="" name="shank0" id="shank0">
<input type="text" value="" name="dhank0" id="dhank0">
<input type="text" value="" name="raank0" id="raank0">
</div>
<div class="panel2">
<input type="text" value="" name="bank1" id="bank1">
<input type="text" value="" name="shank1" id="shank1">
<input type="text" value="" name="dhank1" id="dhank1">
<input type="text" value="" name="raank1" id="raank1">
</div>
<button>Send</button>
I did a website and made a form ,and I have done the most of the validation but I am stuck at one. what I am trying to achieve here is when the the submit button of the form is clicked, a alert message show appear on screen saying thanks'customer name' for feed back and you chose 'radiobutton' and your comment was 'textincommentfield'.for one or another reason validation is not working. Any help would be great and thanks in advance , btw I am new to this.
Code: http://jsfiddle.net/92tSw/
HTML:
<title> Contact</title>
<body>
<div class="container">
<div id="wrap">
<div id="logo">
<img class="p" src="images/logo.png" align="left">
</div>
<img class="d" src="images/title.gif" align="middle">
<div id="menu">
<div id="menu2">
<ul>
<li><a href="homepage.html" ><span>Home</span></a></li>
<li><a href="about.html" ><span>About Us</span></a></li>
<li><a href="clubs.html" ><span>Clubs</span></a></li>
<li><a href="shop.html" ><span>Shop</span></a></li>
<li><a href="contact.html" ><span>Contact Us</span></a></li>
</ul>
</div>
</div>
<form>
<fieldset>
<legend style="font-size:20px; padding-top:20px;">Fill in the form Below to contact Us:</legend>
<p><label for="full name">Full Name:</label>
<input id="full name" type="text" size="40" name="customername" placeholder="Type first and last name" autofocus/></p>
<p><label for="Address">Address:</label>
<input type="text" name="address1" placeholder="Address Line 1" size="42%">
<input type="text" name="address2" placeholder="Address Line 2" size="42%">
<p><label for="Address"> </label>
<input type="text" name="city" placeholder="City/Town" size="20%">
<input type="text" name="postcode" placeholder="Post Code" size="20%"></p>
<p><label for="Telephone No.">Telephone Number:</label>
<input type="text" name="Telephone No." maxlenght="12"placeholder=" Enter Telephone No." size="42%"></p>
<p><label for="email">Email:</label>
<input name="email" type="email" size="25" placeholder="youremail#you.com" /></p>
<legend style="font-size:20px;" >Comments</legend>
<p><label for="quantity"> How great is the website?Choose one<em>*</em> :</label>
<input type="radio" name="myRadio" value="VG" >Very Great
<input type="radio" name="myRadio" value="G" >Great
<input type="radio" name="myRadio" value="NVG">Not Very Great
<input type="radio" name="myRadio" value="U" >Useless
<BR>
<BR>
<BR>
<BR>
<p><label for="comment">Your Message:</label>
<textarea cols="35" rows="5" name="comments" Placeholder="eg. please knock on the dooor, ring the bell etc." >
</textarea></p>
</fieldset>
<fieldset>
<input type="checkbox" name="Terms and Condition"value="Terms and Condition" required> Accept Terms and Condition<br>
<input id="bor" type="reset" value="Reset">
<input id="chor" type="submit" name="button" value="Submit" onclick="getMyForm(this.form)" >
</fieldset>
</div>
</div>
CSS:
form{ padding-top:100px; color:White;}
fieldset { background-color:#980000 ; margin: 1%;}
label { float:left; width:20%; text-align:right;}
legend{font-weight:bold;}
.foot {
padding-top:.75pt;
padding-bottom:.75pt;
padding-right:auto;
padding-left:auto;
width:100%;
}
JS:
function getMyForm(frm)
{
var myinfo = getRadioValue(frm.myRadio);
var customername = document.getElementById("customer").value;
var comment = document.getElementById("comment").value;
alert("Dear"+ customername + ",Thank you very much for your feedback.You have rated our site as" + myinfo +"your comment was Very informative website."+ comment +".");
}
function getRadioValue(radioArray){
var i;
for (i = 0; i < radioArray.length; i++){
if (radioArray[i].checked) return radioArray[i].value;}
return "";
}
It may be better to have the event on the form
<form id="form1" onsubmit="return getMyForm(this)">
To prevent the form from actually submitting, you have to return false; from the javascript method.
To submit the form programmatically in JS
frm.submit();
Or
document.getElementById("form1").submit();
Then return true; from the function under the right conditions to allow the submit to complete.
(I noticed you didn't include the action and method attributes on the form. I assumed this was just for the example.)
http://jsfiddle.net/92tSw/2/
Use JQuery if you are new to javascript.. its much more comfortable:
$(document).ready(function() {
$("#yourmockform").submit(function(e) {
var customername = $(this).find('#fullname').val();
var comment = $(this).find('#comment').val();
var myinfo = $(this).find('[name="myRadio"]:checked').attr('value');
alert("Dear"+ customername + ",Thank you very much for your feedback.You have rated our site as" + myinfo +"your comment was Very informative website."+ comment +".");
return false;
});
});