Develop Reference

Is there a way I can make a form button link to a different page after certain number of clicks?

I am creating a landing page with a form. I want to set up where every 10th person who signed up links to a "special" page where they receive a prize. For example: first 9 people will redirect to thankyou.html page where the 10th person will link to prize.html page. Is this possible? Thank you in advance.
<form method="post" enctype="multipart/form-data" action="http://form.relevanttools.com/rt-cgi-bin/satellite">
<input type="hidden" name="code" value="12531"> <input type="hidden" name="db" value="project"> <input type="hidden" name="source" value="Prize"> <input type="hidden" name="optin" value=""> <input type="hidden" name="type" value="signup"> <input type="hidden" name="user_email_msg" value=""> <input type="hidden" name="admin_email_addr" value=""> <input type="hidden" name="redir" value="http://www.link.com/thankyou.html">
<table border="0">
<tr>
<td> </td>
<td>First Name*</td>
<td> </td>
<td> <input type="text" id="first_name" name="first_name*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Last Name*</td>
<td> </td>
<td> <input type="text" id="last_name" name="last_name*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Email*</td>
<td> </td>
<td> <input type="text" id="email" name="email*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Age*</td>
<td> </td>
<td> <input type="text" id="age" name="age*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Gender</td>
<td> </td>
<td>
<div class="align-left"> <input type="radio" name="gender" value="Male">Male<br> <input type="radio" name="gender" value="Female">Female<br> </div>
</td>
</tr>
<tr>
<td> </td>
<td>Zip</td>
<td> </td>
<td> <input type="text" id="zip" name="zip" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Private Policy*</td>
<td> </td>
<td> <input type="checkbox" id="private_policy" name="private_policy" value="x"> </td>
</tr>
<tr>
<td> </td>
<td>Email Subscription</td>
<td> </td>
<td> <input type="checkbox" id="email_opt_in" name="email_opt_in" value="x"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><input type="submit" value = "Submit" ></td>
</tr>
</table>
</form>

You could give the button a 10% probability of redirecting to the prize page - but that's the best without a server.
Javascript is client side. Meaning it has no way of knowing how other people have acted. The only way to know that is storing every click in a database and counting that.

Angular- Get data-bind value from <span>

I'm having a complete table as a form, most of the cells in the table(td) are input fields
<td><input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.one"> </td>
<td><input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.two"> </td>
<td><input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.three"> </td>
<td><input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.four"> </td>
<td><span id="testingInput2" ng-model="addResources.total">{{addResources.one+addResources.three}}</span> </td>
<td><span id="testingInput2" ng-model="addResources.totalsecond">{{addResources.two+addResources.four}}</span> </td>
when i try to get $scope.addResources.total after submitting , it's giving null value, and i had to use angular.element() to get it's value. What might be the issue here
Edit 1:
those who are wondering why, have a look at first 4 columns, they are user input rest are all with calculation, as user enters/changes value the last 5 columns will updates by itself. If i need to have row wise calculation (total or percentage) now i need those ng-model value

try this. aslo you can compute it in controller.
var app = angular.module("testApp", []);
app.controller('testCtrl', function($scope){
$scope.addResources = {total:""};
$scope.submit = function(total){
alert(total);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
<table>
<tr>
<td>
<input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.one"> </td>
<td>
<input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.two"> </td>
<td>
<input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.three"> </td>
<td>
<input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.four"> </td>
<td>
<input type="hidden" id="testingInput2" ng-model="addResources.total" ng-value="addResources.total = addResources.one + addResources.three ">{{addResources.one+addResources.three}}
</td>
</tr>
{{addResources.total}}
</table>
<input type="button" value="submit" ng-click="submit(addResources.total)">
</div>

First ng-model directive should be used within an input (textarea, select...) element, as the documentation says. [https://docs.angularjs.org/api/ng/directive/ngModel]
As addResources.total as addResources.totalsecond are calculated fields you could have them calculated on your controller, there is no reason to have ng-model inside the span.

Automatically restart a new input

I would like to think that if you do something in the first id = "benodigheden" that there is something specific then a second rule is for id = "benodigheden" I also couldn't find anything on the internet. I think you need to have java but here is my knowledge still too small for.
I hope somebody can help me.
This is my HTML:
<form action="" method="post">
<legend>Neem contact op</legend>
<table>
<tr>
<td>
<label for="Naam">Naam: </label>
</td>
<td>
<input type="text" id="Naam" name="Naam" placeholder="Naam" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Email">Email :</label>
</td>
<td>
<input type="email" id="Email"name="Email" placeholder="Email" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Seizoen">Seizoen: </label>
</td>
<td>
<select name="Seizoen" id="Seizoen" required>
<option value="">Kies hier je seizoen</option>
<option value="Lente">Lente</option>
<option value="Zomer">Zomer</option>
<option value="Herfst">Herfst</option>
<option value="Winter">Winter</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="benodigheden1">Benodigheden:</label>
</td>
<td>
<input type="text" id="benodigheden1"name="benodigheden1" placeholder="Benodigheden" required="required" />
</td>
</tr>
<tr>
<td>
<label for="ingrediënten1">Ingrediënten:</label>
</td>
<td>
<input type="text" id="ingrediënten1"name="ingrediënten1" placeholder="Ingrediënten" required="required" />
</td>
</tr>
<tr>
<td>
<label for="stappenplan">Stappenplanm:</label>
</td>
<td>
<textarea name="stappenplan" id="stappenplan" cols="40" rows="5" placeholder="Stappenplan" required="required" /></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="Opmerking">Opmerking:</label>
</td>
<td>
<textarea name="Opmerking" id="Opmerking" cols="40" rows="5" placeholder="Opmerking" required="required" /></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div class="submit"><input type="submit" value="Verzenden" name="Verzenden" /></div>
</td>
</tr>
</table>
Here is a link to JSFiddle.

If I understand correctly you want an extra line (rule?) to appear once you enter text in it, and that this should happen for those inputs that have a sequence number in their id.
For this I suggest you include jQuery and add a script that detects input changes, and adds a new input if needed, with the next available sequence number:
$(document).on('keyup change input', 'input, textarea', function() {
if (!$(this).val().replace(/\s/g, '').length) {
// no text entered, so don't add line
return;
}
var id = $(this).attr('id');
// Extract name and linenumber from id
var res = id.split(/(\d+$)/);
if (res.length < 2) {
// No line number, so don't add line
return;
}
var newId = res[0] + (parseInt(res[1]) + 1);
if ($('#' + newId).length) {
// Not the last line, so don't add line
return;
}
// Add a line, and make it non-mandatory
$(this).clone()
.attr('id', newId).removeAttr('required')
.val('')
.insertAfter(this)
.before($('<br>'));
});
Although the above can be done in pure javascript it is much more cumbersome, and harder to deal with cross-browser issues.
You can see it work in this fiddle.

How can I create a table dynamically?

I have made the table structure below. How can I add a second column of this table dynamically whenever I click add1 link using javascript? The whole column from up to down.This same column must be repeated again and again
Here is my HTML:
<table id="datble" class="form" border="1">
<tbody>
<tr>
<td>Add1
</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]">
</td>
</tr>
<tr>
<td>Add2
</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]">
</td>
</tr>
<tr>
<tdAdd3
</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]">
</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]">
</td>
</tr>
<tr>
<td>Add4
</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]">
</td>
</tr>
</tbody>
</table>

You need to bind a function to the link's click event. In that function, you need to iterate through each row, find the position where you want to add the column, and then insert it.
$(function(){
// bind the function to the click event
$("#add1").on("click", function(){
// iterate through each row
$("table tbody tr").each(function(){
// insert the column HTML at the desired point
$(this).children().first().after("<td>New Column</td>");
});
});
});
DEMO
If you want to make all of the links add the column when clicked, then just replace #add1 with .add in the jQuery.

I created a JavaScript function that adds a row to your table.
I also removed the <p> tag because it's not valid HTML and makes no visual difference.
<table id="datble" class="form" border="1">
<tbody>
<tr>
<td>Add 1</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]" />
</td>
</tr>
<tr>
<td>Add 2</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]" />
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function addColumn(element) {
var tr = element.parentElement.parentElement;
var td = document.createElement("td");
td.innerHTML = '<label>Name</label>';
td.innerHTML += '<input type="text" required="required" name="BX_NAME[]" />';
tr.appendChild(td);
}
</script>
EDIT: Sorry, I misunderstood and thought you wanted to add a row. I changed the code to add a column instead.
EDIT 2: I changed the code so you can use it on multiple rows.

javascript .serialize() function is not working

HTML CODE
<form id="createCFrom">
<table class="ui-widget">
<tr>
<td>Event
</td>
<td>
<input type="text" id="CreateName" name="Event" />
</td>
</tr>
<tr>
<td>Date
</td>
<td>
<input type="text" id="CreateDate" name="Date" />
</td>
</tr>
<tr>
<td>Guest
</td>
<td>
<input type="text" id="CreateGuestName" name="Guest" />
</td>
</tr>
<tr>
<td colspan="2">
<button onclick="addCeremony();" class="right" id="saveCeremony">Save</button>
</td>
</tr>
</table>
</form>
JS Code
function addCeremony() {
alert($("#createCForm").serialize());
}

Your id is createCFrom
<form id="createCFrom">
but your script refers to createCForm
function addCeremony() {
alert($("#createCForm").serialize());
}

hi have change <button> to <input> type and it is working please try this
<input type='button' onclick="addCeremony();" class="right" id="saveCeremony" value='Save'>
fiddle

You have a typo:
alert($("#createCForm").serialize());
Should be:
alert($("#createCFrom").serialize());
(Or perhaps the id of the form is where the typo is - up to you to decide, but obviously what I'm saying is the id of the form has to match the id you use in your JS.)
Correct that problem and it works: http://jsfiddle.net/K5FVg/