Send Mailto doesnt work for the copied datalist - javascript

The code
<body>
<script>
function addInput() {
var container = document.getElementById("container");
var element = document.createElement("input");
element.setAttribute("list", "browsers");
container.appendChild(element);
var container = document.getElementById("container");
var element = document.createElement("input");
element.setAttribute("list", "op");
container.appendChild(element);
}
</script>
<!-- List -->
<form action="mailto:test#gmail.com" method="post" enctype="text/plain">
<fieldset>
<legend>Info:</legend>
<label for="fname">first name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">last name:</label>
<input type="text" id="lname" name="lname"><br>
<label for="date">date:</label>
<input type="date" id="date" name="date"><br>
<input type="radio" id="hkp" name="send" value="HKP">
<label for="hkp">HKP</label><br>
<input type="radio" id="patienten" name="send" value="Pat">
<label for="patienten">Pat</label><br>
<div id="container">
<label for="browser">Product:</label>
<input list="browsers" name="Product" id="browser">
<datalist id="browsers">
<option value=" x">
<option value=" y">
<option value=" z">
<option value=" a">
<option value=" b">
<option value=" c">
</datalist>
<label for="op">OP:</label>
<input list="op" name="op" id="op"><br>
</div>
<input type="button" value="+ Product" onclick="addInput()">
</fieldset>
<input type="submit" value="Senden">
<input type="reset" value="Reset">
</form>
Here's the problem, once I fill all the stuff and click on the button + Product it does add the lists of the "browsers" and the "op" but it isn't shown in the email once I click submit is there a way to fix than? I also need help with adding the text in front of the copied lists I only copy the lists but not the label at least I don't know how.

Submitting your form with a standard submit button will not work in this case. The submit button does not take into account the form fields that are created after page load.
You'll have to write a submit handler that serializes your data and create a mailto link on the fly:
function formSubmit(e) {
e.preventDefault();
const formData = new FormData(e.target);
var mail = document.createElement("a");
mail.href = "mailto:test#gmail.com";
mail.body = // get elements from formData;
mail.click();
}
const form = document.getElementById('form');
form.addEventListener('submit', formSubmit);
Don't forget to add id="form" to the form.

Related

Form validation return issues

Im trying to learn form validation and I cannot figure out what is going on here. I am following a W3Schools tutorial and the validate form function is giving an error but it is not doing that on their example.
I tried copy and pasting the example into my project and just changing the property name and it still gives an error.
function validateForm() {
var x = document.forms["contact"]["yourName"].value;
if (x == "") {
alert("Please Enter Your Name");
return false;
}
}
<form name="contact" onsubmit="validateForm()">
<label for="cakeName">Cake name:</label>
<select required name="cakes" id="cakes">
<option value="placeholder">--- Select cake ---</option>
<option value="cakeOne">Coconut Bundt Cake</option>
<option value="cakeTwo">Cream Cheese Pound Cake</option>
<option value="cakeThree">German Chocolate Cake</option>
<option value="cakeFour">Classic Yellow Cake</option>
</select>
<br>
<label for="yourName">Your name:</label>
<input name="name" type="text">
<br>
<label for="message">Message</label>
<input name="message" type="text" placeholder="type your text you want written on the cake">
<br>
<label for="includes">Includes:</label>
<input type="checkbox" id="candle" name="candle" value="Candle">
<label for="candle">Candle</label>
<input type="checkbox" id="candle" name="candle" value="Candle">
<label for="candle">Firework</label>
<input type="checkbox" id="candle" name="candle" value="Candle">
<label for="candle">Toys</label>
<br>
<label for="deliveryDate">Deliver Date:</label>
<input type="date" id="date" name="date">
<br>
<label for='deliverTo'>Deliver to:</label>
<textarea name='deliverTo' id="deliverTo" cols="30" rows="10"></textarea>
<br>
<label for="callBefore">Call before deliver?</label>
<input type='radio' id="yes" name="callBefore" value="Yes">
<label for="yes">Yes</label>
<input type='radio' id="no" name="callBefore" value="No">
<label for="no">No</label>
<br>
<button type="submit" id="submit" class="submit" name="submit" value="bar">Order Now</button>
</form>
Issues with your code:
The field name was wrong.
You need to prevent your from default behavior which is reload or redirect to process it's data before submiting.
function validateForm(event) {
event.preventDefault(); // You didn't stop the subminssion default behavior
let x = document.forms["contact"]["yourName"].value;
if (x == "") {
alert("Please Enter Your Name");
return false;
}
}
<form name="contact" onsubmit="validateForm(event)">
<label for="yourName">Your name:</label>
<!-- You used a wrong name -->
<input name="yourName" type="text">
<button type="submit" id="submit" name="submit" value="bar">Order Now</button>
</form>
How we handle forms these days
const form = document.querySelector('#contact-form');
form.addEventListener('submit', (ev)=>{
// Stop the form submission from reloading or redirecting
ev.preventDefault();
let yourName = document.querySelector('#your-name').value;
if(yourName === ""){
alert("Please Enter Your Name");
return;
}
// Post the form with Fetch API or Axios ...
});
<form id="contact-form">
<label for="yourName">Your name:</label>
<input name="yourName" id="your-name" type="text">
<button type="submit" id="submit" name="submit" value="bar">Order Now</button>
</form>
I don't know if this will solve your problem (what was the error?) but the following line:
<input name="name" type="text">
Should be:
<input name="yourName" type="text">

remove the value set in input field's value attribute after submitting the form

I am using HTML, bootstrap, php, MySQL, and Ajax. I want that when I submit the form the value set in the input field's value attribute become null. I am badly stuck here. Can anyone please advice me that how can I solve this problem?? Thanks in advance guys. codes are given below :
<form id="cForm" name="cForm" method="post">
<label>Roll No : </label>
<input type="text" name="roll" id="roll" value="12"><br>
<label>Name : </label>
<input type="text" name="name" id="name" value="Sneha"><br>
<label>Stream : </label>
<select name="stream" id="stream">
<option value="CSE">CSE</option>
<option value="IT">IT</option>
<option value="ECE">ECE</option>
<option value="ME">ME</option>
</select><br>
<label>Age : </label>
<input type="text" name="age" id="age"><br>
<input type="submit" class="btn-submit" name="submit" value="Submit">
</form>
<script type="text/javascript">
jQuery(document).ready(function() {
$('.btn-submit').click(function() {
$.ajax({
url:"insert.php",
method:"POST",
data:$('#cForm').serialize(),
success:function(data)
{
document.getElementById("cForm").reset();
$("input[type='text']").val('');
}
});
});
});
</script>
First of all you should remove default values of input fields, because on submit the page refreshes and default values will popup. Next you should create an event listener "submit". Once it is present find the nodes with input and replace the value with empty string. The working sample is bellow:
<form id="cForm" name="cForm" method="post">
<label>Roll No : </label>
<input type="text" name="roll" id="roll" value=""><br>
<label>Name : </label>
<input type="text" name="name" id="name" value=""><br>
<label>Stream : </label>
<select name="stream" id="stream">
<option value="CSE">CSE</option>
<option value="IT">IT</option>
<option value="ECE">ECE</option>
<option value="ME">ME</option>
</select><br>
<label>Age : </label>
<input type="text" name="age" id="age"><br>
<input type="submit" class="btn-submit" name="submit" value="Submit">
<input type="submit" class="btn-modify" name="modify" value="Modify">
</form>
<script>
const form = document.querySelector('#cForm');
let inputs = form.getElementsByTagName('input')
form.addEventListener('submit', function() {
console.log('Submit');
inputs.name.value = '';
inputs.roll.value = '';
inputs.age.value = '';
})
</script>
Don't forget to remove default value from input!!! Otherwise you will see them after submit.
Just use $("input[type='text']").val(''); to remove the values hardcoded in the input's value tag.
$("#cForm").on("submit", function(e) {
e.preventDefault();
$("input[type='text']").val('');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="cForm" name="cForm" method="post">
<label>Roll No : </label>
<input type="text" name="roll" id="roll" value="112"><br>
<label>Name : </label>
<input type="text" name="name" id="name" value="john"><br>
<label>Stream : </label>
<select name="stream" id="stream">
<option value="CSE">CSE</option>
<option value="IT">IT</option>
<option value="ECE">ECE</option>
<option value="ME">ME</option>
</select><br>
<label>Age : </label>
<input type="text" name="age" id="age"><br>
<input type="submit" class="btn-submit" name="submit" value="Submit">
<input type="submit" class="btn-modify" name="modify" value="Modify">
</form>
EDIT
You are using ajax to submit the form so you should add the line $("input[type='text']").val(''); inside you ajax success callback function
$.ajax({
url:'/some-url/file.php',
success:function(data){
//your code to check if the save was success full
//and if yes then reset the form inputs
$("input[type='text']").val('');
}
});

Submitting Form in a popup window

I know that this might seem like a duplicate, but i can't seem to figure this out. I am wanting to submit a form in HTML to a Popup window. when i hit the submit button, it returns a blank page. I want the pop up to display all of the input that one filled out one the form. I want to do it in JavaScript. This is my code here. I want it to output all of the information entered in the form, from the Personal Information fieldset and the personal choices fieldset. I want it to display as an unordered list.
Heres the Javascript that i have so far:
<head>
<title>My Form</title>
<script type="text/javascript">
function display() {
dispWin = window.open('','NewWin',
'toolbar=no,status=no,width=300,height=200')
message = "<ul><li>First Name:" +
document.mdForm.first_name.value;
message += "<li>Last Name:" +
document.mdForm.the_lastname.value;
message += "<li>Address:" +
document.mdForm.the_address.value;
message += "</ul>";
dispWin.document.write(message);
}
</script>
Heres the HTML:
<body>
<h1>My Form</h1>
<form name="mdForm" method="post" action="">
<fieldset>
<legend>Personal Information</legend>
<p><label class="question" for="first_name">What is your First name?
</label>
<input type="text" id="first_name" name="first_name"
placeholder="Enter your First name."
size="50" required autofocus /></p>
<p><label class="question" for="the_lastname">What is your Last name?
</label>
<input type="text" id="the_lastname" name="the_lastname"
placeholder="Enter your Last name."
size="50" required /></p>
<p><label class="question" for="the_address">What is you address?
</label>
<input type="text" id="the_address" name="the_address"
placeholder="Enter your address."
size="50" required /></p>
<p><label class="question" for="the_email">What is your e-mail address?
</label>
<input type="email" id="the_email" name="the_email"
placeholder="Please use a real one!"
size="50" required /></p>
</fieldset>
<fieldset>
<legend>Personal Choices</legend>
<p><span class="question">Please check all your favorite foods:</span>
</br>
<input type="checkbox" id="food_one" name="some_statements[]"
value="Buffalo Wings" />
<label for="food_one">Buffalo Wings</label><br/>
<input type="checkbox" id="food_two" name="some_statements[]"
value="Enchiladas" />
<label for="food_two">Enchiladas</label><br/>
<input type="checkbox" id="food_three" name="some_statements[]"
value="Hamburgers" />
<label for="food_three">Hamburgers</label><br/>
<input type="checkbox" id="food_four" name="some_statements[]"
value="Spaghetti" />
<label for="food_four">Spaghetti</label></p>
<p><span class="question">Select your favorite online store:</span><br/>
<input type="radio" id="the_amazon" name="online_store"
value="amazon" />
<label for="the_amazon">Amazon</label><br/>
<input type="radio" id="bestbuy_electronics" name="online_store"
value="bestbuy" />
<label for="bestbuy_electronics">BestBuy</label><br/>
<input type="radio" id="frys_electronics" name="online_store"
value="frys" />
<label for="frys_electronics">Frys Electronics</label><br/>
</p>
<p><label for="my_band"><span class="question">Who's your favorite band/ artist?</span></label><br/>
<select id="my_band" name="my_band" size="4" multiple>
<option value="The Chi-Lites">The Chi-Lites</option>
<option value="Michael Buble">Michael Buble</option>
<option value="Frank Ocean">Frank Ocean</option>
<option value="Labrinth">Labrinth</option>
</select>
</p>
</fieldset>
<div id="buttons">
<input type="submit" value="Click Here to Submit" onclick="display();" />
or
<input type="reset" value="Erase and Start Over" />
</div>
</form>
</body>
Have you prevented the default submit functionality?
Try:
function display(e) {
//To stop the submit
e.preventDefault();
...
Do your Stuff
...
//Continue the submit
FORM.submit();
}

jQuery: How to get the object of the form who's submit button was clicked?

I've multiple forms in my html based web page. I have a 'Submit' button on each of the form. Whenever I fill a form and click on it's submit button, I want to know which form was submitted. Means, upon pressing a submit button I want to know the details of the associated form (all forms have the similar button).
Stuff like getting the entire form object or id or name of the submitted form will also work.
My JQuery code is :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$( "form" ).submit(function () {
var val = $("input[type=submit][clicked=true]").val();
(1) console.log(val);
});
$("form input[type=submit]").click(function() {
$("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
});
</script>
My html code containing the forms is:
<!-- This is form number 1 -->
<form align="center" class="nav nav-list" id="myFormCS" method="POST" action="#" > <!-- <- I want this info -->
<p> <input type="hidden" name="productid" value="4"> </p>
<p> <input type="hidden" name="version" value="1"> </p>
<p> <input id="field_email" type="email" placeholder="Enter email address" name="eml1" required></p>
<p> <input id="field_pwd1" type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" placeholder="Enter password" name="pwd1" required> </p>
<div class="pricing-footer">
<input class="btn-submit-modal" type="submit" value="Free"> **<-- (1) is getting me this info**
<input class="btn-modal" type="button" onclick="closeRegistration()" value="Close">
</div>
</form>
<!-- This is form number 2 -->
<form align="center" class="nav nav-list" id="myFormGE" method="POST" action="#" >
<p> <input type="hidden" name="productid" value="14"> </p>
<p> <input type="hidden" name="version" value="1"> </p>
<p> <input id="field_username" type="text" placeholder="Enter user name" name="usrnm" required></p>
<p> <input id="field_pwd1" type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" placeholder="Enter password" name="pwd1" required> </p>
<div class="pricing-footer">
<input class="btn-submit-modal" type="submit" value="Register">
<input class="btn-modal" type="button" onclick="closeRegistration()" value="Close">
</div>
</form>
<!-- This is form number 3 -->
<form align="center" class="nav nav-list" id="myFormVI" method="POST" action="#" >
<p> <input type="hidden" name="productid" value="7"> </p>
<p> <input type="hidden" name="version" value="2"> </p>
<p> <input id="field_city" type="text" placeholder="Enter city name" name="city1" required></p>
<p> <input id="field_phone" type="text" placeholder="Enter phone number" name="phn1" required> </p>
<div class="pricing-footer">
<input class="btn-submit-modal" type="submit" value="Buy now">
<input class="btn-modal" type="button" onclick="closeRegistration()" value="Close">
</div>
</form>
Something like this?
$("form input[type=submit]").click(function() {
var frmID = $(this).closest('form').attr('id');
alert(frmID);
});
jsFiddle
You can use a submit listener for the form and get the object. Something like this:
$("form").submit(function (e) {
e.preventDefault();
var form = $(this);
console.log(form);
});
That form object is what I think you are looking for.

Submitting Form and getting data from fields/radio/checkbox/textareas using javascript

I have created a form and I am looking to get the data the user entered.
The javascript I have so far pulls in all the data. But also pulls both radio buttons although only one is checked.
Q1 How do I restrict the loop to not pull in both radio buttons but only the selected one?
Q2 How do I get if the check box is checked or not?
Q3 How do I get the data from a textarea?
Thanks in Advance,
JS
var myNodeList = document.getElementsByName('cf');
var myArray = []; // empty Array
for (var i = 0; i < myNodeList.length; i++) {
var self = myNodeList[i];
myArray.push(self);
}
console.log(myArray)
HTML
<!DOCTYPE html>
<html>
<head>
<title>Contact Me</title>
<link rel="stylesheet" type="text/css" href="contactform_Lab8.css">
</head>
<body>
<form id="contactus">
<fieldset>
<label for="name">Name:</label>
<input id="name" type="text" name="cf" autofocus required>
<label for="email">Email:</label>
<input id="email" type="email" name="cf" required>
<label for="phone">Phone:</label>
<input id="phone" type="tel" name="cf" required>
<label for="status">Status:
<select id="status" name="cf" required>
<option value="client">Client</option>
<option value="partner">Partner</option>
<option value="vendor">Vendor</option>
</select>
</label>
<label for="subscribe">
<input id="subscribe" type="checkbox" name="cf" value="check" checked>
Send me your newsletter</label>
<label for="sales">
<label for="support">
<input id="slsSupport" type="radio" name="cf" value="sales" checked>Sales
<input id="slsSupport" type="radio" name="cf" value="support">Support
</label>
</label>
<label for="msg">Message:</label>
<textarea id="msg" name="cf" rows="10" cols="30" required></textarea>
</fieldset>
<fieldset>
<button type="submit">Send</button>
<button type="reset">Reset</button>
</fieldset>
</form>
<script src="contactform_Lab8.js"></script>
</body>
</html>
Q1: Use the checked property on the element, and if it's not checked, advance to the next element.
Q2: See question #1
Q3: document.getElementById('msg').innerHTML;
You can just add an If statement to check the type of the element.
if(self.type === "radio" && self.checked){
myArray.push(self);
}
if(self.type !== "radio"){
myArray.push(self);
}

Categories

Resources