I have a form and 3 buttons on it: Preview, reset and submit. And I want a new window to pop up when I click on the preview. Unfortunately, it also pops up when I send it
<html lang="cs-cz">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<link rel="stylesheet" href="styly.css">
<form name="submit" method="POST" action="preview.php" id="formID" onsubmit="target_popup(this)" >
<form name="submit" method="POST" action="mailer.php" >
<div class="box">
<h1>ODVOZY</h1>
<p class="info"><input type="text" name="name" class="textfield1" placeholder="Jméno a příjmení"/></p>
<p class="info"><input type="text" name="adress" class="textfield1" placeholder="Adresa"/></p>
<p class="info"><input type="text" name="contact" class="textfield1" placeholder="Kontakt"/></p>
<p class="info"><input type="text" name="model" class="textfield1" placeholder="Typ zboží"/></p>
<p class="info"><input type="datetime-local" name="date" class="textfield1" placeholder="Date"/></p>
<select name="money" class="info1" name="money" method="post">
<option value="Vyber způsob platby">Vyber způsob platby</option>
<option value="Placeno">Placeno</option>
<option value="Platit doma">Platit doma</option>
<option value="Placeno jen odvoz">Placeno jen odvoz</option>
<option value="Jiné (viz poznámky)">Jiné (viz poznámky)</option>
</select>
<select name="city" class="info1" name="city" method="post" >
<option value="Vyber pobočku">Vyber pobočku</option>
<option value="Dvůr Králové n/L">Dvůr Králové n/L</option>
<option value="Hořice">Hořice</option>
</select>
<textarea name="message" class="info1" type="text" cols="20" rows="5"placeholder="Poznámka"></textarea>
<p> </p>
<input type="submit" name="preview" value="Tisk" class="boxa" />
<input type="reset" value="Reset" class="boxc" />
<input type="submit" name="mailer" value="Odeslat" class="boxb" formaction="mailer.php" formmethod="POST" />
<script src="script.js"></script>
</div>
</form> </form>
</body>
</html>
Here is the Javascript, can you please tell me where it is going wrong
var myForm = document.querySelector("#formID");
if(myForm === "#formID" ){
myForm.onsubmit = function() {
var w = window.open('about:blank','Popup_Window','toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=400,height=300,left = 312,top = 234');
this.target = 'Popup_Window';
}
;
Your code is really badly formatted and I see a lot of issues here
</form> </form>
for instance.
BTW you have
<input type="submit" name="preview" value="Tisk" class="boxa" />
<input type="reset" value="Reset" class="boxc" />
<input type="submit" name="mailer" value="Odeslat" class="boxb" formaction="mailer.php" formmethod="POST" />
Do you want to submit the form when you click the preview button?
Otherwise change the type ( input type="button" instead of submit).
Add a function on the click and change the js consequently.
<input type="button" name="preview" onclick="openPopup()">
/// JS
function openPopup(){
var w = window.open('about:blank','...
}
Related
I create a form which allows to view the form information in a
different page for the user to view using "view" button and I want
a "edit" button to edit the same details of the form by redirecting
to the previous page. I tried using window.history.back(); it didn't
work.
html file Index.html - the form
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div class="container">
<form action="result.html" method="GET">
<h1>Send us an Enquiry?</h1>
<h3>Fill in the Details Below</h3>
<input type="text" id="name" name="name" placeholder="Enter Name" />
<input type="text" id="email" name="email" placeholder="Enter Email" />
<select name="subject" id="subject" value="Subject">Subject
<option value="Destinations">Destinations</option>
<option value="Pricing">Pricing</option>
<option value="Accommodation">Accommodation</option>
<option value="Other">Other</option>
</select>
<textarea id="details" name="details" placeholder="Enter Details"></textarea>
<input type="submit" class="btn" value="View" onclick="handleSubmit()" />
</form>
</div>
</body>
</html>
The page view the form details result.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="result.js"></script>
<script src="https://smtpjs.com/v3/smtp.js"></script>
</head>
<body>
<div class="container">
<div class="box">
<h1>
Form Details
</h1>
<h2>
Name: <span id="result-name" />
</h2>
<h2>Email: <span id="result-email" />
</h2>
<h2>
Subject: <span id="result-subject" />
</h2>
<h2>Details: <span id="result-details" />
</h2>
<div class="action-btn">
<div class="inner">
<form action="" method="GET">
<input class="btn" type="submit" value="Edit" onclick="returnBack()" />
</div>
</form>
<div class="inner">
<form onsubmit="sendEmail(); reset(); return false;">
<input class="btn-1" type="submit" value="Submit" />
</form>
</div>
</div>
</div>
</div>
</body>
</html>
The javascript file result.js
//call function using event listener
window.addEventListener('load',() => {
//create a const variable
const params = (new URL(document.location)).searchParams;
const name = params.get('name');
const email = params.get('email');
const subject = params.get('subject');
const details = params.get('details');
document.getElementById("result-name").innerHTML = name;
document.getElementById("result-email").innerHTML = email;
document.getElementById("result-subject").innerHTML = subject;
document.getElementById("result-details").innerHTML = details;
})
function returnBack(){
window.history.back();
}
I think the type="submit" in tag input is the problem. You should remove it and try again.
Just starting with HTML and JavaScript, been set an assignment to use JavaScript for some logical function. I have created a form and wanted to check that the elements are filled in correctly. I have tried to look at the duration and ideally wanted to set a minimum value upon submission, however it is not working as expected.
I have to use codepen for the assignment which has a separate column for JavaScript but I have put the code used in the form, not sure what I need to do.
Any help would be greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Student recovery recording</title>
<link rel="stylesheet" href="newstyle.css" />
<meta charset="UTF-8" />
</head>
<body>
<header><h1>Student Recovery Recording</h1></header>
<main>
<div class="container1">
<p>form content goes here</p>
</div>
<div class="container">
<form name="myForm" form action="" method="get">
<div class="form-row">
<label for="name"> Instructor Name:</label>
<input type="text" id="name" />
</div>
<div class="form-row">
<label for="Exam"> Exam Code:</label>
<select name="Exam" id="Exam">
<option value="">--Please choose the correct Exam code--</option>
<option value="code1">AT017</option>
<option value="code2">CT154</option>
<option value="code3">AT317</option>
<option value="code4">BT141</option>
</select>
</div>
<div class="form-row">
<label for="reason"> Reason For Training:</label>
<select name="reason" id="reason">
<option value="">
--Please select the correct reason for training
</option>
<option value="train1">ATT</option>
<option value="train2">ITT</option>
<option value="train3">ETT</option>
</select>
</div>
<div class="form-row">
<label for="date">Date:</label>
<input type="date" id="date" />
</div>
<div class="form-row">
<label for="Studentname"> Student Name:</label>
<input type="text" id="Studentname" />
</div>
<div class="form-row">
<label for="Duration">Duration:</label>
<input type="time" id="Duration" min="1:00" />
</div>
<div class="form-row">
<textarea name="comment" rows="4" cols="50">
Enter details of work carried out and KLP's covered here...</textarea
>
</div>
<input type="submit" value="Submit" onclick="myFunction()" />
<script>
function myFunction() {
var text;
if (document.getElementById("Duration").validity.rangeUnderflow) {
text = "Not enough Recovery Time";
} else {
text = "Recovery Time acceptable";
}
document.getElementById("myForm").innerHTML = text;
}
</script>
</form>
</div>
</main>
<footer>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img
style="border: 0; width: 88px; height: 31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!"
/>
</a>
</p>
</footer>
</body>
</html>
Maybe you can use setTimeOut() method to the set duration trigger the method when the user load the window or the user starting to press the key.
example:
<div class="form-row">
<label for="name"> Instructor Name:</label>
<input type="text" id="name" onkeypress="setTimeout(showSubmitButton(), 5000)" /> //trigger showSubmitButton() when key pressed wait 5 sec then run showSubmitButton()
<input type="submit" id="submit" value="submit" style="display:none">// set display to none for hiding the button
</div>
<script>
function showSubmitButton() {
document.getElementById("submit").style.display = "block" // show the button after 5 sec
}
</script>
hope this help you
I face problem that my div.hide is not working, because it just shows and whenever I click back link "reply" it's does not hide.
JavaScript
<script type="text/javascript">
$('body').on('click','a.btnGG',function(){
var va=$(this).data('comment_id');
$("#parent_id").val(va);
$("#formReply").attr("va",$("#formReply").attr("va") + va);
$(".formms").hide();
$(this).after('<div class="formms">'+$(".gg").html()+'</div>');
$("#hides").onclick(function (){
$(".gg").css("display","block");
});
</script>
tpl
<a href="javascript:;" id="hides" class="btnGG" > reply</a>
<div class="gg" style="display:none;">
<form action="/commenter/web/index.php" id="formReply" method="Post" >
<input type = "hidden" name ="m" value = "{$m}" />
<input type="hidden" name="comment_id" id="comment_id" value="{$data.comment_id}"/>
<input type = "hidden" name="post_id" value="{$req.post_id}" />
<!-- <input type = "hidden" name="user_id" value="{$req.user_id}" /> -->
<input type = "hidden" name ="c" value = "do_add_comment_reply" />
<input type="hidden" name="parent_id" id="parent_id" value=""/>
<textarea class="form-control" name="message" placeholder="Please leave a reply of the comment "></textarea>
<input type="submit" id="btn_reply" name="btn_reply" class="btn btn-primary" value="Reply">
</form>
</div>
I'm beginner programmer.
It's hard to tell what you are doing with your code. If you simply want to display div or hide clicking on reply button, there's a complete code (TPL file):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<a href="javascript:;" id="hides" class="btnGG" > reply</a>
<div class="gg" style="display:none;">
<form action="/commenter/web/index.php" id="formReply" method="Post" >
<input type = "hidden" name ="m" value = "{$m}" />
<input type="hidden" name="comment_id" id="comment_id" value="{$data.comment_id}"/>
<input type = "hidden" name="post_id" value="{$req.post_id}" />
<!-- <input type = "hidden" name="user_id" value="{$req.user_id}" /> -->
<input type = "hidden" name ="c" value = "do_add_comment_reply" />
<input type="hidden" name="parent_id" id="parent_id" value=""/>
<textarea class="form-control" name="message" placeholder="Please leave a reply of the comment "></textarea>
<input type="submit" id="btn_reply" name="btn_reply" class="btn btn-primary" value="Reply">
</form>
</div>
<script type="text/javascript">
$('body').on('click','a.btnGG',function() {
$(".gg").toggle();
});
</script>
</body>
</html>
<a href="javascript;" id="hides" class="btnGG" > reply</a>
<div class="gg" style="display:none;">
// Code
</div>
Change it to something like
<a href="#" id="hides" class="btnGG" > reply</a>
<div class="gg" id="testid" style="display:none;">
// Code
</div>
and use script like
$(document).ready(function(){
$("#hides").onclick(function(){
$("#testid").toggle("show");
});
});
I have four form like form-1 , form-2 , form-3 , form-4 and three Buttons as Button-1, Button-2 , Button-3.
When first jsp page load it has form elements which will display on the screen.
Now my question is when i click to button-2 it should display form-2 and disable other three forms (form-1 , form-3 , form-4 ).Same case with the others two buttons.
Please provide me proper solution using javascript or jquery.
I am using jsp page for html form design.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
$("#b1").click(function(){
$("#f2,#f3,#f4").hide();
$("#f1").show();
});
$("#b2").click(function(){
$("#f1,#f3,#f4").hide();
$("#f2").show();
});
$("#b3").click(function(){
alert("jj");
$("#f1,#f2,#f4").hide();
$("#f3").show();
});
</script>
<style type="text/css">
#f2,#f3,#f4{
display: none;
}
</style>
</head>
<body >
<form id="f1">
<input type="text" name="name" placeholder="f1" >
</form>
<form id="f2">
<input type="text" name="name" placeholder="f2" >
</form>
<form id="f3">
<input type="text" name="name" placeholder="f3" >
</form>
<form id="f4">
<input type="text" name="name" placeholder="f4" >
</form>
<input type="button" value="b1" id="b1" >
<input type="button" value="b2" id="b2">
<input type="button" value="b3" id="b3">
</body>
</html>
I have done the coding as per above answer but i am not able to get the different form when i click. I check with alert message also the click is not working . Please tell me where i am doing wrong.
here is the sample.
live Demo : http://jsfiddle.net/a6NJk/626/
Html
You need four forms and three buttons for this:
<form id="f1">
<input type="text" name="name" placeholder="f1" >
</form>
<form id="f2">
<input type="text" name="name" placeholder="f2" >
</form>
<form id="f3">
<input type="text" name="name" placeholder="f3" >
</form>
<form id="f4">
<input type="text" name="name" placeholder="f4" >
</form>
<input type="button" value="b1" id="b1" >
<input type="button" value="b2" id="b2">
<input type="button" value="b3" id="b3">
Jquery
When you will click in the button you need to show corresponding form and hide all other form.
see jquery api : http://api.jquery.com/
$("#b1").click(function(){
$("#f2,#f3,#f4").hide();
$("#f1").show();
})
$("#b2").click(function(){
$("#f1,#f3,#f4").hide();
$("#f2").show();
})
$("#b3").click(function(){
$("#f1,#f2,#f4").hide();
$("#f3").show();
})
CSS
#f2,#f3,#f4{
display: none;
}
If you wanted to use anchor tag instead of button then change your html :
<form id="f1">
<input type="text" name="name" placeholder="f1" >
</form>
<form id="f2">
<input type="text" name="name" placeholder="f2" >
</form>
<form id="f3">
<input type="text" name="name" placeholder="f3" >
</form>
<form id="f4">
<input type="text" name="name" placeholder="f4" >
</form>
<a href="javascript:void(0)" id="b1" > b1</a >
<a href="javascript:void(0)" id="b2" > b2</a>
<a href="javascript:void(0)" id="b3" > b3</a >
Demo : http://jsfiddle.net/a6NJk/627/
I am not able to add a new input box after the onclick event is called and is there way to disable the select options after the input box appears? I am sorry for such a noob question but I am at the dead end here, been trying this for an hour. Please link me to a place where I can easily learn JS with examples.
<script>
function funcGet(val)
{
if(val=="Create new category")
{
var element = document.createElement("input");
element.setAttribute("type", "input");
element.setAttribute("name", "new_cat");
var foo = document.getElementById("cat");
foo.appendChild(element);
}
}
</script>
<div name="cat">
<form method="post" action="">
<input type="text" placeholder="Enter a topic name" name="word"><br/>
<select name = "category" onchange="funcGet(this.value);">
<?php
displayCat();
?>
</select>
</div>
<select name = "site_type">
<?php
displaySitetype();
?>
</select>
<input type="submit" value="Submit data">
</form>
Try changing <div name="cat"> to
<div id="cat">
.getElementById only works on IDs,
as in
document.getElementById("cat");
If you want to leave <div name="cat"> you should use .getElementsByTagName[0] instead.
As foir a a link to learn JavaScript by example, I recommend the W3Schools JavaScript Tutorial, as they let you try out code as you learn it on their website. Once you become more familiar, you can reference the Mozilla Developer Network.
Here
var foo = document.getElementById("cat"); is giving null
There is no element exist with id cat
Error is:TypeError: foo is null
Change this:
<div name="cat">
To this:
<div id="cat">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>
Untitled Document
</title>
<script>
function generateRow() {
var d=document.getElementById("div");
d.innerHTML+="<td><input type='text'<td><input type='text'<td><input type='text' name='food'name='food'name='food'name='food'>";
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<label>
<input name="food" type="text" id="food" />
</label>
<td>
<input name="food" type="text" id="food" />
</td>
<td>
<input name="food" type="text" id="food" />
</td>
<div id="div">
</div>
<td>
<input type="button" value="Add" onclick="generateRow()"/>
</td>
<td>
<label>
<input type="submit" name="Submit" value="Submit" />
</label>
</td>
</form>
</body>