I have an HTML form that needs to collect information entered into a text box as well as options that are chosen from a set of dropdown menus. To give a little context, I am creating virtual machines that can be configured by the user on a web page. They must enter a name (arbitrary) and a hostmachine in two separate boxes in addition to selecting options from three different dropdown menus. Because I am working with clusters, there could be as many as 99 "rows" of dropdown menus representing different system configurations that will be a part of the cluster.
Is it possible (if so, advisable?) to have both the text fields and the dropdowns contained in one form? If not, how do I make sure that the submit button sends all the data to my Django server for processing as I need all of this information to ultimately come to the same place.
I currently have them in different forms, but just ignore this for now as it doesn't do anything at the moment. Also don't worry about the lack of dropdowns present in this code as the addSelect() JS function is fully functional. Just know that each added node is given a unique name (node1, node2, etc.) and goes into the div "nodes".
<body><b>Virtual Cluster Initialization</b><br></br>
<div id="container">
<div id="general">
<form method="POST" id="naming">Cluster name:<br>
<input type="text" name="cluster_name">
<br>
Host Machine:<br>
<input type="text" name="host_machine">
</form>
</div>
<form method="POST" id="node_config"></form>
<div id="nodes" form="node_config"></div>
<div id=node1">
<select name="node_type" id="node_type">Node Type</option>
(two options go here)
<select name="issp_version" id="issp_version>ISSP Version</option>
(7 or so options go here)
<select name="os" id="os">Operating System </option>
(about 20 options)
<button id="add" onclick="addSelect('nodes');">+</button>
</div>
<br></br><input type="submit"></input>
</body>
EDIT1: Added the an example dropdown for clarity. Would it be better to NOT make a new div for each node? I did this initially because it seemed like a good way to keep each node's configuration separate. Like I said, there could be up to 99 nodes, each with three dropdown menus.
Not really sure if I understand what you're asking. Showing us the code after your drop downs are added would help. Syntax wise, this wont work. Inputs should be inside forms and div doesn't have a form property.
Put everything into one form if you want it to all be in one post. If your dynamically adding new form elements you can use an array as element names.
How about something like this?
<script>
var nodeID = 0;
function addSelect() {
var html = "<div id='node_" + nodeID + "'>";
html += "<select name='node_type[" + nodeID + "]' id='node_type'><option>example</option></select>";
html += "<select name='issp_version[" + nodeID + "]' id='issp_version'><option>ISSP Version</option></select>";
html += "<select name='os[" + nodeID + "]' id='os'><option>Operating System </option></select>";
html += "</div>";
document.getElementById('nodes').innerHTML += html;
nodeID++;
}
</script>
<div style="margin-bottom:20px;"><b>Virtual Cluster Initialization</b>
</div>
<form>
<div id="container">
<div id="general">
<div>Cluster name:</div>
<div>
<input name="cluster_name" type="text">
</div>
<div>Host Machine:</div>
<div>
<input name="host_machine" type="text">
</div>
</div>
<div id="nodes">
<div>Nodes</div>
<div id="node_0">
<select name="node_type[0]" id="node_type"><option>example</option></select>
<select name="issp_version[0]" id="issp_version"><option>ISSP Version</option></select>
<select name="os[0]" id="os"><option>Operating System </option></select>
</div>
<div id="node_1">
<select name="node_type[1]" id="node_type"><option>example</option></select>
<select name="issp_version[1]" id="issp_version"><option>ISSP Version</option></select>
<select name="os[1]" id="os"><option>Operating System </option></select>
</div>
</div>
<div>
<button type="button" id="add" onclick="addSelect();">+</button>
</div>
</div>
<div>
<input type="submit">
</div>
</form>
Here is a JSfiddle to help you visualize what this does:
https://jsfiddle.net/fdss08w9/2/
Example of how you might use this in Django:
if request.method == 'POST':
# create a form instance and populate it with data from the request:
form = NameForm(request.POST)
# check whether it's valid:
if form.is_valid():
# Get the number of nodes we added
for id, node_type in enumerate(form.cleaned_data['node_type']):
issp_version = form.cleaned_data['issp_version'][id]
os = form.cleaned_data['os'][id]
#do stuff with node_type, issp_version, os
Related
I'm trying to load an array (with simple text) and trying to load it up on the template whenever it is called. How do I get the ID from that specific item to get the array that I stored in it?
HTML Template:
<template name="commentMarker">
<div id="viewMarker">
<h3 id="markerTitle">{{markerName}}</h3>
<h6 id="markerCategory">{{markerCategory}}</h6>
<br>
<fieldset>
<legend>Description</legend>
<p>{{markerDescription}}</p>
</fieldset>
<form id="commentForm">
<fieldset>
<legend>Comments</legend>
<input type="text" id="markerId" name="idForComment" value={{markerId}}>
<textarea rows="3" cols="19" name="comment" id="commentArea" placeholder="Insert your comment here..."></textarea>
{{#each comments}}
<p id="oneComment">{{this}}</p>
{{/each}}
</fieldset>
<input type="submit" value="Comment" class="commentButton">
<input type="submit" value="Close" class="exitButton">
</form>
</div>
</template>
JS:
Template.commentMarker.helpers({
comments(){
alert(template.find("#markerId").value);
if(commentArray.length===0) return;
else return commentArray;
}});
This is where I insert the comment into the collection's item and it's working fine
Template.commentMarker.events({
'click .commentButton': function(e, template){
e.preventDefault();
var id = template.find("#markerId").value;
var comment = template.find("#commentArea").value;
Points.update(id, { $push: { comments: comment }});
commentArray = Points.findOne(id).comments;
template.find("#commentArea").value = ' ';
}
I tried with commentArray as a global variable which still is. But I'm at loss how I can get the Id from that specific item, I even put it's Id (with hidden display) in the form to actually be able to insert the comment. But it doesn't help me with showing the comments because I cannot seem to get to this field in the Template.helpers ...
Not entirely sure what you are trying to do. It's almost like as if you are displaying the comments right after you updated in to the collection. It looks like you are doing this entirely on local and not a online collection.
However, storing it as a session would work...or reactive var. Might not be the best solution tho. Basically replace commentArray = Points.findOne(id).comments; with:
Session.set('comments', Points.findOne(id).comments)
Then to get it out in helpers:
let commentArray = Session.get('comments')
It's not safe to use it all the time tho for sensitive data. Also try catch the findOne(id).comments because it does produce errors if it happen to not find it.
NOTE: If you are going to use Meteor.Methods, you cannot use Session. You have to return the id and find it in your helpers.
I have implemented 2 ng-app in single html page and it is not working for second one, Please look into my code and suggest me where I am wrong.
<div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
<p>Name : <input type="text" data-ng-model="name"></p>
<h1>Hello {{name}}</h1>
<p> Name: <input type="text" id="first_name" ng-model="first_name"></p>
<h1 ng-bind="first_name"></h1>
<div ng-init="firstName='jaskaran'" id="firstName"></div>
<p> This is the first name:<span ng-bind="firstName"></span></p>
<p id ="x">
my first calculation {{5+5}}
</p>
</div>
<div id="App2" ng-app="namesList" ng-controller="NamesController" >
<input type="text" id="firstLast" ng-model="firstLast">
Full Name: {{firstLast}}
</div>
script here
var xApp = angular.module('shoppingCart',[])
xApp.controller ('ShoppingCartController', function($scope) {
}) ;
var app = angular.module('namesList',[])
app.controller('NamesController',function($scope){
$scope.firstLast = "Nitin" ;
});
Visit This URL You Can find the Solution
http://shrestha-manoj.blogspot.in/2014/06/can-angularjs-have-multiple-ng-app.html
only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead.
Try this :
angular.bootstrap(document.getElementById("App2"), ['namesList']);
It will bootstrap your second ng-app directive.
I am trying fill out a form on a website using Excel VBA. I have created an InternetExplorer.Application, navigated to the page and looked up a bunch of data, using If UserForm1.TC2.Value = True Then or something like PostCode = objIE.document.getElementsByName("ProjectFile-ProposalAddress-PostCode")(0).Value and the like.
Afterwards, I navigate to a new page, and look to fill it out using my previous data.
And this is where I run into trouble. I want to tick a check box 'New Permit', and its code is;
<form id="document-form">
<div class="generate-form form-horizontal">
<div class="form-group"><label class="col-sm-3 control-label"><span>New Permit</span></label><div class="input col-sm-7">
<div class="checkbox">
<input type="checkbox" data-bind="checked: NewPermit" />
</div></div></div><div class="form-group"><label class="col-sm-3 control-label"><span>Staged Permit</span></label><div class="input col-sm-7">
<div class="checkbox">
<input type="checkbox" data-bind="checked: StagedPermit" />
</div>
Which has no name to lock into. I'm not a HTML expert, but there is some more code that refers to this tickbox (I think)
var model = { "NewPermit": null, "StagedPermit": null, "AmendedPermit": null,
etc.
I have run a loop through the code using .getElementsByTagName("Span") with various .tagName etc. The following results is for the New Permit box:
.tagName = Span
.outerHTML = New Permit
.outerText = .innerHTML = .innertext = New Permit
.isContentEditable = False
.tostring = [object HTMLSpanElement]
.ID = ""
This is behind a password log in, and I cannot post the link publicly. But can work through PM etc to get to the answer.
Use getElementsByTagName('input') and then use Checked = True
Dim element as Object
element = getElementsByTagName('input')
element.Checked = True
assumes checkbox is the only input element on the page. If not, make a loop and identify the desired checkbox
I have two variables, one stores the chexboxes and the other stores the values checked, I found a problem to display the checkboxes and their values (checked, not checked) from the controller to the view.
I have this code on the controller
$scope.infoParticipant = functionThatGetsParticipants();
for (var i = 0; i < $scope.infoParticipant.length; i++) {
if ($scope.infoParticipant[i].ch_type == 'checkbox_multiple') {
var optionsString = $scope.infoParticipant[i].cf_multiple_optionsList;
$scope.infoParticipant[i].optionsTab = optionsString.split(";");
var optionsSelected = $scope.infoParticipant[i].v_value.split(";");
}
}
In the precedent code these should be the values
optionsString = "ch1;ch2;ch3";
$scope.infoParticipant[i].v_value = "ch1;ch2";
According to this the checkboxes :ch1 and ch2 will be checked on the next view :
<div ng-show="l.ch_type=='checkbox_multiple'">
<label >My checkboxes</span></label>
<div class="row" ng-repeat="k in l.optionsTab">
<div class=" col-md-2 modal_style_input">{{k}} </div>
<div class="col-md-2"><input type="checkbox" name="option" class="md-input" id="option {{k}}" class="wizard-icheck" value="{{k}}" icheck ng-model="" /></div>
<div class="col-md-8"></div>
</div>
</div>
My question is how to modify my controller and what to put on ng-model to have my correct chexboxes checked?
Thanks in advance.
In your case, one solution would be to use ngCheck directive in your check boxes.
<input type="checkbox" id="option {{k}}" value="{{k}}" ng-check="isOptionAvailable({{k}})" /></div>
And the isOptionAvailable(opt) is a javascript function that you add to the scope which returns true when k is present in $scope.infoParticipant[i].v_value.
EDIT: To answer your last comment, I created a plunker showing how it works
While this info doesn't help resolve my issue, I'll let it be known I'm creating automation tests in Python using Selenium WebDriver.
I have an issue where I want to verify the existence of two identical text elements that appear to have identical XPATH addresses. As you can see from the XPATH of the web page below...
<div class="pagebox">
<h2>Database</h2>
Restrict access to group: <input id="database_group" name="database_group" value="postgres" type="text">
<br></br>
<h2>Sessions</h2>
User sessions time out after
<input id="session_timeout" name="session_timeout" maxlength="5" value="1200" type="text">
minutes.
<br></br>
<h2>HMI</h2>
<input id="use_large_header_text" name="use_large_header_text" type="checkbox">
Use large text in the header bar and link bar on HMI
<br></br>
<input id="display_tagging_button" name="display_tagging_button" checked="true" type="checkbox">
Display tagging button and information in HMI control dialog
<br></br>
<br></br>
<h2>Inactive Redirect</h2>
Auto redirect after user is inactive for
<input id="inactive_time" name="inactive_time" maxlength="4" placeholder="Min: 0 (Default) Max: 1440" size="25" value="0" type="text"></input>
minutes.
<span id="ieInactTime" style="font-style: italic"> Min: 0 (Default) Max: 1440</span>
<br></br>
Redirect Address:
<input id="inactive_page" name="inactive_page" placeholder="File Path e.g. /Home/" size="30" value="" type="text"><span id="ieInactPage" style="font-style: italic"> File Path e.g. /Home/</span>
<br></br>
...the phrase "minutes." shows up twice [line 8 and line 21], but it doesn't show up in a way where I can use the element's XPATH to locate which element I want to verify the existence of as I normally would using methods you'd find here, here, or here. Both text elements appear to have the same exact XPATH address:
//div[#class='pagebox']
I tried to distinguish between the two text elements using brackets to signify which text elements I'd like to verify...
e.g. //div[#class='pagebox']/[1] & //div[#class='pagebox']/[2]
...but that didn't work.
The closest I could find to distinguishing between the two of these text elements was to use the 'text()' feature of XPATH.
//div[#class='pagebox']/text()[contains(.,'minutes')][1]
//div[#class='pagebox']/text()[contains(.,'minutes')][2]
Is there any way to verify these two text elements using XPATH?
You can use JavaScriptExecutor to find text node inside the element div. See C# code below:
IWebElement e = driver.FindElement(By.ClassName("pagebox"));
string script = "var nodes = arguments[0].childNodes;" +
"var text = [];" +
"var count=0;" +
"for (var i = 0; i < nodes.length; i++) {" +
" if ((nodes[i].nodeType == Node.TEXT_NODE) && (nodes[i].textContent.trim()=='minutes.')) {" +
" text[count]= nodes[i].textContent.trim();" +
" count++;" +
" }" +
"}" +
"return text;";
Object obj = ((IJavaScriptExecutor)driver).ExecuteScript(script,e);
To distinguish between the two different text elements "minutes.", you need the following XPATH:
For the 1st "minutes.": //div[#class='pagebox'][text()[contains(.,'minutes')][1]]
For the 2nd "minutes.": //div[#class='pagebox'][text()[contains(.,'minutes')][2]]