Suppose the following html code is present in web page
<td id="tdwords" colspan="2" class="inputWrap">
<label for="words">Search term</label><input type="text" name="words" value="" id="words" title="Search Crystallography Journals Online" />
</td>
How do I replace
id="tdwords"
with
id="tdset"
when a webpage is opened in my visual basic web browser?
You could use javascript I believe.
Example:
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
change_id();
});
function change_id() {
var ids = document.getElementsByClassName('inputwrap'),
i = ids.length;
while(i--) {
ids[i].setAttribute("id", "tdset") ;
}
}
<script>"
Just put this in the Head content and it should happen.
Related
I am building an Asp.Net Core web application using Razor.
The intended audience for this app will be using it on tablets.
Part of the application consists of several pages/forms that will require user signatures.
We could retrieve an image of a user's signature and display that on demand in the web page.
Is it possible to be more interactive and allow users to "sign" the form/page within the browser? Are there any 3rd party control libraries that would support this functionality?
I pretty sure this can be done on native applications, but can I achieve this through Asp.Net Core?
I found signature_pad in github, and it works for me.
You can take a look at the screenshots of my test steps first, and I will add the test code at the bottom.
Test Code
1. signature.cshtml
#*
For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*#
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad#2.3.2/dist/signature_pad.min.js"></script>
<form method="POST">
<p>
<canvas width="500" height="400" id="signature"
style="border:1px solid black"></canvas><br>
<button type="button" id="accept"
class="btn btn-primary">
Accept signature
</button>
<button type="submit" id="save"
class="btn btn-primary">
Save
</button><br>
<img width="500" height="400" id="savetarget"
style="border:1px solid black"><br>
<input id="SignatureDataUrl" type="text">
</p>
</form>
<script>
$(function () {
var canvas = document.querySelector('#signature');
var pad = new SignaturePad(canvas);
$('#accept').click(function () {
var data = pad.toDataURL();
$('#savetarget').attr('src', data);
$('#SignatureDataUrl').val(data);
pad.off();
});
$('#save').click(function () {
$.ajax({
url: "/ForTest/get_signature",
type: "POST",
data: { base64png:$('#SignatureDataUrl').val()},
success: function (data) {
console.log("success");
},
error: function (hata, ajaxoptions, throwerror) {
alert("failed");
}
});
});
});
</script>
2. C# code
[HttpPost]
public string get_signature(string base64png) {
var dataUri = base64png;//"data:image/png;base64,iVBORw0K...";
var encodedImage = dataUri.Split(',')[1];
var decodedImage = Convert.FromBase64String(encodedImage);
System.IO.File.WriteAllBytes("signature_pic/"+DateTime.Now.ToString("yyyyMMddHHmmss")+"signature.png", decodedImage);
return "ok";
}
Tips
If you want test my code, you need create signature_pic folder like me.
I currently have autocomplete functionality on the results page using Google custom search, but how can I see autocomplete display in a separate custom search box?
<script type="text/javascript">
$(document).ready(function () {
$("#googleCseSearchTextBox").keypress(function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) { //Enter keycode
googleCseSubmit();
return false;
}
});
$("#googleCseSearchButton").click(googleCseSubmit);
});
function googleCseSubmit() {
window.location.href = "my site and key" + $('<div/>').text($("#googleCseSearchTextBox").val()).html();
};
</script>
Custom search box:
<div>
<fieldset class="sfsearchBox">
<input name="googleCseSearchTextBox" type="text" id="googleCseSearchTextBox" class="sfsearchTxt" />
<input type="button" value="Search" id="googleCseSearchButton" class="sfsearchSubmit" />
</fieldset>
</div>
Thanks
Insert this code on the your first page for autocompletion. Don't forget to add your own google id below.
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1');
google.setOnLoadCallback(function(){
google.search.CustomSearchControl.attachAutoCompletion(
'your-google-search-id',
document.getElementById('search-field'),
'search-form');
});
</script>
<!-- example search form -->
<form id="search-form" action="/search">
<input id="search-field" name="search-field" type="text" />
<input type="submit" value="Search" />
</form>
Also check here for more reference
https://developers.google.com/web-search/docs/
I want to add a dropzone inside an existing form but it doesn't seem to work.
When I view the console I get error throw new Error("No URL provided"). When I click upload I get no preview either - all I get is a normal file input.
<link href="../dropzone.css" rel="stylesheet">
<form action="/" enctype="multipart/form-data" method="POST">
<input type="text" id ="Username" name ="Username" />
<div class="dropzone" id="my-dropzone" name="mainFileUploader">
<div class="fallback">
<input name="file" type="file" />
</div>
</div>
<div>
<button type="submit" id="submit"> upload </button>
</div>
</form>
<script src="../jquery.min.js"></script>
<script src="../dropzone.js"></script>
<script>
$("my-dropzone").dropzone({
url: "/file/upload",
paramName: "file"
});
</script>
No url provided error is because $("my-dropzone") is wrong instead it must be $('#mydropzone')
dropzone along with other form, yes this is very much possible, you have to post the data using the URL provided in the dropzone not in the form action. That means all your form data along with the files uploaded shall be posted back to the url provided for the dropzone. A simple untested solution is as below;
<link href="../dropzone.css" rel="stylesheet">
<form action="/" enctype="multipart/form-data" method="POST">
<input type="text" id ="Username" name ="Username" />
<div class="dropzone" id="my-dropzone" name="mainFileUploader">
<div id="previewDiv></div>
<div class="fallback">
<input name="file" type="file" />
</div>
</div>
<div>
<button type="submit" id="submitForm"> upload </button>
</div>
</form>
<script src="../jquery.min.js"></script>
<script src="../dropzone.js"></script>
<script>
$("#mydropzone").dropzone({
url: "/<controller>/action/" ,
autoProcessQueue: false,
uploadMultiple: true, //if you want more than a file to be uploaded
addRemoveLinks:true,
maxFiles: 10,
previewsContainer: '#previewDiv',
init: function () {
var submitButton = document.querySelector("#submitForm");
var wrapperThis = this;
submitButton.addEventListener("click", function () {
wrapperThis.processQueue();
});
this.on("addedfile", function (file) {
// Create the remove button
var removeButton = Dropzone.createElement("<button class="yourclass"> Remove File</button>");
// Listen to the click event
removeButton.addEventListener("click", function (e) {
// Make sure the button click doesn't submit the form:
e.preventDefault();
e.stopPropagation();
// Remove the file preview.
wrapperThis.removeFile(file);
});
file.previewElement.appendChild(removeButton);
});
// Also if you want to post any additional data, you can do it here
this.on('sending', function (data, xhr, formData) {
formData.append("PKId", $("#PKId").val());
});
this.on("maxfilesexceeded", function(file) {
alert('max files exceeded');
// handle max+1 file.
});
}
});
</script>
The script where you initialize dropzone can be inside $document.ready or wrap it as a function and call when you want to initialize it.
Happy coding!!
I use jquery to show hidden form. I want to know how I can automatically show form when user click Submit and then press back button. I don't want user to click New Account again to show form after they click back button.
I have these working code currently:
<head>
<script src="https://code.jquery.com/jquery-latest.js">
</script>
<script type="text/javascript">
$(function() {
$('#register_link').click(function() {
$('#show_form').toggle();
return false;
});
});
</script>
</head>
Google
|
New Account
<div id="show_form" style="display: none;">
<form id="register_form" method="post" action="verify.php">
Username
<inputname="username" id="username" type="text">
<br>
Email
<input name="email" id="email" type="email">
<br>
<input class="button_register" type="submit" value="Create New Account"
/>
</form>
</div>
Example: http://jsfiddle.net/n9uGH/17/
Is it actually possible? Thanks in advance
There are various ways that this could be achieved, however this depends on your server-side language and or hosting environment. Here is a fairly simple widely accepted methodology that should serve your purpose.
This is based on this cookie library for jQuery https://github.com/carhartl/jquery-cookie
Using cookies you can persist the information between the two page loads.
So on your form page you would do something like this
$(function() {
$('#register_link').click(function() {
$('#show_form').toggle();
return false;
});
if($.cookie('form_submitted')){
$('#show_form').toggle();
}
});
Then on the page which appears after submitting the form you can do this
$(function() {
$.cookie('form_submitted', 'yes');
});
I develope a webpart for sharepoint 2010 internet site that uses bxslider. when i use this web part in english pages it works while in arabic it renders the content but it flash and disappear when page load complete.
I use the following code:
<div style="text-align:right;margin-right:6px;height:255px;width:310px;border: 1px #B8B8B8 solid;background-color:#F3F3F4;" >
<div>
<div class="SpotTitle1">آخــر الاخــبار
<img id="go-next15" src="/_catalogs/masterpage/en-us/Preview Images/perv.png" width="20" height="18" align="left" />
<img id="go-prev15" src="/_catalogs/masterpage/en-us/Preview Images/next.png" width="20" height="18" align="left"/>
</div>
<div id="slider15" style="liststyle: none;padding:0 !important;">
<div id="News1" runat="server" class="TitleLink"></div>
<div id="News2" runat="server" class="TitleLink">
</div></div> </div></div>
and on sharepoin masterpage i use:
<script type="text/javascript"> $(function(){
var slider15 = $('#slider15').bxSlider({
controls: false
});
$('#go-prev15').click(function(){
slider15.goToPreviousSlide();
return false;
});
$('#go-next15').click(function(){
slider15.goToNextSlide();
return false;
});
});
</script>
any one have idea about what i can do to let it appear after page load.
perhaps the ( en-us ) in
src="/_catalogs/masterpage/en-us/Preview Images/perv.png"
try put the images in PublishingImages Folder