I am not even new to javascript. just learning through some tutorials, but i have three slelct boxes in html as follows.
Html form.
<table>
<form id="enrolment" name="enrolment" onsubmit="return datevalidate();" action="" method="POST" >
<div style="text-align: center"><h3>Enrolement Form</h3></div>
<hr>
<div style="text-align: center"><h4>Personal details.</h4></div>
<hr>
<tr>
<td align="left">Course Date:</td>
<td align="left">
<select name="Coursedate" id="Coursedate">
<option selected="" value="Default">Date</option>
<option value="1">1</option>
<option value="2">2</optio
n>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="coursemonth" id="coursemonth">
<option selected="" value="Default">Month</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="courseyear" id="courseyear">
<option selected="" value="Default">year</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" value="validate">
</td>
</tr>
</form>
</table>
And the javascript as follows
<script>
function datevalidate()
{
var d = new Date();
var date = d.getDate();
var month = d.getMonth()+1;
var year = d.getFullYear();
var cdate = document.getElementById("Coursedate").value;
var cmonth = document.getElementById("coursemonth").value;
var cyear = document.getElementById("courseyear").value;
if (cdate > date && cmonth >= month && cyear >= year)
{
alert("Date is greater");
}
else
if(cdate < date && cmonth > month && cyear >= year)
{
alert("Month and year greater");
}
else
if(cdate < date && cmonth >= month && cyear > year)
{
alert(" year greater");
}
else
if(cdate > date && cmonth < month && cyear > year)
{
alert(" year greater");
}
}
</script>
somehow i feel mysqlf that this is not very impressive.
How to get full validation in javascript. Any tutorials?
i need that the date should not exceed the current date.
Thanks in advance
Amod India
To better handle dates in Javascript, check out this other question: Compare two dates with JavaScript.
That being said, since you're talking about validation, because Javascript is a client-side language you can never get full date validation with your code. Someone can disable the code altogether by disabling Javascript, or they can rewrite the code and use it as the framework for an XSS attack.
The best way to do this is with a server side language like PHP, .Net, Java, and so forth.
Ultimately you would have the code only print dates that were before today's date, then the only way someone could submit a date in the future was if they were passing modified variables. Then, rather than falling back on a client-side language for the filtering you would use the server side language to validate the code and make sure that the variables were within parameters before passing the query to a database.
// day : 1-31
// month : 1-12
function dateIsValid(day, month, year) {
return !isNaN(new Date([month, day, year].join('/')).getDate());
}
It's not the prettiest, but I'm relying on the fact that an invalid date passed to the constructor for the Date class in JavaScript will give you a date object back whose timestamp is NaN.
So obviously this handles corner cases like leap years.
EDIT:
Actually, this isn't fool-proof. The days (up to 31) can overflow into the next month.
new Date([2, 31, 2012].join('/')); // Fri Mar 02 2012
i have done date validation such as Day,month as well as year validation using javascript
<html>
<head>
<title></title>
<script language = "Javascript">
// Required variable
var digits="0123456789";
//non-digit Characters which are allowed in phone number
var phoneNumChacters="()-";
//Chacter are allowed in international phone numeber
var validWorldPhoneCars=phoneNumChacters+ "+";
var minDigitsphoneNum=9;
function isInteger(k)
{
var i;
for(i=0; i<k.lenght; i++)
{
var h=k.charAt(i);
if((h<"0") ||(h>"9"))
return false;
}
// all are numbers
return true;
}
function trim(k)
{
var i;
var returnStringValue ="";
//character is not a whitespace, append to returnString.
for(i=0; i<k.lenght; i++)
{
var h=k.charAt(i);
if(h!=" ")
returnStringValue +=h;
}
return returnStringValue;
}
function stripCharsInBag(k, bag)
{
var i;
var returnStringValue="";
for(i=0; i<k.lenght; i++)
{
var h=k.charAt(i);
if(bag.indexOf(h)==-1)
returnStringValue +=h;
}
return returnStringValue;
}
function CheckInternationalPhoneNum(strPhone)
{
var bracket =3;
strPhone=trim(strPhone);
if(strPhone.indexOf("+")>1)
return false;
if(strPhone.indexOf("-")!=-1)
bracket=bracket+1;
if(strPhone.indexOf("(")!=-1 && strPhone.indexOf("(")>bracket)
return false;
var brchr=strPhone.indexOf("(");
if(strPhone.indexOf("(")!=-1 && strPhone.charAt(brchr+2)!=")")
return false;
if(strPhone.indexOf("(")==-1 && strPhone.indexOf(")")!=-1)
return false;
k=stripCharsInBag(strPhone,validWorldPhoneCars);
return (isInteger(k) && k.lenght>=minDigitsphoneNum);
}
function ValidateForm()
{
var phoneNumber =document.sampleForm.txtPhone;
if((phoneNumber.value==null)||(phoneNumber.value==""))
{
alert ("Please enter you phone number");
phoneNumber.focus();
return false;
}
if(phoneNumber.value<9)
{
alert("Number is Less then 9 ");
phoneNumber.focus();
return false;
}
if(CheckInternationalPhoneNum(phoneNumber.value)==false)
{
alert("Enter a valid number");
phoneNumber.value="";
phoneNumber.focus();
return false;
}
}
</script>
</head>
<body>
<center>
<form name="sampleForm" method="post" action="" onSubmit="return ValidateForm()">
<p>Enter a phone number : <input type="text" name="txtPhone"></p>
<p><input type="submit" name="Submit" value="Submit"></p>
</form>
</center>
</body>
</html>
Related
So I have a field for a date in database and I want to select a year in select option and pass the value of it to the year of the date, also I want to have a default month and day( 01/01 ) and the value of the option that I have selected will be the year.
How can I set a default month and day and pass the year value of the option to the year in date?
<select id="LastRenovationDate" name="LastRenovationDate">
<option value="">Select one...</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
</select>
It may help if you create a JavaScript date object, which can be created using separate day month and year components (see snippet). The date object can then be formatted to match your database's expected input. However, exact the formatting needed would depend on the expected input for your database, which you have not provided.
document.querySelector("#LastRenovationDate").onchange = function(){
// selected value
var select_val = this.value;
// enter your date components
var year = select_val,
month = 0, // zeor indexed
day = 1;
var js_date_object = new Date( year , month , day );
console.log( js_date_object );
// Then, format js_date_object to match your database
}
<select id="LastRenovationDate" name="LastRenovationDate">
<option value="">Select one...</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
</select>
I have three select menus where the user selects a subject, year and season. However, I want it so that if the user selects the year '2019', the 'Fall' option will get disabled.
<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season">
<option value="Spring">Spring</option>
<option value="Fall">Fall</option>
</select>
Create and event handler for the Year's change event and disable the season based on what Year's new value is.
https://jsfiddle.net/075fnm4a/
HTML
<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season">
<option value="Spring">Spring</option>
<option value="Fall">Fall</option>
</select>
Jquery
$(document).ready(function(){
$('select[name="Year"]').on('change',function(){
var $this = $(this);
$('select[name="Season"]').find('option[value="Fall"]').prop('disabled', ($this.val() == '2019') ); // disabled or enabled
});
$('select[name="Year"]').trigger('change');
});
Like this.
document.querySelector('#year').onchange = ev => {
const value = ev.target.value;
if (value === '2019') {
document.querySelector('#fall').disabled = true;
} else {
document.querySelector('#fall').disabled = false;
}
}
<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year" id="year">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season">
<option value="Spring">Spring</option>
<option value="Fall" id="fall" disabled>Fall</option>
</select>
<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year" id="years">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season" id="seasons">
<option value="Spring">Spring</option>
<option value="Fall">Fall</option>
</select>
$('#years').on('change', function(){
if($(this).val()==='2019'){
$("#seasons option").each(function()
{
if($(this).val() === 'Fall'){
$(this).attr('disabled', 'disabled');
}
});
}
});
You can onchange event and bind callback to it that get season select element and enable and disable Fall season according to selection value
<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year" onchange="changeYear(this.value)">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season">
<option value="Spring" >Spring</option>
<option value="Fall" disabled>Fall</option>
</select>
<script>
function changeYear(value)
{
var seasons = document.getElementsByName("Season")[0].options;
var fallSeason = Array.apply(null, seasons).find(season => season.value === 'Fall');
fallSeason.disabled = (value==='2019')
}
</script>
This question has been asked on this forum multiple times. Yet every time I've applied the code and edited the fields to accommodate my code it doesn't seem to work. Essentially I'm trying to develop a list from a form, so once the fields are filled out and you click the add button. The info provided would populate in an ordered list below the form. Here is the following html and javascript code I've got so far. When I click the add button the information that was typed gets showed in the url bar after the original domain name, but it never makes a list.
var list = document.getElementById('list');
function add(){
var name = document.getElementById('name').value;
var people = document.getElementById('people').value;
var phone = document.getElementById('phone').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(name + people + phone));
list.appendChild(entry);
return false;
}
<html>
<head>
<meta charset="UTF-8">
<title>Whiskey on Water</title>
<h1>Whiskey on Water: Waiting List</h1>
</head>
<body>
<form id="lineInfo" onsubmit="return add()">
<fieldset>
<legend>Customer Information</legend>
<label for="name">Name*</label>
<input name="name" id="name" type="text" />
<label for="people">How many people?</label>
<input name="people" id="people" type="number" list="people1" />
<datalist id="people1">
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</datalist>
<label for="phone">Phone Number*</label>
<input name="phone" id="phone" type="tel"/>
<script src="wow.js"></script>
<button onclick='add ()' type="submit"> Add to List </button>
</fieldset>
</form>
<ol id="list"></ol>
</body>
</html>
Well, your code works when run as a SO Snippet (see below), so we will need more info about the problem you're having before we can answer your question.
That said, I did notice that your new list item was adding twice, and this is because you are running the add() function twice: Once for the onclick handler on the button press, and once as the action of the form upon submit. So, we need to remove one of those... I bet that you'll end up wanting to keep the form, but my working code below removes the form (keeping the onclick on the button) because I bet that your problem is that, although your code works, you are refreshing your page with the form, clearing out the options that have been added to your list. If this sounds right to you then look into passing/fetching the new list items via GET params.
var list = document.getElementById('list');
function add(){
var name = document.getElementById('name').value;
var people = document.getElementById('people').value;
var phone = document.getElementById('phone').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(name + people + phone));
list.appendChild(entry);
return false;
}
<html>
<head>
<meta charset="UTF-8">
<title>Whiskey on Water</title>
<h1>Whiskey on Water: Waiting List</h1>
</head>
<body>
<fieldset>
<legend>Customer Information</legend>
<label for="name">Name*</label>
<input name="name" id="name" type="text" />
<label for="people">How many people?</label>
<input name="people" id="people" type="number" list="people1" />
<datalist id="people1">
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</datalist>
<label for="phone">Phone Number*</label>
<input name="phone" id="phone" type="tel"/>
<script src="wow.js"></script>
<button onclick='add ()' type="submit"> Add to List </button>
</fieldset>
<ol id="list"></ol>
</body>
</html>
This may help assuming each field has an id:
document.querySelector('#yourButton').addEventListener('click', function(e){
/* Stop the form from submiting if useful */
e.preventDefault();
/* get the values of fields one at a time */
var field1 = document.querySelector('#input1').value;
var field2 = document.querySelector('#input2').value;
...
/** prepare new node and insert */
var newNode = '<ul>'+'<li>'+field1+'</li>'+'<li>'+field2+'</li>'+'</ul>';
document.querySelector('body').appendChild(newNode);
});
This question already has answers here:
querySelectorAll.style does not work
(3 answers)
Closed 7 years ago.
I need help creating a for loop for document.querySelectorAll(".suit"). I'm trying to create a form where you input the birthday and the output is a total of 365 options. The example output put is in the HTML.
<html>
<head>
<style type="text/css">
.suit {
display: none;
}
.suit.visible {
display: block;
}
</style>
<script type="text/javascript">
window.onload = function() {
var monthSelection = document.querySelector("#month");
var daySelection = document.querySelector("#day");
var submitButton = document.querySelector("#submit");
submitButton.onclick = function() {
document.querySelectorAll(".suit").setAttribute("class", "suit visible");
// TODO hide everything else
}
}
</script>
</head>
<body>
Date Of Birth: <br>
<select id="month" name="month">
<option value="na">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="day" name="day">
<option value="na">Day</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<button id="submit">Submit</button>
<div class="suit" month="8" day="27">Queen of Hearts, 10 of clubs</div>
<!-- TODO content -->
querySelectorAll() returns an array-like data structure called a nodeList. You can iterate it with a for loop.
submitButton.onclick = function() {
var items = document.querySelectorAll(".suit");
for (var i = 0; i < items.length; i++) {
items[i].className = "suit visible";
}
}
Hi guys I am new to jquery and all these ajax calls I am developing a simple form that takes data from the user and sends it to the servlet and the servlet has to give back the result in json data format which must be displayed below the form and all this has to happen without page REFRESH.
My html code is
<script>
var form = $('#form1');
$(document).ready(function(){
$('body').hide().fadeIn(5000);
$(".submit").click(function (e) {
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
console.log(url);
data: $(form).serialize(),
success: function(msg){
var json = msg ;
$('#json').val(json);
}
});
});
});
</script>
<body><br>
<form name="input" action="/formsub" method="GET" id="form1" enctype="text/plain">
First name: <input type="text" name="FirstName" id="Firstname" value=" "><br>
Last name: <input type="text" name="LastName" value=" "><br>
<br>
Date Of Birth:
<select name="month" >
<option value="na">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="day">
<option value="na">Day</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="year">
<option value="na">Year</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
</select>
<br>
<br>
<b>SEX</b><br>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
<br>
<b>USER INTEREST<b><br>
<input name="interest" type="checkbox" value="singing "/>singing<br>
<input name="interest" type="checkbox" value="dancing"/>dancing<br>
<br>
<b>CITY<b><br><select name="city"><br>
<option value="bangalore">bangalore</option>
<option value="chennai">chennai</option>
<option value="hyderabad">hyderabad</option>
<option value="mumbai">mumbai</option>
</select>
<div>
<textarea id="json" rows="10" cols="50">
</textarea>
</div>
<br>
<input type="submit" value="Submit" class="submit">
<input type="reset" value="reset">
</form>
</body>
and my servlet code is
package com.example.formsub;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Arrays;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.appengine.labs.repackaged.org.json.JSONObject;
public class FormsubServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
// Get the submitted form data that is sent from the web page
String firstName = request.getParameter("FirstName");
String lastName = request.getParameter("LastName");
String month = request.getParameter("month");
String day = request.getParameter("day");
String year = request.getParameter("year");
String sex = request.getParameter("sex");
String[] values = request.getParameterValues("interest");
String city = request.getParameter("city");
String arr=Arrays.toString(values);
//Encode the submitted form data to JSON
JSONObject obj=new JSONObject();
obj.put("firstname",firstName);
obj.put("lastname",lastName);
obj.put("month",month);
obj.put("day",day);
obj.put("year",year);
obj.put("sex",sex);
obj.put("interest",arr);
obj.put("city",city);
//Get the JSON formatted data
String jsonData = obj.toString();
//Return the JSON formatted data
out.write(jsonData);
}
catch(Exception e)
{
e.printStackTrace();
}
}
}
actually i did some research and found that we have to mention return false after ajax call but the problem i am encountering is that the output is not geting displayed in the textarea i have mentioned in my html. The output i am expecting is that the json data returned by the servlet has to by displayed as it is in the text area of the form.
for reference during code implementation i used the url:
http://helpx.adobe.com/adobe-cq/using/custom-sling-servlets.html
Please help a newbie....
Thanks in advance
You need to specify dataType of your response.
$.ajax({
dataType: 'json',
...
As per documentation, if none is specified, jQuery will try to infer it based on the MIME type of the response. As I see from your servlet code, you've specified wrong MIME type for your response : " text/html". So you didn't leave a chance to jQuery to "guess" that your response is in json format.
Also, it's good way to figure out what's going on using console.log in your success method:
success: function(msg){
console.log(msg);
Also see getJSON function
I am not able to track if the success function is called or not....can u plz let me know how to do it....i am not able to use console.log
As for this comment, you can always use browser console to track your request status, look at request and response bodies etc. For example, I use Chrome Dev Tools for that. But it's up to you to decide.
use this code snippet
var json = JSON.stringify(msg);
$('#json').val(json);