This is my html
<!DOCTYPE HTML>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title</title>
<link rel="stylesheet" href="demo.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.creditCardValidator.js"></script>
<script type="text/javascript" src="demo1.js"></script>
<script type="text/javascript">
$('.tabHeader').click(function () {
$('.demo form').hide().filter($(this).attr('href')).show()
return false;
}).eq(0).click();
</script>
</head>
<div class="demo">
Form A
Form B
<form id="formA">
<h2>Card Payment</h2>
<input type='hidden' id='ccType' name='ccType' />
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
<label for="card_number">Card number</label>
<input type="text" name="card_number" id="card_number">
<div class="vertical">
<label for="expiry_date">Expiry date <small>mm/yy</small>
</label>
<input type="text" name="expiry_date" id="expiry_date" maxlength="5">
<label for="cvv">CVV</label>
<input type="text" name="cvv" id="cvv" maxlength="3">
</div>
<div class="vertical maestro">
<label for="issue_date">Issue date <small>mm/yy</small>
</label>
<input type="text" name="issue_date" id="issue_date" maxlength="5"> <span class="or">or</span>
<label for="issue_number">Issue number</label>
<input type="text" name="issue_number" id="issue_number" maxlength="2">
</div>
<label for="name_on_card">Name On card</label>
<input type="text" name="name_on_card" id="name_on_card">
<input type="submit" value="Pay Now !">
</form>
<form id="formB">Name:
<input type="text" name="name" id="name" value="" />Email:
<input type="text" name="email" id="email" value="" />Comments:
<textarea name="comments" id="comments" cols="25" rows="3"></textarea>
<input type="submit" value="submit" />
</form>
basically has two forms which can be selected using tabs.I have the java script
$('.tabHeader').click(function () {
$('.demo form').hide().filter($(this).attr('href')).show()
return false;
}).eq(0).click();
in the header which does the swapping.but when I implement this html file,both the forms are displayed in the page.
But this is the demo #http://jsfiddle.net/25WDr here its working fine,but this html is not working.The js fiddle demo is done by a user here.but I cant implement it.It showing both form.The mistake is in the html i made..can anyone figure it out
Try to put your javascript code inside a document ready
$(function() {
$('.tabHeader').click(function () {
$('.demo form').hide().filter($(this).attr('href')).show()
return false;
}).eq(0).click();
});
Because in head part all your html is not built yet, So $('.tabHeader') is empty.
You should wait the end of load of your html part in order to manipulate it.
Another solution could be put your script before the </body>
in the demo they are actually hiding the other form while clicking the first
$(function() {
$('<a>FormB</a>').prependTo('.demo').click(function () {
$('.demo form').hide().filter('#formB').show()
}).click();
$('<a>FormA</a>').prependTo('.demo').click(function () {
$('.demo form').hide().filter('#formA').show()
}).click();
});
Related
I am trying to input through a form and when I submit the button, it is not working. Kindly help me with this. I want to display the input taken from the form and display it in the span tags at the bottom.
Below is my HTML and JavaScript:
// Variables are being declared.
var sRecipientName;
var sOrganizationName;
var sDate;
var sURL;
var sHostName;
function submitDetails() {
sRecipientName = document.getElementById("recipient").value;
console.log(sRecipientName);
sOrganizationName = document.getElementById("organization").value;
console.log(sOrganizationName);
sDate = document.getElementById("date").value;
console.log(sDate);
sURL = document.getElementById("URL").value;
console.log(sURL);
sHostName = document.getElementById("host").value;
console.log(sHostName);
}
<section id="pageForm">
<form action="#">
<label for="recipientName">Recipient name:</label>
<input type="text" id="recipient" name="recipientName" placeholder="Enter your Recipient Name" />
<label for="organizationName">Organization name:</label>
<input type="text" id="organization" name="organizationName" placeholder="Enter your Organization Name" />
<label for="eventDate">Event Date:</label>
<input type="text" id="date" name="eventDate" placeholder="Enter your Event Date" />
<label for="websiteURL">URL:</label>
<input type="text" id="URL" name="websiteURL" placeholder="Enter your Website URL" />
<label for="hostName">Host name:</label>
<input type="text" id="host" name="hostName" placeholder="Host Name" />
<input type="submit" value="Submit" onclick="submitDetails()">
</form>
</section>
<article id="placeholderContent">
<span id="recipientName">recipientName</span>!
<br/>
<br/> <span id="organizationName">organizationName</span> <span id="eventDate">eventDate</span> <span id="websiteURL">websiteURL</span>
<br/>
<span id="hostName">hostName</span>
</article>
First of all there is no need of a form for your use-case.
A <form> is required when you have to post some data to server, but in your case you just wanted to do some DOM manipulations which you can do without a form.
I have just written a function updateDetails() which takes the values from your inputs and overwrites your span's innerHTML with those values. On your submit button, I have changed it from a submit to a plain <button>, and on click I have just called the function updateDetails() to update the spans.
I have attached a snippet that will work in your use case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section id="pageForm">
<label for="recipientName">Recipient name:</label>
<input type="text" id="recipient" name="recipientName" placeholder="Enter your Recipient Name" />
<label for="organizationName">Organization name:</label>
<input type="text" id="organization" name="organizationName" placeholder="Enter your Organization Name" />
<label for="eventDate">Event Date:</label>
<input type="text" id="date" name="eventDate" placeholder="Enter your Event Date" />
<label for="websiteURL">URL:</label>
<input type="text" id="URL" name="websiteURL" placeholder="Enter your Website URL" />
<label for="hostName">Host name:</label>
<input type="text" id="host" name="hostName" placeholder="Host Name" />
<button onclick="submitDetails()">Submit</button>
</section>
<article id="placeholderContent">
<span id="recipientName">recipientName</span>!
<br>
<br>
<span id="organizationName">organizationName</span>
<span id="eventDate">eventDate</span>
<span id="websiteURL">websiteURL</span>
<br>
<span id="hostName">hostName</span>
</article>
<script>
function submitDetails(){
updateDetails("recipient", "recipientName");
updateDetails("organization", "organizationName");
updateDetails("date", "eventDate");
updateDetails("URL", "websiteURL");
updateDetails("host", "hostName");
}
function updateDetails(copyId, pasteId){
document.getElementById(pasteId).innerHTML = document.getElementById(copyId).value;
}
</script>
</body>
</html>
From what I understand, you are trying to change the placeholder text with the information from the form. You would want to first prevent the default behavior of the form submission by passing the event to the function in your submit (which I've changed to a button).
You would then want to have something set the innerHTML of the element to one of the values of the form.
var sRecipientName;
var sOrganizationName;
var sDate;
var sURL;
var sHostName;
function submitDetails(e) {
e.preventDefault();
sRecipientName = document.getElementById("recipient").value;
sOrganizationName = document.getElementById("organization").value;
sDate = document.getElementById("date").value;
sURL = document.getElementById("URL").value;
sHostName = document.getElementById("host").value;
document.getElementById('recipientName').innerHTML = sRecipientName;
document.getElementById('organizationName').innerHTML = sOrganizationName;
document.getElementById('eventDate').innerHTML = sDate;
document.getElementById('websiteURL').innerHTML = sURL;
document.getElementById('hostName').innerHTML = sHostName;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>My website</title>
</head>
<body>
<section id="pageForm">
<form action="#">
<label for="recipientName">Recipient name:</label>
<input type="text" id="recipient" name="recipientName" placeholder="Enter your Recipient Name" />
<label for="organizationName">Organization name:</label>
<input type="text" id="organization" name="organizationName" placeholder="Enter your Organization Name" />
<label for="eventDate">Event Date:</label>
<input type="text" id="date" name="eventDate" placeholder="Enter your Event Date" />
<label for="websiteURL">URL:</label>
<input type="text" id="URL" name="websiteURL" placeholder="Enter your Website URL" />
<label for="hostName">Host name:</label>
<input type="text" id="host" name="hostName" placeholder="Host Name" />
<button type="submit" onclick="submitDetails(event)">Submit</button>
</form>
</section>
<article id="placeholderContent">
<span id="recipientName"></span>
<br />
<br /> <span id="organizationName"></span> <span id="eventDate"></span> <span id="websiteURL"></span>
<br />
<span id="hostName"></span>
</article>
<script src="script.js"></script>
</body>
</html>
Make sure you are not using console.log(). First remove it.
Then you have to add an eventListener that works if form is submitted and to prevent default events.
Example:
<input value="I am" id="val1" >
<span id="output">
//JavaScript codes
let data = document.getElementById('val1').value;
document.getElementById('output').innerHTML = data;
But make sure those codes are in function that responds to the submit event
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit" onclick=" doFunction()">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<script>
function doFunction(){
var data = $('.container').serializeArray();//this will convert into array
console.log(typeof data)//print the type of data
console.log(data);//print the data
}
</script>
</body>
I want to select the class by id and see data in the console to check whether data is being processed correctly or not. I am getting length=0 when printing the data.
My output:
object
blabla.html:25 []
length: 0
__proto__: Array(0)
blabla.html:27
string
The serializeArray() method is intended to be called on form elements, not div. As such you should hook your logic to the submit event of a parent form, not the click of a button, and certainly not using an on* event attribute. Try this:
$('form').on('submit', function(e) {
e.preventDefault();
var data = $(this).serializeArray();
console.log(typeof data) //print the type of data
console.log(data); //print the data
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="/foo">
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember">
Remember me
</label>
</div>
</form>
Try this code.
You need to use form to serilize the inputs.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<form id="loginform" name="test" method="post">
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit" onclick=" doFunction()">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
<script>
function doFunction(){
var data = $('#loginform').serializeArray();//this will convert into array
console.log(typeof data)//print the type of data
console.log(data);//print the data
return false;
}
</script>
</body>
As I hide an <input> tag with the hide() function in JQuery Mobile, also, it hides the <input> it does not hide the <div> surrounding the <input> that has been implemented by JQuery Mobile.
I could work on the DOM afterwards to make it disapear of course, but I am looking for a better solution.
Here is the case, you'll notice that the div surrounding <input type="text" name="lastname" id="lastname"> is still on the screen (you can run it a W3C editor like here):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Text Inputs</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="/action_page_post.php">
<div class="ui-field-contain">
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">
<label for="lastname">Last name:</label>
<input type="text" name="lastname" id="lastname">
<script type="text/javascript">
$(document).ready(
$('body').find('[id="lastname"]').hide()
);
</script>
</div>
<input type="submit" data-inline="true" value="Submit">
</form>
</div>
</div>
</body>
</html>
I've tried to apply the hide() function on the parent() but it does take the parent as if, the <div> that I want to hide is not yet on the screen, and hide the whole form instead of a specific field:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Text Inputs</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="/action_page_post.php">
<div class="ui-field-contain">
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">
<label for="lastname">Last name:</label>
<input type="text" name="lastname" id="lastname">
<script type="text/javascript">
$(document).ready(
$('body').find('[id="lastname"]').parent().hide()
);
</script>
</div>
<input type="submit" data-inline="true" value="Submit">
</form>
</div>
</div>
</body>
</html>
At the moment you try to access to the parent div it is not painted.. One way is to use JavaScript setTimeout() method to hide that div element:
setTimeout(function() {
$('#lastname').parent().hide();
}, 1);
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page">
<div data-role="header">
<h1>Text Inputs</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="/action_page_post.php">
<div class="ui-field-contain">
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">
<label for="lastname">Last name:</label>
<input type="text" name="lastname" id="lastname">
</div>
<input type="submit" data-inline="true" value="Submit">
</form>
</div>
</div>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="css/mobipick.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="js/external/xdate.js"></script>
<script type="text/javascript" src="js/external/xdate.i18n.js"></script>
<script type="text/javascript" src="js/mobipick.js"></script>
<script>
$(document).on("pagecreate", pageselector, function() {
var picker = $("input[type='text']", this);
picker.mobipick();
picker.on("change", function() {
// formatted date, like yyyy-mm-dd
var date = $(this).val();
// JavaScript Date object
var dateObject = $(this).mobipick("option", "date");
});
});
</script>
</head>
<body>
<input type="text" placeholder="Last Service Date">
<input type="submit" value="Book">
<input type="reset" value="Reset">
</body>
I am using Mobipick for date, i have these included files in js and css folder of my
project but the calender is not showing up when a touch the date input area on mobile.
I want to add date to my form, I have implementeed it in a project in webstorm through jquery-ui which works fine on the browser but not on mobile
According to your fiddle source change the code like following. Include the jquery and jquery mobile libraries in your script
<link rel="stylesheet" href="http://mobipick.sustainablepace.net/css/mobipick.css" />
<script src="http://mobipick.sustainablepace.net/external/xdate.js"></script>
<script src="http://mobipick.sustainablepace.net/external/xdate.i18n.js"></script>
<script src="http://mobipick.sustainablepace.net/js/mobipick.js"></script>
<div data-role="page" id="index">
<div data-role="main" class="ui-content">
<form action="#" method="POST" id="myForm">
<label for="CustomerName" class="ui-hidden-accessible">Name:</label>
<input type="text" name="CustomerName" id="CustomerName" value="" placeholder="Name"/>
<label for="PhoneNumber" class="ui-hidden-accessible">Phone Number</label>
<input type="text" name="PhoneNumber" id="PhoneNumber" placeholder="Phone Number"/>
<label for="Address" class="ui-hidden-accessible">Address</label>
<input type="text" name="Address" id="Address" placeholder="Address">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="radio" name="TDI" id="TDI3" value="TDI30" />
<label for="TDI3">TDI 3.0</label>
<input type="radio" name="TDI" id="TDI4" value="TDI42" />
<label for="TDI4">TDI 4.2</label>
</fieldset>
</div>
<label for="RegistrationNumber" class="ui-hidden-accessible">Registration Number</label>
<input type="text" name="Registration Number" id="RegistrationNumber" placeholder="Registration Number"/>
<input type="text" placeholder="Last Service Date" id="sdate"/>
<input type="submit" value="Book"/>
<input type="reset" value="Reset"/>
</form>
</div>
</div>
and your javascript code is like
$(document).on("pagecreate",function(event){
$('#sdate').mobipick({
dateFormat: "MM-dd-yyyy"
});
});
Refer this FIDDLE
this also FIDDLE DEMO
I have two div's, and inside this two div's i have <a href> that invoce javascript function.
My problem is, when i click somewhere outside my form should hide that hide, for the second div..this is working, but for the first isnt.
HTML that have javascript to invoce:
<div id="joinUs">
<a href="javascript:hideshow(document.getElementById('joinusLogin'))">
Join us!
</div>
<div id="invite">
<a href="javascript:hideshow(document.getElementById('inviteNowSignup'))">
<img src="/www/assets/newImages/header/Invite.png"></img>
</div>
HTML that have div's that is going to be invoced:
<div id="inviteNowSignup">
<div id="backgroundSignup"></div>
</a>
<form id="signupForm">
<input id="signupFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="signupFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="signupFormFields" type="text" name="subject" placeholder=" User Name"><br />
<input id="submitSignup" type="submit" value="SIGN UP">
</form>
<div id="alreadyMember">
Already a member? Log in here.
</div>
</div>
<div id="joinusLogin">
<div id="backgroundJoinus"></div>
</a>
<form id="loginForm">
<input id="loginFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="loginFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="submitLogin" type="submit" value="LOG IN">
</form>
<div id="signupNow">
Don't have an account yet? Sign up here.
</div>
</div>
Here's my Javascript function:
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
Can anyone help me solve this problem?
the simplest way to do that
add event to the body on click hide all pop-ups
$('body').click(function(){
$('your-pop-up').hide();
});
then add stopPropagation() to this pop-ups to prevent hide when click inside it.
$('your-pop-up').click(function(e){
e.stopPropagation();
});
Now if you press any where outside your pop-ups thy will hide
Try to Use Color Box Plugin from Link
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Pop Up</title>
<style>
#joinUs{cursor:pointer; color:#0066CC}
#invite{cursor:pointer; color:#0066CC}
</style>
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$("#joinUs").colorbox({inline:true, width:"50%", href:"#joinusLogin"});
$("#invite").colorbox({inline:true, width:"50%", href:"#inviteNowSignup"});
});
</script>
</head>
<body>
<div id="joinUs">Join us!</div>
<div id="invite">Invite Now</div>
<div style='display:none'>
<div id="inviteNowSignup">
<div id="backgroundSignup"></div>
</a>
<form id="signupForm">
<input id="signupFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="signupFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="signupFormFields" type="text" name="subject" placeholder=" User Name"><br />
<input id="submitSignup" type="submit" value="SIGN UP">
</form>
<div id="alreadyMember">
Already a member? Log in here.
</div>
</div>
</div>
<div style='display:none'>
<div id="joinusLogin">
<div id="backgroundJoinus"></div>
</a>
<form id="loginForm">
<input id="loginFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="loginFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="submitLogin" type="submit" value="LOG IN">
</form>
<div id="signupNow">
Don't have an account yet? Sign up here.
</div>
</div>
</div>
</body>
</html>