I have a query regarding form generation based on current inputs,
like in applications the text input appear based on our choice.
I am trying to make it work using JavaScript , but my code doesn't do anything:
<html>
<head>
<script>
function addInput() {
if (fields != 10) {
document.getElementById('d_div').innerHTML += "<input type='text' value='' /><br />";
fields += 1;
} else {
document.getElementById('d_div').innerHTML += "<br />Only 10 upload fields allowed.";
document.form.add.disabled=true;
}}
</script>
</head>
<body>
<div align = "center">
<form method = "post" action = "<?php echo $_SERVER['PHP_SELF']; ?>">
Select a Template<br />
<select name = "template" id = "rawquery">
<option>Select</option>
<option value = "Alpha query">Alpha</option>
<option value = "Betaquery">Beta</option>
<option value = "Gamma query">Gamma</option>
<option value = "Epsilon query">Epsilon</option>
</select>
<br/>
<input type = "submit" name = "submit"><br /><br />
</form>
</div>
<textarea name = "raw" rows = "10" cols = "50" id = "Raw">raw template</textarea>
<br /><br />
<form id="d_form">
<input type="submit" onclick="addInput()" name="newform" value="Click to enter values">
</form>
<div id="d_div"> </div>
</div>
<br> <br> <br> <br>
</body>
</html>
The code making drop-down menu is not used here.
When I click on the button to enter values it doesn't give me a new text area; can you please help, I am very new to this and learning?
where is 'fields'-initialization?
don't forget returning false, if really don't need to submit form #d_form clicking button #newform
You have a lot of problems with your tags. First make those right. I am giving an example
of creating dynamic tags. I think you can use it.copy and see how it works
<script type="text/javascript">
fields=0;
function addInput() {
textvalue=document.getElementById("raw").value;
var opt = document.createElement("option");
if (fields != 10) {
opt.text=textvalue;
document.getElementById('rawquery').options.add(opt);
fields += 1;
} else {
document.getElementById('d_div').innerHTML += "<br />Only 10 upload fields allowed.";
document.form.add.disabled = true;
}
}
</script>
Related
I can't get the php code to run! Would anybody know what the problem is? I'm not sure of the way I called the pHp code makes sense. Everything works but a file is not saved.
The code is supposed to display a list of subjects in a bullet
pointed list as I ask the user to keep putting in subjects until
submitted.
The code is then supposed to save this list in a csv file like this
(Math, Biology, English etc) but I dont think the php code is
running.
<html>
<h1> Fill in Subjects </h1>
<input type='text' id='input' />
<input type='button' value='add subject' id = "add" />
<input type='text' id='input2' />
<input type='button' value='remove subject' id='remove' />
<div id='list'>
</div>
<p> When Submit button is clicked, you can not come back to this page!</p>
<form method="POST" action=''>
<input type='button' value='Submit' id = "subjectsub" name = "complete" />
</form>
<script type="text/javascript">
var subjectli = [];
document.getElementById("subjectsub").onclick = function(){
JSON.stringify(subjectli);
}
document.getElementById("remove").onclick = function(){
document.getElementById("list").innerHTML = "";
var toRemove = document.getElementById("input2").value;
var index = subjectli.indexOf(toRemove);
if (index > -1) {
subjectli.splice(index, 1);
}
var sList = "";
for (var I = 0; I < subjectli.length; I++)
{
sList = "<li>" + subjectli[I] + "</li>";
document.getElementById("list").innerHTML += sList;
}
document.getElementById("input2").value = ""; // clear the value
}
document.getElementById("add").onclick = function() {
var text = document.getElementById("input").value;
subjectli.push(text);
var li = document.createElement("li");
li.textContent = text;
document.getElementById("list").appendChild(li);
document.getElementById("input").value = ""; // clear the value
}
</script>
<?php
if (isset($_POST['complete']))
{
$subjectA=json_decode($_POST['jsondata']);
$fp = fopen('file1.csv', 'w');
foreach ($subjectA as $fields) {
fputcsv($fp, $fields);
}
fclose($fp);
}
?>
</html>
The input elements need to be within the form if you want them to be posted with the form submit.
<div id='list'>
</div>
<p> When Submit button is clicked, you can not come back to this page!</p>
<form method="POST" action=''>
<input type='text' id='input' />
<input type='button' value='add subject' id = "add" />
<input type='text' id='input2' />
<input type='button' value='remove subject' id='remove' />
<input type='button' value='Submit' id = "subjectsub" name = "complete" />
</form>
Form elements should be inside the form tags as the other answerer mentioned. And be sure to put the form processing file inside the form action attribute like this:
<form method="POST" action='myFileName.php'>
I made a tool which make my work a little easier by inserting a value into a url in a new window on multiple sites. It was working quite well but now I am having the problem of the search value being cleared onsubmit.
Javascript:
<script language="JAVASCRIPT">
function run() {
var request = document.text.query.value;
var req = "";
var endofurl = "endofurl.html";
for(var i = 0; i < request.length; i++) {
var ch;
if((ch = request.substring(i, i + 1)) == " ") req += " ";
else req += ch;
}
if(document.search.website.checked) {
var website = open( "https://www.website.com/" + req, "website");
}
//--></script>
HTML:
<form name="search">
Please select the networks you want to use.
<p>
</center>
</p>
<div class="row">
<div class="column">
<br>
<input name="website" type="checkbox">Website to Search
<form name="text" onsubmit="run(); return false;">
<center>And enter your Query.</center>
<center>
<input name="query" placeholder="Steropodon" value="" size="50" type="TEXT">
<input value="Search" onclick="run()" type="BUTTON">
</center>
So far, return false had been working to keep the value of the input in the form="text" input name="query" but now it seems to clear it and reload the page. I'm not sure what changed.
You have errors in your code opening and closing the tags.
Try this code. It works:
<html>
<head></head>
<body>
Please select the networks you want to use
<div class="row">
<div class="column">
<br>
<input name="website" type="checkbox">Website to Search
<form name="text" onsubmit="run(); return false;">
<center>And enter your Query.</center>
<center>
<input name="query" placeholder="Steropodon" value="" size="50" type="TEXT">
<input value="Search" onclick="run()" type="BUTTON">
</center>
</form>
</div>
</div>
<script language="JAVASCRIPT">
function run() {
var request = document.text.query.value;
var req = "";
var endofurl = "endofurl.html";
for(var i = 0; i < request.length; i++) {
var ch;
if((ch = request.substring(i, i + 1)) == " ") req += " ";
else req += ch;
}
var checkbox = document.getElementsByName("website");
if(checkbox[0].checked) {
var website = open("https://www.website.com/" + req,
"website");
}
}
</script>
</body>
</html>
Hope it helps.
I fixed it. It was not the tags. I had only pasted a small amount of the total code to make it easier to read but I failed at making it easier to read. The problem was undefined inputs. I have been adding many if statements but didn't have a corrosponding checkbox. Oops.
Thanks for the help.
I am using a javascript function to populate html element generated automatically after submitting a form from a different div.
Here is the html:
<html >
<body>
<div class="wrapper">
<div id="one">
<form name="form">
<fieldset>
<legend>BILLING</legend>
<div> <label for="ex1">Procedure/Drug</label>
<input type="text" name="procdrug" id="procdrug"/><br><br>
<label>Amount</label>
<input type="text" name="amount" id="amount"/><br><br>
<input type="button" onclick="addInput()" name="add" value="Add input field" style="margin-left:150px" />
</div>
</fieldset>
</form>
</div>
<div id="two">
<fieldset>
<legend>TN QUEUE</legend>
<label><B>Procedure/Drug</b></label><label><b>Amount</b></label><br>
<div id="text">
</div>
<label><b>Total</b></label>
<input type="text" name="total" id="total"/>
</fieldset>
</div>
</body>
</html>
Here is the javascript function
<script language="javascript">
fields = 0;
function addInput() {
var amount=document.getElementById('amount').value;
var pd=document.getElementById('procdrug').value;
if (fields != 10)
{
document.getElementById('text').innerHTML += "<input id='pdgen' type='text'/>";
document.getElementById('text').innerHTML += "<input id='amtgen' type='text'/><br />";
document.getElementById('pdgen').value=pd;
document.getElementById('amtgen').value=amount;
fields += 1;
}
else
{
document.getElementById('text').innerHTML += "<br />Only A Maximum of 10 is allowed.";
document.form.add.disabled=true;
}
}
</script>
The generated elements values are posted from the form and increment on every submit. My problem is the only on submit first element is updated with the new value:
Sample results
Procedure/Drug Amount
Amoxyl 200
blank element blank element
blank element blank element
blank element blank element
Total
The problem is you are adding your elements with the .innerHtml += method which is avoiding the values entered before. You need to use appendChild method to add new elements. Here is your new code :
fields = 0;
function addInput() {
var amount=document.getElementById('amount').value;
var pd=document.getElementById('procdrug').value;
var br = document.createElement('br');
if (fields != 10)
{
var input1 = document.createElement('input');
input1.setAttribute('id','pdgen' + fields);
input1.value = pd;
var input2 = document.createElement('input');
input2.setAttribute('id','amtgen' + fields);
input2.value = amount;
document.getElementById('text').appendChild(input1);
document.getElementById('text').appendChild(input2);
document.getElementById('text').appendChild(br);
fields++;
}
else
{
document.getElementById('text').innerHTML += "<br />Only A Maximum of 10 is allowed.";
document.form.add.disabled=true;
}
}
FIDDLE
I have a page in Codeigniter in which i can set the product quantity (sq.m) that the client wants to buy. When the client sets the quantity i have to do some calculations (about the quantity number whis was set before) and i am doing that with Javascript setting some variables. Now i want to show these variables in the same (php) page and it's working, but i don't know what should i do to put these variables in the values of the hidden inputs so that i can send them to the controller. Here is the coding:
<input type="text" name="productQuantity">
<input type="button" class="button" onclick="return showHide();" value="Calculate Packs">
<script type="text/javascript" language="javascript">// <![CDATA[
function showHide() {
var ele = document.getElementById("showHideDiv");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
<?php $pack = explode(' ', $pro->productPackSize); ?>
ele.style.display = "block";
var val = document.getElementById('productQuantity').value;
document.getElementById('val').innerHTML = val;
var req = Math.round(val/<?php echo $pack[0]; ?>);
document.getElementById('req').innerHTML = req;
var total = req * <?php echo $pack[0]; ?>;
document.getElementById('total').innerHTML = total;
}
}
// ]]></script>
<div id="showHideDiv" style="display:none;">
<?php echo form_open('main/add_to_cart_validation/' . $pro->productId); ?>
To cover <strong id="val"></strong> sq.m, you will need <strong id="req"></strong> Packs
which is <strong id="total"></strong> sq.m in total</a> //the ids' here are working, i can show them in the page
<input type="hidden" id="" value="" name="productPacks"> //how can i get the 'reg' variable here?
<input type="hidden" id="" value="" name="productQuantity"> //the same here as above for 'total' variable
<input type="submit" class="button" value="Add to Cart">
</form>
</div>
Thanks for your answers
Add these lines in the else condition after your math:
document.getElementById("productPacks").value = val;
document.getElementById("productQuantity").value = total;
Starty by giving your inputs an id and then you can pass the values like this :
document.getElementById('myField').value = total;
It is very simple.You do it the same way.
var MyHiddenValue = document.getElementById('myHiddenField').value;
alert(MyHiddenValue);
WORKING FIDDLE
I have created a form with a dynamically created field and i am trying to find a way to validate all the fields with javascript. I just want to alert the user that a field is null. Here is my code:
<script>
var counter = 0;
function addInput(divName){
counter++;
var Ai8ousa = document.createElement('div');
Ai8ousa.innerHTML = "Field: "+(counter +1) + "<input type='text' name='field[]'>";
document.getElementById(divName).appendChild(Ai8ousa);
}
function validations(form){
var field;
var i=0;
do{
field=form['field[]'];
if (field.value=='')
{
alert('The field is null!!!');
return false;
}
i++;
}while(i<counter);
}
</script>
<form action="" method="post" onsubmit="return validations(this)" >
<div id="dynamicInput">
Field : <input type="text" name="field[]" /> <br />
</div>
<input type="button" value="New field" onClick="addInput('dynamicInput');">
<input type="submit" value="Submit" />
</form>
I was expecting that will work but i was obviously wrong:(
With this code if i haven't pressed the "New field" button and press submit i will get the alert as expected. But on all other cases i am not getting anything!
Thanks for your time anyway, and sorry if i have made grammar mistakes!
<script type="text/javascript">
var counter = 0;
function addInput(divName){
counter++;
var Ai8ousa = document.createElement('div');
Ai8ousa.innerHTML = "Field: "+(counter +1) + "<input type='text' name='field[]'>";
document.getElementById(divName).appendChild(Ai8ousa);
}
function validations(form){
var field;
var i=0;
do{
field=form[i];
if (field.value=='')
{
alert('The field is null!!!');
return false;
}
i++;
}while(i<counter);
}
</script>
<form action="" method="post" onsubmit="return validations(this)" >
<div id="dynamicInput">
Field : <input type="text" name="field[]" /> <br />
</div>
<input type="button" value="New field" onClick="addInput('dynamicInput');">
<input type="submit" value="Submit" />
</form>
I don't understand this line: field=form['field[]'];, so I changed it to field=form[i];
http://jsfiddle.net/sZ4sd/