We Keep Coding

Cannot validate user input correctly from server?

How do I check multiple variable inputs at once to ensure that the regex is working? Everytime I enter anything, the form submits and doesn't alert anything.
I have tried test()method of regex validation too, and still no luck.
I am trying to validate user input with the following regex that makes to where anything that is not a number or blank space is considered a wrong input.
var format=/^(\s*|\d+)$/;
It only accepts numbers and blank spaces in the text box.
The following javascript is what I have:
var pitch = document.getElementById("pitch");
var chisel = document.getElementById("chis");
var saw = document.getElementById("saw");
//var arguments = [chisel, saw, pitch];
var format = /^(\s*|\d+)$/;
function regexTest() {
if (!chisel.match(format) && !saw.match(format) && !pitch.match(format)) {
alert("Repressed Action");
return false;
} else {
alert('Thank you');
}
}
<div class="lab">
<form method="post" action="http://weblab.kennesaw.edu/formtest.php">
Chisels: <input type="text" name="chisels" id="chis" size="5" /> Saw: <input type="text" name="saw" id="saw" size="5" /> Pitchfork: <input type="text" name="pitchfork" id="pitch" size="5" />
<br /> Customer Name: <input type="text" name="customer name" size="25" />
<br /> Shipping Address: <input type="text" name="shipping address" size="25" />
<br /> State:
<input type="radio" id="master" name="card" value="master" /><label for="master">MasterCard</label>
<input type="radio" id="american" name="card" value="american" /><label for="american">American Express</label>
<input type="radio" id="visa" name="card" value="visa" /><label for="visa">Visa</label>
<br />
<input type="reset" value="Reset" />
<div class="lab">
<button onclick="regexTest()">Submit</button>
<button onclick="return false">Cancel</button>
</div>

There are a number of issues with your code, below I've refactored it to be a bit easier to read and so it works.
The validation listener should be on the form's submit handler, not the submit button since forms can be submitted without clicking the button. Also, if you pass a reference to the form to the listener, it's much easier to access the form controls by name.
You should get the values of the form controls when the submit occurs, not before. Your code gets the values immediately, before the user has done anything (and possibly before the form even exists), so put that code inside the listener function.
Lastly, the regular expression needs to match anything that isn't a space or digit, so:
/[^\s\d]/
seems appropriate. However, this will still allow the form to submit if the fields are empty (they don't contain non-digits or non-spaces). You'll need to add a test for that.
function regexTest(form) {
// Get values when the function is called, not before
var pitch = form.pitchfork.value;
var chisel = form.chisels.value;
var saw = form.saw.value;
// Test for anything that's not a space or digit
// var format = /^(\s*|\d+)$/;
var format = /[^\s\d]/;
if (format.test(chisel) || format.test(pitch) || format.test(saw)) {
// There must be at least one non-space or non-digit in a field
alert("Repressed Action");
return false;
} else {
alert('Thank you');
// return false anyway for testing
return false;
}
}
<div class="lab">
<form onsubmit="return regexTest(this)">
Chisels: <input type="text" name="chisels" id="chis" size="5"><br>
Saw: <input type="text" name="saw" id="saw" size="5"><br>
Pitchfork: <input type="text" name="pitchfork" id="pitch" size="5"><br>
Customer Name: <input type="text" name="customer name" size="25"><br>
Shipping Address: <input type="text" name="shipping address" size="25">
<br> State:
<select name="states">
<option>Florida</option>
<option>Georgia</option>
<option>Alabama</option>
</select>
<br>
<input type="radio" id="master" name="card" value="master"><label for="master">MasterCard</label>
<input type="radio" id="american" name="card" value="american"><label for="american">American Express</label>
<input type="radio" id="visa" name="card" value="visa"><label for="visa">Visa</label>
<br>
<input type="reset" value="Reset">
<div class="lab">
<button>Submit</button>
<button onclick="return false">Cancel</button>
</div>
Hopefully this gets you to the next step.

How to print set of input boxes which have same input name into div onKeyUP

I have input boxes set to enter fname lname, there are 10 boxes with these input names. And i want to print the value onKeyup to a div. Please advise.
<input required class="special-block" type="text" name="fname[]" class="fname" onkeyUp="document.getElementById('refa5').innerHTML = this.value" placeholder="Name" />
<input required class="special-block" type="text" name="lname[]" placeholder="Designation" onkeyUp="document.getElementById('refa5a').innerHTML = this.value" />
values should display here
<p id="refa5"><span class="fname"></span>-<span class="lname"></span></p>

Just concatenate current html with previous html using + operator.
So change
onkeyUp="document.getElementById('refa5').innerHTML = this.value"
To
onkeyUp="document.getElementById('refa5').innerHTML+= this.value"//concatenates with previous html
So
<input required class="special-block" type="text" name="fname[]" class="fname" onkeyUp="document.getElementById('refa5').innerHTML+= this.value" placeholder="Name" />
<input required class="special-block" type="text" name="lname[]" placeholder="Designation" onkeyUp="document.getElementById('refa5a').innerHTML+= this.value" />
Working Fiddle based on comments.

how do i clone a multiple html input field with jquery

i have a complex div with input field somewhat like this
<input type="text" name="firstname">
<input type="text" name="lastname">
<input type="text" name="email">
<input type="text" name="address">
<div id="section_toClone">
<input type="text" name="tree[tree1][fruit]">
<input type="text" name="tree[tree1][height]">
<input type="checkbox name tree[tree1][color] value="green">Green </input>
<input type="checkbox name tree[tree1][color] value="yellow">yellow </input>
</div>
<button id="add_more"> Add </button>
now when someone click on add i want something like this to happen
<input type="text" name="tree[tree1][fruit]">
<input type="text" name="tree[tree1][height]">
<input type="checkbox name tree[tree1][color] value="green">Green </input>
<input type="checkbox name tree[tree1][color] value="yellow">yellow </input>
<input type="text" name="tree[tree2][fruit]">
<input type="text" name="tree[tree2][height]">
<input type="checkbox name tree[tree2][color] value="green">Green </input>
<input type="checkbox name tree[tree2][color] value="yellow">yellow </input>
<input type="text" name="tree[tree3][fruit]">
<input type="text" name="tree[tree3][height]">
<input type="checkbox name tree[tree3][color] value="green">Green </input>
<input type="checkbox name tree[tree3][color] value="yellow">yellow </input>
and so on..... but my script only clone doesnt change the value of tree from tree1 to tree2 to tree3 and so on.... here is my jquery script
$('#add_more').click(function(){
$("#section_toClone").clone(true).insertBefore("#add_more").find('input').val("").val('');
});
how do i increment that automatically?? i want to mention one more thing in actual html code. it has more then 3 input and 3 checkbox field

Don't even bother putting the numbers into the array keys. Just let PHP take care of it itself:
<input name="tree[fruit][]" value="foo" />
<input name="tree[fruit][]" value="bar" />
<input name="tree[fruit][]" value="baz" />
Any [] set which DOESN'T have an explicitly specified key will have one generated/assigned by PHP, and you'll end up with
$_POST['tree'] = array(
0 => 'foo',
1 => 'bar',
2 => 'baz'
);
As long as your form is generated consistently, browsers will submit the fields in the same order they appear in the HTML, so something like this will work:
<p>#1</p>
<input name="foo[color][]" value="red"/>
<input name="foo[size][]" value="large" />
<p>#2</p>
<input name="foo[color][]" value="puce" />
<input namke="foo[size][]" value="minuscule" />
and produce:
$_POST['color'] = array('red', 'puce');
| |
$_POST['size'] = array('large', 'minuscule');
But if you start mixing the order of the fields:
<p>#3</p>
<input name="foo[color][]" value="red"/>
<input name="foo[size][] value="large" />
<p>#4</p>
<input namke="foo[size][] value="minuscule" />
<input name="foo[color][] value="puce" />
$_POST['color'] = array('red', 'puce');
/
/
$_POST['size'] = array('minuscule', 'large');
Note how they're reversed.

I wouldn't post this without feeling a bit ashamed of how bad it is written, but the following solution does the trick. Badly.
var treeCount = 1;
$('#add_more').click(function(){
$("#section_toClone")
.clone(true)
.insertBefore("#add_more")
.find('input')
.val('')
.each(function(key,element){
var $element = $(element),
oldName = $element.attr('name'),
newName;
if(oldName){
newName = oldName.replace(/tree[0-9]+/, 'tree'+(treeCount+1));
$element.attr('name', newName);
}
else {
treeCount--;
}
})
.promise().done(function(){
treeCount++;
});
});
(please don't shoot me)

Auto Incrementing HTML Form ID's in input field

How does one auto-increment Id's to an HTML form so it's easier to classify? Kind of like an invoice/reference number? In other words, is it possible to create an hidden input field that would attribute a serie of numbers and also an ID automatically when the form page is loaded just like in Mysql for instance? The idea here is to make that happen for a form.

Im not familiar with JSP but im sure you can read and write files in JSP as this page says
JSP Reading Text File.
<%
String fileName = "/WEB-INF/NextID.txt";
InputStream ins = application.getResourceAsStream(fileName);
try
{
if(ins == null)
{
response.setStatus(response.SC_NOT_FOUND);
}
else
{
BufferedReader br = new BufferedReader((new InputStreamReader(ins)));
String data;
int nextID = Integer.parseInt(data= br.readLine());
%>
<form name="myWebForm" action="mailto:youremail#email.com" method="post">
First: <input title="Please Enter Your First Name" id="first" name="first" type="text" size="12" maxlength="12" />
Last: <input title="Please Enter Your Last Name" id="last" name="last" type="text" size="18" maxlength="24" /><br />
Password: <input type="password" title="Please Enter Your Password" size="8" maxlength="8" /><br /><br />
<!--This the line you are asking for-->
<input type="hidden" name="referenceNumber" id="referenceNumber" value="<%=request.getParameter("firstinput")%>" /><br />
<input type="submit" value="SUBMIT" />
<input type="reset" value="RESET" />
</form>
<%
}
}
catch(IOException e)
{
out.println(e.getMessage());
}
%>
EDIT: Possible solution. I may have made some syntax error as i dont know JSP at all. Learnt by myself just now

How do I order by node depth and then by tabindex?

I've got an HTML form that's built dynamically using templates at runtime - dictated by user action.
I need to set the tab index across the form based on the tabindexing specified within each of the pieces of the form.
Given this, is there a way in jQuery to order items within a set? For instance something that follows this pseudo structure would be awesome, but I can't figure out how to achieve it:
<div name="firstTemplate" templateIndex="0">
<input type="text" name="field0" tabIndex="1" />
<input type="text" name="field1" tabIndex="2" />
<input type="text" name="field2" tabIndex="3" />
</div>
<div name="firstTemplateRpt" templateIndex="1">
<input type="text" name="field0" tabIndex="1" />
<input type="text" name="field1" tabIndex="2" />
<input type="text" name="field2" tabIndex="3" />
</div>
<div name="secondTemplate" templateIndex="2">
<input type="text" name="field0" tabIndex="1" />
<input type="text" name="field1" tabIndex="2" />
<input type="text" name="field2" tabIndex="3" />
</div>
I could then use some variation of the following concept:
$("input, textarea, select, input:checkbox, input:radio").orderBy("templateIndex, tabIndex");
Where templateIndex would be the index of the template within the form and the tabindex would be the tabindex of the control within the template. A template could be added to the form multiple times at runtime, which is causing havoc on manually specified tabindexes.
When another template is added to the form, it would be assigned the templateIndex="3" with its manually set tabIndexes starting again at 1.

Collect the divs with a templateIndex attribute into an array, then sort them like:
divArray.sort(function(a, b) {
return a.getAttribute('templateIndex') - b.getAttribute('templateIndex');
});
Then iterate over those and sort the inputs inside the array using a very similar function:
inpArray.sort(function(a, b) {
return a.tabIndex - b.tabIndex;
});
Then move the elements in the required order in the document using something like node.parentNode.insertBefore(node, firstChild).