<%-- 
 * Copyright 2007 Jens Kapitza
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 * http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
--%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://ajaxtags.org/tags/ajax" prefix="ajax" %>

<jsp:include page="header.jsp" flush="true" />

<h1>Update Form Field Tag Demo 2</h1>
<div style="margin-top: 0px; padding-top: 0px; font-size: 70%">
  <a href="${contextPath}/txt/jsp/nameinput.jsp.txt">JSP source</a>
  | <a href="${contextPath}/src/org/ajaxtags/demo/servlet/NameInput.java">Java source</a>
</div>

<div style="font-size: 90%; width: 650px;">
  <p>
    The <code>ajax:updateField</code> tag allows you to update one or more form fields based on the
    value of another single field.
  </p>
  <p>
    The example below uses this concept to implement a simple conversion tool.
  </p>
</div>

<script type="text/javascript">
 /*
  * USER DEFINED FUNCTIONS
  */

function addAgeToParameters( ) {
  $('name').value = prompt("enter your name","");
  if ($('age').value.length > 1 && $('age').value.charAt(0) == "$") {
  var c=0;
  while (!isNumber($('age').value) && c < 5) {
  	text = c >0? "enter your age, have to be a number try count = " +c : "enter your age";
  	if (c == 4) alert ("last one now i'll send it");
    $('age').value = prompt(text,"");
    c++;
  }
  }
  this.parameters = "";
  var eles = document.forms["updateForm"].elements;
  for (i=0; i < eles.length; i++) {
  if (eles[i].id && eles[i].type) {
    if (this.parameters != "") { this.parameters += ","; }
 	this.parameters += eles[i].id + "={" + eles[i].id +"}"; 
  }
 }
}
 
</script>

<div style="width: 400px;">
<form id="updateForm">
  <fieldset>
    <legend>age and name submit</legend>
    <p>Enter your age</p>

    <label for="age">Your age</label>
    <input type="text" id="age" />
    <input id="action" type="button" value="Say Hello"/>

    <label for="name">Your Name is</label>
    <input type="text" id="name" />
 
  </fieldset>
</form>
</div>

<ajax:updateField
  baseUrl="${contextPath}/nameinput.view"
  source="age"
  doPost="true"
  valueUpdateByName="true"
  target="name,age"
  action="action"
  parameters="age={age}"
  parser="new ResponseXmlParser()"
  preFunction="addAgeToParameters" />

<jsp:include page="footer.jsp" flush="true" />
