Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Capturing multiple variables from HTML with JS

HTML

  • Please log in to reply
9 replies to this topic

#1 thieflock

thieflock

    CC Regular

  • Just Joined
  • PipPipPip
  • 29 posts

Posted 28 April 2009 - 11:14 AM

I have a table with multiple fields that require entry. I also have a .js file that I want to capture the values entered with the user clicks the submit button.

I know how to do this with single values but not multiple.

If I capture one variable for example I will use:

<form onsubmit="addBook()" name="AddBookForm"><input name="ISBN"><input value="Add" type="submit">
</form>

but how do I expand that over multiple variables for just one submit button?
  • 0

#2 amrosama

amrosama

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 2765 posts

Posted 28 April 2009 - 11:58 AM

are you trying to validate dynamically created input controls?
if yes, the you can make a hidden input with the total number of controls , which gets incremented each time a control is created. and name the controls like "textbox1","textbox2",...textboxN"
and make the validation using the hidden input
  • 0
yo homie i heard you like one-line codes so i put a one line code that evals a decrypted one line code that prints "i love one line codes"
eval(base64_decode("cHJpbnQgJ2kgbG92ZSBvbmUtbGluZSBjb2Rlcyc7"));
www.amrosama.com | the unholy methods of javascript

#3 WingedPanther73

WingedPanther73

    A spammer's worst nightmare

  • Moderator
  • 17757 posts
  • Location:Upstate, South Carolina
  • Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
  • Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others

Posted 28 April 2009 - 12:04 PM

You can have multiple inputs in a form (usually type="text"). They each should have a unique name, however.
  • 0

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

My MineCraft server site: http://banishedwings.enjin.com/


#4 thieflock

thieflock

    CC Regular

  • Just Joined
  • PipPipPip
  • 29 posts

Posted 28 April 2009 - 01:37 PM

I tried what you said WingedPanther, but obviously I did something wrong, I am posting the .js and .html, he you or someone could point out the problem I would appreciate it.

.js ->

function addBook() {
	var ISBN = document.AddBookForm.ISBN.value;
	var title = document.AddBookForm.BookTitle.value;
	var lName = document.AddBookForm.AuthorLName.value;
	var fName = document.AddBookForm.AuthorFName.value;
	var publisher = document.AddBookForm.BookPublisher.selectedIndex;
	var year = document.AddBookForm.YearOfPub.value;
	var synopsis = document.AddBookForm.BookDescription.value;
	var quantity = document.AddBookForm.BookQuantity.selectedIndex;

	alert(ISBN + ' ' + title ' ' + lName ' ' + fName ' ' + publisher ' ' + year ' ' + synopsis ' ' + quantity);
}


.html ->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <link rel="stylesheet" href="template.css" type="text/css">
  <title>AddBookForm</title>
  <script type="text/javascript" src="JS1.js"></script>
</head>
<body>
<h1>Add to Catalog</h1>
<b><u>Enter the books information below to update the catalog.</u></b>
<form onsubmit="addBook()" name="AddBookForm">
<h1>
<table style="text-align: left; width: 367px; height: 234px;" border="1"
 cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="width: 156px;">ISBN:</td>
      <td style="width: 199px;"><input name="ISBN"></td>
    </tr>
    <tr>
      <td style="width: 156px;">Title:</td>
      <td style="width: 199px;"><input name="BookTitle"></td>
    </tr>
    <tr>
      <td style="width: 156px;">Authors Last Name:</td>
      <td style="width: 199px;"><input name="AuthorLName"></td>
    </tr>
    <tr>
      <td style="width: 156px;">Authors First Name:</td>
      <td style="width: 199px;"><input name="AuthorFName"></td>
    </tr>
    <tr>
      <td style="width: 156px;">Publisher:</td>
      <td style="width: 199px;">
      <select name="BookPublisher">
      <option value="Ace">Ace</option>
      <option value="Dover">Dover</option>
      <option value="Grove Press">Grove Press</option>
      <option value="Houghton Mifflin">Houghton Mifflin</option>
      <option value="Penguin Classics">Penguin Classics</option>
      <option value="Putnam">Putnam</option>
      <option value="Add">Add...</option>
      </select>
      </td>
    </tr>
    <tr>
      <td>Year of Pub:</td>
      <td><input name="YearOfPub"></td>
    </tr>
    <tr>
      <td style="width: 156px;">Description:</td>
      <td style="width: 199px;"><input name="BookDescription"></td>
    </tr>
    <tr>
      <td style="width: 156px;">Quantity:</td>
      <td style="width: 199px;">
      <select name="BookQuantity">
      <option value="one">1</option>
      <option value="two">3</option>
      <option value="four">4</option>
      <option value="five">5</option>
      <option value="six">6</option>
      <option value="seven">7</option>
      <option value="eight">8</option>
      <option value="nine">9</option>
      <option value="ten">10</option>
      <option value="more">More...</option>
      </select>
      </td>
    </tr>
  </tbody>
</table>
</h1>
          
       
           
           
           
           
           
<input value="Add" type="submit">
</form>
</body>
</html>

  • 0

#5 BlaineSch

BlaineSch

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1559 posts

Posted 28 April 2009 - 02:11 PM

Try assigning everything an id and using "document.getElementById().value" instead of what your doing now
  • 0

#6 amrosama

amrosama

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 2765 posts

Posted 28 April 2009 - 02:49 PM

An id attribute is necessary to directly access elements
  • 0

#7 thieflock

thieflock

    CC Regular

  • Just Joined
  • PipPipPip
  • 29 posts

Posted 28 April 2009 - 03:11 PM

So I have done what you have said and I am not getting anything when I click my submit button.

function addBook() {
	var ISBN = document.getElementById('1').value;
	var title = document.getElementById('2').value;
	var lName = document.getElementById('3').value;
	var fName = document.getElementById('4').value;
	var publisher = document.getElementById('5').selectedIndex;
	var year = document.getElementById('6').value;
	var synopsis = document.getElementById('7').value;
	var quantity = document.getElementById('8').selectedIndex;

	alert(ISBN + ' ' + title ' ' + lName ' ' + fName ' ' + publisher ' ' + year ' ' + synopsis ' ' + quantity);
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <link rel="stylesheet" href="template.css" type="text/css">
  <title>AddBookForm</title>
  <script type="text/javascript" src="JS1.js"></script>
</head>
<body>
<h1>Add to Catalog</h1>
<b><u>Enter the books information below to update the catalog.</u></b>
<form onsubmit="addBook()" name="AddBookForm">
<h1>
<table style="text-align: left; width: 367px; height: 234px;" border="1"
 cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="width: 156px;">ISBN:</td>
      <td style="width: 199px;"><input type="text" id="1" name="ISBN"></td>
    </tr>
    <tr>
      <td style="width: 156px;">Title:</td>
      <td style="width: 199px;"><input type="text" id="2"  name="BookTitle"></td>
    </tr>
    <tr>
      <td style="width: 156px;">Authors Last Name:</td>
      <td style="width: 199px;"><input  type="text" id="3" name="AuthorLName"></td>
    </tr>
    <tr>
      <td style="width: 156px;">Authors First Name:</td>
      <td style="width: 199px;"><input  type="text" id="4" name="AuthorFName"></td>
    </tr>
    <tr>
      <td style="width: 156px;">Publisher:</td>
      <td style="width: 199px;">
      <select id="5" name="BookPublisher">
      <option value="Ace">Ace</option>
      <option value="Dover">Dover</option>
      <option value="Grove Press">Grove Press</option>
      <option value="Houghton Mifflin">Houghton Mifflin</option>
      <option value="Penguin Classics">Penguin Classics</option>
      <option value="Putnam">Putnam</option>
      <option value="Add">Add...</option>
      </select>
      </td>
    </tr>
    <tr>
      <td>Year of Pub:</td>
      <td><input  type="text" id="6" name="YearOfPub"></td>
    </tr>
    <tr>
      <td style="width: 156px;">Description:</td>
      <td style="width: 199px;"><input  type="text" id="7" name="BookDescription"></td>
    </tr>
    <tr>
      <td style="width: 156px;">Quantity:</td>
      <td style="width: 199px;">
      <select id="8" name="BookQuantity">
      <option value="one">1</option>
      <option value="two">3</option>
      <option value="four">4</option>
      <option value="five">5</option>
      <option value="six">6</option>
      <option value="seven">7</option>
      <option value="eight">8</option>
      <option value="nine">9</option>
      <option value="ten">10</option>
      <option value="more">More...</option>
      </select>
      </td>
    </tr>
  </tbody>
</table>
</h1>
          
       
           
           
           
           
           
<input value="Add" type="submit">
</form>
</body>
</html>

Sorry if I am being annoying but I am taking a class aimed around documentation. And there wasn't a web script requirement for the course so my knowledge is minimal.
  • 0

#8 BlaineSch

BlaineSch

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1559 posts

Posted 28 April 2009 - 03:47 PM

I dont think digits work well - here let me try.

Looks like you had your alert variables ** up - you didnt have + signs after the variables:

alert(ISBN + ' ' + title ' ' + lName ' ' + fName ' ' + publisher ' ' + year ' ' + synopsis ' ' + quantity);

alert(ISBN + ' ' + title + ' ' + lName + ' ' + fName + ' ' + publisher + ' ' + year + ' ' + synopsis + ' ' + quantity);


Seemed to work fine besides that when I tested it

EDIT:
When testing JS try the firefox error console:
Tools > Error Console
It might help to clear it before testing.
  • 0

#9 thieflock

thieflock

    CC Regular

  • Just Joined
  • PipPipPip
  • 29 posts

Posted 28 April 2009 - 03:59 PM

Ah, that is an embarrising mistake considering I've been programing in Java and C for a couple years now.

Anyway, thanks a bunch and I will try Firefox's error console for sure.
  • 0

#10 BlaineSch

BlaineSch

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1559 posts

Posted 28 April 2009 - 04:06 PM

Anytime glad I could help =)
  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download