Add multiple phone numbers in a form

[snowdog]

I want to be able to click a plus symbol and it add another row on the form with the option of putting the phone number in and pickying it's type. I only want one showing up until it is pushed. Unfortunately I do not know or understand javascript or jquery very well at all.

 

<p> 
                    	<label for="name">Phone Number</label>
                        <input type="text" name="phone_1"  class="sf" />
                        <select name="types">
                          <option value="1">Office</option>
                          <option value="2">Cell</option>
                          <option Value="3">Fax</option>
                        </select>
</p>             

<p> 
                    	<label for="name">Phone Number</label>
                        <input type="text" name="phone_2"  class="sf" />
                        <select name="types">
                          <option value="1">Office</option>
                          <option value="2">Cell</option>
                          <option Value="3">Fax</option>
                        </select>
</p>             
<p> 
                    	<label for="name">Phone Number</label>
                        <input type="text" name="phone_3"  class="sf" />
                        <select name="types">
                          <option value="1">Office</option>
                          <option value="2">Cell</option>
                          <option Value="3">Fax</option>
                        </select>
</p>    

 

[Andy-H]

for( $i = 0; $i < count($_POST['phone']); $i++ )
{
   echo $_POST['type'][$i] .' = '. $_POST['phone'][$i] .'<br >';
}

<script type="text/javascript">
<!-- DONT FORGET TO INCLUDE JQUERY //-->
$(document).ready(function() {
   $('.add_phone').click(function() {
      $('p.number:last').after('<p class="number">'+ $('p.number').html() +'</p>');
   });
});
</script>

<p class="number">
                     	<label for="name">Phone Number</label>
                        <input type="text" name="phone[]"  class="sf" />
                        <select name="type[]">
                          <option value="1">Office</option>
                          <option value="2">Cell</option>
                          <option Value="3">Fax</option>
                        </select> 
</p>
<a href="javascript:void();" class="add_phone">Add More</a>

[snowdog]

Have implemented the code and it is not adding another phone number field. Here is what I have done.

 

<script type="text/javascript" src="js/plugins/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="js/custom/general.js"></script>

<script type="text/javascript">
<!-- DONT FORGET TO INCLUDE JQUERY //-->
$(document).ready(function() {
   $('.add_phone').click(function() {
      $('p.number:last').after('<p class="number">'+ $('p.number').html() +'</p>');
   });
});
</script>
</head>

 

and

 

					<p class="number">
                     	<label for="name">Phone Number</label>
                        <input type="text" name="phone[]"  class="sf" />
                        <select name="type[]">
                          <option value="1">Office</option>
                          <option value="2">Cell</option>
                          <option Value="3">Fax</option>
                        </select>

				 </p>

					<a href="javascript:void();" class="add_phone">Add More</a>

[Andy-H]

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
<!-- DONT FORGET TO INCLUDE JQUERY //-->
$(document).ready(function() {
   $('.add_phone').click(function() {
      $('p.number:last').after('<p class="number">'+ $('p.number').html() +'</p>');
   });
});
</script>
<p class="number">
<label for="name">Phone Number</label>
<input type="text" name="phone[]"  class="sf" />
<select name="type[]">
	<option value="1">Office</option>
	<option value="2">Cell</option>
	<option Value="3">Fax</option>
</select>
</p>
<a href="javascript:void();" class="add_phone">Add More</a>

Works for me...

[snowdog]

ok got it to work. There was something in my general.js file that was interfering with the code. Thanks very much for your help.

 

 

James