submit input text into table as

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP



submit input text into table as <td>



Ive been looking online for super long and I haven't been able to find an answer to something that seems super common.



Basically what I want to do is submit input text and maybe also if a radio button or something like that is checked to popup as text in a table as here are some photos of the inputs and the table. enter image description here



I want to be able to press the "+" or "add" button and have all the text from the inputs added into the table and if the radio is checked (checked= true(something like that)) for it all to show up in the table when I press the add button.



Here is my HTML for the example photo:


<div class="bg">

<button id="droplist-btn" class="droplist-btn">Add By Droplist</button>
<form>
<input type="text" id="item-code-input" class="item-code-input" placeholder=""></input>
<button type="submit" id="add-item" class="add-item">+</button>
<input type="text" id="color-input" placeholder="color"></input>
<select type="text" id="sizes-item-code" class="sizes-item-code">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="XLarge">XLarge</option>
<option value="One Size">One Size</option>
</select>
</label>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
<label for="switch">Any Color</label>
</form>
<table id="items-table">
<!--<caption>Task</caption>-->
<tr>
<th>Item</th>
<th>Size</th>
<th>Options</th>
</tr>
<tr>

</tr>
</table>
<label id="item-code-label">Item Code</label>
<!-- idk what happened here -->
<label class="radio">.
<input type="radio" checked="checked" name="radio">
<span class="check-item"></span>
</label>
<label id="keyword-label">Keyword</label>
<label class="radio">.
<input type="radio" name="radio">
<span class="check-keyword"></span>
</label>

</div>
<script src="jquery.js"></script>
<script src="items.js"></script>

</body>
</html>



I have tried to add both of the answers below to my other script and none of them are working here is the html for my differnt table:


<table id="proxy-list">
<tr>
<!--<th>Name</th> -->
<th colspan="3">Proxies</th>
</tr>
<tr>
<td>Proxy1:</td>
<td>174.32.116.214:87</td>
<td>
<button class="remove-btn"><div class="thex">x</div></button>
</td>
</tr>
</table>
<input type="text" id="proxy-add-name" placeholder="Name"></input>
<input type="text" id="proxy-add-proxy" placeholder="Proxy"></input>
<button id="proxy-add" onclick="addProxy()">Add</button>



Any help is appreciated thank you.



(I Know my html code is very messy im very knew to html and am still learning)



(jQuery is preferred but as I said anything helps)





Can you post some code that you've tried?
– FrankerZ
Aug 12 at 5:03





$('#items-table').append($('<tr>') var Item = $("#item-code-input").val() .append($('<td>').append(Item)) .append($('<td>').append("Large")) .append($('<td>').append("Any Size")))
– developer12
Aug 12 at 5:07






something like that as a test without variables it doesnt work @FrankerZ
– developer12
Aug 12 at 5:08






Please edit your post to include any additional information you have to your question. Avoid adding this in the comments, as they are harder to read and can be deleted easier. The edit button for your post is just below the post's tags.
– FrankerZ
Aug 12 at 5:09





Post some HTML as well, so we can demonstrate/test it without having to remake an example structure.
– FrankerZ
Aug 12 at 5:10




3 Answers
3



This is using your code - BTW I added id="switch" for the checkbox input (to link to for="switch") For options it only takes into account "Any Colour" though. The "+" button makes it add rows. I used "return false" to stop the form from submitting when the + button is clicked.




function addRow()
var item_text = $('#item-code-input').val();
var size_text = $('#sizes-item-code').val();
var options_text = $('#switch').is(':checked') ? 'Any Color' : '';
$('#items-table').append('<tr>'
+'<td>'+item_text+'</td>'
+'<td>'+size_text+'</td>'
+'<td>'+options_text+'</td>'
+'</tr>');


$(function()
$('#add-item').click(function()
addRow();
return false;
);
);


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="bg">

<button id="droplist-btn" class="droplist-btn">Add By Droplist</button>
<form>
<input type="text" id="item-code-input" class="item-code-input" placeholder=""></input>
<button type="submit" id="add-item" class="add-item">+</button>
<input type="text" id="color-input" placeholder="color"></input>
<select type="text" id="sizes-item-code" class="sizes-item-code">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="XLarge">XLarge</option>
<option value="One Size">One Size</option>
</select>
</label>
<label class="switch">
<input type="checkbox" id="switch">
<span class="slider"></span>
</label>
<label for="switch">Any Color</label>
</form>
<table id="items-table">
<!--<caption>Task</caption>-->
<tr>
<th>Item</th>
<th>Size</th>
<th>Options</th>
</tr>
<tr>

</tr>
</table>
<label id="item-code-label">Item Code</label>
<!-- idk what happened here -->
<label class="radio">.
<input type="radio" checked="checked" name="radio">
<span class="check-item"></span>
</label>
<label id="keyword-label">Keyword</label>
<label class="radio">.
<input type="radio" name="radio">
<span class="check-keyword"></span>
</label>

</div>
<script src="jquery.js"></script>
<script src="items.js"></script>

</body>
</html>



Just update the start of addRow




function addRow()
var item_text = 1; // $('#item-code-input').val() ???
var size_text = 2;
var options_text = 3;
$('#main-table').append('<tr>'
+'<td>'+item_text+'</td>'
+'<td>'+size_text+'</td>'
+'<td>'+options_text+'</td>'
+'</tr>');


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="main-table">
<tr>
<th>Item</th><th>Size</th><th>Options</th>
</tr>
</table>
<button onclick="addRow()">Add Row</button>





if I wanted the variable to be the text from the inside of an input field would I just do .val(); ?
– developer12
Aug 12 at 5:33






yes though getting the selected option in a "select" can be trickier (but in your case you made the value and text/label in the option the same)
– Luke Wenke
Aug 12 at 5:36






Ive tried your script on the new html posted below the old one and it isnt working
– developer12
Aug 12 at 6:01



Try this out. Not efficient but it covers what you want to do




function add()
let table = document.getElementById("theTable")
let fd = new FormData(myForm)

let output = ""
for(let data of fd.entries())
output += "<td>"+data[1]+"</td>"

output = "<tr>"+output+"</tr>"

table.innerHTML += output


<form id=myForm>
<input name="name" value="John" />
<input name="age" value="32" />
<input name="lang" value="en" />
<input type=button onclick="add()" value="+"/>
</form>

<table width="100%" border=1 id="theTable">

</table>





Ive tried your script and when I press the add button the text disappears from the inputs and doesn't show up anywhere
– developer12
Aug 12 at 6:02





that shows that something is wrong with the formId. can you share your code for more help?
– andylamax
Aug 12 at 9:34






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Popular posts from this blog

Firebase Auth - with Email and Password - Check user already registered

Dynamically update html content plain JS

Creating a leaderboard in HTML/JS