How to access the hidden values in JSP using plan HTML - javascript

I have some hidden values as shown below.
<input type="hidden" id="id_clientCount" value="ClientCount" />
<input type="hidden" id="id_AppCount" value="AppCount" />
Now i would like to access them in my JSP page like this.
<div style="margin-left: 30%; color: green;"><b>Confirmation</b></div><br/>
client value: <script>document.getElementById('id_clientCount').value</script>
app Value : <script>document.getElementById('id_AppCount').value</script>
<div id="testChild" style="height: 15em"></div>
Correct me if i am doing wrong.
Note : This entire code in single JSP Page
Expected Output is :
client value: ClientCount app Value : AppCount
All help will be greatly appreciated.

try this
<input type="hidden" id="id_clientCount" value="ClientCount" />
<input type="hidden" id="id_AppCount" value="AppCount" />
<div style="margin-left: 30%; color: green;"><b>Confirmation</b></div><br/>
client value: <span id="id_clientCountId"></span><BR>
app Value : <span id="id_AppCountId"></span>
<div id="testChild" style="height: 15em"></div>
<script>
fill();
function fill(){
document.getElementById("id_clientCountId").innerHTML = document.getElementById('id_clientCount').value;
document.getElementById("id_AppCountId").innerHTML = document.getElementById('id_AppCount').value;
}
</script>

You have forgot to print that value on screen, use document.write(...) to print .Like below :
<input type="hidden" id="id_clientCount" value="ClientCount" />
<input type="hidden" id="id_AppCount" value="AppCount" />
<div style="margin-left: 30%; color: green;"><b>Confirmation</b></div><br/> client value:
<script>
document.write(document.getElementById('id_clientCount').value);
</script>
<br>app Value :
<script>
document.write(document.getElementById('id_AppCount').value);
</script>
<div id="testChild" style="height: 15em"></div>

Related

PHP mysql data vs js dynamic fields

I have a piece of code (in a .php file) that can dynamically add/remove a group of input fields by JavaScript.
<!DOCTYPE html>
<!-- ref: https://stackoverflow.com/questions/75408002/javascript-dynamically-add-and-remove-input-fields -->
<html lang="en">
<head>
<style>
#template #template_p{ display: none }
</style>
</head>
<body>
<form action="" method="post" autocomplete="off">
<fieldset id="fieldset">
<legend id="legend">Professional development</legend>
<div id="placeholder">
<div id="template">
<fieldset id="template_fieldset">
<legend>Group</legend>
<p>Item <input type ="text" name="prof_item[]" /><br /></p>
<p>Duration <input type ="text" name="prof_duration[]" /><br /></p>
<p id="template_p"><button type ="button" name="prof_remove[]" onclick="this.closest('div').remove()">Remove group</button><br /></p>
</fieldset>
</div> <!-- template -->
</div> <!-- placeholder -->
<p><button type="button" name="add" onclick="Add();">Add new group</button></p>
</fieldset>
<p><button type="submit" name="Submit">Submit</button></p>
</form>
<script>
var _counter = 0;
function Add() {
_counter++;
var oClone = document.getElementById("template").cloneNode(true);
oClone.id += (_counter + "");
document.getElementById("placeholder").appendChild(oClone);
}
</script>
</body>
</html>
Using this and adding some PHP code, user data can be collected and saved into MySQL. When the user comes back, is it possible to add the ability to populate the loaded user data into the page, and the user can still dynamically add/remove a group of input fields? I understand that PHP is run on the server and JavaScript is on the client side.

.php file won't display form data

I'm trying to change my "Submit" button style when a user clicks on it upon submitting the form.
The action attribute calls PHP file, but the actual data doesn't display until I remove onSubmit attribute from my form. Then I can't use sendBtn() function to change the style of the button.
Pseudo-class option is not good, because it would change the style even if the form is empty.
Any ideas?
PS. I'm on local server with MAMP and using Dreamweaver for editing.
<form class="customform" method="post" action="emailOnServer.php" method="post" onSubmit="return sendBtn();" autocomplete="on" >
<div class="s-12" onClick="formFocus()"><input id="imie" name="imie1" placeholder="Twoje imię" type="text" required </input></div>
<div class="s-12" onClick="formFocus()"><input id="email" name="email1" placeholder="Twój e-mail" type="email" required </input></div>
<div class="s-12" onClick="formFocus()"><textarea placeholder="Wiadomość" id="pole" rows="5" style="resize:none;" required></textarea </input></div>
<div class="custom2" style="width: 34%; float: right;" ><input id="se" type="submit" value="Wyślij" style="background-color:#92c500; color: white; border-color:#6C0;" ></input> </div>
<div class="custom1" style="width: 65%;" ><button id="resetButton" onclick="cleanBtn()" type="reset" style="background-color: #808080; color: white; border-color:#066; border-radius:2px;">Wyczyść </button></div>
<img id="tick123" src="img2/green-tick-icon-0.png" style="display: none; float:right; position:absolute; right:1%; top:86%; padding:0; margin:0; width: 28px; height: 28px;"/>
<img id="tick1234" src="img2/green-tick-icon-0.png" style="display: none; position:absolute; left:58%; top:86%; padding:0; margin:0; width: 28px; height: 28px;"/>
</form>
<!-- more code to change form style on focus -->
function sendBtn() {
if ( document.getElementById('email').value.indexOf("#")> 0 &&
document.getElementById('email').value.indexOf(".")> 2 &&
document.getElementById('imie').value != 0 &&
document.getElementById('email').value != 0 &&
document.getElementById('pole').value != 0){
document.getElementById('se').style.backgroundColor = "#00283A";
document.getElementById("tick123").style.display="block";
document.getElementById('se').value="Wysłano";
document.getElementById('email').disabled=true;
document.getElementById('imie').disabled=true;
document.getElementById('pole').disabled=true;
return true;}}
It's from a free template and I know I should've used css stylesheets to make it more readable
This is emailOnServer.php file:
<body>
Hello User
<?php $name = $_POST['imie1'];
echo $name; ?>
</body>
First, your HTML have some errors, e.g.:
<input id="imie" .... type="text" required </input>
// look here ^
// the tag is not closed correctly
should be
<input id="imie" name="imie1" placeholder="Twoje imię" type="text" required />
Anyway, if you need to remove the onsubmit attribute, you can do something like this
<form name="myform" ...>
...
</form>
then, the js
var form = document.forms.myform;
form.onsubmit = function(){
// do stuff
document.getElementById('se').style.backgroundColor = "#00283A";
// ...
}
This jsfiddle has an example code for your requirements. The form elements was simplified.

WebcamJS overriding return button in HTML form

For a community site, I created an HTML form to add new users. If a new user wants to make a profile photo right away, this is possible with WebcamJS (using v1.0.2, already got this working).
However, when I want to add a new user and filled in all data (with or without a picture) and press Return, instead of submitting the form, a new webcam div is opened.
I tried a lot of different things, even disabling the default behavior of the return key, but still the problem persists.
Hope anyone can help!
Simplified HTML example:
Webcam.set({
width: 400,
height: 300,
//dest_width: 400,
//dest_height: 300,
image_format: 'jpeg',
jpeg_quality: 80
});
$("#maak_foto").hide();
$("#foto_maken").click(function() {
Webcam.attach('#my_camera');
$("#maak_foto").show();
$("#my_camera").show();
$("#foto_form").show();
});
$("input#foto_gebruiken").click(function() {
$("#my_camera").hide();
$("#pre_take_buttons").hide();
});
function preview_snapshot() {
Webcam.freeze();
// swap button sets
document.getElementById('pre_take_buttons').style.display = 'none';
document.getElementById('post_take_buttons').style.display = '';
}
function cancel_preview() {
Webcam.unfreeze();
// swap buttons back
document.getElementById('pre_take_buttons').style.display = '';
document.getElementById('post_take_buttons').style.display = 'none';
}
function save_photo() {
// actually snap photo (from preview freeze) and display it
Webcam.snap(function(data_uri) {
// display results in page
document.getElementById('results').innerHTML =
'Jouw foto:<br>' +
'<img src="' + data_uri + '"/>';
// swap buttons back
document.getElementById('pre_take_buttons').style.display = '';
document.getElementById('post_take_buttons').style.display = 'none';
var raw_image_data = data_uri.replace(/^data\:image\/\w+\;base64\,/, '');
document.getElementById('webcam').value = raw_image_data;
//document.getElementById('wijzigen').submit();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://intern.ifmsa.nl/leden/webcam/webcam.js"></script>
<form name="htmlform" method="post" enctype="multipart/form-data" action="<?php $_SERVER['PHP_SELF'] ?>">
<label>Voornaam</label>
<input type="text" name="voornaam">
<br>
<label>Email</label>
<input type="email" name="email">
<br>
<label>Photo</label>
<div>
<input name="foto" type="file">
<button id="foto_maken" onclick="return false" ;>Or make another one</button>
<input id="webcam" type="hidden" name="webcam" value="">
</div>
<br>
<div id="results"></div>
<div id="my_camera" style="display: none; clear: left;"></div>
<div id="pre_take_buttons">
<input type="button" id="maak_foto" value="Take photo" onClick="preview_snapshot(); return false;">
</div>
<div id="post_take_buttons" style="display:none;">
<input type="button" value="Another photo" onClick="cancel_preview(); return false;">
<input name="webcamdefi" id="foto_gebruiken" type="button" value="Use photo" onClick="save_photo(); return false;">
</div>
<label>Confirm password</label>
<input name="pass" type="password" required>
<input class="submit" type="submit" name="submit" value="Wijzigen">
</form>
Simple magic (the first tag button#foto_maken is interpreted as the submit button and fire when the enter press):
change this:
<button id="foto_maken" onclick="return false" ;>Or make another one</button>
to this:
<input type="button" id="foto_maken" value="Or make another one"/>
[ http://jsfiddle.net/2es2yf0y/ ]
More clear example: http://jsfiddle.net/stdob/tfss0sz2/2/

Get value of form text field with without submitting the form

I have a form on my page and want to be able to submit the text box value (partnumber) as a query string in a hyperlink without submitting the form itself ? Is this possible ?
I have done some research and have tried document.getElementById("partnumber").value but am getting the error "Object Required". Code Below.
<form id="form3" name="form3" method="post" action="formpost?rmaid=<%=rmaid%>">
<input name="partnumber" type="text" id="partnumber" size="10" />
<span class="style11">Suggest Link</span>
<input name="invoice" type="text" id="invoice" size="15" />
</form>
I'll set the new page to open in a pop up window and list a series of values in the database but then I need the value selected to come back into the invoice field on the original page. I believe this can be done with JavaScript but I am new to this, can anyone help ?
For those Looking to pass values back I have found this snippet that works...
Put this in the child window
<script language="javascript">
function changeParent() {
window.opener.document.getElementById('Invoice').value="Value changed..";
window.close();
}
</script>
<form>
<input type=button onclick="javascript:changeParent()" value="Change opener's textbox's value..">
</form>
For the input field you should add an OnChange to it. This event should call a function which will then set your link's value.
You can see an example of this here (it uses a button press though and not an input OnChange Event): http://www.java2s.com/Code/JavaScript/HTML/ChangeURLandtextofahyperlink.htm
Edit: Added a Stack Snippet illustrating the solution.
function SetSuggestLink() {
var suggest = document.getElementById('partnumber').value;
document.getElementById('innerSpan').innerHTML =
"Suggest Link: suggest.asp?partnumber=" + suggest;
document.getElementById('QueryLink').href =
"suggest.asp?partnumber=" + suggest;
}
.style11 {
color:black;
}
.style2 {
text-decoration:none;
}
<form id="form3" name="form3" method="post" action="formpost?rmaid=SomeValue">
<input name="partnumber" type="text" id="partnumber" size="10"
OnChange="SetSuggestLink()" /> </br>
<a id="QueryLink" class="style2" href="#">
<span id="innerSpan" class="style11">Suggest Link</span>
</a></br>
<input name="invoice" type="text" id="invoice" size="15" />
</form>

javascript multi-content opening

Hello I'm having a big problem with this code
<script type="text/javascript">
function opencontent(imgClass){
imgTag = $('.'+imgClass).$('.header').('#showContent').$('img').attr('class');
if(imgTag == 'hiden'){
$(imgTag).val('show');
$('.'+imgClass).$('.body').toggle();
}else{
$(imgTag).val('hiden');
$('.'+imgClass).$('.body').toggle();
}
}
</script>
<div class="login">
<div class="header">
<a id="showContent" onclick="opencontent('login');"><img class="hiden" align="center" src="images/hbullet.png" style="top: -4px; position: relative; left: -7px;" />Login</a>
</div>
<div class="body">
<form method="post" target="_self">
<input name="login_username" placeholder="Username" type="text" />
<input name="login_password" placeholder="Password" type="password" />
<input value="Login" type="submit" style="width: 263px;" />
</form>
</div>
Basically what i want to do with this code is, having an "a" tag, with an image inside it, that on click of "a" tag it change the img class, and open/hides the body class of same time, but I must obligatory have {onclick="opencontent('login');"} code so that i may be able to use this method with the other codes i have equal to this except the code inside the body class.
Any one knows anything that works well with what I want?
Edit~
Ok problem solved this way.
<script type="text/javascript">
function opencontent(imgClass){
var clas = $('.'+imgClass+ '> .header > a > img').attr('class');
if(clas == 'hidden'){
clas.val('show');
$('.'+imgClass+ '> .body').slideToggle();
}else{
clas.val('hide');
$('.'+imgClass+ '> .body').slideToggle();
}
}
</script>

Categories

Resources