When I click submit and try to get the text from the textarea, I am getting blank. I don't know why.
function textSubmit() {
var text = $("#noise").val();
console.log(text);
console.log("here");
var htmlText = $(text);
console.log(htmlText);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12">
<form>
<input type="text" id="Title" placeholder="Text Title">
<br>
<br>
<textarea id="noise" name="noise" class="widgEditor nothing"></textarea>
<input type="button" value="Submit" onclick="textSubmit()" />
</form>
</div>
</div>
Any ideas why? I can't figure it out
im using the following text editor http://www.themaninblue.com/experiment/widgEditor/
i ended up using another text editor, https://github.com/tovic/rich-text-editor
thank you for the help.
You're lacking .text() in your code. Take a look:
function textSubmit() {
var text = $("#noise").val();
console.log(text);
console.log("here");
var htmlText = $(text).text();
console.log(htmlText);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12">
<form>
<input type="text" id="Title" placeholder="Text Title">
<br>
<br>
<textarea id="noise" name="noise" class="widgEditor nothing"><strong>sajdhas</strong></textarea>
<input type="button" value="Submit" onclick="textSubmit()" />
</form>
</div>
</div>
Related
I'm new to Javascript and followed a tutorial to make a pop form. The data filled by the user was supposed to appear in the console and that doesn't happen. I would also like to create an alert for when people click on the submit button so I added the last few lines that you'll see in the JavaScipt code, but it's not working as well. Hope that this is detailed enough and that someone can help me.
Here is the HTML
<h1>
I'd love to chat with you about your upcoming project.
</h1>
<div class="intro-text">
Fill out the form bellow to get in touch. Either for a budget information or to book a meeting to discuss
any ideas that you might have, you can contact me for any
clarification you need. I'll get back to you in 2-3 days.
</div>
<div class="row open-form">
<div class="open-btn">
<button id="show-modal"><strong>Open Form</strong></button>
</div>
</div>
<script src="./JavaScript/action_page.js"></script>
<div class="modal modal--hidden">
<div class="modal_content">
<div class="close">
<i class="fas fa-times" onclick="closeMe()"></i>
</div>
<h1>Ask away</h1>
<form id="submit">
<input type="text" placeholder="Name" name="name" />
<input type="email" id="email" placeholder="Email" name="email"/>
<input type="text" placeholder="Subject" name="subject" />
<textarea placeholder="Message" name="message"></textarea>
<button class="submit">Submit</button>
</form>
</div>
</div>
And JavaScript
document.getElementById("show-modal").addEventListener("click", function() {
document.querySelector(".modal").style.display = "flex";
});
function closeMe() {
document.querySelector(".modal").style.display = "none";
}
document.querySelector("#show-modal").addEventListener("submit", event => {
event.preventDefault();
toggleModal();
let formData = new FormData(document.querySelector("#show-modal"));
console.log(
"Name:" + formData.get("name"),
"Email:" + formData.get("email"),
"Subject:" + formData.get("subject"),
"Message:" + formData.get("message")
);
});
document.getElementById("#show-modal").addEventListener("submit", function() {
alert("Thank you for your message!");
});
Here is the page if you want to have a look: https://giacomosorbi.github.io/joanaoli09-module-i/contact.html
Change the code to:
(Removed toggleModal() as there is no defination for it)
document.getElementById("show-modal").addEventListener("click", function() {
document.querySelector(".modal").style.display = "flex";
});
function closeMe() {
document.querySelector(".modal").style.display = "none";
}
document.querySelector("#submit").addEventListener("submit", event => {
event.preventDefault();
let formData = new FormData(document.querySelector("#submit"));
console.log(
"Name:" + formData.get("name"),
"Email:" + formData.get("email"),
"Subject:" + formData.get("subject"),
"Message:" + formData.get("message")
);
alert("Thank you!!!");
});
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
I'd love to chat with you about your upcoming project.
</h1>
<div class="intro-text">
Fill out the form bellow to get in touch. Either for a budget information or to book a meeting to discuss
any ideas that you might have, you can contact me for any
clarification you need. I'll get back to you in 2-3 days.
</div>
<div class="row open-form">
<div class="open-btn">
<button id="show-modal"><strong>Open Form</strong></button>
</div>
</div>
<script src="./JavaScript/action_page.js"></script>
<div class="modal modal--hidden">
<div class="modal_content">
<div class="close">
<i class="fas fa-times" onclick="closeMe()"></i>
</div>
<h1>Ask away</h1>
<form id="submit">
<input type="text" placeholder="Name" name="name" />
<input type="email" id="email" placeholder="Email" name="email"/>
<input type="text" placeholder="Subject" name="subject" />
<textarea placeholder="Message" name="message"></textarea>
<button class="submit">Submit</button>
</form>
</div>
</div>
First of all, move <script> tag on the end of the html document, because you are trying to find elements in html that aren't rendered yet.
As so:
<div class="modal modal--hidden">
<div class="modal_content">
<div class="close">
<i class="fas fa-times" onclick="closeMe()"></i>
</div>
<h1>Ask away</h1>
<form id="submit">
<input type="text" placeholder="Name" name="name" />
<input type="email" id="email" placeholder="Email" name="email"/>
<input type="text" placeholder="Subject" name="subject" />
<textarea placeholder="Message" name="message"></textarea>
<button class="submit">Submit</button>
</form>
</div>
</div>
<script src="./JavaScript/action_page.js"></script>
Second, your addEventListener("submit",... should be on form element, not on modal button-
I have the following 3 inputs: Length, Width, Height.
Using javascript I need to compute the area of a cube, but before that I can't event get the fucntion to work when I press the button "CALCULEAZA". How can I make the "calculeaza" function work?
<div class="col-sm-4">
<div class="row">
<h3>Calculator de Folie</h3>
<form>
Lungime:<br>
<input type="text" name="firstname" id="lungime"><br>
Latime:<br>
<input type="text" name="lastname" id="latime"><br>
Inaltime:<br>
<input type="text" name="lastname" id="inaltime"><br>
<button id="submit" onclick="calculeaza()" style="margin- top:5%;">CALCULEAZA</button>
</form>
</div>
<div class="row container fluid">
<h1 id="value-zone"><span id="value">100</span>m2</h1>
</div>
</div>
<div class="col-sm-4">
<h3>Seminte Demetra CR</h3>
</div>
</div>
</div>
<script>
$(document).ready(function() {
document.getElementById('value-zone').hidden = true;
});
function calculeaza(){
var x = parseFloat(document.getElementById('lungime').value);
var y = x/2;
console.log("aaaaaa");
document.getElementById('value-zone').hidden = false;
}
</script>
I also know that using scripts in the same file is not ok, but I am going to modify it after I undertand how it works. It is my first JS 'thing' I do. Thank you in advance!
Use e.preventDefault() to not redirect on click of submit button. Otherwise the code is running fine.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4">
<div class="row">
<h3>Calculator de Folie</h3>
<form>
Lungime:<br>
<input type="text" name="firstname" id="lungime"><br>
Latime:<br>
<input type="text" name="lastname" id="latime"><br>
Inaltime:<br>
<input type="text" name="lastname" id="inaltime"><br>
<button id="submit" onclick="calculeaza()" style="margin- top:5%;">CALCULEAZA</button>
</form>
</div>
<div class="row container fluid">
<h1 id="value-zone"><span id="value">100</span>m2</h1>
</div>
</div>
<div class="col-sm-4">
<h3>Seminte Demetra CR</h3>
</div>
</div>
</div>
<script>
$(document).ready(function() {
document.getElementById('value-zone').hidden = true;
});
function calculeaza(){
var x = parseFloat(document.getElementById('lungime').value);
var y = x/2;
console.log("aaaaaa");
document.getElementById('value-zone').hidden = false;
}
$("#submit").click((e)=>{e.preventDefault()})
</script>
change your button to:
<button id="submit" type="button" onclick="calculeaza()" style="margin- top:5%;">CALCULEAZA
by default, the button is of type SUBMIT, which will submit the form. You can use javascript to disable the function or simply make a minor change to your button.
Perhaps something like this:
<div class="col-sm-4">
<div class="row">
<h3>Calculator de Folie</h3>
<div class="form-group">
<label class="col-form-label" for="length">length</label>
<input type="number" class="form-control" id="length">
</div>
<div class="form-group">
<label class="col-form-label" for="width">width</label>
<input type="number" class="form-control" id="width">
</div>
<div class="form-group">
<label class="col-form-label" for="height">height</label>
<input type="number" class="form-control" id="height">
</div>
<button onclick="calculeaza()" style="margin-top:5%;">CALCULEAZA</button>
</div>
<div class="row container fluid">
<h1 id="value-zone"><span id="value">100</span>m2</h1>
</div>
</div>
<script>
document.getElementById('value-zone').hidden = true;
// calculates the surface area of a cuboid and updates #value with the answer
function calculeaza() {
var l = parseFloat(document.getElementById('length').value);
var w = parseFloat(document.getElementById('width').value);
var h = parseFloat(document.getElementById('height').value);
if (!isNaN(l) && !isNaN(w) && !isNaN(h)) {
document.getElementById('value-zone').hidden = false;
document.getElementById('value').innerHTML = 2*(l*w + w*h + l*h);
}
}
</script>
Removed the <form> and used bootstrap's "form-groups" instead. No jquery needed for this since it seems you use document.getElementById anyways.
This question already has answers here:
Input text value into a div?
(6 answers)
Closed 4 years ago.
I have an assignment that says :
"After entering the email address in the form, the given email should be showed in this div tag <div class="your-mail"></div>"
The HTML looks like this :
<div class="wrap">
<main>
<h2>Newsletter abonnieren</h2>
<br>
<div>
<a class="help" href="">Need Help?</a><br>
<p class="explanation">...............</p>
</div>
<br>
<form name="subscription" action="test.html" method="post">
<input class="email-abonieren" type="text" name="email" placeholder="Ihre Email"><br>
<input class="submit-button" type="button" value="Newsletter abbonieren">
</form>
<br>
<div class="your-mail"></div>
</main>
</div>
This is what I have so far :
var emailField = document.getElementsByName("email");
var newsletter = document.querySelector('.submit-button');
newsletter.addEventListener('click', function() {});`
Thank you
newsletter.addEventListener('click', function() {
document.querySelector(".your-mail").innerText = emailField[0].value
})
You can use "onkeyup" event for this.
<div class="wrap">
<main>
<h2>Newsletter abonnieren</h2>
<br>
<div>
<a class="help" href="">Need Help?</a><br>
<p class="explanation">...............</p>
</div>
<br>
<form name="subscription" action="test.html" method="post">
<input class="email-abonieren" type="text" name="email" placeholder="Ihre Email" onkeyup="myFunction(this.value)"><br>
<input class="submit-button" type="button" value="Newsletter abbonieren">
</form>
<br>
<div class="your-mail"></div>
</main>
</div>
<script>
function myFunction(value) {
$(".your-mail").text(value);
}
</script>
<div id="wrapper">
<div id="header">
<h1 style="color:#000000"> WELCOME TO TROLL CONTROLL </h1>
</div>
<div id="content">
<textarea name="tmnl" id= "tmnl" cols="50" rows="10" placeholder="Please Share Your Story" > </textarea>
<br/>
<input type="submit" name= "tmnlsubmit" id="tmnlsubmit" />
<script>
var text = $('#tmnl').val();
$('#tmnlsubmit').click(function(){
$('#content').append(
'<div class="post">
</div> ');
$('#content .post').html(<h2> + Post Title + </h2>
<p> + text + </p>);
});
</script>
</div>
</div>
<script
src="http://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
</body>
I would like to be able be able to post the content of the textarea into the "content" div by creating a new div with each post. I tried everything and everytime I press submit nothing happens. Please help!
There are so many issues with your code. Make following changes:
<div id="content">
<textarea name="tmnl" id= "tmnl" cols="50" rows="10" placeholder="Please Share Your Story" > </textarea>
<br/>
<input type="submit" name= "tmnlsubmit" id="tmnlsubmit" />
</div>
</div>
$('#tmnlsubmit').click(function(){
var text = $('#tmnl').val();
$('#content').append('<div class="post"></div>');
$('#content').html('<h2>Post Title</h2><p>'+ text +'</p>');
});
Working Fiddle
All are good. post_Title variable was undeclared. And apply $(.post) is enough to insert html data.better to use $(document).ready(function (){}
$(document).ready(function () {
$('#tmnlsubmit').click(function(){
var Post_Title ="Post Title"
var texts = $('#tmnl').val();
$('#content').append('<div class="post"></div> ');
$('.post').html('<h2>' +Post_Title+' </h2><p> '+ texts +' </p>');
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="header">
<h1 style="color:#000000"> WELCOME TO TROLL CONTROLL </h1>
</div>
<div id="content">
<textarea name="tmnl" id= "tmnl" cols="50" rows="10" placeholder="Please Share Your Story" > </textarea>
<br/>
<input type="submit" name= "tmnlsubmit" id="tmnlsubmit" />
<p class="post"></p>
</div>
</div>
hi please review this code
$('#tmnlsubmit').on('click', function(e) {
var text = $('#tmnl').val();
alert(text);
$('#content').append("<div class='post'></div>");
$('#content .post').html("<h2>Post Title</h2> <p> "+text +" </p>");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="header">
<h1 style="color:#000000"> WELCOME TO TROLL CONTROLL </h1>
</div>
<div id="content">
<textarea name="tmnl" id="tmnl" cols="50" rows="10" placeholder="Please Share Your Story"> </textarea>
<br/>
<input type="submit" name="tmnlsubmit" id="tmnlsubmit" />
</div>
</div>
You have missed some quotes.
To avoid repeat post to all .post use .append(div + h2 + p).
I think you need to .prepend() to show new posts first.
input,textarea{
display:block;
margin:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="header">
<h1 style="color:#000000"> WELCOME TO TROLL CONTROLL </h1>
</div>
<div id="content">
<input id='title' name='title' placeholder='Title' />
<textarea name="tmnl" id="tmnl" cols="50" rows="10" placeholder="Please Share Your Story"></textarea>
<br/>
<input type="submit" name="tmnlsubmit" id="tmnlsubmit" />
<script>
$('#tmnlsubmit').click(function() {
var text = $('#tmnl').val();
var title = $('#title').val();
//use .prepend() instead of append to show new posts first
$('#content').append('<div class="post">' +
'<h2>' + title + '</h2><p>' + text + '</p>' + '</div>');
//clear textarea
$('#tmnl, #title').val("");
});
</script>
</div>
</div>
I have problem when using my ajax form inside the lightbox div .
the form worked outside the lightbox .
after submit the form , I cannot recieve the variable from the form , I see it empty .
I am using lightbox from here:
http://www.aerowebstudio.net/codecanyon/jquery.lightbox/
the html example "
<html>
<head>
<script type="text/javascript">
function send_ajax_data() {
var reg_user = document.getElementById('reg_user').value;
reg_user2 = document.getElementById('reg_user2').value;
reg_pass = document.getElementById('reg_pass').value;
reg_pass2 = document.getElementById('reg_pass2').value;
reg_email = document.getElementById('reg_email').value;
alert(reg_user);
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$('div.lightbox').lightbox();
});
</script>
</head>
<body>
<div id="signup" style="width:756px; margin-right:auto;margin-left:auto;">
<div class="light-box">
<div class="center">
<div class="welcome">
<h1>Hello</h1>
</div>
<div id="reg_stats"></div>
<div class="login-form">
<div class="form-container">
<label class="label">xxx</label>
<input id="reg_user" type="text" />
<label class="label">xxx</label>
<input id="reg_user2" type="text" />
<label class="label">xxx</label>
<input id="reg_email" type="text" />
<label class="label">xxx</label>
<input id="reg_pass" type="text" />
<label class="label">xxx</label>
<input id="reg_pass2" type="text" />
<input type="submit" onclick="send_ajax_data();" class="login-btn" value="Done" />
</div>
</div>
</div>
</div>
</div>
new user
</body>
</html>
Try adding in a form tag?
Without a form wrapping the inputs, there is nothing to submit.