Develop Reference

How to access the hidden values in JSP using plan HTML

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>

.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/

Show loading gif after clicking form submit using jQuery

I'm trying to simply show a loading gif once the form is submitted. My code is not working correctly for the loading gif to show. You'll see my image for the gif is set to visibility: hidden.
<script src="js/jquery-1.11.1.min.js"></script>
<div class="" style="width: 480px; margin: 0 auto; margin-top: 20px;" id="form_wrapper">
<img src="img/loader.gif" id="gif" style="display: block; margin: 0 auto; width: 100px; visibility: hidden;">
<div class="fade" id="form">
<form action="process_login.php" method="POST" name="simplelogin" id="login_form"><br />
<label for="username"> Username:</label>
<input type="username" name="username" id="username" size="30" required><br><br>
<label for="password"> Password:</label>
<input type="password" name="password" id="password" size="30" required><br><br>
<input class="load_button" type="submit" name="submit" id="submit" value="Submit" placeholder="Submit">
</form>
</div>
</div>
<div class="fifty"></div>
<script type="text/javascript">
$('.load_button').submit(function() {
$('#gif').show();
return true;
});
</script>

The show() method only affects the display CSS setting. If you want to set the visibility you need to do it directly. Also, the .load_button element is a button and does not raise a submit event. You would need to change your selector to the form for that to work:
$('#login_form').submit(function() {
$('#gif').css('visibility', 'visible');
});
Also note that return true; is redundant in your logic, so it can be removed.

Button inputs don't have a submit event. Try attaching the event handler to the form instead:
<script type="text/javascript">
$('#login_form').submit(function() {
$('#gif').show();
return true;
});
</script>

Better and clean example using JS only
Reference: TheDeveloperBlog.com
Step 1 - Create your java script and place it in your HTML page.
<script type="text/javascript">
function ShowLoading(e) {
var div = document.createElement('div');
var img = document.createElement('img');
img.src = 'loading_bar.GIF';
div.innerHTML = "Loading...<br />";
div.style.cssText = 'position: fixed; top: 5%; left: 40%; z-index: 5000; width: 422px; text-align: center; background: #EDDBB0; border: 1px solid #000';
div.appendChild(img);
document.body.appendChild(div);
return true;
// These 2 lines cancel form submission, so only use if needed.
//window.event.cancelBubble = true;
//e.stopPropagation();
}
</script>
in your form call the java script function on submit event.
<form runat="server" onsubmit="ShowLoading()">
</form>
Soon after you submit the form, it will show you the loading image.

What about an onclick function:
<form id="form">
<input type="text" name="firstInput">
<button type="button" name="namebutton"
onClick="$('#gif').css('visibility', 'visible');
$('#form').submit();">
</form>
Of course you can put this in a function and then trigger it with an onClick

Appending to div and being unable to bind the added buttons

I have a php function that echos code of a form that has a button. when that button is click it will append a file field and a another button that if clicked would repeat the above. however when the added button is clicked nothing happened.
I am thinking it has something to do with binding the button.
Here is the code:
$formtoreturn = '
<div class="form_holder">
<form action="'.site_url().'xxxxx" method="post" enctype="multipart/form-data" >
<div id="fields_holder">
<span class="form_holder-label" id="fileC">Select image or images</span>
<div class="fields" id="field1">
<input type="file" name="fileID-input[]" id="fileID-input" class="fileC-input">
<a rel="add" id="add_file1" class="add_file" href="javascript:;"><img src="wp-content/plugins/wl_extendor_wishlist/images/add-icon.png"></a>
</div>
</div>
<div class="clear"></div>
<input type="hidden" value="'.$u_id.'" name="user_id" id="user_id">
<input type="submit" name="submittestimonial" value="Submit Testimonial">
</form>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</div>
<script>
var filecount = 1;
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j(\'#fields_holder\').on(\'click\', \'.add_file\', function() {
var toappend = \'<div class="fields" id="field1"><input type="file" name="fileID-input[]" id="fileID-input" class="fileC-input"><a rel="add" id="add_file1" class="add_file" href="javascript:;"><img src="wp-content/plugins/wl_extendor_wishlist/images/add-icon.png"></a></div>\';
if($j(this).attr("rel") == "add"){
$j(this).attr("rel", "ded");
$j("#fields_holder").append(toappend);
filecount++;
}
});
});
</script>
';
echo $formtoreturn;
Hope the code and my question is clear.
Thanks in advanced.

I would suggest you to change your JavaScript code from
$j('#fields_holder').on('click', '.add_file', function() {
// ...
});
to
$j(document).on('click', '#fields_holder .add_file', function() {
// ...
});
Then the event will bubble up and handled in click handler of a document.
UPDATE
Though I've made a test and it's working well for me in both variants.