I am attempting to create forms that are hidden on each page. I figure I had to make a separate functions for each button and form that I wanted to hide. So my logic was to use the same code on separate JS pages but changing the id and function names on each JS page.
However when I do so, using the exact same code the button works on one page and not on the other page.
This is a start of many layers I'm trying to learn, such as opening form on same page and transition it to appear using jQuery.
The 1st code was this, it works but I would like to append and add to it
<!DOCTYPE html>
<html lang="EN">
<meta charset="UTF-8">
<head>
<title>button test</title>
<script>
window.onload = function() {
document.getElementById("tkform").style.display = "none";
}
window.onload = function() {
document.getElementById("cleanForm").style.display = "none";
}
function openForm() {
document.getElementById("cleanForm").style.display = "block";
}
function closeForm() {
document.getElementById("cleanForm").style.display = "none";
}
function optkForm() {
document.getElementById("tkForm").style.display = "block";
}
function clstkForm() {
document.getElementById("tkForm").style.display = "none";
}
</script>
</head>
<body>
<h3>
I am attempting to create forms that are hidden on each page. I figure I had to make a separate functions for each button and form that I wanted to hide. So my logic was to use the same code on separate JS pages but changing the id and function names
on each JS page. However when I do so, using the exact same code the button works on one page and not on the other page. This is a start of many layers I'm trying to learn, such as opening form on same page and transition it to appear using jquery.
1. The 1st code was this, it works but I would like to append and add to it
</h3>
<p>
HTML
</p>
<button onclick="openForm()" style="font-size: 16px; text-align: center" ;>
Get an Estimate</button>
<button onclick="closeForm()">Close Form</button>
<form class="cleanform" id="cleanForm" action="/action_page.php">
<legend>Book a Visit</legend>
<p>Please fill out your information below.</p>
<br>
<p id="text" style="display:none">Checkbox is CHECKED!</p>
<div class="columns">
<div class="item">
<label for="fname">First Name<span>*</span></label>
<input id="fname" type="text" name="fname" />
</div>
<div class="item">
<label for="lname"> Last Name<span>*</span></label>
<input id="lname" type="text" name="lname" />
</div>
<div class="item">
<label for="eaddress">Email Address<span>*</span></label>
<input id="eaddress" type="text" name="eaddress" />
</div>
<div class="item">
<label for="zipcode">Zip Code<span>*</span></label>
<input id="zipcode" type="text" name="zipcode" pattern="[0-9] {5}" title="5 digit Zip" />
</div>
</div>
<fieldset>
<legend style="background-color: rgb(221, 210, 210)">
<p>Service Frequency</p>
</legend>
<div class="columns">
<p>Is This a One-Time or Recurring Clean?</p>
<div class="item">
<br>
<label for="myCheck">One-Time Cleaning</label>
<input type="checkbox" id="myCheck" onclick="myFunction()">
<label for="myCheck">Recurring Service</label>
<input type="checkbox" id="myCheck" onclick="myFunction()">
</div>
</div>
<div class="columns">
<p>Do You need a Move In/Move Out clean?</p>
<div class="item">
<br>
<label for="myCheck">Yes</label>
<input type="checkbox" id="myCheck" onclick="myFunction()">
<label for="myCheck">No</label>
<input type="checkbox" id="myCheck" onclick="myFunction()">
</div>
</div>
</fieldset>
<div class="columns">
<div class="item">
<label for="bedrooms">Bedrooms:<span>*</span></label>
<input type="number" id="bedrooms" name="bedrooms" min="0" ; max="8" ; name="bedroom" placeholder="0" />
</div>
<div class="item">
<label for="bathroom">Bathrooms:<span>*</span></label>
<input type="number" id="bathrooms" name="bathrooms" min="0" ; max="20" placeholder="0" />
</div>
<div class="item">
<label for="sqrfoot">Square Foot:<span>*</span></label>
<input type="text" id="sqrfoot" name="sqrfoot" placeholder="Total Square Foot">
</div>
</div>
<input type="submit" name="Book Now">
</form>
<p style="background-color: yellow;">
2. This is code that I copied and reformatted for use on a separate page, yet it does not work. What am I missing here?
</p>
<p>
HTML
</p>
<button onclick="optkForm()">
Open Form</button>
<button onclick="clstkForm()">Close Form</button>
<form class="tkform" id="tkform" method="post" action="URL_to_script">
<fieldset>
<legend>Turn Key Service</legend>
<p>
<label class="question" for="the_name">Name:</label>
<input type="text" id="the_name" name="the_name" placeholder="Enter Your Full Name" size="24" />
</p>
<p>
<label class="question" for="the_email">Email:</label>
<input type="text" id="the_email" name="the_email" placeholder="Email" size="32" required/>
</p>
<p>
<label class="question" for="the_addy">Address:</label>
<input type="text" id="the_addy" name="the_addy" placeholder="Street Address" size="32" required/>
</p>
<p>
<label class="question" for="the_zip">Zip:</label>
<input type="text" id="the_zip" name="the_zip" placeholder="ZipCode" size="12" required pattern="[0-9] {5}" />
</p>
<p>
<label class="question" for="the_name">Bedrooms:</label>
<input type="number" id="bedrooms" name="bedrooms" min="0" max="8" size="2" required/>
</p>
<p>
<label class="question" for="the_name">Bathrooms:</label>
<input type="number" id="bathrooms" name="bathrooms" min="1" max="20" size="2" required/>
</p>
<p>
<label class="question" for="sqft">Squarefoot:</label>
<input type="text" id="sqft" name="squarefoot" placeholder="Sqrft" size="12" required/>
</p>
<p>
<label class="question" for="the_message">Message:</label>
<textarea id="the_message" name="the_message" placeholder="Enter Your Message Here" rows="7" cols="55" vertical-align="top">
</textarea>
</p>
</fieldset>
<button input type="submit">Submit</button>
</div>
</div>
</form>
</body>
</html>
The description looks mixed in. However if you are looking for why the button is not working for the "tkform", then you need to change the id of the "tkform" either in the call to action functions:
function optkForm() {
document.getElementById("tkForm").style.display = "block";
}
function clstkForm() {
document.getElementById("tkForm").style.display = "none";
}
or
in the form HTML description
<form class="tkform" id="tkform" method="post" action="URL_to_script">
</form>
"tkform" & "tkForm" are two different IDs.
Related
Hi I'm sure I've written this code properly as I followed in the tutorial. I want the #booking-button to be clicked which should 'toggle' the #btn element to disappear. Essentially one is a box which contains information about a car and when user clicks 'Click here to Book' it should open the form. But for some reason it doesn't. I'm thinking it may have something to do with the CSS but I'm not sure.
Any tips on this?
<div class="form-wrapper">
<form action="#">
<label for="name">Name*</label>
<input placeholder="Your Name" class="full" type="text"id="name">
<br>
<label for="email">Email</label>
<input placeholder="Your Email" class="full" type="text"id="name">
<br>
<label for="hire-start-date">Hire Start Date</label>
<input type="date" id="depart">
<br>
<label for="hire-end-date">Hire End Date</label>
<input type="date" id="depart">
<br>
<button class="book-now">Book Now</button>
</form>
</div>
<div class="car-info" id="btn">
<button id="booking-button">Click Here to Book</button>
</div>
</div>
$(document).ready(function() {
$('#booking-button').on('click', () =>
{ $('#btn').toggle(); });
});
Now the form appears when user clicks Click Here to Book, while this button disappears.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-wrapper">
<form action="#" id="car-info" style="display: none;">
<label for="name">Name*</label>
<input placeholder="Your Name" class="full" type="text"id="name">
<br>
<label for="email">Email</label>
<input placeholder="Your Email" class="full" type="text"id="name">
<br>
<label for="hire-start-date">Hire Start Date</label>
<input type="date" id="depart">
<br>
<label for="hire-end-date">Hire End Date</label>
<input type="date" id="depart">
<br>
<button class="book-now">Book Now</button>
</form>
</div>
<div id="btn">
<button id="booking-button">Click Here to Book</button>
</div>
<script>
$(document).ready(function() {
$('#booking-button').on('click', () => {
$('#car-info').toggle();
$('#btn').toggle();
});
});
</script>
I need to copy text values from one textfield input to another. How can I do this?
I have created a js fiddle, which has a text form that once I click on edit details, another form will pop-up. In that new form, I want to be able to enter text in any of the textfields present and then once I hit save. The newly entered text will be moved/copied/transfered to the original textfields on the screen.
here is the jsfiddle - https://jsfiddle.net/xsuh6pf7/2/
<h1>Your Name and Address</h1>
<form action="/">
<div class="nameDiv">
Name: <input type="textbox" name="firstname" title="name" id="name">
<div class="dotOne"> ? </div>
<span class="nameHelp"> Please enter first and last name </span>
</div>
<br>
<div class="addressDiv">
Address: <input type="text" name="lastname" id="address">
<div class="dotTwo">?</div>
</div>
<br>
<div class="emailDiv">
Email:
<input type="text" name="Email" class="email">
<span class="dotThree">?</span>
</div>
<br>
<div class="numberDiv">
Phone number:
<input type="text" name="Phone number" class="number">
<span class="dotFour">?</span>
</div>
<br>
</form>
<button class="btn" onclick="openForm()">Edit Details</button>
<div id="container">
<button class="tablink" onclick="openPage('Name', this, 'grey')" id="defaultOpen">Name</button>
<button class="tablink" onclick="openPage('Address', this, 'grey')">Address</button>
<div id="Name" class="tabcontent">
<form>
<div class="nameDiv">
Title: <input type="text" name="firstname" title="name" class="name">
</div>
<br>
<div class="addressDiv">
Name: <input type="text" name="lastname" id="nameTransfer">
</div>
<br>
<div class="emailDiv">
Surname:
<input type="text" name="Email" id="LastNameTransfer">
</div>
<br>
<div class="numberDiv">
Email Address:
<input type="text" name="Phone number" class="number">
</div>
<br>
<div class="numberDiv">
Phone number:
<input type="text" name="Phone number" class="number">
</div>
<button type="submit" id="save-btn" onclick="moveContent()">Save</button>
</form>
</div>
<div id="Address" class="tabcontent">
<form>
<div class="nameDiv">
Line 1: <input type="text" name="firstname" value="Mickey" title="name" class="name">
</div>
<br>
<div class="addressDiv">
Line 2: <input type="text" name="lastname" value="Mouse" class="address">
</div>
<br>
<div class="emailDiv">
Suburb:
<input type="text" name="Email" value="Email" class="email">
</div>
<br>
<div class="numberDiv">
State:
<input type="text" name="Phone number" value="Phone number" class="number">
</div>
<br>
<div class="numberDiv">
Country:
<input type="text" name="Phone number" value="Phone number" class="number">
</div>
<button class="save-btn" onclick="">Save</button>
</form>
</div>
</div>
You can use
document.getElementbyId("textfieldToTransfer").value = document.getElementbyId("textfieldOfData").value;
on the function of your button.
I think the issue preventing other answers/comments from working for you (use of document.getElementById()) is that none of your <input /> actually have the id attribute - just name, e.g.
<input type="text" name="firstname" value="Mickey" title="name" class="name">
You would either need to add id="firstname" so you could actually do:
document.getElementById("firstname").value = document.getElementById("firstnameTransfer").value
Or, you could use document.querySelector() to select the right <input /> without adding the id attribute, e.g.:
document.querySelector("input[name='firstname']")
In your Javascript, you can try adding
document.getElementById("name").onchange = function(){
nameChange();
}
function nameChange(){
document.getElementById("nameTransfer").value = document.getElementById("name").value;
}
This of course will only work for the name input.
I have a form that has some radio buttons which I need some fields to be required if a radio button is checked.
I have the HTML5 required attribute on the radio button group which works fine but I want some text fields to be required if the corresponding radio button is checked.
I have written some JS which seems to have no effect, and doesn't seem to add the required attribute when the radio button is checked.
HTML:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>MooWoos Stall Booking</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--build:css css/styles.min.css-->
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/style.css">
<!--endbuild-->
</head>
<body>
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light">
<a class="logo"><img src="assets/logo_opt.png"></a>
</nav>
<hr>
<div class="modal fade" id="redirect_page" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="form-horizontal">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="user_msg" align="left">Booking successful! Redirecting to PayPal... </div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 bookingform">
<h1>Stall Booking Form</h1>
<p class="lead">
Fill out the form to book and pay for your stall!
</p>
<form id="bookingForm">
<div class="form-group">
<label for="name">Name: </label>
<input type="text" name="name" class="form-control" placeholder="Your Name" value="" title="Please enter your name" required/>
</div>
<div class="form-group">
<label for="address">Address: </label>
<textarea name="address" class="form-control" placeholder="Your Address" value="" title="Please enter your address" required></textarea>
</div>
<div class="form-group">
<label for="phone">Telephone Number: </label>
<input type="text" name="phone" class="form-control" placeholder="Your Telephone Number" value="" title="Please enter the best telephone number to contact you on" required/>
</div>
<div class="form-group">
<label for="email">Email: </label>
<input type="text" name="email" class="form-control" placeholder="Your Email" value="" title="Please enter your Email address" required/>
</div>
<div class="form-group">
<label for="date">Which date would you like to book?: </label>
<p><input type="radio" name="date" value="13th September" required/> Sunday 13th September</p>
<p><input type="radio" name="date" value="6th February" /> Saturday 6th February</p>
</div>
<div class="form-group">
<label>What type of stall do you require?</label>
<div>
<input type="radio" name="stallType" id="stallType-Preloved" value="Preloved" required>
<label for="stallType-Preloved">Preloved</label>
<div class="reveal-if-active">
<label for="c-rail">Will you be bringing a clothes rail?: </label>
<input type="radio" name="c-rail" value="Yes" /> Yes
<input type="radio" name="c-rail" value="No" /> No
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Craft" value="Craft">
<label for="stallType-Craft">Craft</label>
<div class="reveal-if-active">
<label for="craftName">What name do you use?</label>
<input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" />
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Business" value="Business">
<label for="stallType-Business">Business</label>
<div class="reveal-if-active">
<label for="bizName">What is your business name?</label>
<input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" />
<label for="insurance">Do you have Public Liability Insurance?</label>
<input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="We will require proof of this prior to market day" value="Yes"/> Yes
<input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="Our insurance does not cover other businesses. Please ensure you have adequate cover and provide us with proof prior to market day" value="No"/> No
</div>
</div>
</div>
<input type="submit" id="submit-form" class="btn btn-success btn-lg" value="Book & Pay" />
</form>
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © MooWoos 2018. Booking Form by Luke Brewerton</p>
</div>
</div>
</footer>
</div>
<!--build:js js/mwbookings-min.js -->
<script src="js/jquery.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.serialize-object.min.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->
</body>
</html>
main.js JS file:
var $form = $('form#bookingForm'),
url = 'https://script.google.com/macros/s/AKfycbwaEsXX1iK8nNkkvL57WCYHJCtMAbXlfSpSn3rsJj2spRi-41Y/exec'
$('#stallType-Business').change(function () {
if(this.checked) {
$('#bizName').attr('required');
} else {
$('#bizName').removeAttr('required');
}
});
$('#submit-form').on('click', function(e) {
var valid = this.form.checkValidity();
if (valid) {
e.preventDefault();
var jqxhr = $.ajax({
url: url,
method: "GET",
dataType: "json",
data: $form.serializeObject(),
success: function () {
$('#redirect_page').modal('show');
window.setTimeout(function () {
location.reload()
}, 3000);
}
});
}
});
You can do it like this, where you disable all inputs and then only activate the one that is selected.
It requires that you have the "disabled" prop added to all child inputs at the start.
I also added the ID's for the c-rail inputs.
Note that the check you do does not trigger when you select another radio button, that is why should disable the others when a new one is selected.
$('#stallType-Business').change(function () {
if(this.checked) {
disableAll();
It is the disableAll() function that does the trick here.
function disableAll() {
$('#c-rail-yes').attr('required', false).attr('disabled', true);
$('#c-rail-no').attr('required', false).attr('disabled', true);
$('#craftName').attr('required', false).attr('disabled', true);
$('#bizName').attr('required', false).attr('disabled', true);
}
$('#stallType-Preloved').change(function () {
if(this.checked) {
disableAll();
$('#c-rail-yes').attr('required', true).attr('disabled', false);
$('#c-rail-no').attr('required', true).attr('disabled', false);
}
});
$('#stallType-Craft').change(function () {
if(this.checked) {
disableAll();
$('#craftName').attr('required', true).attr('disabled', false);
}
});
$('#stallType-Business').change(function () {
if(this.checked) {
disableAll();
$('#bizName').attr('required', true).attr('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="bookingForm">
<div class="form-group">
<label>What type of stall do you require?</label>
<div>
<input type="radio" name="stallType" id="stallType-Preloved" value="Preloved" required>
<label for="stallType-Preloved">Preloved</label>
<div class="reveal-if-active">
<label for="c-rail">Will you be bringing a clothes rail?: </label>
<input id="c-rail-yes" type="radio" name="c-rail" value="Yes" disabled /> Yes
<input id="c-rail-no" type="radio" name="c-rail" value="No" disabled /> No
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Craft" value="Craft">
<label for="stallType-Craft">Craft</label>
<div class="reveal-if-active">
<label for="craftName">What name do you use?</label>
<input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" disabled />
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Business" value="Business">
<label for="stallType-Business">Business</label>
<div class="reveal-if-active">
<label for="bizName">What is your business name?</label>
<input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" disabled />
</div>
</div>
</div>
</form>
Take a look at JQuery's .prop() method...
.prop()
...and a look at this example from...
How to require fields if a certain radio button is checked?
<body>
<form action="" method="post">
<label for="required_later">Required if Option2 selected</label>
<input type="text" name="text_input_field" id="required_later" disabled><br>
<input type="radio" id="option1" name="radio_options" value="option1">
<label for="option1">Option1</label><br>
<input type="radio" id="option2" name="radio_options" value="option2">
<label for="option2">Option2</label><br>
<input type="submit" name="submit" value="Submit">
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("#option1").click(function() {
$("#required_later").prop("required", false);
$("#required_later").prop("disabled", true);
});
$("#option2").click(function() {
$("#required_later").prop("required", true);
$("#required_later").prop("disabled", false);
$("#required_later").focus();
});
</script>
</body>
Another way to do it is using this function:
$('.input-radio').change(function () {
$('div.reveal-if-active').children('input').removeAttr('required');
$(this).parent().children('div.reveal-if-active').children('input').attr('required', true);
});
and adding class="input-radio" to those input that you want to do the job.
var $form = $('form#bookingForm'),
url = 'https://script.google.com/macros/s/AKfycbwaEsXX1iK8nNkkvL57WCYHJCtMAbXlfSpSn3rsJj2spRi-41Y/exec'
$('.input-radio').change(function () {
$('div.reveal-if-active').children('input').removeAttr('required');
$(this).parent().children('div.reveal-if-active').children('input').attr('required', true);
});
$('#submit-form').on('click', function(e) {
var valid = this.form.checkValidity();
if (valid) {
e.preventDefault();
var jqxhr = $.ajax({
url: url,
method: "GET",
dataType: "json",
data: $form.serializeObject(),
success: function () {
$('#redirect_page').modal('show');
window.setTimeout(function () {
location.reload()
}, 3000);
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light">
<a class="logo"><img src="assets/logo_opt.png"></a>
</nav>
<hr>
<div class="modal fade" id="redirect_page" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="form-horizontal">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="user_msg" align="left">Booking successful! Redirecting to PayPal... </div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 bookingform">
<h1>Stall Booking Form</h1>
<p class="lead">
Fill out the form to book and pay for your stall!
</p>
<form id="bookingForm">
<div class="form-group">
<label for="name">Name: </label>
<input type="text" name="name" class="form-control" placeholder="Your Name" value="" title="Please enter your name" required/>
</div>
<div class="form-group">
<label for="address">Address: </label>
<textarea name="address" class="form-control" placeholder="Your Address" value="" title="Please enter your address" required></textarea>
</div>
<div class="form-group">
<label for="phone">Telephone Number: </label>
<input type="text" name="phone" class="form-control" placeholder="Your Telephone Number" value="" title="Please enter the best telephone number to contact you on" required/>
</div>
<div class="form-group">
<label for="email">Email: </label>
<input type="text" name="email" class="form-control" placeholder="Your Email" value="" title="Please enter your Email address" required/>
</div>
<div class="form-group">
<label for="date">Which date would you like to book?: </label>
<p><input type="radio" name="date" value="13th September" required/> Sunday 13th September</p>
<p><input type="radio" name="date" value="6th February" /> Saturday 6th February</p>
</div>
<div class="form-group">
<label>What type of stall do you require?</label>
<div>
<input class="input-radio" type="radio" name="stallType" id="stallType-Preloved" value="Preloved" />
<label for="stallType-Preloved">Preloved</label>
<div class="reveal-if-active">
<label for="c-rail">Will you be bringing a clothes rail?: </label>
<input type="radio" name="c-rail" value="Yes" /> Yes
<input type="radio" name="c-rail" value="No" /> No
</div>
</div>
<div>
<input class="input-radio" type="radio" name="stallType" id="stallType-Craft" value="Craft">
<label for="stallType-Craft">Craft</label>
<div class="reveal-if-active">
<label for="craftName">What name do you use?</label>
<input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" />
</div>
</div>
<div>
<input type="radio" class="input-radio" name="stallType" id="stallType-Business" value="Business">
<label for="stallType-Business">Business</label>
<div class="reveal-if-active">
<label for="bizName">What is your business name?</label>
<input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" />
<label for="insurance">Do you have Public Liability Insurance?</label>
<input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="We will require proof of this prior to market day" value="Yes"/> Yes
<input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="Our insurance does not cover other businesses. Please ensure you have adequate cover and provide us with proof prior to market day" value="No"/> No
</div>
</div>
</div>
<input type="submit" id="submit-form" class="btn btn-success btn-lg" value="Book & Pay" />
</form>
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © MooWoos 2018. Booking Form by Luke Brewerton</p>
</div>
</div>
</footer>
</div>
When below input form is focused, I would like to execute a jQuery function:
var hasFocus = $("input#edit-search-block-form--2").is(':focus');
if (hasFocus) {
alert('It is working!');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" method="post" id="search-block-form" accept-charset="UTF-8">
<div>
<div class="container-inline">
<h2 class="element-invisible">Search form</h2>
<div class="form-item form-type-textfield form-item-search-block-form">
<label class="element-invisible" for="edit-search-block-form--2"></label>
<input title="Enter the terms you wish to search for." placeholder=" " id="edit-search-block-form--2" name="search_block_form" value="" size="15" maxlength="128" class="form-text" type="text">
</div>
<div class="form-actions form-wrapper" id="edit-actions">
<input id="edit-submit" name="submit" value="Search" src="search.svg" class="form-submit" style="display: inline-block;" type="image">
</div>
<input name="form_build_id" value="1234567890abc" type="hidden">
<input name="form_id" value="search_block_form" type="hidden">
</div>
</div>
</form>
But I just don't get it to work. Would be glad for every advice.
You need to attach an event handler that keeps checking the focus event on that input element. Your current code executes only once, and at the time of execution the element does seemingly not have focus.
$(document).ready(function() {
$("input#edit-search-block-form--2").on('focus', function() {
alert('It is working!');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" method="post" id="search-block-form" accept-charset="UTF-8">
<div>
<div class="container-inline">
<h2 class="element-invisible">Search form</h2>
<div class="form-item form-type-textfield form-item-search-block-form">
<label class="element-invisible" for="edit-search-block-form--2"></label>
<input title="Enter the terms you wish to search for." placeholder=" " id="edit-search-block-form--2" name="search_block_form" value="" size="15" maxlength="128" class="form-text" type="text">
</div>
<div class="form-actions form-wrapper" id="edit-actions">
<input id="edit-submit" name="submit" value="Search" src="search.svg" class="form-submit" style="display: inline-block;" type="image">
</div>
<input name="form_build_id" value="1234567890abc" type="hidden">
<input name="form_id" value="search_block_form" type="hidden">
</div>
</div>
</form>
Please check the updated code below.
Run the focused function onfocus of the element.
I am then focusing on the submit button, otherwise everytime you close the alert, the focus will be placed on the input box again, and it will go into an infinite loop.
function focused(){
alert('It is working!');
$('#edit-submit').focus();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" method="post" id="search-block-form" accept-charset="UTF-8">
<div>
<div class="container-inline">
<h2 class="element-invisible">Search form</h2>
<div class="form-item form-type-textfield form-item-search-block-form">
<label class="element-invisible" for="edit-search-block-form--2"></label>
<input title="Enter the terms you wish to search for." placeholder=" " id="edit-search-block-form--2" onfocus="focused()" name="search_block_form" value="" size="15" maxlength="128" class="form-text" type="text">
</div>
<div class="form-actions form-wrapper" id="edit-actions">
<input id="edit-submit" name="submit" value="Search" src="search.svg" class="form-submit" style="display: inline-block;" type="image">
</div>
<input name="form_build_id" value="1234567890abc" type="hidden">
<input name="form_id" value="search_block_form" type="hidden">
</div>
</div>
</form>
I need help for i had develop the radio buttons one is cheque and anothewr one is online- transfer when ever user click cheque it displays one form and if user click online-transfer it display another form using java script ok it is working but click one radio button after refresh the browser no form can be displayed.Here is below attached my code please verify and suggest me.
html code:
<html>
<head>
<script text="text/javascript">
function optionChanged()
{
var a=document.withdrawform;
if(a.withdraw_by[0].checked)
{
a.reset();a.withdraw_by[0].checked=true;
document.getElementById("cheque_msg").style.visibility="visible";
document.getElementById("cheque_msg").style.display="block";
document.getElementById("accountInfo").style.visibility="hidden";
document.getElementById("accountInfo").style.display="none";
}
else
{
a.reset();a.withdraw_by[1].checked=true;
document.getElementById("accountInfo").style.visibility="visible";
document.getElementById("accountInfo").style.display="block";
document.getElementById("cheque_msg").style.visibility="hidden";
document.getElementById("cheque_msg").style.display="none";
}
}
</script>
</head>
<body>
<!--<a target="popup" onclick="window.open('https://www.facebook.com/','name','width=600,height=400')">Open page in new window</a>-->
<div class="main_content">
<p class="ca_head">Withdraw Cash</p>
<ul class="step_bar">
<li>1. Give your information</li>
<li class="active">2. Select Withdraw Option</li>
</ul>
<form id="withdrawform" name="withdrawform" method="post" action="withdraw-confirmation.html" onsubmit="clearErrors();">
<input type="hidden" name="bankAccount" id="bankAccount" value="0"/>
<input type="hidden" name="monthlyWithdraw" id="monthlyWithdraw" value="0"/>
<input type="hidden" name="withdrawableBalance" id="withdrawableBalance" value="0.37"/>
<input type="hidden" id="ecsCharge" value="0"/>
<input type="hidden" id="chequeCharge" value="0"/>
<input type="hidden" id="freeWithdrawCount" value="0"/>
<input type="hidden" id="withdrawError" value=""/>
<input type="hidden" name="ifsc" id="ifsc" value="N"/>
<div class="content_area">
<h3 class="sub_head">Submit your withdraw request for processing</h3>
<div class="form_row">
<label>Your Withdrawable Balance <strong>:</strong></label>
<strong><span class="rupeefont">r </span> 0.37</strong>
</div>
<div class="form_row">
<label for="new_mobile">Withdraw by <strong>:</strong></label>
<div class="flt_lt wid_256" id="withdraw_options">
<label class="lbl_flt">
<input type="radio" name="withdraw_by" id="withdraw_by" onclick="optionChanged()" value="Cheque" /> Cheque
</label>
<label class="lbl_flt">
<input type="radio" name="withdraw_by" id="withdraw_by" onclick="optionChanged()" value="Online Transfer"/> Online Transfer
</label>
</div>
</div>
<div id="cheque_msg" style="display:none;visibility:hidden"><span><p style="color:RED" align="justify">Please Note that Withdrawal by cheque would take upto 12 working days. Online Transfer is a much faster
option.Also, cheque would be dispatched to your regsitered mailing address.Submit your withdrawal request only if the address below is valid.If you wish to
update your address,please write to fairplay#RummyNo1.com along with your address proof.
</p>
<div class="form_row">
<label for="trackAmount">Enter the Amount <strong>:</strong></label>
<input type="text" name="trackAmount" id="trackAmount" class="flt_lt" style="width:138px;" maxlength="15"/>
</div>
</div>
<div id="accountInfo" style="display: none;">
<div class="form_row" style="position:relative;">
<div class="form_row">
<label for="accountNumber">Account number <strong>:</strong></label>
<input type="text" maxlength="45" name="accountNumber" id="accountNumber" class="flt_lt" style="width:138px;"/>
</div>
<div class="form_row">
<label for="reAccountNumber">Re enter account number <strong>:</strong></label>
<input type="text" maxlength="45" name="reAccountNumber" id="reAccountNumber" class="flt_lt" style="width:138px;"/>
</div>
<div class="form_row">
<label for="micr">MICR Code <!-- <img src="https://rcmg.in/rc/icon_info.png" border="0" />--> <strong> :</strong></label>
<input type="text" maxlength="9" name="micr" id="micr" class="flt_lt" style="width:138px;" />
</div>
<div class="form_row">
<label for="reMicr">Re enter MICR code <strong>:</strong></label>
<input type="text" maxlength="9" name="reMicr" id="reMicr" class="flt_lt" style="width:138px;"/>
</div>
<div class="form_row">
<label for="ifsc_code">IFSC Code <!-- <img src="https://rcmg.in/rc/icon_info.png" border="0" />--> <strong>:</strong></label>
<input type="text" maxlength="11" name="ifsc_code" id="ifsc_code" class="flt_lt" style="width:138px;" onkeypress="return onlyAlphaNumericsForIfsc(event)" />
</div>
<div class="form_row">
<label for="bank_name">Bank Name <strong>:</strong></label>
<input type="text" maxlength="30" name="bank_name" id="bank_name" class="flt_lt" style="width:138px;" onkeypress="return onlyAlphaNumerics(event)" />
</div>
<div class="form_row">
<label for="branch_name">Branch Name <strong>:</strong></label>
<input type="text" maxlength="30" name="branch_name" id="branch_name" class="flt_lt" style="width:138px;" onkeypress="return onlyAlphaNumerics(event)" />
</div>
</div>
<div class="form_row">
<label for="trackAmount">Enter the Amount <strong>:</strong></label>
<input type="text" name="trackAmount" id="trackAmount" class="flt_lt" style="width:138px;" maxlength="15"/>
</div>
<div class="form_row" id="withdrawButton">
<label> </label>
<input type="submit" name="submit_btn" title="Continue" value="Continue" class="btn_submit" id="withdrawsubmit"/>
</div>
<p class="info_txt">
For more information on service charges and withdrawing cash from your account,
click here.
</p>
<!-- -->
</div>
</form>
</div>
</body>
</html>