dynamically add <select> boxes with javascript - javascript

I have a form where a user selects a file, and then should be able to choose how many parameters the report they are uploading has
I want to have a drop down that has the numbers 0 -5 and when a user selects a number that many boxes with parameter types are shown, like a drops down with "date", "name", "part#" etc... in a select menu, is made for each number the user selects
I looked through the other solutions on S.O. and they make sense but I just can't seem to get them to work,
here is what I have so far just to test if one box will appear:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
</h:head>
<body>
<ui:composition template="./templates/template.xhtml">
<ui:define name="content">
<c:choose>
<c:when test="#{controls.designAuth}">
Welcome Report Designer!<br /><br />
<div id="fileUpload">
<form name="myForm" action="../UploadServlet" enctype="multipart/form-data" onsubmit="return validate_form(this);" method="POST">
<b>Make sure your filename is meaningful (eg. WasteByMachineReport.jrxml)</b><br /><br />
Please specify a file:<input type="file" name="file" size="40"/><br />
Number of parameters: <select name='numSelect' onchange="draw_param_dropdowns();">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select><br />
<select class="parametersHide" id="select1"><option></option></select>
<script type="text/javascript" language="Javascript">
function draw_param_dropdowns(){
var sel = document.getElementById("select1");
sel.style = "visibility:visible";
}
</script>
<input type="submit" value="Upload"/>
</form>
</div>
</c:when>
<c:otherwise>
Not Authorized
</c:otherwise>
</c:choose>
</ui:define>
</ui:composition>
</body>
</html>
"view Source" result:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="./../resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
<link href="./../resources/dtree/dtree.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./../resources/dtree/dtree.js"></script>
<title>Reports</title></head><body>
<div id="top" class="top">
<h1>Wingfoot Reports v0.3
<div style="float:right;margin-right: 20px;">
<form id="j_idt8" name="j_idt8" method="post" action="/WebApplication8/faces/designer.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt8" value="j_idt8" />
<span style=" font-size: 20px; font-weight: normal;">SCOTT </span><input type="submit" name="j_idt8:j_idt10" value="Logout" style=" font-size: 20px;" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-4683216470766096399:-9055922898460672452" autocomplete="off" />
</form>
</div>
</h1>
</div>
<div>
<div id="left">
<form id="j_idt14" name="j_idt14" method="post" action="/WebApplication8/faces/designer.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt14" value="j_idt14" />
<center>
<script type="text/javascript" src="/WebApplication8/faces/javax.faces.resource/jsf.js?ln=javax.faces&stage=Development"></script>
Design | Admin | Queries<br />
<hr />
</center><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-4683216470766096399:-9055922898460672452" autocomplete="off" />
</form>
</div>
<div id="content" class="left_content">
Welcome Report Designer!<br /><br />
<div id="fileUpload">
<form name="myForm" action="../UploadServlet" enctype="multipart/form-data" onsubmit="return validate_form(this);" method="POST">
<b>Make sure your filename is meaningful (eg. WasteByMachineReport.jrxml)</b><br /><br />
Please specify a file:<input type="file" name="file" size="40" /><br />
Number of parameters: <select name="numSelect" onchange="draw_param_dropdowns();">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select><br />
<select class="parametersHide" id="select1"><option></option></select>
<script type="text/javascript" language="Javascript">
function draw_param_dropdowns(){
var sel = document.getElementById("select1");
sel.style = "visibility:visible";
}
</script>
<input type="submit" value="Upload" />
</form>
</div>
</div>
</div>
</body>
</html>

You could try to do it in a sort of a loop with a modification to your style tag, since it looks like you want the user to input something, I'll use input tags.
So for instance you have:
<select name="numSelect" id = "numSelect" onchange="draw_param_dropdowns();">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<!-- Create all the boxes for input and hide them initially -->
<select name="select1" id="select1" style="display:none;"><option></option></select>
<select name="select2" id="select2" style="display:none;"><option></option></select>
...
And for your javascript:
<script type="text/javascript" >
//Loop through the drop down boxes and hide them all.
//This will ensure that you don't have 'leftover' boxes after selecting
function draw_param_dropdowns() {
for (var x = 1; x <= 4; x++) {
document.getElementById('select' + x).style.display='none';
}
for (var y = 1; y <= document.getElementById("numSelect").selectedIndex; y++) {
document.getElementById('select' + y).style.display = 'block';
}
}
</script>
It may be a bit longer than what some of the other coders at SO can do, but hopefully this leads to more understanding.

Related

Form: preview button in popup window, submit button without popup window

I have a form and 3 buttons on it: Preview, reset and submit. And I want a new window to pop up when I click on the preview. Unfortunately, it also pops up when I send it
<html lang="cs-cz">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<link rel="stylesheet" href="styly.css">
<form name="submit" method="POST" action="preview.php" id="formID" onsubmit="target_popup(this)" >
<form name="submit" method="POST" action="mailer.php" >
<div class="box">
<h1>ODVOZY</h1>
<p class="info"><input type="text" name="name" class="textfield1" placeholder="Jméno a příjmení"/></p>
<p class="info"><input type="text" name="adress" class="textfield1" placeholder="Adresa"/></p>
<p class="info"><input type="text" name="contact" class="textfield1" placeholder="Kontakt"/></p>
<p class="info"><input type="text" name="model" class="textfield1" placeholder="Typ zboží"/></p>
<p class="info"><input type="datetime-local" name="date" class="textfield1" placeholder="Date"/></p>
<select name="money" class="info1" name="money" method="post">
<option value="Vyber způsob platby">Vyber způsob platby</option>
<option value="Placeno">Placeno</option>
<option value="Platit doma">Platit doma</option>
<option value="Placeno jen odvoz">Placeno jen odvoz</option>
<option value="Jiné (viz poznámky)">Jiné (viz poznámky)</option>
</select>
<select name="city" class="info1" name="city" method="post" >
<option value="Vyber pobočku">Vyber pobočku</option>
<option value="Dvůr Králové n/L">Dvůr Králové n/L</option>
<option value="Hořice">Hořice</option>
</select>
<textarea name="message" class="info1" type="text" cols="20" rows="5"placeholder="Poznámka"></textarea>
<p> </p>
<input type="submit" name="preview" value="Tisk" class="boxa" />
<input type="reset" value="Reset" class="boxc" />
<input type="submit" name="mailer" value="Odeslat" class="boxb" formaction="mailer.php" formmethod="POST" />
<script src="script.js"></script>
</div>
</form> </form>
</body>
</html>
Here is the Javascript, can you please tell me where it is going wrong
var myForm = document.querySelector("#formID");
if(myForm === "#formID" ){
myForm.onsubmit = function() {
var w = window.open('about:blank','Popup_Window','toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=400,height=300,left = 312,top = 234');
this.target = 'Popup_Window';
}
;
Your code is really badly formatted and I see a lot of issues here
</form> </form>
for instance.
BTW you have
<input type="submit" name="preview" value="Tisk" class="boxa" />
<input type="reset" value="Reset" class="boxc" />
<input type="submit" name="mailer" value="Odeslat" class="boxb" formaction="mailer.php" formmethod="POST" />
Do you want to submit the form when you click the preview button?
Otherwise change the type ( input type="button" instead of submit).
Add a function on the click and change the js consequently.
<input type="button" name="preview" onclick="openPopup()">
/// JS
function openPopup(){
var w = window.open('about:blank','...
}

JQuery Can't Copy From 1 Input to another

Trying to copy one value from <input> field value to another using jQuery.
This works in JSFiddle But does not work when I try it on my local server.
what am I doing wrong?
https://jsfiddle.net/1emrxsLw/
JS:
$('#do').click(function() {
$('#three').val($('#one').val());
});
$('#four').keyup(function() {
$('#six').val($('#four').val());
});
$('#seven').blur(function() {
$('#nine').val($('#seven').val());
});
Complete HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<title>Untitled 1</title>
</head>
<body>
<h1>Button Click</h1>
<form id="form1">
<input id='one' type='text' />
<input id='two' type='text' />
</form>
<form id="form2">
<input id='three' type='text' />
</form>
<input type='button' id="do" value="Copy" />
<h1>Insta-Copy(TM)</h1>
<form id="form1">
<input id='four' type='text' />
<input id='five' type='text' />
</form>
<form id="form2">
<input id='six' type='text' />
</form>
<h1>On Blur</h1>
<form id="form1">
<input id='seven' type='text' />
<input id='eight' type='text' />
</form>
<form id="form2">
<input id='nine' type='text' />
</form>
</body>
<script type="text/javascript">
$('#do').click(function() {
$('#pDate1').val($('#fdatea').val());
});
$('#four').keyup(function() {
$('#six').val($('#four').val());
});
$('#seven').blur(function() {
$('#nine').val($('#seven').val());
});
</script>
</html>
First, id attributes in HTML page suppose to be unique to that page, you can't have multiple id values within the page, and you do have. for example:
<form id="form1">
<input id='four' type='text' />
<input id='five' type='text' />
</form>
and:
<form id="form1">
<input id='seven' type='text' />
<input id='eight' type='text' />
</form>
The forms have identical id values, and that's a bad practice.
Second, you posted to javascript files, which one are you actually using?
I tested for you the first js script:
$('#do').click(function() {
$('#three').val($('#one').val());
});
$('#four').keyup(function() {
$('#six').val($('#four').val());
});
$('#seven').blur(function() {
$('#nine').val($('#seven').val());
});
That works fine.
However, the second js file that you posted at the bottom of the HTML page won't do the job because it refers to id values which don't exist, like: #pDate1 and #fdatea

JavaScript cannot submit form, even though everything is as it should be?

I got some problems with my JavaScript!
<form action="addcategory.php" name="addContact">
<input id="category" name="category" type="hidden" value="" />
</form>
This is my form... nothing special here.
function addCategory(){
if(document.getElementById('category').value = prompt("Indtast ny kategori", "Ny kategori")){
document.forms['addContact'].submit();
}
}
This is the JavaScript.
The JavaScript is placed AFTER the form, so the DOM is loaded.
<div onclick="addCategory()" class="save">Ny kategori</div>
That's the div that triggers the function... The div is placed at the beginning og the page, but should not make any difference.
When I click the div, a prompt comes up, I enter a string and press OK, but then i get the follow error: "Cannot call method 'submit' of undefined"
Please help, this is so annoying!
EDIT:
<?php
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SimpleCRM | Kategorier </title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="search_bar">
<a href="../"><div id="logo">
SimpleCRM
</div></a>
<div class="wrapper">
<div class="floats" style="float: left">
<table>
<tr>
<td>
<?php
?></td>
</tr>
<tr>
<td id="menu">
<div onclick="addCategory()" class="save">Ny kategori</div>
<div onclick="editContact()" class="button">Omdøb kategori</div>
<div id="delete" onclick="deleteContact()" class="button">Slet kategori</div>
</table>
</div>
<div class="floats" style="float: right">
<table>
<tr>
<td align="right">
<?php
?>
</td>
</tr>
<tr>
<td align="right">
<div onclick="wnidow.location = 'categories.php'" id="changecategories">Administrer kategorier</div>
<div onclick="window.location = '../logout.php'" id="logout">Log ud</div>
</td>
</table>
</div>
</div>
</div>
<div align="center" class="wrapper">
<div id="categories">
<form>
<select size="20" name="category">
<?php
?>
</select>
</div>
<div style="width:500px;" class="wrapper">
<div onclick="window.location = '../CRM?CRM=' +Math.floor((Math.random()*1000)+1)" id="back">
Tilbage
</div>
</div>
</div>
<form action="addcategory.php" name="addCategory" id="addCategory">
<input id="category" name="category" type="hidden" value="" />
</form>
</body>
</html>
<script>
function deleteContact(){
if(confirm('ADVARSEL:\nDu er ved at slette denne kontakt!'))
{
document.forms['delete'].submit();
}
}
function editContact(){
window.location.href = document.URL + '&edit=true';
}
function addCategory(){
if(document.getElementById('category').value = prompt("Indtast ny kategori", "Ny kategori")){
console.log(document.forms);
document.forms.addCategory.submit();
}
}
</script>
This is my entire document (the PHP code has been removed), so i hope you can now see everything more clearly...
The problems is that you have a form tag inside another form element:
<form>
<select size="20" name="category">
...
<form action="addcategory.php" name="addCategory" id="addCategory">
...
</form>
This is invalid and the inner form tag is ignored, and hence an element with name or ID addCategory does not exist. Remove the first form tag, it doesn't seem to serve any purpose.
That's one if the reasons why proper indentation is important.

Disabling input fields in a form causing Javascript error in IE 7 (works fine in Firefox)

I have a form in which I am disabling all the input fields that is not hidden on jQuery(document).ready(function())
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core" lang="en" xml:lang="en" style="padding-bottom: 8px;">
<script>
jQuery(document).ready(function()
{
jQuery('div#formBuilderPreviewEnrollmentData input[type!="hidden"]').prop('disabled', true);
});
</script>
<h:form id="previewMarketingProgramForm">
<div class="modal-content">
<br /> <br /> <br />
<div>
<h4>Enrollment Form</h4>
</div>
<table cellpadding="0" cellspacing="0" border="1" width="100%" class="results-table">
<tr>
<td>
<div id="formBuilderPreviewEnrollmentData">
<h:outputText value="#{previewMarketingProgramBean.enrollmentFormBean.enrollmentFormContent}" escape="false" />
</div>
</td>
</tr>
</table>
<br /> <br /> <br />
</div>
</h:form>
</div>
Here is the Javascript error:
Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus.
Please tell me what could be causing this error. I am using jQuery-1.7.2-min.js
Here is the HTML generated source for this form for your reference:
<!DOCTYPE html>
<html class="ltr" dir="ltr" lang="en-US"> <head> <title>View Article - Liferay</title>
<script src="http://xx:8001/vcc-theme/js/jquery-1.7.2.min.js"></script>
<script src="http://xx:8001/vcc-theme/js/javascript.js"></script>
<script src="http://xx:8001/vcc-theme/js/jquery.tablesorter.min.js"></script>
<script src="http://xx:8001/vcc-theme/js/jquery.tablesorter.pager.js"></script>
<script src="http://xx:8001/vcc-theme/js/jquery.autocomplete.js"></script>
<script src="http://xx:8001/vcc-theme/js/jquery.simplemodal.1.4.2.min.js"></script>
<script src="http://xx:8001/vcc-theme/js/jquery.scrollTo.js"></script>
<script src="http://xx:8001/vcc-theme/js/ui.datepicker.js"></script>
<script>
/*<![CDATA[*/jQuery(document).ready(function()
{
jQuery('div#formBuilderPreviewEnrollmentData input[type!="hidden"]').prop("disabled",true)});
/*]]>*/
</script>
<form id="_jpfcpncuivr_A0169_j_id1:previewMarketingProgramForm" name="_jpfcpncuivr_A0169_j_id1:previewMarketingProgramForm" method="post"
action="http://xxx/yyy.do">
<div class="modal-content">
<br /> <br /> <br />
<div> <h4>Enrollment Form</h4> </div>
<table cellpadding="0" cellspacing="0" border="1" width="100%" class="results-table">
<tr>
<td>
<div id="formBuilderPreviewEnrollmentData">
<p> NAME: <input class="required" name="NAME" type="text" /></p> <p>  </p>
<p> AGE: <input name="AGE" type="text" /></p> <p>  </p>
<p> ADDRESS:<textarea name="ADDRESS"></textarea></p>
</div>
</td>
</tr>
</table>
<br /> <br /> <br />
</div>
</form>
</html>
I am getting this JS error in IE 7 (works fine in Firefox)
try this
<script>
jQuery(document).ready(function()
{
jQuery('div#formBuilderPreviewEnrollmentData input[type!="hidden"]').attr("disabled", true)
});
</script>
Just to make sure, you want to disable the inputs that are not of type="hidden" or you want to disable the inputs thats are not visible on screen (css style display:none). There's a big difference between the two and the jquery selector would be different to.

jqtransform dynamic select option?

i am using jqtransform plugin to create select input, i make some change in js file i am creating a select option instead of li and i create a differente script to get select option innerhtml but when i calling this function on window.onload function is working for not working second time.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="gmapkey" content="" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title></title>
<link rel="stylesheet" href="jqtransformplugin/jqtransform.css" type="text/css" media="all" />
<link rel="stylesheet" href="demo.css" type="text/css" media="all" />
<script type="text/javascript" src="requiered/jquery.js" ></script>
<script type="text/javascript" src="jqtransformplugin/jquery.jqtransform.js" ></script>
<script language="javascript">
$(function(){
$('form').jqTransform({imgPath:'jqtransformplugin/img/'});
});
</script>
<script type="text/javascript">
function change () {
var jAm= document.getElementById('sltnew');
var jM= jAm.options[jAm.selectedIndex].text;
document.getElementById('catch').innerHTML=jM;
}
document.ajay.sltnew.onchange=change;
</script>
</head>
<body>
<form action="post.php" method="POST" name="ajay">
<div class="rowElem"><label>Input Text:</label><input type="text" name="inputtext"/></div>
<div class="rowElem"><label>Input Password:</label><input type="password" /></div>
<div class="rowElem"><label>Checkbox: </label><input type="checkbox" name="chbox" id=""></div>
<div class="rowElem"><label>Radio :</label>
<input type="radio" id="" name="question" value="oui" checked ><label>oui</label>
<input type="radio" id="" name="question" value="non" ><label>non</label></div>
<div class="rowElem"><label>Textarea :</label> <textarea cols="40" rows="12" name="mytext"></textarea></div>
<div class="rowElem">
<label>Select :</label>
<select name="select">
<option value="">1</option>
<option value="opt1"></option>
</select>
</div>
<div class="rowElem" style="float:left; width:500px; position:relative">
<label>Select Redimentionné :</label>
<select name="sltnew" id="sltnew" onchange="change ()">
<option value="opt1">Select states</option>
<option value="opt2">Option 2</option>
<option value="opt3">Option 3</option>
<option value="opt4">Option 4</option>
<option value="opt5">Option 5</option>
<option value="opt6">Option 6</option>
<option value="opt7">Option 7</option>
<option value="opt8">Option 8</option>
</select>
<div id="catch">select city</div>
</div>
<div class="rowElem"><label>Submit button:</label><input type="submit" value="Envoyer" /></div>
<div class="rowElem"><label>Reset button:</label><input type="reset" value="Annuler" /></div>
<div class="rowElem"><label>Input button:</label><input type="button" value="bouton" /></div>
</form>
</body>
</html>
change in jqtransform file what i made.
$wrapper.prepend('<div><span></span></div><select id="slt"></select>');
var $ul = $('select', $wrapper).css('width',$select.width()).hide();
/* Now we add the options */
$('option', this).each(function(i){
var oLi = $('<option>'+ $(this).html() +'</option>');
$ul.append(oLi);
});
just try this
http://www.pkoretic.net/csTransPie

Categories