Get the selected value in a select - option Thymeleaf and Spring Boot - html

Im trying to generate a search options and in myweb page the user choose the value that is looking for this is my html code:
<table>
<tr>
<td><h2 align="left">Red Social: </h2></td>
<td>
<select th:field="*{redes}" name="redSoc">
<option th:each="r : ${redes}" th:value="${r.nombreRedSocial}"
th:text="${r.nombreRedSocial}"></option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" value="Buscar"/></td>
</tr>
</table>
And this is my controller code:
#GetMapping("/RedesSociales")
public String infoPorRedSocial(Model model, #RequestParam(name = "redSoc", required = false) String redSoc) {
RedesSociales[] redes = redesService.obtenerTodasRedes();
model.addAttribute("redes", redes);
//model.addAttribute("grupo", null);
System.out.println(redSoc);
if (redSoc != null) {
System.out.println(redSoc);
model.addAttribute("info", infoService.obtenerTodosPorRedSocial(redSoc));
}
return "visual/reportes/ListarPorRedSocial";
}
Now as you can see im trying to get the value redSoc but im not sure how to the get this value from the selected option i tried several methods but didnt work.
EDIT:
I was using this code:
<form action="/RedesSociales" method="GET">
<h2 align="left">Red Social: </h2>
<input type="text" name="redSoc"/> <br>
<input type="submit" value="Buscar"/>
</form>
But this was not usefull because the option would be insert by the user and i wanted to made it more dynamic thats why now im using the current values stored in the database

already solve the problem Change my code to this :
<table> <tr> <td><h2 align="left">Red Social: </h2></td>
<td> <select name="redSoc"> <option th:each="r : ${redes}" th:value="${r.nombreRedSocial}" th:text="${r.nombreRedSocial}">
</option>
</select> </td> </tr>
<tr> <td><input type="submit" value="Buscar"/></td> </tr> </table>

Related

Angular 6- How can I make form fields only appear if a user inputs a specific value?

I have an Angular form with a dropdown list, and at the the end of the list is the option 'Other'. If a user selects other, I would like a new field to appear allowing them to input another option.
I tried using ngModel, but learned you can't include that within an *ngIf statement, but I think I might be on the right track.
<form class="form-horizontal" role="form" >
<tr>
<td>
<p>Location Type :</p>
</td>
<td> <select class="col-md-12 form-control"[(ngModel)]="newmp.locationType" name="locationType">
<option value="Outfall">Outfall</option>
<option value="Tide Gate">Tide Gate</option>
<option value="Upstream">Upstream Pipe</option>
<option value="Vault">Vault</option>
<option value="Other">Other</option></select>
</td>
</tr>
<tr *ngIf="locationType == Other">
<td class="left_td">
<p>Other (locationType) :</p>
</td>
<td>
<input type="text" name="locationTypeOther" placeholder="Other (Location Type) "class="col-md-12 form-control" [(ngModel)]="newmp.locationTypeOther" />
</td>
</tr>
</form>
In my component I have:
newmp = {
"locationType": "",
"locationTypeOther": ""
}
The way I have it now, the 'locationTypeOther" field will appear upon page load, even before a user selects an option. What might I be missing? Thanks a lot!
Instead of
<tr *ngIf="locationType == Other">
It should be
<tr *ngIf="newmp.locationType == 'Other'">

SET VALUE to INPUT type Text with FUNCTION HTML

this is part of my code :
<script>
function setCard() {
var carta = document.getElementById('idlistaCarte').value;
document.getElementById('idcodice_carta').innerHTML = carta;
}
</script>
<table>
<tr>
<td><p>Conferma Pagamento</p></td>
</tr>
<tr>
<td><select name="listaCarte" id="idlistaCarte">
<%
int i = 0;
for (String titolareCarta : listatitolare_carta) {
%>
<option value="<%=listacodice_carta.get(i)%>"
id="idcodice_carta_select">
<%=titolareCarta%>,<%=listacodice_carta.get(i)%>,<%=listatipologia_carta.get(i)%>
</option>
<%
i++;
}
%>
</select></td>
</tr>
<tr>
<td><input type="button" onclick="setCard()" value="Set Card"></td>
<td><p id="idcodice_carta"></p></td>
</tr>
<tr>
<td><input type="text" placeholder="codice_carta"
name="codice_carta" id="idcodice_carta" required></td>
</tr>
</table>
I'm trying to pass the value in the input type text with id = "idcodice_carta" taking the value from the select via button.
I can not make it.
trying to populate a p tag this works, but I need to have the value in the input field.
How can I solve the problem?
Thank you in advance.
you need to change id either
<td><p id="idcodice_carta"></p></td>
or
<input type="text" placeholder="codice_carta"
name="codice_carta" id="idcodice_carta" required>
you can't use same id in one page ex "idcodice_carta"

Proper way to post a new form in each row of a table?

I have a page where there is a table. In each row of the table, there is data about an online grocery delivery order. At the end of each row, there is a submit button about action to be performed on the order and the form ends there. A new form begins with the next row <tr>
Where exactly should I put the <form> and </form> tags? Should I put the <form> before each <tr> and </form> after the </tr> or should I introduce them in the first data cell <td> of each row and close in the last <td>?
I mean, the page would probably function all right in both ways, but what is "proper" way of doing this? Right now mozilla code view is showing the table tag in red color.
This is how it looks right now.
And this is the relevant part of the php code I am using to dynamically generate a new form for each table row. I am posting this just for the sake of reference, because this does not matter at all here. My question is basic HTML based, not php based.
for($i=0;$i<$count;++$i){
$res.='<form action="" method="post">' ."\n" .'<input type="hidden" name="orderid" value="' .$orders[$i]->idcode .'" />';
$res.="$nt<tr><td align=\"center\">" .$orders[$i]->display("pe","</td><td align=\"center\">") ."</td>$nt\t<td align=\"center\"><select name=\"agent\">$alistcode</select></td>$nt\t<td align=\"center\"><select name=\"vendor\">$vlistcode</select></td>";
$res.="$nt\t<td align=\"center\"><input type=\"submit\" value=\"PROCESS\" /></td>\n</tr>\n</form>\n";
}
$res.="</table>";
echo $res;
HTML5 offers decent solution for your problem. And its name is form attribute. Just put the form into last <td> and refer to its id from other inputs. See example.
<table>
<tr>
<td>
<input type="text" name="inp1" form="form1" />
</td> <!-- ^^^^ ^^^^^ -->
<td>
<form id="form1" method="get" action="/">
<!-- ^^ ^^^^^ -->
<input type="submit" name="submit1" value="submit" />
</form>
</td>
</tr>
<tr>
<td>
<input type="text" name="inp2" form="form2" />
</td>
<td>
<form id="form2" method="get" action="/"><input type="submit" name="submit2" value="submit" /></form>
</td>
</tr>
</table>
If using javascript is an option, you can work without <form> tags?
I used jQuery in this example, data is posted to itself (first argument of $.post()).
Table
<table>
<tbody>
<tr>
<td><input name="inputfield[]" type="text" value="input1" /></td>
<td><select name="selectfield[]">
<option selected value="select1-option1">select1-option1</option>
<option value="select1-option2">select1-option2</option>
<option value="select1-option3">select1-option3</option>
</select></td>
<td><a class="submit">Update</a></td>
</tr>
<tr>
<td><input name="inputfield[]" type="text" value="input2" /></td>
<td><select name="selectfield[]">
<option selected value="select2-option1">select2-option1</option>
<option value="select2-option2">select2-option2</option>
<option value="select2-option3">select2-option3</option>
</select></td>
<td><a class="submit">Update</a></td>
</tr>
<tr>
<td><input name="inputfield[]" type="text" value="input3" /></td>
<td><select name="selectfield[]">
<option selected value="select3-option1">select3-option1</option>
<option value="select3-option2">select3-option2</option>
<option value="select3-option3">select3-option3</option>
</select></td>
<td><a class="submit">Update</a></td>
</tr>
</tbody>
</table>
Script
$(".submit").on("click", function(){
var row = $(this).parents("tr");
$.post("", row.find("input, select, radio").serialize(), function(data){ console.log(data); });
});
JSFiddle

Why can't I submit my form with WWW::Mechanize::Firefox in Perl?

I have an HTML this is part of the form I'm working on
<form action="/goform/FormUpdateVAP" autocomplete="off" name="myform" id="formid" method="POST">
<table>
<tbody>
<tr>
<td align="right"><span class="label">Name:</span></td>
<td><input id="essid" name="essid" value="X" type="text"></td>
</tr>
<tr>
<td align="right"><input id="broadcast_essid" name="broadcast_essid" value="any" checked="" type="checkbox"></td>
<td><span class="label">Broadcast name:</span></td>
</tr>
</tbody>
</table>
<!-- BEGIN RIGHT COLUMN -->
<table>
<tbody><tr>
<td>
<input name="authentication" id="authentication" value="any" onclick="Update();" type="checkbox"><span class="label"><b>authentication</b></span>
</td>
<td>
<input onclick="Update();" name="wp" id="wp" value="any" type="checkbox"><span class="label"><b>Wp</b></span>
<select id="8021x_mode" name="8021x_mode" onchange="Update();"><option value="wpa">WPA</option>
<option value="wep">WEP</option>
</select>
</td>
</tr>
<tr>
<td height="26">
<input onclick="Update();" name="w_p" id="w_p" value="any" type="checkbox"><span class="label"><b>Wp</b></span>
<select id="8021x_mode" name="8021x_mode" onchange="Update();"><option value="wpa">WPA</option>
<option value="wep">WEP</option>
</select>
</td>
</tr>
<tr>
<td>
<input id="cancel" name="cancel" value="Cancel" onclick="window.location.href = '/fg/list.asp';" type="button">
</td>
<td>
<input id="add-2" name="add" value="Save" type="submit">
</td>
</tr>
</tbody>
</table>
I'm trying to submit it filling the Name and the Broadcast name. And checking the 8021x_mode and the wp checkboxes. If I tick 8021x_mode and set the fields the form submits just fine. But when I try ticking wp it doesn't submit. I got no error messages.
Here's my code so far:
use WWW::Mechanize::Firefox;
use Crypt::SSLeay;
use URI::Fetch;
use HTML::TagParser;
$ENV{PERL_LWP_SSL_VERIFY_HOSTNAME}=0; #not verifying certificate
my $url = 'https://';
$url = $url.#ARGV[0];
my $mech = WWW::Mechanize::Firefox->new;
$mech->get($url);
$mech->form_id('formid');
$mech->tick( '8021x_mode','any');
$mech->tick( 'wp','any'); --after I add this the form doesn't submit
my $name = #ARGV[1];
$mech->set_fields(
'vap_name' => $name,
'essid' => $name,
);
$mech->click_button( id => 'add-2' );
$mech->reload();
add-2 is the submit button. Any idea why is not working? If you need more information please let me now. Any help will be highly appreciated.
The problem is that the html doesn't contains the choice any for 8021x_mode.
I get this error :
No elements found for Checkbox with name '8021x_mode' and value 'any'
at test.pl line 24.
To check the form, I recommend you the mech-dump utility (installed with WWW::Mechanize)
$ mech-dump --forms http://domain.tld/path_to_forms
POST /goform/FormUpdateVAP [myform]
essid=X (text)
broadcast_essid=<UNDEF> (checkbox) [*<UNDEF>/off|any]
authentication=<UNDEF> (checkbox) [*<UNDEF>/off|any/authentication]
wp=<UNDEF> (checkbox) [*<UNDEF>/off|any/Wp]
8021x_mode=wpa (option) [*wpa/WPA|wep/WEP]
w_p=<UNDEF> (checkbox) [*<UNDEF>/off|any/Wp]
8021x_mode=wpa (option) [*wpa/WPA|wep/WEP]
cancel=Cancel (button)
add=Save (submit)
As you can see, there's no any choice...
Maybe the javascript there is doing some things that we don't know.
A workaround is to use LiveHttpHeaders Firefox addon to catch the forms POSTed to /goform/FormUpdateVAP and then instead of ticking, do a POST request with WWW::Mechanize.

How to dynamically alter a value in mvc3 html page

<tr>
<td>
Delivery
</td>
<td>
<div class="confdelivery">
<select id="NxtDay" name="NxtDay">
<option selected="selected" value="1">Normal Devliery + 10.00</option>
<option value="2">Next Day Delivery + 20.00</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
Total
</td>
<td>
#{
var total = Model.CartTotal;
}
#total
</td>
</tr>
Basically if a user selects next day delivery. I want 20 to be added to #total?
I thing you are going about this the wrong way. You either update some input value with javascript, or use the NxtDay value in your controller action to assign the correct value, depending on the selection.
ADDED:
What you want to do is something like this: (I am assuming you are using jquery, since it come with MVC3).
HOWEVER: You should check out some tutorial if you are starting. This is pretty basic stuff and you won't go far without having to come back here unless to read up on this sutff.
<tr>
<td>
Delivery
</td>
<td>
<div class="confdelivery">
<select id="NxtDay" name="NxtDay">
<option selected="selected" value="10">Normal Devliery + 10.00</option>
<option value="20">Next Day Delivery + 20.00</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
Total
</td>
<td>
<span id="totalValue" style="display: none">#Model.CartTotal</span>
<span id="totalWithShipping">0</span>
<input id="hiddenTotal" type="hidden" value="0">
</td>
</tr>
<script>
$(document).ready(function () {
$('#NxtDay').change(function() {
addToTotal();
});
});
function addToTotal(){
$('#totalWithShipping').html($('#totalValue').html() + $("#NxtDay option:selected").val());
$('#hiddenTotal').val($('#totalWithShipping').html());
}
</script>