We Keep Coding

Create HTML text in an HTML form and open up the text in a Javascript alert box

I'm new to coding and need to create HTML text in an HTML form on a page and open up the text in a Javascript alert box. I've tried various code to no success. Here is what I've come up with so far which does not create a pop up alert box:
Here is the HTML and the JS:
Function myfunction1()
{
Let myfun1 = document.getElementById('sec1-input').value;
Alert(myfun1);
}
<div class="form-group">
<label for="sec1-input"><strong>Enter Alert Text: </strong></label>
<input type="text" class="form-control" id="sec1-input">
</div>
<button id="sec1-btn1" type="button" class="btn btn-primary">Alert Me!</button>

I'm not sure what do you want, but I'll show you how to make an alert window exactly as you're asking.
First of all you must consider several mistakes that you are making. JavaScript does not recognize the word Function because it is capitalized. The function keyword must be lowercase.
Here I leave you a referring link with JavaScript reserved words: https://www.w3schools.com/js/js_reserved.asp
On the other hand, I see that you are not using the form tag, which leads to two problems: technical and semantic. Here I leave you another link with reference to forms: https://www.w3schools.com/html/html_forms.asp
Finally, to achieve what you want you need to work with events, especially with the click event. Here I will leave you a reference link and the solution you want:
let button = document.querySelector('#sec1-btn1');
button.addEventListener('click', function(e) {
let val = document.querySelector('#sec1-input').value;
alert(val);
});
<form>
<div class="form-group">
<label for="sec1-input"><strong>Enter Alert Text: </strong></label>
<input type="text" class="form-control" id="sec1-input" />
</div>
<button id="sec1-btn1" type="button" class="btn btn-primary">
Alert Me!
</button>
</form>

You have not called the function anywhere. For it to work you need to use a listener.
<div class="form-group">
<label for="sec1-input"><strong>Enter Alert Text: </strong></label>
<input type="text" class="form-control" id="sec1-input">
</div>
<button onclick="myfunction1()" id="sec1-btn1" type="button" class="btn btn-primary">Alert Me!</button>
<script>
function myfunction1() {
let myfun1 = document.getElementById('sec1-input').value;
alert(myfun1)
}
</script>
I added the onClick listener to button and now it works.

javaScript is case sensitive
function myfunction1()
{
let myfun1 = document.getElementById('sec1-input').value;
alert(myfun1);
}
<div class="form-group">
<label for="sec1-label"><strong>Enter Alert Text: </strong></label>
<input type="text" class="form-control" id="sec1-input">
</div>
<button id="sec1-btn1" type="button" onClick="myfunction1()" class="btn btn-primary">Alert Me!</button>
also IDs of elements should not be the same , to assign same selector , use class and you also need to give your function to your element's event listener

You should not start javascript functions like alert with capital letters.
Put this piece of code instead of your button:
<button id="sec1-btn1" type="button" class="btn btn-primary" onclick="myfunction1()">Alert Me!</button>

How can I call a function multiple times from different buttons?

I am building a quiz page using javascript, and want the user to select from a multiple choice and then hit 'Go' to check their answer. Here is the html for the first question:
<p class="question">What is the name of Joey's bedtime penguin pal?</p>
<div class="radio">
<div>
<input type="radio" class="wrong" name="q1">Maurice
</div>
<div>
<input type="radio" class="wrong" name="q1">Clunkers
</div>
<div>
<input type="radio" class="right" name="q1">Hugsy
</div>
<div class="button">
<button type="button" class="go">Go</button>
</div>
<div>
<img src="images/hugsy.jpg" class="image" style="display: none;"
</div>
I have created a function which is called by the Go button which informs the user if they are right or not. Here is the javascript:
let go = document.querySelector('.go');
let correct = document.querySelector('.right');
let showPic = document.querySelector('img');
let remGo = document.querySelector('button');
let choices = document.querySelector('.radio');
let score = 0;
go.addEventListener('click', checkAnswer);
function checkAnswer() {
if (correct.checked) {
showPic.classList.remove('image');
remGo.remove();
choices.innerHTML = '<h2 style="color: green;">Correct!</h2>';
score++;
} else {
remGo.remove();
choices.innerHTML = '<h2 style="color: red;">Incorrect</h2>';
}
}
This code works the way I want it to but only for the first question. When I try to call the function again by clicking 'Go' on question 2 nothing happens.
Is there a way to call a function multiple times using different buttons?

document.querySelector('.go');
only selects the first matching element.
To select all elements with the .go class you need to use querySelectorAll
Then you'll need to assign your event listener to all elements returned.
Here is a minimal example:
let buttons = document.querySelectorAll('.go');
for (const button of buttons) {
button.addEventListener('click', checkAnswer);
}
function checkAnswer() {
console.log("checkingAnswer...")
}
<div class="button">
<button type="button" class="go">Go</button>
</div>
<div class="button">
<button type="button" class="go">Go</button>
</div>
<div class="button">
<button type="button" class="go">Go</button>
</div>

Thanks to those who helped. I have solved my issue now using jquery. This was the code I used:
$(".container").on("click", "button", function (e) {
var container = $(e.target).closest(".container");
if ($(container).find("input:checked").hasClass("right")) {
$(container).find("img").show();
$(container).find("button").remove();
$(container).find(".radio").html('<h2 style="color: green;">Correct!</h2>');
score++;
} else {
$(container).find(".radio").html('<h2 style="color: red;">Incorrect</h2>');
}
});

Show error message on Submit button if Radio Button is not clicked

I need to show an error message if No Radio Button is selected in the Model Form. I am getting Values into the radio form and now want to show a message that "Please select a Resume first" if no Resume is selected.
Following is the code for Model form in which I am showing the Radio Button:
<div class="modal fade" tabindex="-1" id="ResumeModal" role="dialog" ng-controller="topCtrl">
<div class="modal-dialog modal-sm">
<div class="modal-content ">
#using (Html.BeginForm("ApplyJob", "PostedJob", FormMethod.Post))
{
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
x
</button>
<h4 class="modal-title">Choose Your Resume</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<input type="hidden" name="PostedJobId" id="PostedJobById" value="#Model.PostedJobId" />
<input type="hidden" name="CreatedBy" id="CreatedBy" value="#Model.CreatedBy" />
#foreach (var item in NurseOneStop.WebSite.Models.ApplicationSession.CurrentUser.NurseResumeList)
{
<div class="col-md-12 lstCard">
<input type="hidden" name="CheckedResumeId" id="CheckedResumeId" />
<input type="radio" name="RBCheckedResume" style="height: 15px; width: 18px;" onchange="CheckedResume(#item.ResumeId)" /> <span>#item.ResumeName</span>
</div>
}
</div>
<span style="color:Red">{{msg}}</span>
#*<label id="lblMessage" style="color:red"></label>*#
</div>
</div>
<div class="modal-footer">
<span style="color:Red">{{msg}}</span>
<button id="btnSubmitResume" type="submit" class="btn btn-primary pull-right" ng-click="userAlertResumeSubmit()">
Submit
</button>
</div>
}
</div>
</div>
</div>
Below is the code for JavaScript:
<script type="text/javascript">
$(document).ready(function () {
$("#btnShowModal").click(function (){
$("#ResumeModal").modal('show');
});
});
function CheckedResume(id) {
$('#CheckedResumeId').val(id);
console.log($('#CheckedResumeId').val());
};
</script>

This is how I did it on a website recently. Please note, you should swap out the 'UIKit.notification' for something else if you are not using UIKit already on the website.
$('.btnSubmitResume').submit(function(e){
if ($("input[name=RBCheckedResume]:checked").length === 0) {
e.preventDefault();
UIkit.notification({
message: 'Please check at least one box to continue',
status: 'primary',
pos: 'top-right',
timeout: 5000
});
}
});
Also please note, you should not be using an ID within a for loop like id="CheckedResumeId". This will create multiple ID's of the same type and cause issues for you. I'd advise changing this to a class

ID attribute for an HTML element should be unique. In the code snippet which you've shared, duplicate hidden form elements with ID 'CheckedResumeId' will be created which will pollute the HTML DOM. You can take the element outside of foreach and check the code. Like Below
<input type="hidden" name="CheckedResumeId" id="CheckedResumeId" />
#foreach (var item in NurseOneStop.WebSite.Models.ApplicationSession.CurrentUser.NurseResumeList)
{
<div class="col-md-12 lstCard">
<input type="radio" name="RBCheckedResume" style="height: 15px; width: 18px;" onchange="CheckedResume(#item.ResumeId)" />
<span>#item.ResumeName</span>
</div>
}
Here goes the JS to check if radio button is clicked when executing the onsubmit function.
if($('#CheckedResumeId').val().trim() == "") {
//Give an error message to user saying that the radio button is not clicked.
}

Unable to attach Event to an Submit button in a form

On the following page "https://www.capgemini.com/new-ways-to-accelerate-innovation". there are multiple sections with "Expand" button and when you click on expand button a form gets exposed. the issue here is am not able to attach click event to the "Submit" button.
I have tried using addeventlistener but the event is not getting assigned.
How do I do that, please advise.
https://www.capgemini.com/new-ways-to-accelerate-innovation
Expand Button is in the below code.
<div class="exp_article-header-bg">
<div class="exp_article-header-inner">
<h2 class="exp_article-header-title">TechnoVision 2017</h2>
<div class="exp_article-header-author"></div>
<div class="exp_article-header-lead">
<p>
TechnoVision 2017 gives you a framework to create a new digital story to solve problems and grasp new opportunities. Our 37 technology building blocks will help you to navigate the technology maze and give a clear direction to your business.
</p>
</div>
<div class="exp_article-header-expand">
**
<div class="exp_link exp_link--white exp_link--expand">
<span class="exp_link-label">EXPAND</span>**
<span class="exp_button-arrow exp_button-arrow--down"></span>
</div>
</div>
</div>
</div>
Form gets exposed when you click the above Expand button. The Submit button is in the form as highlighted below.
<form accept-charset="UTF-8" method="post" action="https://go.pardot.com/l/95412/2017-08-09/2tfbfg" class="form" id="pardot-form">
<style type="text/css">
form.form p label {
color: #000000;
}
</style>
<p class="form-field email pd-text required ">
<label class="field-label" for="95412_59459pi_95412_59459">Email Address</label>
<input type="text" name="95412_59459pi_95412_59459" id="95412_59459pi_95412_59459" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 95412, 59459, 44072473);">
</p>
<div id="error_for_95412_59459pi_95412_59459" style="display:none"></div>
<p style="position:absolute; width:190px; left:-9999px; top: -9999px;visibility:hidden;">
<label for="pi_extra_field">Comments</label>
<input type="text" name="pi_extra_field" id="pi_extra_field">
</p>
<!-- forces IE5-8 to correctly submit UTF8 content -->
<input name="_utf8" type="hidden" value="☃">
<p class="submit">
<input type="submit" accesskey="s" value="Submit Now">
</p>
<script type="text/javascript">
//<![CDATA[
var anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") && !anchor.getAttribute("target")) {
anchor.target = "_top";
}
}
//]]>
</script>
<input type="hidden" name="hiddenDependentFields" id="hiddenDependentFields" value="">
</form>

Have CSS display:none; for the element which needs to be expanded. when expand is clicked call a javascript function which checks if the element is hidden , if hidden change the CSS display: block;.
Check the below working code.
<body>
<div class="exp_article-header-bg">
<div class="exp_article-header-inner">
<h2 class="exp_article-header-title">TechnoVision 2017</h2>
<div class="exp_article-header-author"></div>
<div class="exp_article-header-lead"><p>TechnoVision 2017 gives you a framework to create a new digital story to
solve problems and grasp new opportunities. Our 37 technology building blocks will help you to navigate the
technology maze and give a clear direction to your business.</p>
</div>
<div class="exp_article-header-expand">
**
<div class="exp_link exp_link--white exp_link--expand">
<button onclick="myFunction()" class="exp_link-label">EXPAND</button>
**
<span class="exp_button-arrow exp_button-arrow--down" id="expandDiv"
style="color: #000066; background-color: gainsboro;display: none;">I Got Expanded</span></div>
</div>
</div>
</div>
</body>
Javascript function:-
<script>
function myFunction() {
var x = document.getElementById('expandDiv');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
check on plnkr: https://plnkr.co/edit/MWKYxmV6Jk2eId3Owt2u?p=preview

where is ur form opening? if u're usingjquery, just target the form id and do .submit()

You're going to want to use the 'onsubmit' event listener, most likely with a preveninstead of a click event.
document.querySelector("#submit-button").addEventListener("submit", function(event) {
//your stuff here
event.preventDefault();
}, false);

Post button without refreshing page

I'm a newbie in coding and I need your expertise help.
This is my index.php codes
<div class="container">
<div class="row text-center"><h1>Stamford Network</h1></div>
<div class="row">
<div class="col-md-9">
<input type="textarea" name="text" placeholder="What's on your mind?" class="form-control" id="info" />
<input type="button" name="post" value="Post" class="btn btn-primary" id="post" />
</div>
<div class="col-md-3">
<h3>Hello,
<?php echo $_SESSION['username']; ?>
</h3>
<a class="btn btn-primary" href="login.php" role="button" >Logout</a>
</div>
</div>
<div class="row">
<div class="col-md-9">
<h4 id="display"></h4>
</div>
<div class="col-md-3"></div>
</div>
</div>
My .js code which link to the above index.php
window.onload = function() {
var button = document.getElementById("post");
button.addEventListener("click",
function() {
document.getElementById("display");
});
}
Can anyone tell me how create a post and display it without refreshing the page. Simply just click on the Post button then the information should appear below the posting form. While the words in the textarea should be gone when the button is clicked.
Please only show me the javascript way

var button = document.getElementById('post'),
info = document.getElementById('info'),
display = document.getElementById('display');
button.addEventListener('click', function(){
display.innerText = info.value;
info.value = '';
});
If you want the value to be uploaded to server for processing, you will need to add ajax XMLHttpRequest in the event listener.
Learn more about ajax here.

You should do it asynchronously.
First, use the tag to surround the data that you want to post:
<form>
...
</form>
Tutorial about forms:
https://www.w3schools.com/html/html_forms.asp
To post form asynchronously, you can use jquery or js. The simple and quick way is jquery. Here is a link to the documentation:
https://api.jquery.com/jquery.post/
There is an example at the end of the page of the jquery post doc's page, that explains how to use it, and basically do the thing that you wanted.

try this.
<script type="text/javascript">
window.onload = function() {
var button = document.getElementById("post");
button.addEventListener("click",
function() {
//document.getElementById("display");
document.getElementById('display').innerHTML = document.getElementById('info').value;
document.getElementById("info").style.display = "none";
});
}
</script>