I'm new to Javascript and attempting form validation.
I don't know what i'm doing wrong here any tips ?
<HTML>
<HEAD>
<TITLE>Comment Form</TITLE>
<script type ="text/javascript">
function Validate() {
}
Message = ""
Message = Message + CheckName()
Message = Message + CheckEmail()
Message = Message + CheckComments()
if (Message =="") {
return true
}
else {
alert(Message)
return false
}
}
funtion CheckName()
UserName = document.f1.Name.value
if(UserName =="") {
Message ="Please enter your name"
}
else
Message=""
}
return Message
}
//Checking E-mail:
function CheckEmail() {
email = document.f1.Email.value
AtPos = email.indexOf("#")
StopPos = email.lastIndexOf(".")
Message = ""
if (email == "") {
Message = "Not a valid Email address" + "\n"
}
//if blank:
if (AtPos == -1 || StopPos == -1) {
Message = "Not a valid email address"
}
//if no # and no .
if (StopPos < AtPos) {
Message = "Not a valid email address"
}
//if . before #
if (StopPos - AtPos == 1) {
Message = "Not a valid email address"
}
return Message
}
Is there perhaps something missing from the section below the end script ?
Do I need to put something "" in the action field ? It is asking me to put more text only what am I meant to put here just to fill in space ? Are there alternative ways to achieving what i'm trying to do here ? Is this a dated method ?
</script>
</HEAD>
<BODY BGCOLOR = White>
<form name="f1" method="post" action="" onSubmit="return Validate()" enctype = text/plain>
<table width="672" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="142" valign="top" rowspan="4"> </td>
<td valign="top" height="45" colspan="4" align="center"> <b>Name:</b>
<input type="text" name="Name" size="30">
</td>
</tr>
<tr>
<td height="40" valign="top" colspan="4" align="center"><b>Email:
<input type="text" name="Email" size="30">
<td height="151" valign="top" colspan="4" align="center">
<textarea name="Comments" cols="40" rows="7">Add Your Comments here</textarea>
</td>
</tr>
</form>
</BODY>
</HTML>
Well first of all you immediately close your validate function
function Validate() {
}
So calling
OnSubmit=Validate()
will do absolutely nothing.
Start with removing the closing } and make sure that your Validate function actually contains the validation logic.
Please use the following link
Form Validation
and surly you can get your answer with description which thing is use for what ?
Related
I have tried to implement footable pluglin on an MVC application and it currently has 3000+ users which fail to load and the browser page times out. For the User Admin section I have created the following View:
#model IEnumerable<MyBudgetWeb.Models.ApplicationUser>
#{
ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
$('.footable').footable();
});
</script>
<br /><br />
<h2>Bill Pay Users</h2>
<input id="filter" type="text" placeholder="Filter" />
<br /><br />
#if (Model.Count() > 0)
{
<table class="table" data-filter="#filter" data-page-size="50">
<thead>
<tr>
<th data-type="numeric">Customer Number</th>
<th data-type="numeric">Account Name</th>
<th data-type="numeric" data-hide="phone">Go Live Date</th>
<th data-type="numeric" data-hide="phone">Online Live Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>#item.CustomerNumber</td>
<td>#item.AccountName</td>
<td>#item.GoLiveDate</td>
<td>#item.OnlineCreationTimestamp</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
#Html.ActionLink("Details", "Details", new { id = item.Id }) |
#*#Html.ActionLink("Delete", "Delete", new { id = item.Id })*#
</td>
</tr>
}
</tbody>
<tfoot class="hide-if-no-paging">
<tr>
<td colspan="12" class="text-center">
<ul class="pagination"></ul>
</td>
</tr>
</tfoot>
</table>
}
else
{
<h2>You are still awaiting users to be added. All users will be displayed here.</h2>
}
My controller looks as follows:
public async Task<ActionResult> Index()
{
return View(await UserManager.Users.ToListAsync());
}
Is there any way workarounds to prevent this?
there are 2 option to solve:
1. PHP Side script, by setting the time limit of execution. Use this code on top your PHP script:
set_time_limit(0);
Use Footable AJAX what describe here:
http://fooplugins.github.io/FooTable/
I have a custom module 'banner' and in which I have added a button in its second tab(only two tabs for the module). when click on that button, it is submitting my banner automatically and then go to the grid page(i e it acts as just another save button). But the function of this button is to add an uploading image field.ie whenever the button is clicked, it should add an image form field to my tab file. This is my tab file.
<?php
class Karaokeshop_Banner_Block_Adminhtml_Banner_Edit_Tab_Image extends Mage_Adminhtml_Block_Widget_Form
{
protected function _prepareForm()
{
$form = new Varien_Data_Form();
$this->setForm($form);
$fieldset = $form->addFieldset('banner_image', array('legend'=>Mage::helper('banner')->__('Banner Image')));
//declaring a new custom form field and adding
$fieldset->addType('add_button', 'Karaokeshop_Banner_Block_Adminhtml_Banner_Edit_Tab_Field_Custom');
$fieldset->addField('banner_img_add_button', 'add_button', array(
'title' => Mage::helper('banner')->__('Add Banner Image'),
'id' => 'add_banner_img_button',
'class' => 'scalable save',
'style' => '',
'onclick' => 'banner.add(this)',
'type' => 'button',
));
return parent::_prepareForm();
}
}
this is my button defining file
<?php
class Karaokeshop_Banner_Block_Adminhtml_Banner_Edit_Tab_Field_Custom extends Varien_Data_Form_Element_Abstract
{
public function __construct($attributes=array())
{
parent::__construct($attributes);
}
public function getElementHtml()
{
$value = $this->getTitle();
$onclick=$this->getOnclick();
$class=$this->getClass();
$id=$this->getId();
$style=$this->getStyle();
$type=$this->getType();
$html='<button id="'.$id.'" class="'.$class.'" style="'.$style.'" onclick="'.$onclick.'" type="'.$type.'" title="'.$value.'">'.$value.' </button>';
$html .= '<p id="' . $this->getHtmlId() . '"'. $this->serialize($this->getHtmlAttributes()) .'>
<script type="text/javascript">
//<![CDATA[
var banner =
{
add : function(obj)
{
},
};
//]]>
</script>
</p>';
return $html;
}
}
what should i do to change my button to an add button? what should I do to avoid this submitting functionality of the button. Please help me. Thanks in advance
First you need to call your phtml from block like this :
class My_Moudles_Block_Adminhtml_Image_Edit_Tab_Form extends Mage_Adminhtml_Block_Widget_Form
{
public function __construct()
{
parent::__construct();
$this->setTemplate('modules/imageupload.phtml');
$this->setFormAction(Mage::getUrl('*/*/imageupload'));
}
then create file in adminhtml/default/default/template/yourmodule/imageupload.phtml and put this code there.
<div class="entry-edit">
<div class="entry-edit-head">
<h4 class="icon-head head-edit-form fieldset-legend"><?php echo $this->__('General')?></h4>
<div class="form-buttons"></div>
</div>
<form id="imageform" method="post" action="<? echo $this->getFormAction(); ?>">
<div id="rules_form" class="fieldset ">
<div class="hor-scroll">
<table cellspacing="0" class="form-list">
<tbody>
<tr>
<td class="label"><?php echo $this->__('Add Image')?></td>
<td class="grid tier" colspan="10">
<table cellspacing="0" id="chain_tiers" class="chain border" style=" width:465px; ">
<thead>
<tr class="headings">
<th><?php echo $this->__('Image')?></th>
<th class="last"><?php echo $this->__('Action')?></th>
</tr>
<tr class="template no-display" id="email_chain_add_template">
<td class="nobr">
<input type="file" id="chain_Image" value="0" name="imageg" class="requried-entry input-text">
</td>
<td class="last"><input type="hidden" value="" disabled="no-template" class="delete" name="email_chain[__index__][delete]"><button onclick="emailsControl.deleteItem(event);return false" class="scalable delete icon-btn delete-product-option" title="Delete Image"><span><?php echo $this->__('Delete')?></span></button></td>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td class="a-right" colspan="6">
<button style="" onclick="emailsControl.addItem()" class="scalable add" type="button" title="Add email" id="id"><span><span><span><?php echo $this->__('Add Image')?></span></span></span></button></td>
</tr>
</tfoot>
<tbody id="email_chain_container">
<tr>
<td class="nobr">
<input type="file" id="chain_Image" value="" name="Image[]" class="input-text">
</td>
<td class="last"><input type="hidden" value="" class="delete" name="email_chain[delete][]"><button onclick="emailsControl.deleteItem(event);return false" class="scalable delete icon-btn delete-product-option" title="Delete Image"><span><?php echo $this->__('Delete')?></span></button></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
//<![Cchain[
var emailsControl = {
itemsCount : 0,
deleteButton : false,
addItem : function () {
var chain = {};
chain.TEMPLATE_ID = 0;
chain.index = this.itemsCount++;
if (arguments.length == 1) {
chain.TEMPLATE_ID = arguments[0];
}
var s = '<tr>' + $('email_chain_add_template').innerHTML.replace(/__index__/g, '#{index}').replace(/\sdisabled="?no-template"?/g, ' ').replace(/disabled/g, ' ').replace(/="'([^']*)'"/g, '="$1"') + '</tr>';
var template = new Template(s);
Element.insert($('email_chain_container'), {'bottom': template.evaluate(chain)});
$('chain_row_'+chain.index+'_TEMPLATE').value = chain.TEMPLATE_ID;
maxItemsCount++;
},
deleteItem : function(event) {
var tr = Event.findElement(event, 'tr');
if (tr) {
jQuery(tr).remove();
}
}
}
var maxItemsCount = 2;
//]]>
</script>
</td>
</tr>
</tbody>
</table>
</div></form>
</div>
</div>
Hopes this will solve your issue.
For edit you can do it like this :
<tbody id="email_chain_container">
<?php foreach($images as $row){ ?><tr>
<td class="nobr">
your image code
</td></tr>
I am creating a job application form which has a drop down box that the user can select a city from and continue filling out the form. The objective here is depending on what city the user selected and then submits the form, it will be sent to an email address assigned to the value of that option. I have successfully been able to make this work on just simple form fields like "Name, email, and message". However since I have actually started creating the form and many more form fields it is no longer working. I have worked with a couple of tests, one using print_r($_POST);. After submitting the form it will display all of the form values that was sent, but not mail those results using mail() function. php code is below:
<?php
//Sanatize field inputs
if(isset($_POST['post'])) {
// check reCAPTCHA information
require_once('recaptchalib.php');
$privatekey = "6LcuhsgSAAAAAJ1Xlct4dmqOT2SnlhOuwAEImAXH ";
$resp = recaptcha_check_answer ($privatekey,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]);
// if CAPTCHA is correctly entered!
if ($resp->is_valid) {
$headers = "From: $email\r\n";
$headers = "Reply-To: $email\r\n";
$headers = "MIME-Version: 1.0\r\n";
$headers = "subject: Application\r\n";
$headers = "Content-Type: text/html; charset=utf-8\r\n";
$cities = $_POST['cities'];
$lastname = filter_var($_POST['lastname'], FILTER_SANITIZE_STRING);
$firstname = filter_var($_POST['firstname'], FILTER_SANITIZE_STRING);
$middle = filter_var($_POST['middle'], FILTER_SANITIZE_STRING);
$street = filter_var($_POST['street'], FILTER_SANITIZE_STRING);
$city = filter_var($_POST['city'], FILTER_SANITIZE_STRING);
$state = filter_var($_POST['state'], FILTER_SANITIZE_STRING);
$zip = filter_var($_POST['zip'], FILTER_SANITIZE_STRING);
$email = filter_var($_POST['email'], FILTER_SANITIZE_STRING);
$hphone = filter_var($_POST['hphone'], FILTER_SANITIZE_STRING);
$cphone = filter_var($_POST['cphone'], FILTER_SANITIZE_STRING);
$social = filter_var($_POST['social'], FILTER_SANITIZE_STRING);
$referral = filter_var($_POST['referral'], FILTER_SANITIZE_STRING);
$position = filter_var($_POST['position'], FILTER_SANITIZE_STRING);
$pay = filter_var($_POST['pay'], FILTER_SANITIZE_STRING);
$message = "
New mail from:<br><br>
Name: $firstname $lastname <br>
Email: $email <br>
Message: $position <br >
$pay";
//$to = "testing#website.com";
//Here I provide the email address for cities
$email1 = "testin1g#website.com";
$email2 = "testing2#website.com";
$email3 = "testing3#website.com";
//print_r($_POST);
// Logic for getting the value of drop down and then sending mail.
if ($cities == "NY"){
$sendMail = mail($email1, $message, $headers);
if($sendMail) {
echo 'Thank you ' .$firstname. ', the mail has been successfully sent!<br><br>';
} else {
echo 'An error occured and the mail could not be sent.<br>
Please try again later.';
}
}
elseif ($cities == "NC"){
$sendMail = mail($email2, $message, $headers);
if($sendMail) {
echo 'Thank you ' .$firstname. ', the mail has been successfully sent!<br><br>';
} else {
echo 'An error occured and the mail could not be sent.<br>
Please try again later.';
}
} elseif ($cities == "TX"){
$sendMail = mail($email3, $message, $headers);
if($sendMail) {
echo 'Thank you ' .$firstname. ', the mail has been successfully sent!<br><br>';
} else {
echo 'An error occured and the mail could not be sent.<br>
Please try again later.';
}
} elseif ($cities == "ME"){
$sendMail = mail($email1, $message, $headers);
if($sendMail) {
echo 'Thank you ' .$firstname. ', the mail has been successfully sent!<br><br>';
} else {
echo 'An error occured and the mail could not be sent.<br>
Please try again later.';
}
}
} else {
// handle the CAPTCHA being entered incorrectly
echo 'You Did not enter the CAPTCHA in correctly. Please go back and do so.';
}
}
session_destroy();
?>
As you can see above I have a couple of email addresses listed and then using the if statement I am telling php if the "cities = state" to send to that email address. However this is the part it is getting hung up on. It is going straight to my error message.
And my html form:
<form method="post" action="../sendemail.php">
<table cellpadding="0" cellspacing="0" width="900">
<tr>
<td width="800" bgcolor="White">
<div id="copyContainerwide">
<h1>NexxLinx Career Opportunities</h1>
<p>
Thank you for your interest in a career with NexxLinx! We have many different opportunities for employment, which may vary depending
upon which center you are interested in applying for. For more information on what positions we have available, please contact your local
NexxLinx centers, or visit us in person! </p>
<br/>
<p>To apply please select the center you would like to apply to:</p>
<select name="cities">
<option value="NY">Newburgh, NY</option>
<option value="NC">Jacksonville, NC</option>
<option value="TX" >Austin, TX</option>
<option value="ME">Orono, ME</option>
<option value="UT">South Jordan, UT</option>
</select>
<br/>
<p> TO THE APPLICANT: You must fully complete this application for it to be considered. Applications are active for ninety (90) days;
thereafter, you must personally renew the application to be considered for employment. We provide equal opportunities to all applicants
and employees without regard to race, color, religion, sex, national origin, age, or disability, in accordance with applicable federal
and state laws. Accommodation is available to applicants with a disabling condition, when applying, testing, or interviewing for a position.
Please contact the Human Resource Department to request accommodation.</p>
<fieldset>
<legend>General Information </legend>
<table>
<tr>
<td>Last Name:<br/>
<input name="lastname" type="text" size="30" /></td>
<td> First Name:<br/>
<input name="firstname" type="text" size="30"/></td>
<td> Middle Name:<br/>
<input name="middle" type="text" size="30"/></td>
</tr>
</table>
<table>
<tr>
<td>Street Address<br/>
<input name="street" type="text" size="50" /></td>
<td> City<br/>
<input name="city" type="text" size="30" /></td>
<td>State (abbr.)<br/>
<input name="state" type="text" size="7" /></td>
<td> Zip Code <br/>
<input name="zip" type="text" size="12" /></td>
</tr>
</table>
<table>
<tr>
<td>E-mail:<br/>
<input name="email" type="email" size="50" /></td>
<td>Home Phone:<br/>
<input name="hphone" type="tel" size="15" /></td>
<td>Cell Phone:<br/>
<input name="cphone" type="tel" size="15" /></td>
<td>Social Security Number<br/>
<input name="social" type="text" size="12" /></td>
</tr>
</table>
<table>
<tr>
<td>Referred By:</td>
<td><input name="agency" type="checkbox" />Agency</td>
<td><input name="advert" type="checkbox" />Advertisement</td>
<td><input name="employee" type="checkbox" />Empoloyee</td>
<td><input name="other" type="checkbox" />Other</td>
</tr>
<table>
<tr>
<td>Please list the name of the above agency, publication with the advertisement, employee, or other referall.<br/>
<input name="referral" type="text" size="60" /></td>
</tr>
</table>
<table>
<tr>
<td>Position Applied For:<br/>
<input name="position" type="text" size="50"/></td>
<td>Pay Desired:<br/>
$<input name="pay" type="text" size="20" /></td>
</tr>
<tr>
<td>
<?php
require_once('../recaptchalib.php');
$publickey = "6LcuhsgSAAAAAHtXF5i5f5XEAZmjyAtYvHGGQlhf ";
echo recaptcha_get_html($publickey);
?>
</td>
</tr>
<tr>
<td>
<input type="submit" name="post" value="submit" />
</table>
</fieldset>
</div>
</td>
</tr>
</table>
</form>
Thanks for any advice you can give me!
UPDATE:
Finally have this working! Thank you everyone for the help. For what ever reason and please correct if this is not right, I moved my headers up at the top of all of my other variables and it now works like a charm. FYI: I was working on this locally with WAMP and had a dumby sendmail configured to send through my gmail account. It work with very simple forms but apparently this one was a little too advanced, so I finally uploaded and finished testing it on my live server.
Something extra that maybe someone can help me with is validating a social security number and show the * when someone inters in numbers. Can that be done with javascript?
why not assign the email address to the value of the area if you can always reverse if your going to insert it in the database it like
<select name="cities">
<option value="test1#yahoo.com">Newburgh, NY</option>
<option value="test2#yahoo.com">Jacksonville, NC</option>
<option value="test3#yahoo.com" >Austin, TX</option>
</select>
$to=$_POST['cities'];
mail('$to', '$subject', '$message);
if you need to insert the location in database just reverse it
if($citiies==test1#yahoo.com)
{
//insert into database NY
}
this code is shorter and looks cleaner but you will need to if else it again if your going to store the
location in the database
it will be shorter because you will not compare values just send it to what the value assign is
[[UPDATED AGAIN]] And I am sorry if this question gets wordy.
I am a hobby coder, and I am looking for some help with syntax and functionality within javaScript which will allow copied delimiters such as "\t" and "\n" to skip appropriate <input>'s in an online form.
I think I am about 33% there right now (again: hobby coder - self taught wanna be)
<script type="text/javascript">
function splitInput()
{
var x=document.forms["simpleForm02"]["dataInput_0"].value;
var delimiterT = x.split("\t");
var delimiterN = x.split("\n");
for (var i=0;i<delimiterT.length;i++)
if (x.indexOf("\t") >-1)
{
document.getElementById("dataInput_" + i ).value = (delimiterT[i]);
}
else
for (var i=0;i<delimiterN.length;i++)
if (x.indexOf("\n") >-1)
{
document.getElementById("dataInput_" + (i * 3) ).value = (delimiterN[i]);
}
}
</script>
<form name="simpleForm02">
<table>
<tr>
<th>Color</th>
<th>Model</th>
<th>Qty</th>
</tr>
<tr>
<td><input class="colorInput" id="dataInput_0" name="colorInput_row_1" value="" onKeyUp="splitInput()"></td>
<td><input class="modelInput" id="dataInput_1" name="modelInput_row_1" value="" onKeyUp=""></td>
<td><input class="qtyInput" id="dataInput_2" name="qtyInput_row_1" value="" onKeyUp=""></td>
</tr>
<tr>
<td><input class="colorInput" id="dataInput_3" name="colorInput_row_2" value="" onKeyUp=""></td>
<td><input class="modelInput" id="dataInput_4" name="modelInput_row_2" value="" onKeyUp=""></td>
<td><input class="qtyInput" id="dataInput_5" name="qtyInput_row_2" value="" onKeyUp=""></td>
</tr>
<tr>
<td><input class="colorInput" id="dataInput_6" name="colorInput_row_3" value="" onKeyUp=""></td>
<td><input class="modelInput" id="dataInput_7" name="modelInput_row_3" value="" onKeyUp=""></td>
<td><input class="qtyInput" id="dataInput_8" name="qtyInput_row_3" value="" onKeyUp=""></td>
</tr>
</table>
</form>
This code kinda works, in a limited way. If I copy three excel cells aligned side by side, and paste it into <input class="colorInput" id="dataInput_0" name="colorInput_row_1" value="" onKeyUp="splitInput()">, then the script correctly splits and pastes the contents of the three cells across the top three inputs.
However, I obviously have flaws in the script because it doesn't recognize the '\n' delimiter at all. And I also know that I have coding issues with the circumstance: applying the code to all cells relatively, and not just ["dataInput_0"].
And lets presume I had the following data in an Excel sheet:
I am trying to find functionality that if I copied the Excel sample data above, it would overwrite/write the top 6 of the inputs in the sample <form name="simpleForm">.
Sorry to be long winded.
So, this question has been up for about a week, and during that time I have continued to look for ideas and help.
The solution which has presented to finest potential, but not a complete solution is via the code below:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<script>
function splitInput() {
var x = document.forms["simpleForm02"]["dataInput_0"].value;
if (x.indexOf('\t') > 0) {
var delimiterT = x.split('\t');
for (var i = 0; i < delimiterT.length ; i++)
document.getElementById("dataInput_" + i).value = (delimiterT[i]);
}
else
if (x.indexOf('\n') > 0) {
var delimiterN = x.split('\n');
var j = 0;
for (var i = 0; i < delimiterN.length ; i++) {document.getElementById("dataInput_" + j).value = (delimiterN[i]);
j += 4;
}
}
else
return false;
}
function classFocused() {
var d = document.getElementById("dataInput_0");
d.className = d.className + " InFocus";
}
function classBlured() {
var d = document.getElementById("dataInput_0");
d.className = "inputArea";
}
</script>
<form name="simpleForm02">
<table>
<tr>
<th>Color</th>
<th>Model</th>
<th>Qty</th>
<th>Cost</th>
</tr>
<tr>
<td>
<textarea data-id="0" class="inputArea colorInput" id="dataInput_0" name="colorInput_row_1" onFocus="classFocused();" onBlur="classBlured();" onKeyUp="splitInput();"></textarea>
</td>
<td>
<textarea data-id="1" class="inputArea modelInput" id="dataInput_1" name="modelInput_row_1" onkeyup="" ></textarea></td>
<td>
<textarea data-id="2" class="inputArea qtyInput" id="dataInput_2" name="qtyInput_row_1" onkeyup="" ></textarea></textarea></td>
<td>
<textarea data-id="3" class="inputArea costInput" id="dataInput_3" name="costInput_row_1" onkeyup="" ></textarea></td>
</tr>
<tr>
<td>
<textarea data-id="4" class="inputArea colorInput" id="dataInput_4" name="colorInput_row_2" onkeyup="splitInput()" ></textarea></td>
<td>
<textarea data-id="5" class="inputArea modelInput" id="dataInput_5" name="modelInput_row_2" onkeyup="" ></textarea></td>
<td>
<textarea data-id="6" class="inputArea qtyInput" id="dataInput_6" name="qtyInput_row_2" onkeyup="" ></textarea></td>
<td>
<textarea data-id="7" class="inputArea costInput" id="dataInput_7" name="costInput_row_2" onkeyup="" ></textarea></td>
</tr>
<tr>
<td>
<textarea data-id="8" class="inputArea colorInput" id="dataInput_8" name="colorInput_row_3" onkeyup="splitInput()" ></textarea></td>
<td>
<textarea data-id="9" class="inputArea modelInput" id="dataInput_9" name="modelInput_row_3" onkeyup="" ></textarea></td>
<td>
<textarea data-id="10" class="inputArea qtyInput" id="dataInput_10" name="qtyInput_row_3" onkeyup="" ></textarea></td>
<td>
<textarea data-id="11" class="inputArea costInput" id="dataInput_11" name="costInput_row_3" onkeyup="" ></textarea>
</td>
</tr>
</table>
</form>
</body>
</html>
In the above example of the textarea's, if a '\t' delimiter exists then the split is made and the data is spread over the course of the data's inherit length.
Also, in the above example of the text areas, if a '\n' delimiter exists then the split is made and the data is spread over the course of the data's inherit length vertically instead. The statement: "j += 4" is in essence the number of columns you have in the form.
Though I still need for it to work across all text area inputs, not just the identified as ["dataInput_0"]. A jQuery $(this) identifier maybe?
Also, the coding is limited because if you copy and paste cells which have both \t and \n, then the code doesn't work.
But it is a step in the right direction.
Hello guys is it possible to have multiple forms on single jsp and also with a single button?
Here is my jsp page where i hava two forms, i know this way it is, it only save the second form.
<html>
<head>
<title>Update General Info</title>
<script type="text/javascript">
function validateForm()
{
var name=document.getElementById("name").value;
var surname=document.getElementById("surname").value;
var email=document.getElementById("email").value;
var amka=document.getElementById("amka").value;
if (name.length == 0)
{
alert("Name must be filled out");
return false;
} else if(surname.length == 0){
alert("Surname must be filled out");
return false;
}else if(email.length == 0){
alert("Email must be filled out");
return false;
}else if(amka.length == 0){
alert("Amka must be filled out");
return false;
}
}
</script>
</head>
<body>
<h1>Update General Info</h1>
<c:if test="${!empty user}">
<c:url var="saveArticleUrl" value="/articles/updateGeneralSave.html" />
<form:form onsubmit="return validateForm()" modelAttribute="user" method="POST" >
<table bgcolor="DBEADC" border=1>
<tr>
<th>Id</th>
<th>Team</th>
<th>Name</th>
<th>Surname</th>
<th>Username</th>
<th>Password</th>
<th>Email</th>
<th>AMKA</th>
<th>Status</th>
<th>Department</th>
</tr>
<tr>
<td><form:input readonly="true" path="id" value="${user.id}"></form:input></td>
<td><form:input readonly="true" path="team" value="${user.team}"></form:input></td>
<td><form:input id="name" path="name" value="${user.name}"></form:input></td>
<td><form:input id="surname" path="surname" value="${user.surname}"></form:input></td>
<td><form:input readonly="true" path="username" value="${user.username}"></form:input></td>
<td><form:input type="password" readonly="true" path="password" value="${user.password}"></form:input></td>
<td><form:input id="email" path="email" value="${user.email}"></form:input></td>
<td><form:input id="amka" path="amka" value="${user.amka}"></form:input></td>
<td><form:input id="status" path="status" value="${user.status}"></form:input></td>
<td><form:select path="department">
<c:forEach items="${departments}" var="dep">
<c:if test="${dep.dep_name==user.department }">
<OPTION selected VALUE="${dep.dep_name}"><c:out value="${dep.dep_name}"/></OPTION>
</c:if>
<c:if test="${dep.dep_name!=user.department }">
<OPTION VALUE="${dep.dep_name}"><c:out value="${dep.dep_name}"/></OPTION>
</c:if>
</c:forEach>
</form:select></td>
</tr>
</table>
</form:form>
</c:if>
<c:if test="${!empty phones}">
<c:url var="saveArticleUrl" value="/articles/updatePhoneSave.html" />
<form:form onsubmit="return validateForm()" modelAttribute="updatePh" method="POST" action="${saveArticleUrl}">
<table bgcolor="DBEADC" border=1>
<tr>
<th>Id</th>
<th>Phone</th>
<th>Mobile</th>
<th>Fax</th>
</tr>
<tr>
<td><form:input readonly="true" path="id" value="${phones.id}"></form:input></td>
<td><form:input id="phone" path="phone" value="${phones.phone}"></form:input></td>
<td><form:input id="mobile" path="mobile" value="${phones.mobile}"></form:input></td>
<td><form:input path="fax" value="${phones.fax}"></form:input></td>
</tr>
</table>
<input type="submit" value="Update" />
</form:form>
</c:if>
</body>
</html>
and the controllers
RequestMapping(value = "updateGeneral" , method = RequestMethod.GET)
public ModelAndView updateGeneral(#ModelAttribute("user") Users user ,#ModelAttribute("updatePh") Phone updatePh, #RequestParam("id")Integer id){
Map<String, Object> model = new HashMap<String, Object>();
model.put("user", articleService.getUser(id));
model.put("departments", articleService.listDepartments());
//twra mpike
model.put("phones", articleService.getPhones(id));
return new ModelAndView("updategeneral",model);
}
//evala akoma ena modelattri
#RequestMapping(value = "updateGeneralSave" , method = RequestMethod.POST)
public ModelAndView updateGeneralSave(#ModelAttribute("user") Users user){
articleService.updateUser(user);
return new ModelAndView("redirect:/articles/listusers.html");
}
#RequestMapping(value = "updatePhoneSave" , method = RequestMethod.POST)
public ModelAndView updatePhonesave(#ModelAttribute("updatePh") Phone updatePh){
articleService.updatePhone(updatePh);
return new ModelAndView("redirect:/articles/listusers.html");
}
You can have multiple forms in a JSP, but you can NOT send both at the same time.
You should mix both forms and both actions, retrieve all information in the action/controller and save phone and user information. Another options would be to use Ajax to send one of the form and send the other as usually.
By the way, your problem has nothing to do with Spring.
yes of courses, you can make your button to submit both your forms. But you have do it with ajax.
You need to loop through the forms on the webpage using document.forms[i] and with each form individually call the submit
Your only option is doing for ajax, you have to realize that if you Controller method will render a page after the first submit your second submit doing by HTTP will never take effect.
function submitForm(form, index){
$.ajax({
dataType: "json",
method: "POST",
url: "your controller url",
data:$('#form').serialize(),
success: function (data) {
if(index > 0){
submitForm(form+=1, index--)
}
}
});
}
You can do following trick like
Instead of sumbit button have only normal button as
<input type="button" value="Update" onClick="submit2forms();"/>
and on click of this button call below javascript method as
<script language="javascript">
function submit2forms() {
document.getElementById("form1").submit();
document.getElementById("form2").submit();
}
</script>