I am new in javascript and PHP. I am creating a form where I need an option that user clicks on add fields then some fields add.
I am using this script:
<script type="text/javascript">
var counter = 1;
var limit = 3;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
Entry 1
and it's working but I need this code in the inner HTML
<label>Category <strong>*</strong></label> <font id=catname> <select name='catname'> <option value='0'>============</option> </select></font> <label>Item<strong>*</strong></label><font id=itemname> <select disabled='disabled' name='itemname'> <option value='0'></option> </select></font>
So how can I put these fields ?
Complete Code
<script type="text/javascript"> var counter = 1; var limit = 3; function addInput(divName){ if (counter == limit) { alert("You have reached the limit of adding " + counter + " inputs"); } else { var newdiv = document.createElement('div'); newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>"; document.getElementById(divName).appendChild(newdiv); counter++; } } </script> <div class="form-style-5" style="margin-left: 360px;"> <form name="form1" method="post" action="outgoingstocksave.php"> <fieldset> <legend><span class="number"> </span> Outgoing Stocks Entry</legend> <label>Ref. No.</label> <input type="text" readonly="readonly" name="refno" value="<?php echo $refno; ?>"> <div id="dynamicInput"> <label>Category <strong>*</strong></label> <font id=catname> <select name='catname'> <option value='0'>============</option> </select></font> <label>Item<strong>*</strong></label><font id=itemname> <select disabled='disabled' name='itemname'> <option value='0'></option> </select></font> <input type="number" name="quantity" maxlength="10" placeholder="ITEM QUANTITY *" required> </div> <input type="text" name="date" readonly="readonly" id="datepicker" placeholder="DATE *" required> </fieldset> <input type="submit" value="Save" /> </form> </div> <script language=Javascript> function Inint_AJAX() { try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {} //IE try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE try { return new XMLHttpRequest(); } catch(e) {} //Native Javascript alert("XMLHttpRequest not supported"); return null; }; function dochange(src, val) { var req = Inint_AJAX(); req.onreadystatechange = function () { if (req.readyState==4) { if (req.status==200) { document.getElementById(src).innerHTML=req.responseText; //retuen value } } }; req.open("GET", "itemsfill.php?data="+src+"&val="+val); //make connection req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header req.send(null); //send value } window.onLoad=dochange('catname', -1); // value in first dropdown </script>
I did a test on something similar a couple years back. See if you can hack this up for your needs.
Script...
<script type = "text/javascript">
var cnt = 0;
function addFile() {
var div = document.createElement('DIV');
div.innerHTML = '<input id="file' + cnt + '" name="file' + '' + '" type="file" />' +
'<input id="Button' + cnt + '" type="button" ' + 'value="X" onclick="deleteFile(this)" />';
document.getElementById("uploadControls").appendChild(div);
cnt++;
buttonText();
}
function deleteFile(div) {
document.getElementById("uploadControls").removeChild(div.parentNode);
cnt--;
buttonText();
}
function buttonText() {
if (cnt > 0) {
document.myform.add_button.value = 'Add Another Attachment';
} else {
document.myform.add_button.value = 'Add Attachment';
}
}
</script>
HTML...
<form name="myform" action="<your thing>" method="post" enctype="multipart/form-data" style="display:inline;">
<input id="add_button" type="button" value="Add Attachment" onclick="addFile()" />
<br /><br />
<div id="uploadControls"></div>
<br/>
<input type="submit" value="Submit" name="action">
</form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.