Databases
StackOverflow2013
Postsdbo
POValidating an HTML form with onClick added form fields
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POValidating an HTML form with onClick added form fields
    text
    copied!<p>I have a form I cobbled together with bits of code copied online so my HTML and Javascript knowledge is VERY basic. The form has a button that will add another set of the same form fields when clicked. I added some code to make it so that if the "Quantity and Description" field is not filled out, the form won't submit but now it just keeps popping up the alert for when the field's not filled out even if it is. Here's is my script:</p> <pre><code>&lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'&gt; &lt;/script&gt;&lt;script type='text/javascript'&gt; //&lt;![CDATA[ $(function(){ $('#add').click(function() { var p = $(this).closest('p'); $(p).before('&lt;p&gt; Quantity &amp; Description:&lt;br&gt;&lt;textarea name="Quantity and Description" rows="10" cols="60"&gt;&lt;\/textarea&gt;&lt;br&gt;Fabric Source: &lt;input type="text" name="Fabric Source"&gt;&lt;br&gt;Style# &amp; Name: &lt;input type="text" name="Style# &amp; Name"&gt;&lt;br&gt;Fabric Width: &lt;input type="text" name="Fabric Width"&gt;&lt;br&gt;Repeat Information: &lt;input type="text" name="Repeat Info" size="60"&gt;&lt;input type="hidden" name="COM Required" /&gt; &lt;/p&gt;&lt;br&gt;'); return false; }); }); function checkform() { var x=document.forms["comform"]["Quantity and Description"].value if (x==null || x=="") { alert("Quantity &amp; Description must be filled out, DO NOT just put an SO#!!"); return false; } } //]]&gt; &lt;/script&gt; </code></pre> <p>And here's my HTML:</p> <pre><code> &lt;form action="MAILTO:ayeh@janusetcie.com" method="post" enctype="text/plain" id="comform" onSubmit="return checkform()"&gt; &lt;div&gt;Please complete this worksheet in full to avoid any delays.&lt;br /&gt; &lt;br /&gt;Date: &lt;input type="text" name="Date" /&gt; Sales Rep: &lt;input type="text" name="Sales Rep" /&gt; Sales Quote/Order#: &lt;input type="text" name="SQ/SO#" /&gt;&lt;br /&gt; &lt;br /&gt;Quantity &amp;amp; Description: &lt;font color="red"&gt;&lt;i&gt;Use "(#) Cushion Name" format.&lt;/i&gt;&lt;/font&gt;&lt;br /&gt; &lt;textarea name="Quantity and Description" rows="10" cols="60"&gt; &lt;/textarea&gt; &lt;br /&gt;Fabric Source: &lt;input type="text" name="Fabric Source" /&gt;&lt;br /&gt;Style# &amp;amp; Name: &lt;input type="text" name="Style# &amp;amp; Name" /&gt;&lt;br /&gt;Fabric Width: &lt;input type="text" name="Fabric Width" /&gt;&lt;br /&gt;Repeat Information: &lt;input type="text" name="Repeat Info" size="60" /&gt;&lt;br /&gt;&lt;font color="red"&gt;&lt;i&gt;Example: 13.75" Horizontal Repeat&lt;/i&gt;&lt;/font&gt;&lt;br /&gt; &lt;br /&gt;&lt;input type="hidden" name="COM Required" /&gt; &lt;p&gt;&lt;button type="button" id="add"&gt;Add COM&lt;/button&gt;&lt;/p&gt; &lt;/div&gt; &lt;input type="submit" value="Send" /&gt;&lt;/form&gt; </code></pre> <p>How can I get it to submit but still check every occurence of the "Quantity and Description" field?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload