use get and make page url - html

i have this form:
<form action = "" method = "get">
<input type = "input" name = "id" value = "3" />
<input type = "input" name = "name" value = "gloris" />
<input type = "submit" class = "button_big" name = "submit" value = "SEND" />
</form>
And how make this link (and i must use button):
www.link.com/3/gloris

As Felix says, this requires JavaScript. It would be something like:
<script type="text/javascript">
window.addEventListener("load", function()
{
document.getElementById("myForm").addEventListener("submit", function()
{
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
window.location = [window.location.replace(/\/$/, ''), id, name].join("/");
}, false);
}, false);
</script>
<form action = "" id = "myForm" method = "get">
<input type = "text" name = "id" id = "id" value = "3" />
<input type = "text" name = "name" id = "name" value = "gloris" />
<input type = "submit" class = "button_big" name = "submit" id = "submit" value = "SEND" />
</form>
Note that I added id attributes so we can use document.getElementById. Also, there is no input type "input". It should be text, or you can leave it off. You can add more fields just be adding to the array in the desired order.

<form action="http://www.link.com/3/gloris" method="get">
<input type="submit" value="Go to gloris" />
</form>

I'm assuming you mean how do you make a link in the page the form is posted to? Depends on the technology you use. With php it could be
Your link name

If PHP is an option for you, have the form action link to code such as this:
<?php
if (isset($_GET['id']) && isset($_GET['name'])) {
header('Location: www.link.com/' . $_GET['id'] . '/' . $_GET['name']);
}
?>

Firstly, I would update your field names. Naming an item "name" is never a great idea. Also, add an id to your form.
<form action = "javscript:void();" method = "get" id = "mainForm">
<input type = "input" name = "itemId" value = "3" />
<input type = "input" name = "itemName" value = "gloris" />
<input type = "submit" class = "button_big" name = "submit" value = "SEND" />
</form>
<button onclick="updateLocation();">Submit</button>
Then just make a javascript function like so.
<script><!--
function updateLocation(){
var formObject=document.getElementById('formObject');
var i = formObject.itemId.value;
var n = formObject.itemName.value;
var url = 'www.link.com/' + i + '/' + n;
window.location=url;
}
--></script>

Related

How to Loop form elements in JSP

I'm want to use some sort of loop to go over all input fields in my form . But I'm unable to find any proper documentation on how to do it. Is it possible to loop over all the elements in my form in some way as well as dealing with multiple checkboxes ?
I tried to follow some online sources . This one outputs null value.
<html>
<body>
<form action = "main.jsp" method = "POST" target = "_blank">
<input type = "checkbox" name = "maths" checked = "checked" /> Maths
<input type = "checkbox" name = "physics" /> Physics
<input type = "checkbox" name = "chemistry" checked = "checked" /> Chemistry
<input type = "submit" value = "Select Subject" />
</form>
</body>
</html>
<%# page import = "java.io.*,java.util.*" %>
<html>
<head>
<title>HTTP Header Request Example</title>
</head>
<body>
<center>
<h2>HTTP Header Request Example</h2>
<table width = "100%" border = "1" align = "center">
<tr bgcolor = "#949494">
<th>Param Name</th>
<th>Param Value(s)</th>
</tr>
<%
Enumeration paramNames = request.getParameterNames();
while(paramNames.hasMoreElements()) {
String paramName = (String)paramNames.nextElement();
out.print("<tr><td>" + paramName + "</td>\n");
String paramValue = request.getHeader(paramName);
out.println("<td> " + paramValue + "</td></tr>\n");
}
%>
</table>
</center>
</body>
</html>
Is there any documentation source from where I can read about request object's methods ?

Differentiate multiple input form inside forEach statement

I have an array of String, the length is variable. I need to create for each String two buttons: buy and remove. They manage the quantity of the correspondent element. Like this:
Resoult.
I tried this, works but it's not clear.
String go = request.getParameter("go");
if ((go != null)){
String[] info = go.split(",");
int index = Integer.parseInt(info[1]);
if (info[0].equals("+")) {
++quantita[index];
} else {
--quantita[index];
}}
...
<c:forEach var="i" begin="0" end="${length-1}" >
<%
int i = (int) pageContext.getAttribute("i");
out.print(products[i] + " (" + quantita[i] +" in cart)");
%>
<input type=submit name="go" value="-,${i}"/>
<input type=submit name="go" value="+,${i}"/><br>
</c:forEach>
Use <button type="submit"> instead of <input type="submit">. This HTML element allows you to set content via children rather than via value attribute. This way you can simply use the name attribute to indicate the action and the value attribute to indicate the identifier.
<button type=submit name="decrease" value="${i}">-</button>
<button type=submit name="increase" value="${i}">+</button>
String decrease = request.getParameter("decrease");
String increase = request.getParameter("increase");
if (decrease != null) {
--quantity[Integer.parseInt(decrease)];
}
else if (increase != null) {
++quantity[Integer.parseInt(increase)];
}
Is that clearer?

How can I perform different submit in HTML form with Delphi?

I'm writing a software to automatically fill fields in a TWebBrowser and make the related Submit.
Unfortunately, the form contains three buttons that perform different types of submit.
Clearly, this doesn't work:
form: = WebFormGet (formNumber, WebBrowser1.Document AS IHTMLDocument2);
form.submit;
I spotted this line of code at the top of the HTML page:
<form name = "RicercaIMMForm" method = "post" action =
"https://sister.agenziaentrate.gov.it/Visure/vimm/RicercaIMM.do" onsubmit = "this.scelta.disabled = true;">
and this at the bottom:
<td> <input type = "submit" name = "choice" value = "Search"> </td>
<td> <input type = "submit" name = "choice" value = "Visura"> </td>
<td> <input type = "submit" name = "choice" value = "Clean"> </td>
<td> <input type = "submit" name = "choice" value = "last search"> </td>
I should have submit the button with "Search" value.
...
...
...
Can you help me?
UPDATE 17/03/2020
I solved with this:
procedure TFMain.WebFormSubmit(const document: IHTMLDocument2;
const formNumber: integer);
var
Doc: IHTMLDocument2;
WebForm: IHTMLFormElement;
FormElements: OleVariant;
i: integer;
begin
Doc := WebBrowser1.Document as IHTMLDocument2;
WebForm := Doc.Forms.Item(0,'') as IHTMLFormElement;
FormElements := WebForm.Elements;
FormElements.Item(19).Click;
end;
Item(19) is the number of my object (in this case, the button)

How to display default value of textbox then append input after button click

Good day! seeking help again for my html project, below is the script and button command that I used. I want the input boxes to have a default value of Model, IMEI and Serial by default when no input is detected upon button click. Now when I input values to the boxes, I want the input to appear after the default values after a colon (e.g. Model: SM-G900I) Is it possible or not? THanks again for the help :) Here is a link for the output that I want to achieve by the way http://picpaste.com/test_fields-DicIgF8B.JPG
<script>
function showInput2(){
var ui1 = document.getElementById('model').value;
var ui2 = document.getElementById('imei').value;
var ui3 = document.getElementById('serial').value;
document.getElementById('display2').innerHTML = ui1 + '\n' + ui2 + '\n' +
i3;
}
</script>
<p><label>Model</label>
<input type = "text" id = "model" /></p>
<p><label>IMEI</label>
<input type = "text" id = "imei" /></p>
<p><label>S/N</label>
<input type = "text" id = "serial" /></p>
<button type="submit" onclick="showInput2();">Submit</button><br/>
<p><textarea name="device details" cols="33" rows="5" id='display2'>
</textarea></p>
Before submitting the form compare whether user entered something else other than the default value.
function showInput2(){
var ui1 = document.getElementById('model').value;
var ui2 = document.getElementById('imei').value;
var ui3 = document.getElementById('serial').value;
//checking of empty string for model
if(ui1.trim() != '')
ui1 = 'Model: ' + ui1;
//Checking for empty string for IMEI
if(ui2.trim() != '')
ui2 = 'IMEI: ' + ui2;
//Checking for empty string for Serial
if(ui3.trim() != '')
ui3 = 'Serial: ' + ui3;
document.getElementById('display2').innerHTML = ui1 + '\n' + ui2 + '\n' + ui3;
}
<p><label>Model</label>
<input type = "text" id = "model" /></p>
<p><label>IMEI</label>
<input type = "text" id = "imei" /></p>
<p><label>S/N</label>
<input type = "text" id = "serial" /></p>
<button type="submit" onclick="showInput2();">Submit</button><br/>
<p><textarea name="device details" cols="33" rows="5" id='display2'>
</textarea></p>
Just add a value attribute in your text type .
<p><label>Model</label>
<input type = "text" id = "model" value="test value"/></p>
Same for others text type .
$(document).ready(function(){
$("input").val("");
$("input").on('change', function(event){
id = event.target.id;
var value = id + ":" + event.target.value;
$('#' + id).val(value);
});
})
Add this to your javascript .. this will get the id of the input clicked and append the new value to the id follwed by colon and newwly enetered value.
change your html to
<p><label>Model</label>
<input type = "text" id = "Model" value="Model"/></p>
<p><label>IMEI</label>
<input type = "text" id = "IMEI" value="IMEI"/></p>
<p><label>S/N</label>
<input type = "text" id = "Serial" value = "Serial"/></p>

Why are my inputs not resetting?

The below code generates several forms depending on data returned from the server. Everything generates fine, but after clicking on an AnswerOpenQuestion button the input does not clear/reset. What's going on here?
angularJs code:
var availableInterviewController = function($scope, $http) {
// define initial model
$scope.interviews = [];
// retrieve available interviews
$http.get('/api/UserInterviewsApi/AvailableInterviews')
.success(function(data) {
// update interviews
$scope.interviews = [];
$scope.interviews = data;
});
// define open question answer selection
$scope.Answer = "";
// define multiple choice selection
$scope.selectedChoice = "";
// define answer open question button
$scope.AnswerOpenQuestion = function() {
$scope.Answer = ans;
alert(q.Question + ' and ' + $scope.Answer);
$scope.Answer = ''; // <---This is not clearing/resetting the HTML form inputs
};
// define answer multiple choice button
$scope.AnswerMultipleChoice = function() {
//
};
};
// assign the new controller to the main angular app
myAngApp.controller('availableInterviewCtrl', availableInterviewController);
Html code:
<form class="form-group" ng-repeat="q in inter.Questions">
<fieldset style="display: inline-block;">
<legend>Question {{$index + 1}}</legend>
<!--Open Ended-->
<div class="form-group" ng-show="q.MultipleChoices.length === 0">
<label for="{{'quest-' + $index}}">
<strong class="text-info">{{q.Question}}</strong><br />
</label>
<input name="openQuestion" id="{{'quest-' + $index}}" type="text"
class="form-control" ng-model="Answer" />
<button ng-click="AnswerOpenQuestion()">Answer</button><br />
<span class="text-info">
asked by {{q.AskedByUserName ==
'Administrator' ? 'staff' : q.AskedByUserName}}
</span>
</div>
<!--Multiple Choice Question-->
<div class="form-group" ng-show="q.MultipleChoices.length > 0">
<label for="{{'quest-' + $index}}">
<strong class="text-info">{{q.Question}}</strong>
</label>
<div>
Select an answer:
<label ng-repeat="x in q.MultipleChoices">
<input name="currentChoice" type="radio" value="{{x.Id}}"
ng-model="selectedChoice" />
{{x.Choice}}
</label>
<button ng-click="AnswerMultipleChoice()">Answer</button><br />
<span class="text-info">
asked by {{q.AskedByUserName ==
'Administrator' ? 'staff' : q.AskedByUserName}}
</span>
</div>
</div>
</fieldset>
</form>
UPDATE - Solution
AngularJs:
// define open question answer selection
$scope.OpenAnswer = { Answer: '' };
// define answer open question button
$scope.AnswerOpenQuestion = function (q, ans) {
$scope.OpenAnswer.Answer = ans;
alert(q.Question + ' and ' + $scope.OpenAnswer.Answer);
// clear the input
$scope.OpenAnswer.Answer = '';
};
Html:
<input id="{{'quest-' + $index}}" type="text"
class="form-control" ng-model="OpenAnswer.Answer" />
Don't use the scope as a model instead make an object that wraps the data model and assign it to a property of the scope.
$scope.myModel = {Answer:''}
Also don't use value in most cases ngmodel is all you need for two way binding.
In js strings are immutable so the original reference is not being updated instead a new string is being made, the digest cycle won't see this as a change to the original string.