Problem with tr of table inserted via javascript

Asked

Viewed 77 times

2

	function cadProd(){
	var nomeProd = document.getElementById("nomeProd").value;
	var categoria = document.getElementById("categoria").value;
	var descricao = document.getElementById("descricao").value;
	var un = document.getElementById("un").value;
	var qtd = document.getElementById("qtd").value;
	var qtdMin = document.getElementById("qtdMin").value;
	var table = document.getElementById("novosProds");
	var row = table.insertRow(1);
	row.insertCell(0).innerHTML = nomeProd;
	row.insertCell(1).innerHTML = categoria;
	row.insertCell(2).innerHTML = descricao;
	row.insertCell(3).innerHTML = un;
	row.insertCell(4).innerHTML = qtd;
	row.insertCell(5).innerHTML = qtdMin;
	row.insertCell(6).innerHTML = '<input type="submit" value="Deletar">';
	return alert("Registro realizado com sucesso");
}
<!DOCTYPE pt-br>
<html>
	<head>

	</head>
	<body>
		<?php/*
			include 'header.php';
		*/?>
		<div class='cadProd'>
			<h1>Cadastrar Produto</h1>
			<table border='2' id='cadastrar'>
				<tr>
					<th>Nome</th><th>Categoria</th><th>Descrição</th><th>Un. Medida</th><th>Qtd</th><th>Qtd Minima</th>
				</tr>
				<tr><form method='POST'>
					<td>
						<input type='text' name='nomeProd' id='nomeProd'/>
					</td>
					<td>
						<select name='categoria' id='categoria'>
							<option id='1'>Limpeza</option>
							<option id='2'>Escritório</option>
							<option id='3'>Uniforme</option>
							<option id='4'>Acessórios</option>
						</select>
					</td>
					<td>
						<input type='descricao' name='descricao' id='descricao'>
					</td>
					<td>
						<select name='un' id='un'>
							<option id='1'>Un</option>
							<option id='2'>Pct</option>
							<option id='3'>Lts</option>
							<option id='3'>Kilo</option>
						</select>
					</td>
					<td>
						<input type='number' name='qtd' id='qtd'>
					</td>
					<td>
						<input type='number' name='qtdMin' id='qtdMin'>
					</td>
					<td>
						<input type='submit' onclick='cadProd()' value='Cadastrar'/>
					</td>
				</form></tr>
			</table>
			<table border='2' id='novosProds'>
				<tr>
					<th>Nome</th><th>Categoria</th><th>Descrição</th><th>Un. Medida</th><th>Qtd</th><th>Qtd Minima</th>
				</tr>
			</table>
		</div>
	
	<body>
</html>

Guys, if you look at the example, he’s holding the line. My problem is that when it runs here on my localhost, it deletes the line after inserting it.

This code is complete. Saving as html might see the problem:

<!DOCTYPE pt-br>


</head>
<body>
    <div class='cadProd'>
        <h1>Cadastrar Produto</h1>
        <table border='2' id='cadastrar'>
            <tr>
                <th>Nome</th><th>Categoria</th><th>Descrição</th><th>Un. Medida</th><th>Qtd</th><th>Qtd Minima</th>
            </tr>
            <tr><form method='POST'>
                <td>
                    <input type='text' name='nomeProd' id='nomeProd'/>
                </td>
                <td>
                    <select name='categoria' id='categoria'>
                        <option id='1'>Limpeza</option>
                        <option id='2'>Escritório</option>
                        <option id='3'>Uniforme</option>
                        <option id='4'>Acessórios</option>
                    </select>
                </td>
                <td>
                    <input type='descricao' name='descricao' id='descricao'>
                </td>
                <td>
                    <select name='un' id='un'>
                        <option id='1'>Un</option>
                        <option id='2'>Pct</option>
                        <option id='3'>Lts</option>
                        <option id='3'>Kilo</option>
                    </select>
                </td>
                <td>
                    <input type='number' name='qtd' id='qtd'>
                </td>
                <td>
                    <input type='number' name='qtdMin' id='qtdMin'>
                </td>
                <td>
                    <input type='submit' onclick='cadProd()' value='Cadastrar'/>
                </td>
            </form></tr>
        </table>
        <table border='2' id='novosProds'>
            <tr>
                <th>Nome</th><th>Categoria</th><th>Descrição</th><th>Un. Medida</th><th>Qtd</th><th>Qtd Minima</th>
            </tr>
        </table>
    </div>
        <script language='javascript'>
function cadProd(){
var nomeProd = document.getElementById("nomeProd").value;
var categoria = document.getElementById("categoria").value;
var descricao = document.getElementById("descricao").value;
var un = document.getElementById("un").value;
var qtd = document.getElementById("qtd").value;
var qtdMin = document.getElementById("qtdMin").value;
var table = document.getElementById("novosProds");
var row = table.insertRow(1);
row.insertCell(0).innerHTML = nomeProd;
row.insertCell(1).innerHTML = categoria;
row.insertCell(2).innerHTML = descricao;
row.insertCell(3).innerHTML = un;
row.insertCell(4).innerHTML = qtd;
row.insertCell(5).innerHTML = qtdMin;
row.insertCell(6).innerHTML = '<input type="submit" value="Deletar">';
return alert("Registro realizado com sucesso");

}

Any suggestions on that? Sincerely yours

javascript html5 css3
  • 1

    <input type="submit" value="Deletar"> an input of type Submit "submits the form for an action, I saw no action in the click and no form in html. What must be happening in your delete on localhost is not it giving a refresh on the page? And with that the record goes away and Voce thinks that deleted?

  • It is not actually related to this DELETE input, but to what is in the form above, which contains the value='register'. But what I said is correct. The script was refreshing the page and the records disappeared after being inserted. Thank you so much for helping Neuber.

  • The code seems to be correct, could be some cache or difference in your local code not? Javascript runs in the browser, so it makes no difference if you’re running on a real site or on a host site, if it’s at http(s):// , now running as an html file without being by a web server might be causing some trouble. Maybe it’s time to learn Angularjs :) http://plnkr.co/edit/d6yDka?p=preview

  • Change the <input type="Submit" value"Delete"> by <button type="button">Delete</button> The input type Submit commits to the action attribute of <form>, if it does not exist it will request the page itself with the POST method.

1 answer

1


When using [type="Submit"] the browser will make a POST request to the URL or URI attribute "action" defined in the tag, if there is no action or form, the click on a [type="Submit"] will execute a POST on the page itself, which will result in a redirect, As your code has no persistence mechanism the data is lost due to page refresh. Altering the <input type="submit" value"(...)"> for <button type="button">(...)</button>

Below follows the code modified for this reality:

	function cadProd(){
		var nomeProd = document.getElementById("nomeProd").value;
		var categoria = document.getElementById("categoria").value;
		var descricao = document.getElementById("descricao").value;
		var un = document.getElementById("un").value;
		var qtd = document.getElementById("qtd").value;
		var qtdMin = document.getElementById("qtdMin").value;
		var table = document.getElementById("novosProds");
		var row = table.insertRow(1);
		row.insertCell(0).innerHTML = nomeProd;
		row.insertCell(1).innerHTML = categoria;
		row.insertCell(2).innerHTML = descricao;
		row.insertCell(3).innerHTML = un;
		row.insertCell(4).innerHTML = qtd;
		row.insertCell(5).innerHTML = qtdMin;
		row.insertCell(6).innerHTML = '<button type="button"  onclick="delProd(this)">Deletar</button>';
		return alert("Registro realizado com sucesso");
	}
	function delProd(td) {
		var tr=td.parentNode.parentNode;
		tr.parentNode.removeChild(tr);
	}
   <!DOCTYPE pt-br>
<html>
<head>

</head>
<body>
	<?php/*
		include 'header.php';
	*/?>
	<div class='cadProd'>
		<h1>Cadastrar Produto</h1>
		<table border='2' id='cadastrar'>
			<tr>
				<th>Nome</th><th>Categoria</th><th>Descrição</th><th>Un. Medida</th><th>Qtd</th><th>Qtd Minima</th>
			</tr>
			<tr><form method='POST'>
				<td>
					<input type='text' name='nomeProd' id='nomeProd'/>
				</td>
				<td>
					<select name='categoria' id='categoria'>
						<option id='1'>Limpeza</option>
						<option id='2'>Escritório</option>
						<option id='3'>Uniforme</option>
						<option id='4'>Acessórios</option>
					</select>
				</td>
				<td>
					<input type='descricao' name='descricao' id='descricao'>
				</td>
				<td>
					<select name='un' id='un'>
						<option id='1'>Un</option>
						<option id='2'>Pct</option>
						<option id='3'>Lts</option>
						<option id='3'>Kilo</option>
					</select>
				</td>
				<td>
					<input type='number' name='qtd' id='qtd'>
				</td>
				<td>
					<input type='number' name='qtdMin' id='qtdMin'>
				</td>
				<td>
					<button type="button" onclick="cadProd()">Cadastrar</button>
				</td>
			</form></tr>
		</table>
		<table border='2' id='novosProds'>
			<tr>
				<th>Nome</th><th>Categoria</th><th>Descrição</th><th>Un. Medida</th><th>Qtd</th><th>Qtd Minima</th>
			</tr>
		</table>
	</div>
<body>
</html>

Basically I removed the inputs type Submit and replaced by button type Buttons that do not trigger the Submit event. I needed to add a unique function to remove the product, in it I pass the element itself clicked and then I go up until I reach the table where I do the removal of the element.

Browser other questions tagged javascript html5 css3

You are not signed in. Login or sign up in order to post.