JavaScript - Function To Validate Text Boxes

Hi there. With the below script I'm trying to validate if the user enters a quantity in the text box they must select a reason for ordering and if the user selects a reason code but forgets to enter a quantity it should alert to enter a quantity. Right now it validates the reason code but not the quantity. Please help.




Code:

<script>

function validateReason(){
var tr, i=1;
while(tr=document.getElementById('Child'+(i++))){
 var txtV=tr.getElementsByTagName('input')[0].value
 var selS=tr.getElementsByTagName('select')[0].selectedIndex;
 if(txtV.length>0&&selS==0){alert('If you enter a quantity you must select a reason!');return false}
}
return true;
}



</script>


<form method="POST" onsubmit="return validateReason(this) ; " action="Order_Process.php" name="theForm" >
<table>
<tr id='Child1'>
  <td><input type = 'text' MAXLENGTH='3' 
             style = 'width:40px'; class='textfield' name='quantity[]' ></td> 
  <td><select size='1'  STYLE='width: 130px' class='smallDrop' name='reason_codes[]'><option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='INSUFFICIENT' >INSUFFICIENT</option>
<option value='MISPLACED' >MISPLACED</option>
<option value='NOT ORDERED' >NOT ORDERED</option>
<option value='PLANOGRAM CHANGE' >PLANOGRAM CHANGE</option>
<option value='SHORT' >SHORT</option>
</select></td>                
  
</tr>
 
<tr id='Child2'>
  <td><input type = 'text' MAXLENGTH='3' 
             style = 'width:40px'; class='textfield' name='quantity[]' ></td> 
  <td><select size='1'  STYLE='width: 130px' class='smallDrop' name='reason_codes[]'><option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='MISPLACED' >MISPLACED</option>
<option value='SHORT' >SHORT</option>
</select></td>                
  
  
 
</tr>
 
<tr id='Child3'>
  <td><input type = 'text' MAXLENGTH='3' 
             style = 'width:40px'; class='textfield' name='quantity[]' ></td> 
  <td><select size='1'  STYLE='width: 130px' class='smallDrop' name='reason_codes[]'><option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='MISPLACED' >MISPLACED</option>
<option value='SHORT' >SHORT</option>
</select></td>                
  
</tr>
</table>

<input type="submit" value="submit" name="submit">
</form>

I am Gururaj.
I have written a form in HTML which contains username,lastname,email,password and submit.
I have written a javascript to validate this form [validate(username,lastname,email,password)].
On submit this javascript function will be called and hence form get validated.
I am passing all the arguements(username,lastname,email and password) to the javascript function..


Is it possible to make me a code such that it should call an individual function for each field in the form.for ex:if i have not entered username, last name in the form and attempt to submit, only username arguement should be passed to the function as it comes first in the form.
In other sense i want to validate individual text field validation of my form.


So can anybody help me.It will be very needful to me.

Yes - I need a script that will validate user input against a text file - exactly like the one in the left sidebar at
http://www.oilpatchfuel.com/Pages/Welcome.aspx
titled "Delivery Area".

Thanks!

Hello,

I have a function that I call that tells me the checked value of a group of radio boxes. You pass in the form name and radio group name and it gives you the value of the one that is checked.

I have a dynamic list of existing shipto addresses that a user can select one in order to have something shipped to a previously used shipto address. If I have more than one, my code works but if there is only one radio option and they click it, the object is deemed undefined. I need for this function to handle a single radio option on the page as it is possible in some cases.

Here is my code

Code:

                                                                           
function get_radio_checked_value( form_name, radio_name )                                                                                     
{                                                                                                                            
var radioObj = document.forms[ form_name ].elements[ radio_name ];                                                                            
for(var i = 0; i < radioObj.length; i++)                                                                                                      
    {                                                                                                                                   
    if(radioObj[i].checked)                                                                                                                    
return radioObj[i].value;                                                                                                               
    }                                                                                                                                          
}

And my usage is usually like this
Code:

var tempradio = get_radio_checked_value( 'frm_shipto', 'rad_shipto' );

In the above example if I have more than one address / radio option, tempradio holds the correct value otherwise if just one address available it holds undefined

Any help would be greatly appreciated.

Hi everybody. I'm new to both Javascript and this site, so apologies if this isn't the right way to be asking this question.

Here's what I'm trying to do.

I've got two dropdown boxes ('language' and 'word'). When the submit button is pressed, I want a div to show with the right word in it. I can do this fine with one dropdown box, but two has got me stumped. Any ideas would be much appreciated.

S

Hi,

I have a drop down menu, which you select an item and the text in a text box below displays according to what has been chosen from the drop down list.

I have too much text in some case to appear in the text box, so i wanted to find some code so i can select different numbers for pages so i can display the information on different pages.

Is this possible.

Thanks

I've looked all over google but can't seem to find this out.

How do you make it so you have 2 text boxes beside each other where you type (for example) 1 character in the first, and it flows into the next (without the need for pressing tab or whatever)

I'm talking about the sort of thing you get when entering a software key

Hi,
I'm a javascript noob, and I am doing a project for CS. I got the page to look how it is supposed to, but it does not work correctly. The input boxes should display a number between 1-4 in the output boxes, but the box displays [object HTMLInputElement] instead. And the buttons all perform their task to one output box, not their own output box. Sorry if that was confusing. Please take a look.


<html>
<!-- esp.html Nick Bravante -->
<!-- C -->
<!-- ======================= -->

<head>
<center>
<title> <h1> ESP Tester </h1> </title>
<script type="text/javascript"
src="http://dave-reed.com/book/random.js">
</script>
<script type="text/javascript">
function PickNumber()
// Results: displays a random number in messageBox
{
var number;

number = RandomInt(1, 4);

document.getElementById('messageBox').value=
"You guessed " + guessOne + " My number was " + number + ".";
}

</script>
</head>


</br>
<body>
Enter your Guess(1-4).<input type="num" id="guessOne" size="4" value="" />
</body>

<body>
<p style="text-aign:center">
<input type="button" value="Guess 1"
onclick="PickNumber();" />
<br />
<input type="text" id="messageBox" size="90" />
</p>
</body>

<head>
<center>
<title> <h1> ESP Tester </h1> </title>
<script type="text/javascript"
src="http://dave-reed.com/book/random.js">
</script>
<script type="text/javascript">
function PickNumber()
// Results: displays a random number in messageBoxTwo
{
var number;

numberTwo = RandomInt(1, 4);

document.getElementById('messageBoxTwo').value=
"You guessed " + guessTwo + " My number was " + numberTwo + ".";
}

</script>
</head>

<head>
<center>
<title> <h1> ESP Tester </h1> </title>
<script type="text/javascript"
src="http://dave-reed.com/book/random.js">
</script>
<script type="text/javascript">
function PickNumber()
// Results: displays a random number in messageBox
{
var number;

numberThree = RandomInt(1, 4);

document.getElementById('messageBox').value=
"You guessed " + guess + " My number was " + numberThree + ".";
}

</script>
</head>

</br>
<body>
Enter your Guess(1-4).<input type="num" id="guessTwo" size="4" value="" />
</body>

<body>
<p style="text-aign:center">
<input type="button" value="Guess 2"
onclick="PickNumber();" />
<br />
<input type="text" id="messageBoxTwo" size="90" />
</p>
</body>

</br>
<body>
Enter your Guess(1-4).<input type="num" id="guessThree" size="4" value="" />
</body>

<body>
<p style="text-aign:center">
<input type="button" value="Guess 3"
onclick="PickNumber();" />
<br />
<input type="text" id="messageBoxThree" size="90" />
</p>
</body>

<head>
<center>
<title> <h1> ESP Tester </h1> </title>
<script type="text/javascript"
src="http://dave-reed.com/book/random.js">
</script>
<script type="text/javascript">
function PickNumber()
// Results: displays a random number in messageBox
{
var number;

numberFour = RandomInt(1, 4);

document.getElementById('messageBoxFour').value=
"You guessed " + guessFour + " My number was " + numberFour + ".";
}

</script>
</head>


</br>
<body>
Enter your Guess(1-4).<input type="num" id="guessFour" size="4" value="" />
</body>

<body>
<p style="text-aign:center">
<input type="button" value="Guess 4"
onclick="PickNumber();" />
<br />
<input type="text" id="messageBoxFour" size="90" />
</p>
</body>
</html>

I am trying to pass data from one form to another form using the url
i can get it to come up on the next pages url but how do i get it to go to a text box on the new form. is there a way of assigning text boxes.
being trying it in javascript and asp even php
would like to keep it to javascript but am open minded to just get it to work

hello,

I have a problem changing the value of multiple text boxes, My page contain one text box named "price" and i need to set the value of this box to all other text boxes in the page which they attribute is <input type="text" value="" name="product[xxxx]" id="product"/>
xxxx = random number

the page may contain only one text box id=product or more

i have tried the following code but it only works with multiple text boxes and doesn't work if the page have one text box


Code:

              var price = document.getElementById('price').value;
              var allElements = document.form1.product;
              var len=allElements.length;
              if(allElements.length){
              for (i = 0; i < len; i++){
              allElements[i].value = price;
               }

I'm not a javascript expert so i don't know if this code is the right way to accomplish this.

Thank you very much for your help

I am doing a website project and I am currently designing product page.

I have created the text boxes dynamically(as many boxes as the user wants) and he can drag and drop the text boxes in the page.

I need to create a dynamic line from one text boxes to other text boxes and delete the test boxes which the user does not want. I have created the dynamic graphic line.

I know the values of the text boxes can be saved using php in the backend.

But is there any way the values with the dynamically created boxes(with <div></div> elements, not with the text boxes) with values and graphics line can be saved online and the user when log-in again can retrieve the work that he saved? Can we code this either in javascript/php?

Hello all,

I have a requirement where i need to take an IPv4 address as an input, my web page has 4 text boxes. If i have a address like this 255.255.255.255, my program jumps into the next text box without any problem as soon as i enter the 3 digits. i dont need to press any tab or any other key to go to next text box.

In case of an address like 12.24.12.3, i have to press <tab> to jump into the next text box, My project requirement says that it should work with '.' (dot) char as well.

SO here is my actual requirement i need to jump into the next text box as soon as user enters a dot (.) char without displaying the dot into the text box.


I am writing this program in perl CGI.

Thanks,
Vaibhav

Hi guys,

I have a form I am working on that has 4 text boxes in it, but I want to change it so that if a Radio button is selected it makes the 4th text box disappear, but still gives it a value of "0" when the form is submitted.

Is this possible with Javascript?

Here is what it looks like so far -

Code:

<FORM><table id='table_columns'>
                   <tr>
                <td colspan="2" align="center">3 Columns <input name="3columns" type="radio" value="3columns">  4 Columns <input name="4columns" type="radio" value="3columns"></td></tr><tr>
                <td align="right"><p>Column 1</p></td>
                <td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH1" size="20" Title="Insert the desired width" value="25" /></td>
              </tr>
                   <tr>
                <td align="right"><p>Column 2</p></td>
                <td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH2" size="20" Title="Insert the desired width" value="25" /></td>
              </tr>
                   <tr>
                <td align="right"><p>Column 3</p></td>
                <td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH3" size="20" Title="Insert the desired width" value="25" /></td>
              </tr>
                   <tr>
                <td align="right"><p>Column 4</p></td>
                <td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH4" size="20" Title="Insert the desired width" value="25" /></td>
              </tr>
                 </table>
            <br />
            <input type="button" value="Save" Title="Save these Settings" onClick="updateSettings('COLUMNS');" /></FORM>

If 3 Columns, WIDTH4 is not viewed and defaults to "0".
If 4 Columns, all are visible and the number is then optional.

Would love some assistance with this as my coding skills are pretty limited and my fingers have gone numb trying to google an answer.

I have been using just basic text lately and now convert them to smiles when it is ECHO'd on the page later on when the page is viewed again. but with to know how to insert them by clicking the images.

Hi all, I'm very new to Javascript and wonder if someone can help me.

I'm creating an online enrolment form for my company, who are a training company. Users enrolling on the course must make three choices - The level of course, the size of course and whether they wish to attend a workshop or study by distance learning. The combination of these three factors will determine the price. I'd like to have the price automatically calculated using javascript and displayed on the form before they submit. Can anyone give me an idea of how to do this?

There are three drop down boxes for users to select their course. They a -

Level of Qualification:
Level 3
Level 4
Level 5
Level 6

Scale of Qualification:
Award
Certificate
Diploma

Preferred Delivery Method
Workshop
Distance Learning

Each possible combination of these will affect the price. So for instance, if the user were to select 'Level 4', 'Certificate' and 'Workshop' the price would be calculated based on these three options.

How can I calculate the ultimate price and then display it on the page (I was thinking of using innerHTML in a 'span' element to display the final value, but if anyone has any better ideas I'd be glad to hear them)

The HTML code for the drop down boxes is below:

Code:

<form action="enrolment.php" method="post">

<select name="level" class="input" id="level">

  <option value="chooselevel"></option>
  <option value="Level 3">Level 3</option>
  <option value="Level 4">Level 4</option>
  <option value="Level 5">Level 5</option>
  <option value="Level 6">Level 6</option>

</select>

<select name="size" class="input" id="size">

  <option value="choosesize"></option>
  <option value="Award">Award</option>
  <option value="Certificate">Certificate</option>
  <option value="Diploma">Diploma</option>

</select>

<select name="delivery" class="input" id="deliv">

  <option value="deliverymethod"></option>
  <option value="Workshop">Workshop</option>
  <option value="Distance Learning">Distance Learning</option>

</select>

</form>

Thanks all, hope someone here can help!

Regards

Chris

*EDIT: I should mention that the form is also inside a table - Not sure if that will make a difference.