Restrict JQuery keypress event to fire one at the same time? - javascript

I have three different forms, when each form is filled the keypress "enter" fires and shows a picture. I have two pictures and both are firing at the same time but I want one to fire when enter is pressed once and the other one fired when the second form is completed but they both fire at the same time.
This is my HTML:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="Opdracht4_5.js"></script>
<link rel="stylesheet" href="Opdracht%204_5.css">
<title></title>
</head>
<h1 span class="white">Info Day</span> <span class="blue">Registration</span></h1>
<body>
<form name="form1" onsubmit="validateForm()" method="post">
<fieldset id="fieldset1">
<legend>Step 1</legend>
How many people will be attending?
<select name = step1 id="step1" onchange="showField()">
<option value="0">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br>
<div id="divName"></div>
<img id="check" src="check.png">
</fieldset>
</form>
<form name="form2" onsubmit="return validateForm()" method="post">
<fieldset id= "fieldset2">
<legend>Step 2</legend>
Would you like your company name on your badges?<br>
<input type="radio" id="companyYes" name="company">Yes<input type="radio" id="companyNo" name="company">No<br>
<input type="text" id="companyText">
<br>
<div id="company"></div>
Will anyone in your group require special accommodations?<br>
(if yes) Please explain below:<br>
<input type="radio" name="special" id="specialYes" value="Yes">Yes<input type="radio" id="specialNo" name="special" value="No">No<br>
<input type="text" id="specialText">
<img id="check2" src="check.png">
</fieldset>
</form>
<form>
<fieldset id="fieldset3">
<legend>Step 3</legend>
I confirm that all provided data is accurate? <br>
<input type="checkbox" name="complete" value="complete"><input type="submit" name="register" value="Complete Registration">
</fieldset>
</form>
</body>
</html>
This is my JS:
function showField(){
var selectDropDown = $("#step1");
var value = selectDropDown.val();
var insertDiv = $("#divName");
var innerHtmlString = "";
var value2 = $("#Yes")
if(value > 0){
innerHtmlString = "<b>Please provide full names: </b> <br/>";
}
for(i = 0; i < value; i++){
innerHtmlString += "<i>Attendee " + (i+1) + " Name:</i> <input type='text' name='"+(i+1)+"' /> </br><br/>";
}
insertDiv.html(innerHtmlString);
};
$(document).on("keypress", function (e) {
if (e.which == 13 || e.keyCode == 13){
$("#check").show();
}
});
$(document).on("")
function validateForm(){
alert("test");
}
$(Document).on("click",function(){
});
$( document ).ready(function() {
$("#check").hide();
$("#specialText").hide();
$("#companyText").hide();
$("#check2").hide();
$("#companyYes").on("click", function() {
$("#companyText").show();
});
$("#companyNo").on("click", function() {
$("#companyText").hide();
});
$("#specialYes").on("click", function() {
$("#specialText").show();
});
$("#specialNo").on("click", function() {
$("#specialText").hide();
});
});
$(document).ready();
$(document).on("keypress", function (e) {
if (e.which == 13 || e.keyCode == 13){
$("#check2").show();
}
});
$(document).on("")
How do I fix this?

You have two $(document).on("keypress", function {}) events which should be one and you can check whether the #check is visible. If it is not visible then show this otherwise show the second image as below.
$(document).on("keypress", function (e) {
if (e.which == 13 || e.keyCode == 13){
if($("#check").is(':visible')) {
$("#check2").show();
} else {
$("#check").show();
}
}
});
Notes:
You had two $(document).on("") which is invalid and should be
removed (commented below).
And the Document in $(Document).on("click",function(){}) is also
wrong and should be removed.
Also, in your html the h1 tag is not closed properly as <h1 span
class="white"> which should be <h1> <span class="white">
Working snippet:
function showField(){
var selectDropDown = $("#step1");
var value = selectDropDown.val();
var insertDiv = $("#divName");
var innerHtmlString = "";
var value2 = $("#Yes")
if(value > 0){
innerHtmlString = "<b>Please provide full names: </b> <br/>";
}
for(i = 0; i < value; i++){
innerHtmlString += "<i>Attendee " + (i+1) + " Name:</i> <input type='text' name='"+(i+1)+"' /> </br><br/>";
}
insertDiv.html(innerHtmlString);
};
$(document).on("keypress", function (e) {
if (e.which == 13 || e.keyCode == 13){
if($("#check").is(':visible')) {
$("#check2").show();
} else {
$("#check").show();
}
}
});
//$(document).on("")
function validateForm(){
alert("test");
}
/*$(Document).on("click",function(){
});*/
$( document ).ready(function() {
$("#check").hide();
$("#specialText").hide();
$("#companyText").hide();
$("#check2").hide();
$("#companyYes").on("click", function() {
$("#companyText").show();
});
$("#companyNo").on("click", function() {
$("#companyText").hide();
});
$("#specialYes").on("click", function() {
$("#specialText").show();
});
$("#specialNo").on("click", function() {
$("#specialText").hide();
});
});
/*$(document).ready();
$(document).on("keypress", function (e) {
if (e.which == 13 || e.keyCode == 13){
$("#check2").show();
}
});
$(document).on("")*/
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="Opdracht4_5.js"></script>
<link rel="stylesheet" href="Opdracht%204_5.css">
<title></title>
</head>
<h1> <span class="white">Info Day</span> <span class="blue">Registration</span></h1>
<body>
<form name="form1" onsubmit="validateForm()" method="post">
<fieldset id="fieldset1">
<legend>Step 1</legend>
How many people will be attending?
<select name = step1 id="step1" onchange="showField()">
<option value="0">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br>
<div id="divName"></div>
<img id="check" src="check.png">
</fieldset>
</form>
<form name="form2" onsubmit="return validateForm()" method="post">
<fieldset id= "fieldset2">
<legend>Step 2</legend>
Would you like your company name on your badges?<br>
<input type="radio" id="companyYes" name="company">Yes<input type="radio" id="companyNo" name="company">No<br>
<input type="text" id="companyText">
<br>
<div id="company"></div>
Will anyone in your group require special accommodations?<br>
(if yes) Please explain below:<br>
<input type="radio" name="special" id="specialYes" value="Yes">Yes<input type="radio" id="specialNo" name="special" value="No">No<br>
<input type="text" id="specialText">
<img id="check2" src="check.png">
</fieldset>
</form>
<form>
<fieldset id="fieldset3">
<legend>Step 3</legend>
I confirm that all provided data is accurate? <br>
<input type="checkbox" name="complete" value="complete"><input type="submit" name="register" value="Complete Registration">
</fieldset>
</form>
</body>
</html>

Related

How To Fill-Up a particular field of HTML form Based On dropdown selection made

Any way of making this code work with a select dropdown instead of a button? I am trying to use this to fill in a address from a dropdown and allow the user to modify as needs are needed.
<HEAD>
<TITLE>Test</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function testResults (form) {
var TestVar1 = form.input[0].checked;
var TestVar2 = form.input[1].checked;
if (TestVar1 == true) {
form.textbox.value = "Full Home Automation Package";
} else if (TestVar2 == true){
form.textbox.value = "Some Other Package";
} else if (TestVar1 == false && TestVar2 == false) {
form.textbox.value = "";
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="" METHOD="POST">Choose a Service: <BR>
<INPUT TYPE="radio" NAME="input" VALUE="red" onChange="testResults(this.form)">Service 1<P>
<INPUT TYPE="radio" NAME="input" VALUE="blue" onChange="testResults(this.form)">Service 2<P>
<P>Service Package Selected:</P> <INPUT TYPE="text" ID="textbox" NAME="selected" VALUE=""></div><p>
</FORM>
</BODY>
thanks for any help
You can use onchange on select and then if the value matches change the text of the input.
<!DOCTYPE html>
<html>
<HEAD>
<TITLE>Test</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function testResults(value) {
let textbox = document.getElementById("textbox");
if (value === '') {
textbox.value === '';
} else if (value === 'service1') {
textbox.value = 'Full Home Automation Package';
} else if (value === 'service2') {
textbox.value = "Some Other Package";
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="" METHOD="POST">Choose a Service: <BR>
<select onchange="testResults(value)" name="service">
<option disabled selected>Choose one</option>
<option value="service1">service1</option>
<option value="service2">service2</option>
</select>
<P>Service Package Selected:</P> <INPUT TYPE="text" ID="textbox" NAME="selected" VALUE=""></div>
<p>
</FORM>
</BODY>
</html>

How to perform on-submit form validation

I want to replace the after-submission checks in the form with on-the-fly completeness and correctness checks that are performed when a form field loses focus.
How can I do this?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<title>Form</title>
<style>
body {
width: 500px;
}
.part {
width: 100%;
padding: 5px;
border-bottom: 1px solid #000;
}
label {
margin-right: 5px;
}
.label-left {
text-align: right;
}
.label-right {
text-align: left;
}
.error {
color: #cc0000;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
//$(document).ready(function() {
function myValidateEMailAddress(email_address) {
var email_pattern = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
return email_pattern.test(email_address);
}
function checkPassword(pwd_str) {
var my_pwd_pattern = /^(?=.*[a-zA-Z].*[a-zA-Z])(?=.*\d.*\d)[a-zA-Z0-9_]{6,20}$/;
return my_pwd_pattern.test(pwd_str);
}
function validatePhoneNumber(phone_number) {
var phone_pattern = /^(\(?\+?[0-9]*\)?)?[0-9_\- \(\)]*$/;
return phone_pattern.test(phone_number);
}
$(document).ready(function() {
$('#form').submit(function(e) {
var my_errors = false;
$('.part> .error').remove();
$('#my_submission').empty();
$(':text, :password, textarea').each(function() {
$(this).val($.trim($(this).val()));
if ($(this).val() == '') {
$(this).parent().append('<div class="error">Please provide a value</div>');
my_errors = true;
}
});
if ($('#email').val() != '') {
if (!myValidateEMailAddress($('#email').val())) {
$('#email').parent().append('<div class="error">Please provide a correct e-mail address</div>');
my_errors = true;
}
}
if ($('#your_password').val() != '') {
if (!checkPassword($('#your_password').val())) {
$('#your_password').parent().append('<div class="error">Please provide a correct password.</div>');
my_errors = true;
}
}
if ($('#phone').val() != '') {
if (!validatePhoneNumber($('#phone').val())) {
$('#phone').parent().append('<div class="error">Please provide a correct phone number.</div>');
my_errors = true;
}
}
if ($('#addresses option:selected').val() == '') {
$('#addresses').parent().append('<div class="error">Please select one item</div>');
my_errors = true;
}
if ($(':radio[name="sex"]:checked').length == 0) {
$(':radio[name="sex"]:first').parent().after('<div class="error">Please select one item</div>');
my_errors = true;
}
if ($(':radio[name="subscription"]:checked').length == 0) {
$(':radio[name="subscription"]:first').parent().after('<div class="error">Please select one item</div>');
my_errors = true;
}
if ($('#likes option:selected').val() == '') {
$('#likes').parent().append('<div class="error">Please select one item</div>');
my_errors = true;
}
if (my_errors) {
return false;
}
else {
e.preventDefault();
var my_submission_array = $('#form').serialize().split('&');
if (my_submission_array.length > 0) {
$('#my_submission').html('<h2>Submitted Elements</h2><ul></ul>');
for (var i = 0; i < my_submission_array.length; i++) {
var my_pair = my_submission_array[i].split('=');
$('#my_submission > ul').append('<li>' + my_pair[0] + ': ' + my_pair[1] + '</li>\n');
}
}
}
});
});
// });
</script>
</head>
<body>
<h3>Output:</h3>
<h2>My Questionnaire</h2>
<form name="form" id="form" action="" method="post">
<div class="part">
<label for="addresses" class="label-left">How should you be addressed?</label>
<select name="addresses" id="addresses">
<option value="">Please select one</option>
<option value="first">Mr.</option>
<option value="second">Madam</option>
<option value="third">Miss</option>
<option value="fourth">Dr.</option>
<option value="fifth">Pr.</option>
</select>
</div>
<div class="part">
<fieldset>
<legend>Sex:</legend>
<input type="radio" name="sex" id="group1" value="1">
<label for="group1" class="label-right">Male</label>
<input type="radio" name="sex" id="group2" value="2">
<label for="group2" class="label-right">Female</label>
</fieldset>
</div>
<div class="part">
<label for="last_name" class="label-left">Last Name: </label>
<input type="text" name="last_name" id="last_name">
</div>
<div class="part">
<label for="first_name" class="label-left">First Name: </label>
<input type="text" name="first_name" id="first_name">
</div>
<div class="part">
<label for="email" class="label-left">E-Mail: </label>
<input type="text" name="email" id="email">
</div>
<div class="part">
<label for="your_password">Password:</label>
<input type="password" name="your_password" id="your_password" size="10" maxlength="20">
</div>
<div class="part">
<label for="phone" class="label-left">Phone number: </label>
<input type="text" name="phone" id="phone">
</div>
<div class="part">
<label for="likes" class="label-left">What are your likes?</label>
<select name="likes" id="likes">
<option value="">Please select one</option>
<option value="first">Programming</option>
<option value="second"> African literature</option>
<option value="third">Poetry</option>
<option value="four">Dancing</option>
</select>
</div>
<div class="part">
<fieldset>
<legend>Do you want to receive our newsletter ?</legend>
<input type="radio" name="subscription" id="group1" value="1">
<label for="group1" class="label-right">Yes</label>
<input type="radio" name="letter" id="group2" value="2">
<label for="group2" class="label-right">No</label>
</fieldset>
</div>
<div class="part">
<label for="comments" class="label-left">Write some comments below:</label>
<textarea name="comments" id="comments" cols="40" rows="3"></textarea>
</div>
<div class="part">
<input type="submit" name="submit" id="submit" value="Submit Form">
</div>
<div id="my_submission"></div>
</form>
</body>
</html>
Before I continue answering, I should note that you're putting jQuery script before <html> tag. This is incorrect. It has to be in <head>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
...
performed when a form field loses focus
An element loses focus when you click away from it. jQuery happends to have a blur event for this occasion:
$('input').on('blur', function() {
// your code here
});
So you might want to do it this way:
$('#email').on('blur', function() {
var emailVal = $(this).val();
if (!emailVal || !myValidateEMailAddress(emailVal)) {
$(this).parent().append('<div class="error">Please provide a correct e-mail address</div>');
my_errors = true;
}
});
the rest of the code might look similar.

form onsubmit not working

I've been looking for 3 hours now for this error, and I can't for the life of me find it. It looks like the onsubmit isn't being called for whatever reason. I'm trying to make sure the user enters a non-negative number in each field
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function validate(){
var wid1 = document.getElementByName("widget1").value;
var wid2 = document.getElementByName("widget2").value;
var wid3 = document.getElementByName("widget3").value;
if(isNaN(wid1)||isNaN(wid2)||isNaN(wid3)){
alert("all values entered must be numbers");
return false;
}
else if(wid1 < 0 || wid2 < 0 || wid3 < 0){
alert("all values must be greater than zero");
return false;
}
if(wid1+wid2+wid3 > 25){
if(!confirm("you have more than 25 items. Will you accept the additional shipping?")){
return false;
}
}
return true;
}
</script>
</head>
<body>
<form name="order" action="calculations.php" method="get" onsubmit="return validate()">
<p>37AX-L:</p>
<input type="text" name="widget1" value="0" required/>
<br>
<p>42XR-J</p>
<input type="text" name="widget2" value="0" required/>
<br>
<p>93XX-A</p>
<input type="text" name="widget3" value="0" required/>
<br>
<input type="radio" name="State" value="MO" checked>Missouri</input>
<br>
<input type="radio" name="State" value="IL">Illinois</input>
<br>
<input type="submit" value="submit"/>
</form>
</body>
</html>
First, the name of the function is getElementsByName -- Elements is plural.
Second, since this returns a NodeList, you need to index the result to access a specific element, so you can access its value.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function validate(){
var wid1 = document.getElementsByName("widget1")[0].value;
var wid2 = document.getElementsByName("widget2")[0].value;
var wid3 = document.getElementsByName("widget3")[0].value;
if(isNaN(wid1)||isNaN(wid2)||isNaN(wid3)){
alert("all values entered must be numbers");
return false;
}
else if(wid1 < 0 || wid2 < 0 || wid3 < 0){
alert("all values must be greater than zero");
return false;
}
if(wid1+wid2+wid3 > 25){
if(!confirm("you have more than 25 items. Will you accept the additional shipping?")){
return false;
}
}
return true;
}
</script>
</head>
<body>
<form name="order" action="calculations.php" method="get" onsubmit="return validate()">
<p>37AX-L:</p>
<input type="text" name="widget1" value="0" required/>
<br>
<p>42XR-J</p>
<input type="text" name="widget2" value="0" required/>
<br>
<p>93XX-A</p>
<input type="text" name="widget3" value="0" required/>
<br>
<input type="radio" name="State" value="MO" checked>Missouri</input>
<br>
<input type="radio" name="State" value="IL">Illinois</input>
<br>
<input type="submit" value="submit"/>
</form>
</body>
</html>
You can do it like this
$('#submitIT').submit(function(e){
console.log("callingIT");
var wid1 = document.getElementById("widget1").value;
var wid2 = document.getElementById("widget2").value;
var wid3 = document.getElementById("widget3").value;
if(isNaN(wid1)||isNaN(wid2)||isNaN(wid3)){
console.log("all values entered must be numbers");
e.preventDefault();
}
else if(wid1 < 0 || wid2 < 0 || wid3 < 0){
console.log("all values must be greater than zero");
e.preventDefault();
}
if(wid1+wid2+wid3 > 25){
if(!confirm("you have more than 25 items. Will you accept the additional shipping?")){
e.preventDefault();
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="submitIT" name="order" action="calculations.php" method="get">
<p>37AX-L:</p>
<input type="text" id="widget1" value="0" required/>
<br>
<p>42XR-J</p>
<input type="text" id="widget2" value="0" required/>
<br>
<p>93XX-A</p>
<input type="text" id="widget3" value="0" required/>
<br>
<input type="radio" id="State" value="MO" checked>Missouri</input>
<br>
<input type="radio" id="State" value="IL">Illinois</input>
<br>
<input type="submit" value="submit"/>
</form>
</body>
</html>

Jquery event handling when a checkbox is clicked

edit Updated full code :
I'm working on my first Javascript case i'm stuck here :
I have the following :
$(document).ready(function()
{
$('input, select').on('focus' ,swapPersonClass);
//Blur = Bind an event handler to the “blur” JavaScript event, or trigger that event on an element.
$('input, select').on("change", updateCart);
}
);
// Functions
var swapPersonClass = function()
{
var expression = $(this).attr('id');
switch(expression)
{
case "fullname":
break;
case "email":
$("#arm").removeClass().addClass("pointemail");
break;
case "countpizzas":
$("#arm").removeClass().addClass("pointamount");
break;
default:
$("#arm").removeClass().addClass("pointothers");
}
};
var updateCart = function () {
var change = $(this).attr('id');
console.log(change);
$('input, select').each(function ()
{
switch (change)
{
case "fullname":
$("#displayname").text($('#fullname').val() + ',');
break;
case "countpizzas":
aantalpizzas = $("#countpizzas").val();
if (aantalpizzas > 1) {
$('.plural').show();
} else {
$('.plural').hide();
};
$("#displayamount").text(aantalpizzas);
console.log(aantalpizzas);
break;
case "pizzatype":
PrijsPizza = $("#pizzatype option:selected").data("price");
console.log(PrijsPizza);
break;
case "YesOption":
$("#toppings").show();
break;
case "NoOption":
$("#toppings").hide();
break;
case "toppings":
updateTopping();
break;
};
$("#currenttotal").text(aantalpizzas * PrijsPizza );
});
};
var updateTopping = function ()
{
$(".chk_topping").change(function()
{
var selected_topping = $(this).attr('data-value');
switch(selected_topping)
{
case "salami":
$("#currenttotal").text(aantalpizzas * PrijsPizza );
PrijsTopping += 0.30;
break
}
});
};
var PrijsTopping = 0.30;
var aantalpizzas = 0;
var PrijsPizza = 0;
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="assets/css/reset.css"/>
<link rel="stylesheet" href="assets/css/screen.css" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<div id="container">
<header>
<h1>Pizza Palace</h1>
</header>
<aside>
<h2><span>Order details</span></h2>
<div id="total">
<p>Your current order total: € <strong id="currenttotal">0</strong></p>
</div>
<p><strong id="displayname"></strong> you are ordering <strong id="displayamount"></strong> pizza<span
class="plural">s</span></p>
<h3>Chosen toppings:</h3>
<div id="toppingmessage">
<p>No toppings selected</p>
<ul>
<li class="hide">Salami</li>
<li class="hide">Olives</li>
<li class="hide">Ansjovis</li>
</ul>
</div>
<h3>Your discount: </h3>
<p id="displaydiscount"></p>
</aside>
<form action="#" method="post">
<figure id="arm"></figure>
<figure id="face"></figure>
<fieldset class="personbody">
<form>
<div>
<label for="fullname">Full Name
<input id="fullname" name="fullnames" type="text" required autofocus>
</label>
</div>
<div>
<label for="email">Email
<input id="email" name="email" type="email" placeholder="Enter Your email" required>
</label>
</div>
<div>
<label for="howmany">How many pizzas would you like?<br><br>
<input id="countpizzas" name="countpizzas" type="number" min="1" max="3" step="1" value="0" required>
</label>
</div>
<div>
<label for="pizzatype">Which type of pizza would you like ? <br>
<select id="pizzatype"name="pizzatype">
<option data-price="4" value="S">Small</option>
<option data-price="5.5" value="M">Medium</option>
<option data-price="7" value="L">Large</option>
</select>
</label>
</div>
<div>
<label for="extratopping">Would you like extra topping? <br>
<input id="YesOption" name="ExtraTopping" type="radio"> Yes
<input id="NoOption" name="ExtraTopping" type="radio"> No
</label>
</div>
<div class="hide" id="toppings">
<label for="toppings">Which toppings would you like?</label>
<input type="checkbox" class="chk_topping" data-value="salami"> Salami
<input type="checkbox" class="chk_topping" data-value="olives"> Olives
<input type="checkbox" class="chk_topping" data-value="ansjovis"> Ansjovis
</div>
<div>
<label for="deliverydate">When do you want the pizza<span class="plural">s</span> to be delivered?
<input id="delivery" name="delivery" type="date" required > </label>
<label for="deliverytime">
<input id="Time" name="Time" type="time" required> </label>
</div>
<label for="discountcode">Do you have a discount code?
<input id="DiscountCode" name="DiscountCode" type="text" pattern="[1-9]{1}-[A-Z]{3}" title="The discount code should be a digit followed by a dash and then 3 uppercase letters" required>
</label>
</div>
</form>
<input type="submit" value="Place your order" name="placeorder"/>
</fieldset>
</form>
<footer><p>Graphics courtesy of © Basecamp </p></footer>
</div>
<script type='text/javascript' src='assets/js/jquery.js'></script>
<script type='text/javascript' src='assets/js/script.js'></script>
</body>
</html>
Why my checkboxes keep telling me it's undefined when selecting them ?
I'm realy not good at javascript so my code will probably be sh*t
Try this
var selected_topping = $(this).data('value');
http://jsfiddle.net/f4Lghy6p/
Found it.
i'm searching for a specefic ID in my select en input fields :
$('input, select').on("change", updateCart);
My checkboxes are located in a DIV with an input fields which don't have an ID.

How to add text field to multi list - jQuery?

I am trying to take user inputed values and add them to a list. I need to check my list to see if it exists first. I am failing at step one, how do I add the value to the list?
This is my code:
HTML:
<form action="">
<div class="device_item">
<label for="dev_name">Device Name</label>
<input id="dev_name" type="text">
</div>
<div class="device_item">
<label for="dev_name">Device Type</label>
<input id="dev_type" type="text">
</div>
<div class="device_item">
<label for="dev_os">Device OS</label>
<input id="dev_os" type="text">
</div>
<div class="device_item">
<div class="device_info">
<div class="device_info_header">
<label>Device Information Header</label>
<div>
<select multiple="multiple" id="lstBox1" name="device_info_header">
<option value="net_info">Network Info</option>
<option value="os_info">OS Info</option>
<option value="drive_info">Drive Info</option>
<option value="time_dif">Time Difference Info</option>
</select>
</div>
<div id="arrows">
<input type='button' class="delete" value=' < ' />
<input type='button' class='add' value=' > ' />
</div>
<div>
<select multiple="multiple" id="lstBox2" name="device_info_header"></select>
</div>
<input type="text" name="other_info" id="dev_info_other_text" style="display:none;">
<div class="clear_both" />
<div class="other_ops">Other:
<input id="other_field" type="text" />
<input type="button" class="add2" value=' > ' />
</div>
<br>
<br>NEXT BUTTON (creates headers or dictionary keys) TAKES YOU TO:
<br>
<br>TITLE (eg. Net Info, or OS Info)
<br>Key:
<input type="text">
<br>Value:
<input type="text">
<br>Add more button
<br>
<br>next button (loop through the headers/keys).
<br>
<br>finally, a submit button</div>
</div>
</div>
</form>
JS
$(document).ready(function () {
$('.add').click(function (e) {
var selectedOpts = $('#lstBox1 option:selected');
if (selectedOpts.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
$('#lstBox2').append($(selectedOpts).clone());
e.preventDefault();
});
$('.delete').click(function (e) {
var selectedOpts = $('#lstBox2 option:selected');
if (selectedOpts.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
$(selectedOpts).remove();
e.preventDefault();
});
$('.add2').click(function (e) {
var other_field_str = $('#other_field').val();
alert(other_field_str);
$('#lstBox2').append(other_field_str);
e.preventDefault();
});
});
I also have the code on this fiddle: http://jsfiddle.net/jdell64/8qsda/1/
UPDATED FIDDLE WITH FULL SOLUTION: http://jsfiddle.net/jdell64/8qsda/
You need to create an <option> element containing the Other input.
$('.add2').click(function (e) {
var other_field_str = $('#other_field').val();
alert(other_field_str);
var other_field = $('<option>', {
value: other_field_str,
text: other_field_str
});
$('#lstBox2').append(other_field);
e.preventDefault();
});
FIDDLE

Categories