I have the following html form...
<form id="mform" method="get" enctype="text/plain">
<input name="firstname" type="text" id="firstname">
<input type="submit" class="submit-sponsor-btn" name="submit" value="Submit" onclick="javascript:doMailto(); return false;" id="submit">
</form>
and my javascript looks like this...
var msubject = "Become an sponsor to start your connection to future talent";
var mfirstname = $('#firstname').val();
var mbody = "<h1>Sponsor Information Below:</h1><p>Firstname:"+mfirstname + "</p>";
var sMailto = "mailto:memail#something.com?subject="+ msubject + "&body="+ mbody;
function doMailto() {
window.open(sMailto);
}
What do I need to do with this code, to enable HTML tags to be rendered within the e-mail?
Because as of right now, it simply shows the element tags along with the content.
Thanks for any advice!
You can set the Mail Content Mime-type to be HTML, the page will be rendered. This would work only if the content is generated from server-side.
Related
I'm just trying to make a simple javascript form where everytime you type and submit something, it shows up in the page.
<form id="myForm">
<input id="text" type="text" name="name" value="">
<input id="submit" type="submit">
</form>
javascript:
document.getElementById("myForm").addEventListener('submit', function(){
var input = document.getElementById("text")
var output = input.value;
var printOutput = document.createElement('h1');
printOutput.innerHTML = output;
document.body.appendChild(printOutput);
});
This shows up for a second then disappears. I understand it's happening because the dom manipulation is happening inside the submit event. But I'm not sure how to go around that.
My first instinct was to use
return output;
then reference the whole function once I appendChild from outside it. But that didn't work either. I'm guessing cause It's an Eventlistener and not a normal function... any ideas on how to go with this?
You are ignoring the form primordial sense that is to send data over a server.
You don't need aform for what you intend. you need only input elements and a handler on the button.
function handler (){
var input = document.getElementById("text")
var output = input.value;
var printOutput = document.createElement('h1');
printOutput.innerHTML = output;
document.body.appendChild(printOutput);
document.getElementById("text").value='';
}
document.getElementById("submit").addEventListener('click', handler);
document.getElementById("text").addEventListener('keypress', function(e){ (e.charCode == 13) && handler();});
<div id="myForm">
<input id="text" type="text" name="name" value="">
<input id="submit" type="submit">
</div>
Add return false; at the end of the event listener. This stops the submit from actually happening which refreshes the page
Try this instead:
document.getElementById("myForm").addEventListener('submit', function(event){
event.preventDefault();
var input = document.getElementById("text")
var output = input.value;
var printOutput = document.createElement('h1');
printOutput.innerHTML = output;
document.body.appendChild(printOutput);
});
the simplest way of getting input and display on the same page is
function display()
{
var input=document.getElementById("text").value;
document.getElementById("display").innerHTML=input;
}
<form id="myForm">
<input id="text" type="text" name="name" value="">
<input id="submit" type="button" onclick=display() value="submit">
<div id="display"></div>
</form>
if you want to display multiple inputs i.e. each input entered by the user.
document.getElementById("display").innerHTML += input+"<br>";
Note: Always try to write easiest and shortest code for the optimized result.
yes it behaves how it should. it's form and what it does it submits all information to new page. you didn't provide action='' parameter and means it sends information on same page. when you click submit what happens is first you append h1 element and then it reloads, that's why it disappears. if you don't have other page to submit information get rid of forms.
<input id="text" type="text" name="name" value="">
<input id="submit" onclick='return getoutup();' type="submit">
<h1 id='output'></h1>
<script type="text/javascript">
function getoutup(){
document.getElementById('output').innerText=document.getElementById('text').value;
return false;
}
</script>
so you see that i have pre-created h1 tag, so you don't need much coding to append as function goes. just pre create with value of none and then change with one line of code. hope it helps. maybe it's not correct answer kind of changed your way.
<form action="formoneaction" method="post">
<input type="text" id="t1" />
<button type="sumbit" class="btn">Insert</button>
</form>
<form action="formtwoaction" method="post">
<input type="text" id="t2" />
<button type="sumbit" class="btn">Insert</button>
</form>
<script>
var t1 = document.getElementById('t1');
t1.onkeyup = t1.onchange = function() {
document.getElementById('t2').value = this.value;
};
</script>
How can I get the script to work when the two elements are in separate forms? The script works when none of them are in forms.
I've never learned JS before so I may not understand very well when someone explains a bunch of jargon. Sorry but I'll try my best!
Try out below Code, which copies data from textbox to TextArea:
$("#textArea").append("\n * " + $("#textBox").val());
Working Demo
I would like to add forms to a reveal.js presentation using JSON.
Here is the form embedded in one of the reveal slides:
<section>
<form action="#">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
<button type="submit">Submit</button>
</section>
I also added this PHP script to the top of the file:
<?php
if(isset($_POST['submit'])){
$file = "data.json";
json_string = json_encode($_POST,JSON_PRETTY_PRINT);
file_put_contents($file, $json_string,FILE_APPEND);
}
?>
I believe the file should be run in as .php extension to properly execute the PHP script which sends the user input to the server, however, I get a white screen when when running revealjs as a .php extension.
Has anyone successfully embedded forms in their revealjs presentation?
Thanks!
Yes I add form to reveal.js, but I work with javascript, no php.
You can try it here: http://jsfiddle.net/B9r22/20/
<h2>Form</h2>
<section>
<form action="#">
First name: <input type="text" name="firstname" data-name="firstname"/><br/>
Last name: <input type="text" name="lastname" data-name="lastname"/><br/>
<button type="submit">Submit</button>
</section>
<h2>JSON</h2>
<p id="json"></p>
$(function() {
$('body').on('submit','form',function() {
var answers = [];
$('input[type="text"]', this).each(function(){
answers.push({'name':$(this).data('name'), 'value':this.value});
});
var data = {
'answers': answers
};
json = JSON.stringify(data);
$('#json').append(json);
return false;
});
});
I am a newbie to javascript, I am making a simple script which will show appended link with the data entered in input field, Basically it should get the data from input field and generate link with data being submitted in input field.
Similar to the example below
Input: tony#mail.com ...> after clicking Send button
processing....
Output link: www.domain.com/route.php?email=tony#mail.com
I found this code similar to mine but it wont works like i am looking for.
<p>Enter your email or User ID
<input type="text" name="foo" id="foosite" value="" />
<a href="#"
onclick="this.href = ('http://' + document.getElementById('foosite').value + 'www.domain.com/route.php?email=')"
target="_blank">send</a>
Is that possible in javascript to make a script like this which will generate output without reloading the page?
You have the getelement in the wrong place. It should be like this if you want to do it that way.
<input type="text" name="foo" id="foosite1" value="" />
send
<input type="text" name="foo" id="foosite2" value="" />
send
http://jsfiddle.net/bowenac/J2Mc5/3/
Split your JS logic from your HTML
HTML
<p>Enter your email or User ID
<input type="text" name="foo" id="foosite" value="" />
</p>
send
<div id="url_value"></div>
JS
var a = document.getElementById('link')
a.onclick = function(e){
e.preventDefault();
var value = document.getElementById('foosite').value;
var route = "http://www.domain.com/route.php?email=" + value + ', ';
var data = "http://www.domain.com/data.php?email=" + value + ', ';
var form = "http://www.domain.com/form.php?email=" + value;
document.getElementById('url_value').innerHTML = route + data + form
}
DEMO
You can add form to your html code and send data to server using form submit, in this case you can change the action of the form before submit to custom link.
<form name="form1" action="" onSubmit="onsubmit(this)">
<p>
Enter your email or User ID
<input type="text" name="foo" id="foosite" value="" />
<input type="submit" value="send" />
</p>
</form>
<script>
function onsubmit(form)
{
//change the action of the form to your link.
form.submit();
}
</script>
i am trying to write a simple textbox (for people to type url in it) with a button in html.
when the button is clicked, it will send the url of the current website that I am browsing to the url that is listed in the textbox using the POST method. is it possible?
i have been looking on forums but don't really know which is the right one cos it seems that there are various way of doing it and i don't really know how to edit them.
my current code:
<html>
<head>
<title>YouTube</title>
<script type="javascript/text">
function handleButtonEnterClick(tab) {
//TODO:
var textbox_url = document.getElementById("url_textbox");
var textbox_value = textbox_url.value; //eg. value = "www.google.com"
//Need to have a POST method written here to send the url of the current
//webpage for example www.youtube.com to url listed in the textbox,
//for example www.google.com
//May I know how can I do it? Thanks.
}
</script>
</head>
<body>
<div id ="container">
<p>Enter URL:</p>
<input type="text" id="url_textbox" name="url_textbox" />
<input type="button" id="button_enter" name="button_enter"
value="enter" onclick="handleButtonEnter" />
</div>
</body>
</html>
What you need is a <form> element, which a) has action attribute to indicate where to send the data; b) on submit sends the data (I've added an extra <input type='hidden'> to store your current pages url for sending).
<script type="javascript/text">
function handleButtonEnterClick() {
var textbox_value = document.getElementById("url_textbox").value;
document.getElementById('myUrl').value = window.location;
var form = document.getElementById('myForm');
form.action = textbox_value;
form.submit();
}
</script>
<div id="container">
<form action="" method="post" id="myForm">
<p>Enter URL:</p>
<input type="hidden" id="myUrl" name="url" />
<input type="text" id="url_textbox" name="url_textbox" />
<input type="button" id="button_enter" name="button_enter"
value="enter" onclick="handleButtonEnter" />
</form>
</div>
This should work:
<html>
<head>
<title>YouTube</title>
<script type="javascript/text">
function handleButtonEnterClick(tab)
{
var textbox_url = document.getElementById("url_textbox");
var textbox_value = textbox_url.value; //eg. value = "www.google.com"
//Set the form action to the textbox value
var the_form = document.getElementById("the_form");
the_form.setAttribute("action", textbox_value);
//Set the value of the url field to the current url
document.getElementById("url").setAttribute("value", window.location);
the_form.submit();
}
</script>
</head>
<body>
<div id ="container">
<form action="" method="post" id="the_form">
<p>Enter URL:</p>
<input type="hidden" name="url" id="url" />
<input type="text" id="url_textbox" name="url_textbox" />
<input type="button" id="button_enter" name="button_enter"
value="enter" onclick="handleButtonEnter" />
</form>
</div>
</body>
</html>
The current page location is stored in the JavaScript variable "window.location.href" (thats in Chrome, might be different elsewhere).
You also need to set the action of your form to the URL in the textarea. Suggest you put an id tag on the html form element, and use that id tag to set the action property of the form to the contents of the textbox as part part of the buttons onclick handler.
There are two options:
Use a HTML form, as Ant has shown, set the action and method attributes. Add a submit button inside the form (along with your textbox). When you click on the Submit button, your data will get posted.
Use AJAX to post your form if you want to stay in the current page