buenas mi nombre es sergio tengo un problema al recojer datos de un formulario y pasarlo a ajax, utilizo firefox, estoy utilizando la dev tools y me muestra que no existen datos, a que se debe, que estoy haciendo mal?

ajax_partes.php esto me carga en la pagina barcos.php

<br>
<span>Cantidad:</span><span>Ancho:&nbsp;&nbsp;&nbsp;&nbsp;</span><span>Ancho:&nbsp;&nbsp;&nbsp;</span><span>Largo:&nbsp;&nbsp;&nbsp;</span>
<form name="form_partes">
 
<?php
foreach($fila3 as $value){
	echo "<input type='text' size='5' name='cantidad' value=\"".$value['cantidad']."\">
	<input type='text' size='5' name='ancho[]' value=\"".$value['ancho']."\">
	<input type='text' size='5' name='ancho2[]' value=\"".$value['ancho2']."\">
	<input type='text' size='5' name='largo[]' value=\"".$value['largo']."\"><br>";
 
 
}
 
?>
 
 
</form>
 
 

barcos.php aqui es donde se tiene que mostrar todos los datos parece que carga utilizando la dev tools me muestra los campos del form pasados por ajax, pero no me valida el javascript me dice que no existen datos    var str=document.forms["form_partes"]["cantidad"].value;

<div id="partes">
 
 
</div>
 
<div id="p_scents">
 
 
</div>
 
<button class='add-mod-del_clientes' onclick="visualizar_partes()">Visualizar datos</button>
 
<a href="#" class="add-mod-del_clientes"id="addScnt">Añadir + medidas</a>
 
<div id="visualizar_partes">
 
</div>
 
<script>
function visualizar_partes() {
 
	var str=document.forms["form_partes"]["cantidad"].value;
 
	if(str.length==0)
	{
		document.getElementById("visualizar_partes").innerHTML="no hay datos";
		return;	
	}
 
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("visualizar_partes").innerHTML = xhttp.responseText;
    }
  }
  xhttp.open("GET", "ajax_visualizar_partes.php?cantidad="+str, true);
  xhttp.send();
}
</script>
 

ajax_visualizar_partes.php

$cantidad=$_GET['cantidad'];
$ancho=$_GET['ancho'];
 
echo $cantidad;
echo "<br>";
echo $ancho;