I have html form where i can enter the data in the form of text . once the submit button iis pressed, should get option to save it as html page. and it should create static html page.
what is the best possible way to do this?
html form cade can be some thing like this.
<form method="post">
<textarea name="name" rows="2" cols="20"> </textarea >
<input type="submit" value="Submit" />
</form>
Check out this library! https://github.com/eligrey/FileSaver.js It allows you to generate files client-side (an html file in this case) and allow the client to download it, without interacting with a server
Here's a solution based loosely on this answer. When you click the button, it opens the entered html in the browser, which the user can save.
Sample HTML:
Get HTML page
Javascript:
var textInput = document.getElementById("textInput");
var getHtml = document.getElementById("getHtml");
getHtml.addEventListener("click", function () {
var htmlBlob = new Blob([textInput.value], {type: "text/html"});
window.location.href = window.URL.createObjectURL(htmlBlob);
});
Here's a jsfiddle version
Related
I have searched Unbounce and Google for documentation, but can't find a way to make this work. Any help is greatly appreciated!
Use case:
I have a test page setup in Unbounce and it would be great when a user lands on the page and submits the form that the value being generated through the script below in the hidden field is added to the current URL upon submission.
It's important that if the user lands on the page from an advertising campaign that the value is added to URL and does not replace it.
Example:
User lands on testpage.com or testpage.com?qs=3134728&pcd=THANKS20&dclid=CNi4wvCv39cCFZdFNwodE_wALA
Unique ID is created with the following JavaScript and added to a hidden field:
<script type="text/javascript">
$(document).ready(function() {
var id = new Date().toISOString().replace(/[-tTzZ:.]/g, '');
$('#lead_id').val(id);
});
</script>
User clicks submit and and is redirected to a thankyou page with the value of the hidden field passed in the URL:
testpage.com/thank-you?lead_id=1234
testpage.com/thankyou?qs=3134728&pcd=THANKS20&dclid=CNi4wvCv39cCFZdFNwodE_wALA&lead_id=1234
I should also mention that I can not edit the html of the form so this would need to happen with JavaScript as Unbounce provides a space to add custom code.
Is the form method get? If it is post it wont append that to the URL for the hidden field.
Your approach seems right however if this is the HTML on page:
<form action="http://example.com" method="get" id="theForm">
<input type="hidden" value="xyz" />
<button type="submit">Send</button>
</form>
You can use some JS code like one of the following to modify this...however you'll want to verify that everything still works as expected:
document.getElementById('theForm').action = "http://another.example.com";
document.getElementById('theForm').method = "get";
I am trying to build a PHP webpage with the following behaviour:
1- A client access the webpage (that contains some buttons);
2- When the webpage is loaded, the PHP script opens a file stored on the server and, based on the information in this file, enables/disables some of the buttons, so that the client can see the webpage with the correct buttons enabled or disabled.
To enable/disable buttons, I know I can use javascript, while to read the file on the server I use PHP as stated above.
How do I put the two things together? Or should I use a PHP code equivalent to the following javascript line:
<script>document.getElementById("button1").disabled = true;</script>
At first I thought that inserting this line in the PHP code was the solution, but then I found out that this can't work for obvious reasons.
Thanks for the help!
Is it correct if I add the following javascript function in the head section of my webpage?
<script>
function enableButtons() {
<?php
if($state=="state1") {
echo 'document.getElementById("button1").disabled = true;';
}
else if($state=="state2") {
echo 'document.getElementById("button2").disabled = true;';
}
?>
}
</script>
I call the enableButtons() function when loading the page by using
<body onload="enableButtons()">
The php code above is just an example, the number of states and buttons is higher, that's why I would like to use this solution.
The common thing to do is to have php read the settings file, and echo the "disabled" attribute on the buttons before sending the output to the user browser. You can get more info about the attribute here here.
You do not need javascript.
Do something like this:
<button type="button" <?php if($state === 'state1') echo 'disabled'; ?>>Button text</button>
Usually you send to the client the buttons already disabled and use js to respond to any event that happens after sending the page, like selecting a combo box value..
You can omit the code, using an if sentence, or hide them using css. First approach is preferred.
Script
<script>
function isValid(f){
if(f.test.value==''){
alert('please enter name');
return false;
}else{
$(".bbutton").html("Processing please wait");
return true;
}
}
</script>
HTML
<form method="post" onsubmit="return isValid(this);">
<input type="hidden" name="te">
<input type="text" name="test">
<div class="bbutton">
<input type="submit" value="send">
</div>
</form>
When you submit the form then it will automatically hide the submit button to avoid pressing again and again, and you can redirect it to other page. May be this idea helpful.
I want to modify the file submitted by user on the client side, before it reaches my server. To modify it I want to use Flash applet that would communicate with JavaScript.
<form action="" method="post" enctype="multipart/form-data">
<input type="file" id="id_file">
<input type="submit" value="Submit">
</form>
Is it possible to do it? If yes, I would appreciate any tips how should it be done :)
Should I convert it to string? Or maybe JS comes with some functions to make such operations easier?
$( "form" ).change(function(x) {
//pass file input to Flash applet
x.preventDefault();
flashApplet.proceed($('#id_file').value);
});
function callback(modified_file) {
// Flash applet has modified the file
// Now submit the form with a new, modified file
$('#id_file').value = modified_file;
trigger_submit();
}
The file can be either a video, an audio or an image.
Don't use a submit button, instead use a normal button disguised to look like a submit button, and then you can check when the button is clicked, do your stuff, then submit the form via javascript by using
document.getElementById("myform").submit();
I would replace your current html with:
<form action="" method="post" enctype="multipart/form-data" id="myform">
<input type="file">
<button id="submit">Submit</button>
</form>
And then js:
document.getElementById('submit').onclick = function() {
//do your flash stuff
};
function callback(){
//here we submit the form
document.getElementById("myform").submit();
// because the file itself has been modified, this is all we need to do.
}
Basically, use a false submit button, to do what you want first.
So, I need to create a redirect system based on a code entered. Currently I have:
<form id="form1" name="form1" method="post" action="">
<pre> <input type="text" name="meow" id="meow" /> <input type="submit" name="submit" id="submit" value="Submit" onclick="javascript:window.location.href('http://foo.exaple.com/bar/' + document.getElementById("meow").value + '.zip')"/>
Basically, I need the above script to download a zip file in foo.example.com/bar/, based on a code entered in text box meow.
When I enter code "ugh" into text box meow and click submit, I want to download the file at http://foo.example.com/bar/ugh.zip
How can I do this?
.href is not a function/method, it is a property which you assign a valid URI string to:
location.href = 'http://foo.exaple.com/bar/' + document.getElementById('meow').value + '.zip';
See MDN: window.location Object
Side-notes: If you don't want to submit the form, use an input type="button" instead of submit then.
Also mixing structure and behavior (HTML and JS) is usually frowned upon in our Web 2.0 times, so:
<input type="button" name="submit" id="submit" value="Submit">
<script>
document.getElementById('submit').onclick = function() {
location.href = 'http://foo.exaple.com/bar/' + document.getElementById('meow').value + '.zip';
};
</script>
This works nicely in all browsers since IE6 as well and you save some headaches such as mixing up quotes inside the markup. =]
It is also easier to maintain and later you can even move your page's JS into a separate .js file for caching and separation of structure and behavior.
On my company's internal ticket tracking website, we have a form that we use to update or note changes in the ticket. When a client updates the ticket, I need to modify a text area, input, and click submit. I want to create a single button that will handle this repetitive task using a chrome extension.
In my extensions content.js script, I have the following which isn't getting the job done.
var blueButtonDom = document.createElement('a');
blueButtonDom.setAttribute('href','#');
blueButtonDom.setAttribute('onClick','clickHandler();return true');
function clickHandler() {
$('textarea[id$="PrivateNotes"]').val('blue');
$('input[id$="BillTime"]').val('1');
$('input[id$="btnSave2"]').click();
}
Any input from you all would be greatly appreciated.
Thanks much,
Joe Chin
jQuery:
$(document).ready(function() {
var $myLink = $('Automagical');
$myLink.click(function() {
$('#PrivateNotes').val('blue')
$('#BillTime').val('1');
$form.submit();
});
$('#myForm').prepend($myLink);
});
html:
<form id="myForm">
<textarea id="PrivateNotes"></textarea>
<input id="BillTime" type="text" />
<input id="btnSave2" type="submit" />
</form>
http://jsfiddle.net/pxfunc/T9bgw/
UPDATED to include $(document).ready()