I am making 2 different web application for smart phones, using jQuery mobile and webapp-net.
so far I have the following codes: (its just a part of these codes, since I can not put the whole thing here)
<div data-role="collapsible" data-collapsed="true">
<h3>Eenmalige machtiging </h3>
<div data-role="fieldcontain" >
<form >
<input type="number" pattern="[0-9]*" id="anum" maxlength="9" placeholder="Account Number" autocomplete="off" onBlur="isValidAnum()" onFocus="emptyAnum('anum')"/>
<input type="text" id="bname" placeholder="Beneficiary Name" autocomplete="off" onBlur="isValidBname()" onFocus="emptyBname('bname')"/>
<table>
<tr><td>
Select Your Bank
</td>
<td>
<select name="select-bank" id="select-bank" class="select-bank" data-inline = "true" >
<option value="abn">ABN Amro</option>
<option value="rabo">Rabo Bank</option>
<option value="ing">ING Bank</option>
<option value="overige"> --Overig--</option>
</select>
</td>
</tr>
</table>
<table>
<tr>
<td>I Agree </td>
<td><input type="checkbox" class = "checkbox" name="cbox" id="cbox2"/></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<br/>
<a data-role = "button" type="submit" data-icon = "check" data-theme="b">Pay</a>
</form>
</div>
</div>
</div>
</div>
and:
<button class="form_header" id="last_method"><img src="appimages/directdebit_NL.png" align="middle" /> Eenmalige Machtiging</button>
<div class="form_body">
<fieldset>
<ul>
<li>
<input type="number" pattern="[0-9]*" id="anum" maxlength="9" placeholder="Account Number" autocomplete="off" onBlur="isValidAnum()" onFocus="emptyAnum('anum')"/>
</li>
<li>
<input type="text" id="bname" placeholder="Beneficiary Name" autocomplete="off" onBlur="isValidBname()" onFocus="emptyBname('bname')"/>
</li>
<li>
<table>
<tr><td>
Select Your Bank
</td>
<td>
<select name="select-bank" id="select-bank" class="select-bank" data-inline = "true" >
<option value="abn">ABN Amro</option>
<option value="rabo">Rabo Bank</option>
<option value="ing">ING Bank</option>
<option value="overige"> --Overig--</option>
</select>
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<td>I Agree </td>
<td><input type="checkbox" class = "checkbox" name="cbox" id="cbox2" /></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<input type="submit" value="Pay" class="pay_button"/>
</li>
</ul>
</fieldset>
</div>
</div>
</div>
Now I have to create a .vm file using these two codes, in order to do that I need to see what are the difference in html between these two. I tried to make it look alike each other as much as I could, I dont think I can change them any more. I was also trying to work with their css but I didnt change anything.
my question is there a possible way to put these html in a single .vm file??? if you know how to do it please help me, also if you need more info just ask me.
Are you talking about file diff? Where you check the differences in two files and merge them?
There is winmerge http://winmerge.org/
There is examdiff. Do a google search for file comparison or file diff
Related
I have a table which show product's files. A file can have a note added. If a note was added, it is displayed in a row. If not, text area field with submit button is displayed instead.
Short story, it all works, except for the first row without a note. After typing a note and clicking submit button nothing happens.
HTML:
<div id="files-list" style="display: none">
<table class="table">
<thead>
<tr>
<th>File</th>
<th>Date</th>
<th>Notes</th>
<th></th>
</tr>
</thead>
<tbody>
<c:if test="${fn:length(bean.product.files)>0}">
<c:forEach items="${bean.product.files}" var="na">
<tr>
<td>${na.name}</td>
<td><fmt:formatDate value="${na.created}" pattern="yyyy-MM-dd HH:mm" /></td>
<td>
<c:if test="${empty na.note}">
<form:form id="${na.id}" method="POST" modelAttribute="bean" action="${pageContext.request.contextPath}/app/updateFile.ajax?id=${bean.product.id}&fileId=${na.id}" style="display: inline">
<form:textarea path="prodFiles" rows="1" cols="50" />
<input type="hidden" name="version" value="${bean.product.version}">
<input type="submit" id="submitButton" value="Save it!" />
</form:form>
</c:if>
<c:if test="${not empty na.note}">
<div style="max-width: 400px">${na.note}</div>
</c:if>
</td>
<td><button type="button" class="btn btn-xs btn-danger" onclick="$().mkdelformTable('${pageContext.request.contextPath}/app/deleteFile.ajax?id=${bean.product.id}&fileId=${na.id}', this)">Delete it!</button></td>
</tr>
</c:forEach>
</c:if>
</tbody>
</table>
</div>
Possible hints:
When I open the table (it's a pop-up) console shows multiple [DOM] Found X elements with non-unique id errors
Checking elements in dev's tools I noticed that the first row doesn't include the form part. Possibly connected with the multiple-same-ids problem. Example:
<td>
<textarea id="prodFiles" name="prodFiles" rows="1" cols="50"></textarea>
<input type="hidden" name="version" value="181">
<input type="submit" id="submitButton" value="Save it!">
</td>
VS
<td>
<form id="65" style="display: inline" action="/oferty/app/updateFile.ajax?id=12701&fileId=65" method="POST">
<textarea id="prodFiles" name="prodFiles" rows="1" cols="50"></textarea>
<input type="hidden" name="version" value="181">
<input type="submit" id="submitButton" value="Save it!">
</form>
</td>
Edit: Also, new files can be added so hard-coding different names/ids can't be done, if suggested.
As I found out, there was some legacy code. I managed to get rid of 'multiple same ids' etc. errors by adding a note in an additional pop-up - on a previos page, instead of an input, I included a button to the new pop-up.
How do I get the inputs from this form to go into an array in angular?
<form>
<tr>
<td class="Meal-form">
<input type="date" ng-model="date" placeholder="select" required></td>
<td>
<select ng-model="meal" ng-options="meals.name for meals in mealTypes">
<option value="" disabled selected>Select</option>
</select>
</td>
<td><input type="text" ng-model="about" placeholder="What did you eat" required></td>
<td>
<select ng-model= "feel" ng-options="feeling.name for feeling in feels">
<option value="" disabled selected>Select</option>
</select>
</td>
<td><input type="submit" id="submit" value="Submit Content"></td>
</tr>
</form>
I get how to pull the information from angular to HTML, but not how to get the HTML to angular.
You need to create your model in controller, and save function
$scope.model = {
date: '',
meal: '',
about:'',
feel: ''
};
$scope.save = function()
{
alert($scope.model.date);
alert($scope.model.meal);
$scope.yourarray.push($scope.model);
}
You Html need to change
<form>
<tr>
<td class="Meal-form">
<input type="date" ng-model="model.date" placeholder="select" required></td>
<td>
<select ng-model="model.meal" ng-options="meals.name for meals in mealTypes">
<option value="" disabled selected>Select</option>
</select>
</td>
<td><input type="text" ng-model="model.about" placeholder="What did you eat" required></td>
<td>
<select ng-model= "model.feel" ng-options="feeling.name for feeling in feels">
<option value="" disabled selected>Select</option>
</select>
</td>
<td><input type="buttton" ng-click="save()" id="submit" value="Submit Content"></td>
</tr>
</form>
Note the ng-bind, it should be like this ng-model="model.date"
Using ng-model you create a dual-binding relationship between your view (the HTML) and your model (the JS). That is to say when the user types in to your form, you can then do
console.log($scope.date)
to print the date they entered.
I have an HTML form but some of the inputs in it are not submitted, even though they are active. Live example at http://jsfiddle.net/hbw3/qzcTS/2/.
The form clearly contains a number of divs but only the inputs in one div are submitted. Why is this?
The HTML source:
<form accept-charset="UTF-8" action="whatever" id="map_form" method="post">
<table>
<tr>
<td>
<select id=1 name=col_1 class="column_select">
<option value="0">None</option>
<option value="1">id (integer)</option>
<option value="2">name (string)</option>
</select>
</td>
<td>
<select id=2 name=col_2 class="column_select">
<option value="0">None</option>
<option value="1">id (integer)</option>
<option value="2">name (string)</option>
</select>
</td>
</tr>
</table>
<div class="span4" id="default_values">
<label for='id' class='control-label'>id (integer)</label>
<input type='text' id='id' />
<label for='name' class='control-label'>name (string)</label>
<input type='text' id='name' />
</div>
<input name="commit" type="submit" value="Upload Table" />
</form>
<div id='result'></div>
The JS to display the submitted inputs:
$('form#map_form').submit(function () {
$('div#result').text($(this).serialize());
return false;
})
You're missing name attributes on the inputs in your last div. I tried adding some to your sample and that seems to have fixed it.
I have a jsfiddle below:
http://jsfiddle.net/C95uc/3/
I am having trouble with my css. I want to display both drop down menus on the left above one another and I want to display the text inputs on the right hand side, but how can I do this?
Below is the html code:
<div class='lt-container'>
<form id='moduleForm'>
<select name="module" id="modulesDrop">
<option value="">Please Select Module</option>
</select>
</form>
</div>
<div class='lt-container' >
<form id='moduleExistForm'>
<select name="module" id="modulesDrop">
<option value="">Please Select Course</option>
</select> </form>
</div>
<div id='rt-container' >
<form id='detailsForm'>
<table>
<tr>
<th></th>
<td><input type='hidden' id='idmodule' name='moduleid' value='' /> </td>
</tr>
<tr>
<th>Module ID:</th>
<td><input type='text' id='nomodule' name='moduleno' readonly='readonly' value='' /> </td>
</tr>
<tr>
<th>Module Name:</th>
<td><input type='text' id='namemodule' name='modulename' readonly='readonly' value='' /> </td>
</tr>
<tr>
<th>Credits:</th>
<td><input type='text' id='credits' name='creditsname' readonly='readonly' value=''/> </td>
</tr>
</table>
<div id='moduleAlert'></div>
</form>
</div>
CSS:
.lt-container, #rt-container {
float: left;
}
#rt-container {
clear: right;
margin-left: 5%;
}
http://jsfiddle.net/C95uc/4/
<div class='lt-container'>
<form id='moduleForm'>
<select name="module" id="modulesDrop">
<option value="">Please Select Module</option>
</select>
</form>
<form id='moduleExistForm'>
<select name="module" id="modulesDrop">
<option value="">Please Select Course</option>
</select> </form>
</div>
Both <select> go in the same <div class='lt-container'>
The two dropdowns don't stack on top of each other because you have assigned both of them a "float:left" property which makes them go side by side. Instead, wrap them in a div and make that div float left.
<div class="lfloat">
<!-- Both Dropdowns -->
</div>
CSS:
.lfloat {
float:left;
}
Be sure to add a "float:right" property to the form so that it doesn't appear below the two drop downs.
Example: http://jsfiddle.net/C95uc/5/
Good afternoon,
I am new to html. I have added html form fields into my application. The textfields are not aligned and they look really untidy. This is because i have field names like 'first tag' and 'second tag' which have a text field beside it. The text field for second tag appears more towards the left compared to the first. Is there a way i can align them without using a table? if i use a table, may i know how should i do it? i am sorry i cant upload any photos since i am a new user.
below is my html code.
Thank you for any help!
Cheers,
ZhengHong
<div class="rightsettings">
<form name="addsubject" action="html_form_action.asp" method="get">
<br>Subject: <input type="text" name="user" /></br>
<br>Number of tags<select name="addnoofsubject" id = "addnoofsubject" onchange="checktags()">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
</select></br>
<div id="addfirsttag">
<br>First Tag: <input type="text" name="tag1"/></br>
<div id = "addsecondtag" style="visibility:hidden">
<br>Second Tag: <input type="text" name="tag2"/></br>
</div>
<div id = "addthirdtag" style="visibility:hidden">
<br>Third Tag: <input type="text" name="tag3"/></br>
</div>
<div id = "addfourthtag" style="visibility:hidden">
<br>Fourth Tag: <input type="text" name="tag4"/></br>
</div>
<div id = "addfifthtag" style="visibility:hidden">
<br>Fifth Tag: <input type="text" name="tag5"/></br>
</div>
<br><input type="submit" value="Submit" /></br>
</form>
</div>
I recommend you to insert your forms into tables.
<div class="rightsettings">
<form name="addsubject" action="html_form_action.asp" method="get">
<table cellpadding="1" cellspacing="1" border="0">
<tr><td>Subject:</td><td><input type="text" name="user" /></td></tr>
<tr><td>Number of tags::</td><td><select name="addnoofsubject" id = "addnoofsubject" onchange="checktags()">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
</select></td></tr>
<tr><td>First Tag:</td><td><div id="addfirsttag"><input type="text" name="tag1"/></div></td></tr>
<!-- all your tags like the one above -->
<tr><td colspan="2" align="center"><input type="submit" value="Submit" /></td></tr>
</table>
</form>
</div>
try this one
<table>
<tr style="visibility:hidden"><td>First tag :><td><input type="text" name="tag1"/></td></tr>
<tr style="visibility:hidden"><td>Second tag :><td><input type="text" name="tag2"/></td></tr>
<tr style="visibility:hidden"><td>Third tag :><td><input type="text" name="tag3"/> </td></tr>
<tr><td colspan="2" align="center"><input type="submit"></td></tr>
</table>
with a table
<table>
<tr><td>First Tag</td><td><input ... /></td></tr>
<tr><td>Second Tage</td><td><input ... /></td></tr>
...
</table>
with css
css part :
label
{
display: block;
width: 150px;
float: left;
}
html part :
<label for="tag1">First Tag:</label><input ... /><br />
<label for="tag2">Second Tag:</label><input ... /><br />