text message displays when you click on a button - javascript

I have code that creates a form and when you click on submit it should output the text on the screen. However my code doesn't display the message on the screen, although it quickly shows the text and then hide it.
<div id="form-wrap">
<form>
<fieldset>
<h4>Contact Form:</h4>
<label class="labelone" for="name">Name: </label>
<input name="name"/>
<label for="email">Email: </label>
<input name="email" />
<label for="comments">Comments: </label>
<textarea name="comments"></textarea>
</fieldset>
<fieldset>
<input class= "btn" type="submit" value="Send Email" onclick="myFunction()"/>
<input class="btn" type="reset" value="Reset Form"/>
</fieldset>
</form>
<p id="jomin">This is a message</p>
</div>
STYLE
<style type="text/css">
#jomin { visibility:hidden;
}
</style>
JAVASCRIPT
<script type="text/javascript">
function myFunction() {
document.getElementById("jomin").style.visibility="visible";
}
</script>

You're not seeing the change because the form is being submitting and the page is reloading.
Change:
<input class= "btn" type="submit" value="Send Email" onclick="myFunction()"/>
to
<input class= "btn" type="submit" value="Send Email" onclick="return myFunction()"/>
And also change
function myFunction() {
document.getElementById("jomin").style.visibility="visible";
}
to
function myFunction() {
document.getElementById("jomin").style.visibility="visible";
return false;
}
jsFiddle example

Related

passing input details from one page to another page textarea

Myself I am beginner and at learning stage. I would like to pass input details from one page (test1.html) to next page textarea (test2.html). attaching both html files.
test1.html(first page)
<html>
<body>
<form method="post" action="test2.html">
<label><b>Customer Name</b></label>
<input type="text" placeholder="Enter Customer Name" name="cname" id="cname" required>
<script>
function () {
localStorage.setItem('mySharedData1', document.getElementById('cname').value);
}
</script>
<button type="submit" name='submit' id='submit'>Submit</button>
<input type="checkbox" checked="checked"> Remember me
</body>
</html>
test2.html(second page)
<html>
<body>
<form method="get" action="test1.html">
<fieldset class="fieldset-auto-width">
<legend><b><font color="#0000FF">Your Bookings Are..!</font color></b></legend>
<textarea cols="35" rows="19" id="Requirement1" ></textarea>
<script type="text/javascript">
var mySharedData = localStorage.getItem('mySharedData1');
function(){
Requirement1.value =Requirement1.value+document.getElementById('mySharedData1').innerHTML+this.value+", ";
}
</script>
</fieldset>
</form>
</body>
</html>
function(){
Requirement1.value =Requirement1.value+document.getElementById('mySharedData1').innerHTML+this.value+", ";
}
This should be:
function getValue() {
var value = localStorage.getItem('mySharedData1');
document.getElementById('Requirement1').innerHTML = value;
}
You have to give a name to the function in both html pages, and actually use the onclick attribute of your button Submit. I wrote on one page only
<html>
<body>
<form method="post" action="test2.html">
<label><b>Customer Name</b></label>
<input type="text" placeholder="Enter Customer Name" name="cname" id="cname" required>
<script>
function giveMeOneName() {
localStorage.setItem('mySharedData1', document.getElementById('cname').value);
}
</script>
<button type="submit" name='submit' id='submit' onclick="giveMeOneName()">
Submit
</button>
<input type="checkbox" checked="checked"> Remember me
</body>
</html>
You need to create a function and invoke that function on click submit.
<form>
<label>
<b>Customer Name</b>
</label>
<input type="text" placeholder="Enter Customer Name" name="cname" id="cname" required>
<script>
function setValue() {
localStorage.setItem('mySharedData1', document.getElementById('cname').value);
}
</script>
<button type="submit" name='submit' id='submit' onClick="setValue()">Submit</button>
<input type="checkbox" checked="checked"> Remember me

required field not working inside div

I Am trying to implement default required field into HTML5 form but it is not working if I have it inside a div.
Not working code:
<form>
<div class="form-phone">
<label for="phone" id="lphone">Phone no:</label><br>
<input type="number" id="phone" name="phone" placeholder="Phone-Number" required/><br>
</div>
<div id="confirmDetails">
<input id="submitbtn" type="submit" value="Call Me!" />
</div>
</form>
Working code:
$('#confirmDetails').on('click', 'input', function(e) {
alert(test);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="form-phone">
<label for="phone" id="lphone">Phone no:</label><br>
<input type="number" id="phone" name="phone" placeholder="Phone-Number" required/><br>
</div>
<input id="submitbtn" type="submit" value="Call Me!" />
</form>
Add an id to the form:
<form id="myForm">
<div class="form-phone">
<label for="phone" id="lphone">Phone no:</label><br>
<input type="number" id="phone" name="phone" placeholder="Phone-Number" required/><br>
</div>
<div id="confirmDetails">
<input id="submitbtn" type="submit" value="Call Me!" />
</div>
</form>
And listen for the event "submit" of the form:
$('#myForm').on('submit',function (e) {
alert(test);
})
This way you leave the navigator to make the validation. And don't forget to add validation on the server side
Hope this helps
You have wrong logic with js.
Add click event to the submit button, not the div
use this
$('#submitbtn').on('click', 'input',function (e) {
alert(test);
})

Two forms with submit buttons two different functions. One button to run a javascript

Form1 has the action to link to an external .aspx file. But once I added Form2 and the javascript file, contact-us/js/app.js, to the page. The javascript now controlls both form submit buttons. How do I link the javascript file to only run when Form2 button is submitted?
Form1
<div id="guestLogin">
<form id="frmguestlogin" name="frmguestlogin" method="post" action="AutoLogin.aspx" >
<input type="hidden" name="username" class="text" id="username" onfocus="this.value='';" tabindex="30" value="guest" />
<input type="hidden" name="password" class="text" id="password" onfocus="this.value='';" tabindex="40" value="guest" />
<input type="submit" width="80" height="20" border="0" name="submit" id="submit" value="Guest Login" tabindex="50" />
</form>
</div>
Form2 code. The last script is controlling both submit buttons on the page. How do I only have it control Form2 submit button?
Form2
<div id="form-wrapper">
<div class="inner cover">
<form class="form-signin" id="form-signin" >
<h4 class="sendMsg">Send us a message</h4>
<input type="text" id="first" class="form-control" placeholder="First Name" required>
<input type="text" id="last" class="form-control" placeholder="Last Name" required >
<input type="text" id="company" class="form-control" placeholder="Company" required >
<input type="text" id="phone" class="form-control" placeholder="Phone" required >
<input type="email" id="email" class="form-control" placeholder="Email" required >
<p> Tell us how we can help you</p>
<textarea id="comments" style="font-family: Arial, Helvetica, sans-serif" class="form-control" cols="45" rows="5" required ></textarea>
<button class="btn btn-lg btn-primary btn-block" type="submit">Send Your Message</button>
<input id="subject" name="subject" type="hidden" value="Contact Us" />
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="contact-us/js/bootstrap.min.js"></script>
<script src="contact-us/js/ie10-viewport-bug-workaround.js"></script>
<script src="contact-us/js/app.js"></script>
app.js code to control form2 only:
$(document).ready(function() {
$("form").submit(function(e) {
e.preventDefault();
//Submit Form
var first = $("input#first").val();
var last = $("input#last").val();
var company = $("input#company").val();
var phone = $("input#phone").val();
var email = $("input#email").val();
var comments = $("textarea#comments").val();
var subject = $("input#subject").val();
$.ajax({
type: "POST",
url: "contact-us.asp",
data: { first : first,
last : last,
company : company,
phone : phone,
email : email,
comments : comments,
subject : subject },
cache : false,
contentType:"application/x-www-form-urlencoded; charset=UTF-8",
success: function() {
$('.form-signin').hide();
$('.cover').fadeIn('slow').html('<h2>Thank You, '+first+' '+last+'</h2>');
}
});
});
});
To route it with a certain script (without a form submit) I would use a normal button type.
<input type="button" value="Submit" onclick="myFunction()">
The onclick calls the JavaScript function that contains what you want it to do.
Edited - Added notes:
Also this calls just a form in general
$("form").submit
It doesn't specify what form it is, use an ID to find the 2nd form
Code:
$(document).ready(function(){
$("#form2").submit(function(){
alert("Submitted");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Form 1</h1>
Form one goes to aspx.
<form action="AutoLogin.aspx">
First name: <input type="text" name="FirstName"><br>
Last name: <input type="text" name="LastName"><br>
<input type="submit" value="Submit">
</form>
<h1>Form 2</h1>
Form two goes to the JQuery based off of the form ID (this works with external files as well)
<form id="form2">
First name: <input type="text" name="FirstName"><br>
Last name: <input type="text" name="LastName"><br>
<input type="submit" value="Submit">
</form>

jQuery: How to get the object of the form who's submit button was clicked?

I've multiple forms in my html based web page. I have a 'Submit' button on each of the form. Whenever I fill a form and click on it's submit button, I want to know which form was submitted. Means, upon pressing a submit button I want to know the details of the associated form (all forms have the similar button).
Stuff like getting the entire form object or id or name of the submitted form will also work.
My JQuery code is :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$( "form" ).submit(function () {
var val = $("input[type=submit][clicked=true]").val();
(1) console.log(val);
});
$("form input[type=submit]").click(function() {
$("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
});
</script>
My html code containing the forms is:
<!-- This is form number 1 -->
<form align="center" class="nav nav-list" id="myFormCS" method="POST" action="#" > <!-- <- I want this info -->
<p> <input type="hidden" name="productid" value="4"> </p>
<p> <input type="hidden" name="version" value="1"> </p>
<p> <input id="field_email" type="email" placeholder="Enter email address" name="eml1" required></p>
<p> <input id="field_pwd1" type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" placeholder="Enter password" name="pwd1" required> </p>
<div class="pricing-footer">
<input class="btn-submit-modal" type="submit" value="Free"> **<-- (1) is getting me this info**
<input class="btn-modal" type="button" onclick="closeRegistration()" value="Close">
</div>
</form>
<!-- This is form number 2 -->
<form align="center" class="nav nav-list" id="myFormGE" method="POST" action="#" >
<p> <input type="hidden" name="productid" value="14"> </p>
<p> <input type="hidden" name="version" value="1"> </p>
<p> <input id="field_username" type="text" placeholder="Enter user name" name="usrnm" required></p>
<p> <input id="field_pwd1" type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" placeholder="Enter password" name="pwd1" required> </p>
<div class="pricing-footer">
<input class="btn-submit-modal" type="submit" value="Register">
<input class="btn-modal" type="button" onclick="closeRegistration()" value="Close">
</div>
</form>
<!-- This is form number 3 -->
<form align="center" class="nav nav-list" id="myFormVI" method="POST" action="#" >
<p> <input type="hidden" name="productid" value="7"> </p>
<p> <input type="hidden" name="version" value="2"> </p>
<p> <input id="field_city" type="text" placeholder="Enter city name" name="city1" required></p>
<p> <input id="field_phone" type="text" placeholder="Enter phone number" name="phn1" required> </p>
<div class="pricing-footer">
<input class="btn-submit-modal" type="submit" value="Buy now">
<input class="btn-modal" type="button" onclick="closeRegistration()" value="Close">
</div>
</form>
Something like this?
$("form input[type=submit]").click(function() {
var frmID = $(this).closest('form').attr('id');
alert(frmID);
});
jsFiddle
You can use a submit listener for the form and get the object. Something like this:
$("form").submit(function (e) {
e.preventDefault();
var form = $(this);
console.log(form);
});
That form object is what I think you are looking for.

Make CSS popup dissapeer when blanket is clicked (Example: Facebook Photo's)

i have a css popup div that when it loads through the onClick it also brings up a blanket of transparency kind of like how Facebook does when you look at photos
How do i get that popup div to close when i click on the blanket?
Heres the code
'
<center><div id="blanket" style="display:none;">
</div>
<table width="1000" border="0">
<tr>
<td>
<div id="mainAdminCP">
<div class="editRecipe" >
<h2>Edit Recipe</h2>
</div>
<div id="popUpAdminEditRecipe" style="display:none;" align="center">
<br />
<br />
<form id="editRecipe">
<fieldset id="inputs">
<input id="username" type="text" placeholder="Please insert the name of the recipe" autofocus required>
<br />
<br />
<input id="add" type="text" placeholder="Recipe Name" required>
<input id="add" type="text" placeholder="Recipe Ingredients" required>
<input id="add" type="text" placeholder="Recipe Instructions" required>
<input id="add" type="text" placeholder="Recipe Image" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" value="Save Changes">
<input type="submit" id="submit" onClick="popup('popUpAdminEditRecipe')" value="Close">
</fieldset>
</form>
</div>
<div class="editCoins">
<h2>Edit Coins</h2>
</div>
<div id="popUpAdminEditCoins" style="display:none;" align="center">
<br />
<br />
<form id="login">
<fieldset id="inputs">
<input id="username" type="text" placeholder="Please insert the Username of the User" autofocus required>
<input id="add" type="text" placeholder="Add Coins" required>
<input id="add" type="text" placeholder="Subtract Coins" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" value="Submit">
<input type="submit" id="submit" onClick="popup('popUpAdminEditCoins')" value="Close">
</fieldset>
'
And heres the link to the page itself to get a clear example of what im looking for.
http://teknologenie.com/fruitforest/admincp.php
Ive tried placing the
<a href="#" onClick="popup('popUpAdminEditUser')" > </a>
Within the blanket div, and nothing. Just kind of screws everything up.
Edit:
Also if you visit the link, and click the text, the whole div doesnt get directly in the middle of the screen and i need it to be. Any solutions?
Instead of putting an link inside the blanket div, pup an onclick function on the blanket div itself:
<div id="blanket" onclick="closePopup()" style="height: 681px; display: block;"></div>
The function closePopup should then set display none to the popup and the blanket:
function closePopup() {
document.getElementById('blanket').style.display = 'none';
document.getElementById('popUpAdminEditCoins').style.display = 'none';
}
I've written you an example here: http://jsfiddle.net/KXK6E/2/
You'd be much better off binding events within the javascript rather than within the HTML.
document.getElementById("blanket").onclick = function(e){
document.getElementById("popup").style.display = "none";
e.target.style.display = "none";
};
document.getElementById("trigger").onclick = function(){
document.getElementById("blanket").style.display = "block";
document.getElementById("popup").style.display = "block";
}
​

Categories

Resources