I have a directive that essentially populates multiple individual input file fields, with other HTML form elements. The mechanism itself is done through auto-population an array with the number of elements, which is pushed/popped as more file fields are added. This itself, drives an array with a numerical list, that is ideally supposed to alter the name/id of each element (this also doesn't work, the presence of the { in the attributes causes a script-breaking syntax error).
<div ng-controller="MultiFileUpload">
<form ng-submit="file_upload_multiple()" novalidate>
<div class="upload_fields">
<fieldset ng-repeat="Item in FileUploadItems">
<input type="file" name="upload_file" id="upload_file_{{Item}}" ngf-select ng-model="filename_{{Item}}" ngf-max-size="2MB" required />
<input type="text" name="filename" id="filename_{{Item}}" required/>
<select name="filetype" id='filetype_{{Item}}' required>
<option label="" value=""></option>
<option label="Example Document 1" value="example_doc_1">Example 1</option>
<option label="Example Document 2" value="example_doc_2">Example 2</option>
</select>
</fieldset>
</div>
<button>Save Files</button>
</div>
When the submit is fired, I am not clear on the best mechanism to have the client-side script iterate through all the available fields as a distinct group. having the template variable call in the name/id is a major throwoff, and If I can accomplish a solution that scales upward without this eyesore, that would be great. I already have an idea on how I'll eventually stash all the field data (through iterative POST REST calls -- i'm working with a very out of date API), but getting to that step requires determining the best approach to process multiple field entries. Any suggestions?
I should clarify, I am using ng-form-upload to assist in the task of interfacing with the data in the file input fields.
You can use an array to store your model something like this:
<div ng-controller="MultiFileUpload" ng-init="files = [{}]">
<form ng-submit="file_upload_multiple()" novalidate>
<div class="upload_fields" ng-repeat="fileData in files">
<fieldset ng-repeat="Item in FileUploadItems">
<input type="file" name="upload_file" ngf-select ng-model="fileData.file" ngf-max-size="2MB" required />
<input type="text" name="filename" ng-model="fileData.name" required/>
<select name="filetype" ng-model="fileData.type" required>
<option label="" value=""></option>
<option label="Example Document 1" value="example_doc_1">Example 1</option>
<option label="Example Document 2" value="example_doc_2">Example 2</option>
</select>
</fieldset>
</div>
<button>Save Files</button>
</div>
Then to add another set of fields you can push an empty object into files and the files array will contains all the data that is needed to be submitted.
Related
I have 2 forms. I ask for an API-KEY int he first form to load values account in some inputs of the second form and submit it.
The first form:
<form id="formAPI" name="formAPI">
<label for="" >API-KEY</label>
<input type="text" class="form-control" id="inputApi" placeholder="XXX-XXX>
<input id="continue" type="submit" value='Continue' onclick="submit_api()"/>
</form>
The second is like this:
<form id="form2" >
<label for="inputName3" >Name</label>
<input type="text" id="inputName3">
<label for="selectDevices" >Device</label>
*here devices have to be loaded automatically due to the API KEY*
<select class="form-control" name ="device_s" id="id_devices">
<option value="1"> Device 1 </option>
<option value="2">Device 2</option>
<option value="3">Device 3</option>
</select
<input id="rule1" type="text" placeholder="Give a rule" />
<input id="btn2" type="submit" value='Submit' />
</form>
I have no choice if the page is reloaded outright or not. the essential is to preload some data from the second form via the API KEY of the first form.
You can use LocalDB js in your form1.
Create a js to write your api values and when submit the form2... receive this infos and fill where you need it.
Localdb support refresh and don't loose data.
Example:
https://www.codeproject.com/Tips/1021483/Localdb-js
This question already has answers here:
How can I retain HTML form field values in JSP after submitting form to Servlet?
(2 answers)
Closed 7 years ago.
I have a website with select forms and am trying to make it work so that when a form is submitted, the select form retains what the user chose. I need to use JSP with servlet or Javascript.
<form method="post" id="mainForm" name="mainForm">
<div>
<label style="margin-left: 10px;" for="specialty">Specialty:</label>
<select name="specialty">
<option value="ob/gyn">OB/GYN</option>
<option value="surgeon">Surgeon</option>
<option value="heart surgeon">Heart Surgeon</option>
<option value="pediatrician">Pediatrician</option>
<option value="general physician">General Physician</option>
</select>
</div>
<div>
<label style="margin-left: 10px;" for="zipCode">ZIP Code:</label>
<input type="text" name="zipCode" value=<%=patient.getZip().substring(0, 5) %>>
</div>
<div>
<label style="margin-left: 10px;" for="range">Range From ZIP Code: </label>
<select name="range">
<option value="5">Exact (Match all 5 digits)</option>
<option value="4">Match first 4 digits</option>
<option value="3">Match first 3 digits</option>
<option value="2">Match first 2 digits</option>
<option value="1">Far (Match only first digit)</option>
</select>
</div>
<input type="submit" name="findExpert" value="Find Expert" />
What would I have to add to make this work?
You probably want to be using something like Struts here. But the the slightly ugly, quick way to do it is this (assuming this JSP submits to itself, which it looks like it does): first, add this before the opening form tag:
<%
String specialty=request.getParameter("specialty");
String range=request.getParameter("range");
specialty=(specialty==null?"":specialty); // will be null if form not submitted yet
range=(range==null?"":range); // will also be null if not submitted yet
%>
Then, to take your first menu as an example, do this for every option tag:
<option value="ob/gyn" <%=specialty.equals("ob/gyn")?"selected=\"selected\"":""%>>OB/GYN</option>
That will work. There are JavaScript solutions which would work too, but they wouldn't be any easier to implement. Note again, though: unless this JSP is a one-off quicky just to get the job done, you'll end up with lots of messy code unless you use a framework (again, Struts is one possibility) that handles a lot of this stuff for you.
I have a bootstrap v3 inline form:
<div id="searchsection" hidden>
<form id="searchform" class="form-inline" role="form">
<label>Find:</label>
<select id="field" class="form-control">
<optgroup label="Strings">
<option value="authors" selected="selected">Authors</option>
<option value="title">Title</option>
<option value="pub">Publication Name</option>
<option value="keywords">Keywords</option>
<option value="physloc">Physical Location</option>
<option value="comment">Comment</option>
</optgroup>
<optgroup label="Dates">
<option value="datepub">Publication Date</option>
<option value="dateread">Date Read</option>
</optgroup>
</select>
<input type="text" id="narrowon1" class="form-control"/>
<label for="narrowon2" class="form-control"></label>
<input type="text" id="narrowon2" class="form-control" placeholder="YYYYMM" hidden/>
<input type="button" id="narrower" name="narrower" value="Narrow" class="form-control btn btn-primary"/>
<input type="button" id="widener" name="widener" value="Widen" class="form-control btn btn-primary"/>
</form>
</div> <!-- end of searchsection -->
I would like to reduce the width of the boxes narrowon1 and narrowon2 when the optgroup is Dates so that they would only hold six digits each; I am thinking of setting size="6". However, when I simply add those attributes in jQuery via a statement such as
$('#narrowon1').attr('size',"6");
they don't affect the rendered output. I expect the Bootstrap classes are overriding my additions.
What is a "Bootstrap-friendly" way to alter the sizes of these input boxes?
The maxlength attribute will not be affected by any CSS applied to the <input>. How are you applying it in javascript as you can't limit the character length with CSS?
I think you might be mistaking the maxlength attribute with the actual width of the <input>. Here is a some info on the attribute: Maxlength Attribute
View the log and make sure your <input> looks like this:
<input maxlength="6" name="someInput" />
Edit:
Place a class of your own on the input and place new styles on the <input>. Make sure your local CSS file loads after the bootstrap CSS. Than you can easily override it.
If you can't create a new CSS file, try $('input').css('width', '200px'); with jQuery
You'll need to wrap each input field inside a div with the class of col-sm-2
you can change the number with which ever you like.
You can customise Bootstrap styles by overriding them with your own CSS.
See the Customizing section on the Bootstrap website for information on how it's done:
http://getbootstrap.com/getting-started/#customizing
I have a webpage that uses a JavaScript function to populate a second dropdown box when an item from a first dropdown box is picked. The function creates the second drop down changing this:
<td>
<form action="http://website/addToDepartment.php" method="post">
<div id="nondepartment">
</div>
</td>
to this:
<td>
<form action="http://website/addToDepartment.php" method="post">
<div id="nondepartment">
<select name="personName">
<option value="Bob" name="personName">Bob</option>
<option value="Jim" name="personName">Jim</option>
<option value="Tom" name="personName">Tom</option>
</select>
</div>
</td>
My problem is that when the form button is pressed it does not POST the personName value chosen from the created list. If I write exactly the same code manually, so the function is not called, then it works. If I use the function to create the list it doesn't (no string at all gets POSTED). Why might this be?
You may have a conflict with the name property. Remove the name property from all of the options;you only need it on the select element. Also, make sure (recommend using Firebug) that the markup you are giving above is literally what does get produced; I've had before where injecting elements aren't in the <form> tag as expected, depending on how it's used sometimes.
You are not closing your form tag. Probably there lies your issue.
The HTML generated content should work to POST your values. Probably because the FORM is not closed, the browser will close it for you on a spot you do not expect.
Also you only need a name attribute on your SELECT.
Try this.
<td>
<form action="http://website/addToDepartment.php" method="post">
<div id="nondepartment">
</div>
</form>
</td>
<td>
<form action="http://website/addToDepartment.php" method="post">
<div id="nondepartment">
<select name="personName">
<option value="Bob" >Bob</option>
<option value="Jim" >Jim</option>
<option value="Tom" >Tom</option>
</select>
</div>
</form>
</td>
I have a
function calcRoute() {
var start = document.getElementById('start').value;
}
And then a
<select id="start" onchange="calcRoute();">
<option value="somevalue">Dropdown 1</option>
<option value="somevalue">Dropdown 2</option>
<option value="somevalue">Dropdown 3</option>
</select>
Everything works properly. Now, instead of a dropdown list I need an input box. The problem is that I tried with
<form onsubmit="calcRoute();" method="get" id="start" action="#">
<input type="text" id="start" name="start">
<input type="submit" value="Go">
</form>
But it doesn't work (it's submitting the form to the server).. you can see a demo here. Remember that I don't need the dropdown list (it's there only to prove everything works), so it can go (there's no problem of double-called function). Thanks in advance :-)
You should change from:
<input type="text" id="startText" name="start">
To:
<input type="text" id="start" name="start">
As Javascript is searching for ID, not for name. (and in your code the ID is different from what Javascript is searching)
If you want use the input and the dropdown list in the same page, you just change your variable definition to something as:
var start = document.getElementById('startText').value || document.getElementById('start').value;
As if the input is empty, Javascript uses the value from the dropdown list.
Update
In adition to the change of the ID, change your form to something as:
<form>
<input type="text" id="start" name="start">
<input type="button" onclick="calcRoute();" value="Go">
</form>
To not allow form submission.