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.
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)
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>
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>
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>
Related
I'm a newbie and I 'm practicing creating a questionnaire that the user can add more question. So I have a dropdown with two choices: checkbox and radio button but when I click the checkbox the hidden div does not appear.
Also can I use .attr for the choices?
JSFiddle
<div class="container">
Question:
<br>
<textarea rows = "5" cols = "50" name = "description" placeholder="Enter a question">
</textarea>
<br>
<select name="choice" id="choice" onchange="selectorchecker()">
<option value="">Select choices</option>
<option value="checkbox">Checkbox</option>
<option value="radiobtn">Radio Button</option>
</select>
</div>
Add Question
<div style="display:none;" id="chkbox_choice">
<table id="dataTable" width="350px" >
<tr>
<td><input type="checkbox" name="check"/></td>
<td> <INPUT type="text" /> </td>
</tr>
</table>
<input type="button" value="Add choices" onclick="addRow('dataTable')" />
<input type="button" value="Delete choices" onclick="deleteRow('dataTable')" />
</div>
<div style="display:none;" id="rdbtn_choice">
<table id="dataTable" width="350px" >
<tr>
<td><input type="radio" name="radio"/></td>
<td> <INPUT type="text" /> </td>
</tr>
</table>
<input type="button" value="Add choices" onclick="addRow('dataTable')" />
<input type="button" value="Delete choices" onclick="deleteRow('dataTable')" />
</div>
Another way to do this would be to use the listener that you set on your <select> tag, and have it call the function you have already initialized rather than set a listener on an item that already has an onchange event attached to it.
function selectorchecker(){
var hiddenDiv = document.getElementById("chkbox_choice");
hiddenDiv.style.display = (this.value == "") ? "none":"block";
}
Also make sure the script is called before the <select> tag is initialized, so that the html knows the function exists
JSFiddle
The below script should be changed:
<select name="choice" id="choice" onchange="selectorchecker()">
...
var elem = document.getElementById("selectorchecker");
to
<select name="choice" id="choice">
...
var elem = document.getElementById("choice");
the function getElementById get the element by its id, so you should pass the id to that function
Also can I use .attr for the choices?
Yes, you can put the attr to <option>
<option value="checkbox" custom-field="custom-value">Checkbox</option>
And get it inside the onchange handle:
this.options[this.selectedIndex].getAttribute('custom-field')
i've got a problem I can't figure out.
I have a page (index.php) that open a form, includes another page with PHP (indexsearch.php) and close the form.
This included page is working with a script that display some datas from my website, the data are requested on the page with an AJAX function that is linked to search.php, that is working with a table and checkboxes so we can choose which data to work with.
See this schema :
Everything is working fine but the checkboxes are not send even when they are checked. I did added the name and the value in search.php
<td> <input type="checkbox" name="ajout[]" value="<?php echo $result['id']; ?>"/> </td>
I also did not opened another form.
So I guess the problem may come from the fact the AJAX datas work as an independant form that is not included in my page.
Please see the html code :
<body>
<div class="division">
<table id="text-p">
<tr>
<td>
<form action="" method="get" enctype="multipart/form-data">
<textarea id="text-p1" name="text-p1" maxlength="300" placeholder="Text1"></textarea>
</td>
<td>
<textarea id="text-p2" name="text-p2" maxlength="300" placeholder="Text2"></textarea>
</td>
</tr>
<tr>
<td>
<input type="hidden" name="MAX_FILE_SIZE" value="1000000">
Logo : <input name="logo-p1" type="file" accept="image/*">
</td>
<td>
<input type="hidden" name="MAX_FILE_SIZE" value="1000000">
Logo : <input name="logo-p2" type="file" accept="image/*">
</td>
</tr>
</table>
</div>
<div class="division">
<div width="100%" style="height: 50px;">
<input type="text" name="recherche" id="recherche" style="width: 75%; float:left; display: inline-block;" placeholder="Rechercher...">
<div style="float:right;">
<input type="radio" name="onglet" value="val1" id="act" checked="">Activité
<input type="radio" name="onglet" value="val2" id="sect">Secteur
<input type="radio" name="onglet" value="val3" id="ecr">Ecrans
</div>
</div>
<div width="100%" id="resultats">
<input id="ok" type="button" class="pageselector" name="pageselector" value="1" checked=""><table id="resultat1" width="100%" style="text-align: center;" class="resultatshow">
<tbody><tr>
<td>Cat</td>
<td>Text-1</td>
<td>Text-2</td>
<td>Sélec</td>
</tr>
<tr>
<td>Cat1</td>
<td>NULL</td>
<td>NULL</td>
<td> <input type="checkbox" name="ajout[]" value="1"> </td>
</tr>
<tr>
<td>CAT2</td>
<td>EMPTY</td>
<td>EMPTY</td>
<td> <input type="checkbox" name="ajout[]" value="2"> </td>
</tr>
</table></div>
<input type="submit" value="UPDATE">
</div>
</body>
How can I fix that ?
I am not sure but I guess it can be caused by square brackets in the name attribute of your checkboxes. If you have reason to do it, you have to work with it properly. For example, here is the HTML form field:
<input type='checkbox' name='checkbox[myOption]'>
You have to remember that POST is an array of options. So doing like above you have to access it in the right way on the server side:
$_POST['checkbox']['myOption'];
I don't know if that solves your problem but I hope it helps a little bit
I am using a javascript form with a server-side processor and I want to be able to have the form go to different emails based on the dropdown. I've gotten as far as I could based on other forms but I can't seem to get the emails to go through. I have added under the option tag on the email addresses for the choices and changed the value from an overall form email to "mailTo" () I am pretty sure this is where the issue is but I don't know how to fix it.
<form action="http://www.testsite.com/cgi-sys/formmail.pl" method="post" name="hgmailer">
<input type="hidden" name="recipient" value="mailTo">
<input type="hidden" name="subject" value="Website Consult Request">
<table width="100%" border="0" cellspacing="10px" cellpadding="10px">
<tbody>
<tr>
<td>Nearest Location*</td>
<td><select id="mailTo" name"mailTo">
<option value="option1#testsite.com">Option1</option>
<option value="option2#testsite.com">Option2</option>
<option value="option3#testsite.com">Option3</option>
<option value="option4#testsite.com">Option 4</option>
</select></td>
</tr>
</tbody>
</table><p> </p>
<input type="button" value="Schedule a Consultation" onclick="hgsubmit();" class="button">
<input type="hidden" name="redirect" value="thankyou.html">
</form>
EDIT - My final code did not save previously
What you can do is add a javascript function to change the value of "recipient" to the selected email like...
function changeVal() {
var selectedVal = document.getElementById("mailTo").value;
document.getElementById("recipient").value = selectedVal;
var test = document.getElementById("recipient").value;
//alert(test);
}
<form action="http://www.testsite.com/cgi-sys/formmail.pl" method="post" name="hgmailer">
<input type="hidden" name="recipient" id="recipient" value="mailTo">
<input type="hidden" name="subject" value="Website Consult Request">
<table width="100%" border="0" cellspacing="10px" cellpadding="10px">
<tbody>
<tr>
<td>Nearest Location*</td>
<td><select id="mailTo" name"mailTo" onchange="changeVal()">
<option value="option1#testsite.com">Option1</option>
<option value="option2#testsite.com">Option2</option>
<option value="option3#testsite.com">Option3</option>
<option value="option4#testsite.com">Option 4</option>
</select></td>
</tr>
</tbody>
</table><p> </p>
<input type="button" value="Schedule a Consultation" onclick="hgsubmit();" class="button">
<input type="hidden" name="redirect" value="thankyou.html">
</form>
...I added an alert that you can comment out if you would like to test. Also I did this in javascript and not Jquery as you only asked for that.
below is the code to check a default value for the radiobutton tag by giving checked="checked", but i am not able to display the related form by default, it can be displayed only when i click on it, how to display anyone of these forms by default ?
HTML:
<form>
<label><input value="1" type="radio" name="formselector" checked="checked" onclick="displayForm(this)">Old Definitions</label>
<label><input value="2" type="radio" name="formselector" onclick="displayForm(this)">New Definition</label>
</form>
<panel method="post" style="visibility:hidden" id="form1" name="form1">
<table style="width:100%;">
<tr>
<th ><span class="dropt">ID Reserve Tracks</th>
<td>
<input id="idtracks" autocomplete="off" name="idtracks" type="text" maxlength="50" >
</td>
</tr>
</table>
</panel>
<panel style="visibility:hidden" id="form2">
<table style="width:100%;">
<th ><span class="dropt">MD Reserve Tracks</th>
<td>
<input id="mdtracks" autocomplete="off" name="mdtracks" type="text" maxlength="50" >
</td>
</table>
</panel>
JavaScript:
function displayForm(c){
if(c.value == "1"){
document.getElementById("form1").style.visibility='visible';
document.getElementById("form2").style.visibility='collapse';
}
else if(c.value =="2"){
document.getElementById("form1").style.visibility='collapse';
document.getElementById("form2").style.visibility='visible';
}
else{
}
}
jsfiddle: http://jsfiddle.net/uLkHk/
Your Html is not well formed, you should improve that.
To make it work as you want, just do not set the option checked in HTML. Then select it in JavaScript, calling the Click method.
See this, I modified a little your HTML, and it works.
<html>
<body>
<form>
<label>
<input value="1" type="radio" id="radioOld" name="formselector" onclick="displayForm(this)" />Old
Definitions</label>
<label>
<input value="2" type="radio" id="radioNew" name="formselector" onclick="displayForm(this)" />New
Definition</label>
</form>
<form method="post" style="visibility: hidden" id="form1" name="form1">
<table style="width: 100%;">
<tr>
<td>
<span class="dropt">ID Reserve Tracks</span>
</td>
<td>
<input id="idtracks" autocomplete="off" name="idtracks" type="text" maxlength="50" />
</td>
</tr>
</table>
</form>
<form style="visibility: hidden" id="form2">
<table style="width: 100%;">
<tr>
<td>
<span class="dropt">MD Reserve Tracks</span>
</td>
<td>
<input id="mdtracks" autocomplete="off" name="mdtracks" type="text" maxlength="50" />
</td>
</tr>
</table>
</form>
<script>
function displayForm(c) {
if (c.value == "1") {
document.getElementById("form1").style.visibility = 'visible';
document.getElementById("form2").style.visibility = 'collapse';
}
else if (c.value == "2") {
document.getElementById("form1").style.visibility = 'collapse';
document.getElementById("form2").style.visibility = 'visible';
}
else {
}
}
</script>
<script>
document.getElementById('radioOld').click();
//document.getElementById('radioOld').checked = true;
//var theDefaultOption = document.getElementById('formselector');
//displayForm(theDefaultOption);
</script>
</body>
</html>
Or you can simply set the default panel's visibility to visible in the HTML as Barmar said.
I am trying to create a checklist that allows users to add their own items.
This is part of my HTML:
<tr>
<td>
<input name="checkbox65" id="checkbox65" type="checkbox" />
</td>
<td>
<label for="checkbox65">Get directions for where you are going</label>
</td>
</tr>
<h3>
My items
</h3>
<fieldset data-role="controlgroup">
<label for="textinput4">Add new item</label>
</td>
<input name="new_item" id="textinput4" placeholder="" value="" type="text"
/>
</fieldset>
<input type="submit" id="add" value="Add" />
And this is my script:
<script>
$('#add').on('click', function (e) {
var $this = $(this);
var $newRow = $this.closest('table').find('tr:first').clone();
$newRow.find(':input').val('');
$newRow.insertAfter($this.parent());
});
</script>
But I just do not get any response..
Is this what you need ?
HTML
<h3>My items</h3>
<table id="myTable">
<tr>
<td>
<label for="checkbox65">
<input name="checkbox65" class="checkbox65" type="checkbox" />
Get directions for where you are going
</label>
</td>
</tr>
<tr><td>
<fieldset data-role="controlgroup">
<label for="textinput4">
Add new item
<input name="new_item" id="textinput4" placeholder="" value="" type="text" />
</label>
</fieldset>
<button id="add">Add</button>
</td></tr>
</table>
Notice I've changed id="checkbox65" to class="checkbox65" because you can't use same id twice. Also changed input type=submit to <button> for adding new elements.
JS
$('#add').on('click', function (e) {
var $this = $(this);
var $firstRow=$this.closest('table').find('tr:first');
var $newRow = $firstRow.clone();
$newRow.find(':input').prop('checked', false);
$newRow.insertAfter($firstRow);
});
DEMO.
Update: Or maybe this one or this one.