I want to add a form with javascript and want to use this code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="afbeelding1" class="afbeelding">
<form>
<input type="checkbox" onclick="addOrRemoveSpecifications()">
</form>
<img src="afbeelding1.jpg">
</div>
</body>
<script>
function addOrRemoveSpecifications(){
var div = document.getElementById("afbeelding1").firstchild;
div.innerHTML=div.innerHTML +
'
<form>
<select>
<option value="320x200">320x200
<option value="1024x768">1024x768
<option value="1920x1200">1920x1200
</select>
<select>
<option value="Canvas">Canvas
<option value="Hout">Hout
<option value="Digitaal">Digitaal
</select>
</form>
';
}
</script>
</html>
can anybody help me with this?
thank you in advance, you guys are awesome :)
simply use jquery or equivalent
myform = '<form ...';
$('afbeelding1').append(myform);
There are two ways depending what you want.
First Method
1.Add the form in your HTML itself where you want it.
2.Set the css :display of that form as none.
3.Use the JavaScript function to change the display from none to block.
function addOrRemoveSpecifications() { documentgetElementById("form").style.display="block"; }
Second Method:
Use the following to create your form :-
1.createElement
2.appendChild
.
For Example:http://jsfiddle.net/rvs4oq6p/
Related
I am trying to figure out how I can make my form submit load the results of the desired field into the existing page instead of refreshing, I have this segment.
<form action="post.php" method="post">
<div class="form-group">
<select class="form-control" id="inputState" name="inputState" style="width: 100%">
<option selected>
Choose...
</option>
<option value="account">
The Accounts
</option>
<option value="cape">
The Capes
</option>
</select>
</div><input type="submit">
</form>
The above code works flawlessly other than the fact that it opens a new url, I am wondering how I can load this php on the same page after submitting the form.
print $our_submit = $_POST["inputState"];
I've looked over all the posts related to AJAX but for my example, I've not been able to get anything to work.. thanks in advance for help, still new to this.
try with below code and remove action name like action=""
if(isset($_POST["inputState"])){
$our_submit = $_POST["inputState"];
print_r($our_submit);
}
In form action like action="<?php echo $_SERVER['PHP_SELF'];?>"
if(isset($_POST["inputState"])){
$our_submit = $_POST["inputState"];
print_r($our_submit);
}
Try to submit then you get form data
If you don't want to refresh the page after form submission, you needt to send your date with AJAX.
The simple way is using Jquery
Try this code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="post.php" method="post">
<div class="form-group">
<select class="form-control" id="inputState" name="inputState" style="width: 100%">
<option selected>
Choose...
</option>
<option value="account">
The Accounts
</option>
<option value="cape">
The Capes
</option>
</select>
</div>
<input type="submit" class="send-data">
</form>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function() {
$('.send-data').click(function(e) {
e.preventDefault();
var url = $('form').attr('action');
var data = {
'inputState' : $('#inputState').val()
};
if (data.inputState != '') {
$.post(url, data, function(Response) {
// Work if your response here
console.log(Response);
});
}
});
});
</script>
</body>
</html>
PHP Code
<?php
if (isset($_POST['inputState']) && !empty($_POST['inputState'])) {
echo $_POST['inputState'];
return true;
}
echo 'Please Choose a state ...';
?>
I want to use a form selector as shown, and depending on the option selected, a different output. Simple, yet I am not getting it to work. Here is what I have.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
if ("#1") {
$("#display").html("<table width="221"><tbody><tr class="su-even"><td width="64"><strong>Level</strong></td><td width="64"><strong>Damage</strong></td><td width="93"><strong>Crown Tower Damage</strong></td></tr><tr><td width="64">1</td><td width="64">80</td><td width="93">32</td></tr></tbody></table>");
}
if ("#2") {
$("#display").html("<table width="221"><tbody><tr class="su-even"><td width="64"><strong>Level</strong></td><td width="64"><strong>Damage</strong></td><td width="93"><strong>Crown Tower Damage</strong></td></tr><tr><td width="64">2</td><td width="64">88</td><td width="93">36</td></tr></tbody></table>");
}
});
</script>
</head>
<body>
<div>
<form id="option">
<label for="level">Level at a glance:</label>
<select name="level" id="level">
<option id="1">1</option>
<option id="2">2</option>
</select>
</form>
<div id="display">
</div>
</div>
</body>
</html>
There were a couple issues here.
First of all, "#1" and "#2" are always going to == true, since they are strings.
Second, the code that changes the text only happens once, on page load. There is nothing telling it to update after the menu is changed.
Third, on the lines starting with $("#display").html...., you had what should have been a very long string, but you broke it up by using double quotes every time. You need to switch between single and double quotes. If I say, "class="potato">", it sees "class=" as one string, and ">" as another, but it doesn't know what to do with potato. You need to use single quotes, like "class='potato'>" or 'class="potato">'.
This is the fixed code:
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
function changeText(){
if ($("#level option:selected").text() == "1") {
$("#display").html("<table width='221'><tbody><tr class='su-even'><td width='64'><strong>Level</strong></td><td width='64'><strong>Damage</strong></td><td width='93'><strong>Crown Tower Damage</strong></td></tr><tr><td width='64'>1</td><td width='64'>80</td><td width='93'>32</td></tr></tbody></table>");
}
if ($("#level option:selected").text() == "2") {
$("#display").html("<table width='221'><tbody><tr class='su-even'><td width='64'><strong>Level</strong></td><td width='64'><strong>Damage</strong></td><td width='93'><strong>Crown Tower Damage</strong></td></tr><tr><td width='64'>2</td><td width='64'>88</td><td width='93'>36</td></tr></tbody></table>");
}
}
$(document).ready(function(){
changeText();
});
</script>
</head>
<body>
<div>
<form id="option">
<label for="level">Level at a glance:</label>
<select name="level" id="level" onchange="changeText()">
<option id="1" >1</option>
<option id="2">2</option>
</select>
</form>
<div id="display">
</div>
</div>
</body>
Your javascript conditions are executed once, when the document is ready.
You have to add an event, when the select value change !
Add some values in your option elements ( <option value="1">1</option> )
$(document).ready(function(){
// Set event
$("#level").change(function(){
if ($(this).val() === "1") {
$("#display").html(...);
} else {
$("#display").html(...);
}
}
// Call event when document loaded
$("#level").change();
});
here is my html code.....
<!DOCTYPE html>
<html>
<title>Plot</title>
<head>
<script type="text/javascript" src="d3.min.js"></script>
<script>
function refilter()
{
var ch = document.getElementById('Choice').value;
//do something
}
</script>
</head>
<body>
<form action="save.php" name="myform" method="POST">
Select any station:<select id="Choice" name="choice">
<option value="None">Select</option>
<option value="option1">DELHI</option>
<option value="option2">MUMBAI</option>
</select>
<input type="button" onclick="refilter()" value="Submit!">
</form>
</body>
</html>
I wish to do two things:
1.save the "choice" entered by user, since I have to do further task using it and
2.call the "refilter" function.
As of now, I tried using php and store the "choice" in a text file but for that i need to change "input type=submit" and if I do so,
1.The function is not called.
2.the save.php file opens up, which i dont want. I wish to stay on the html page only.
I am a beginner to javascript and html and knew a little php, so tried my hand at that.
Is there anyway I can do both the tasks together?
You can do following with your code:
<!DOCTYPE html>
<html>
<title>Plot</title>
<head>
<script type="text/javascript" src="d3.min.js"></script>
<script>
<script>
window.onload = function() {
document.getElementById('test').onclick = function(event) {
document.getElementById('myform').submit();
// Do somthing
}
}
</script>
</script>
</head>
<body>
<form action="save.php" name="myform" id="myform">
Select any station:<select id="Choice" name="choice">
<option value="None">Select</option>
<option value="option1">DELHI</option>
<option value="option2">MUMBAI</option>
</select>
<input type="button" value="Submit!" id="test">
</form>
</body>
</html>
or you can follow: http://www.formget.com/form-submission-using-ajax-php-and-javascript/
Thanks.
The problem is that you want to have both the default behavior as well as your custom behavior.
Here's a simple solution you can try.
<form action="save.php" name="myform" method="POST" id="myform">
<input type="button" id="submit-btn" value="Submit" />
In javascript,
window.onload = function() {
document.getElementById('submit-btn').onclick = function(event) {
event.preventDefault();
refilter();
document.getElementById('myform').submit();
}
}
This will redirect the page to save.php anyway. If you don't want that, you can send a POST request via AJAX. Please find more about AJAX and post if you still face problems
I seem to get this null or not an object error over and over when I try to code in javascript. This is an simple example where I'm just trying to make a window pop up that displays the name of the option. How can I avoid getting this error when I'm coding?
The code returns this error in Internet Explorer:
Error: 'document.forms.0.questions' is null or not an object
<!DOCTYPE html>
<!-- HTML5 style -->
<head>
<title>Challenge Question</title>
<script type="text/javascript">
/* <![CDATA[ */
window.alert(document.forms[0].questions.pet.name);
/* ]]> */
</script>
</head>
<body>
<form action="get" >
<select name="questions">
<option value="pet" name="pet">What is your pet's name?</option>
</select>
</form>
</body>
</html>
The element must be added to the DOM first, then you can access it. Now you're trying to access an element that does not yet exist :
<!DOCTYPE html>
<html>
<head>
<title>Challenge Question</title>
</head>
<body>
<form action="get">
<select name="questions">
<!-- Element is added here -->
<option value="pet" name="pet">What is your pet's name?</option>
</select>
</form>
<script type="text/javascript">
/* and can be accessed here, after it's added */
console.log(document.forms[0].questions.options['pet']);
</script>
</body>
</html>
FIDDLE
I have tested the code. It works fine.
<script type="text/javascript">
function func1()
{
var index = document.getElementById("pet").selectedIndex;
var value = document.getElementById("pet").options[index].text;
alert(value);
}
<form action="get">
<select name="questions" id="pet" onchange="if (this.selectedIndex) func1();">
<!-- Element is added here -->
<option value="pet" name="pet" >What is your pet's name?</option>
<option value="pet" name="pet" >What is your pet's 1?</option>
</select>
</form>
I have two selects
<select name="firstselect" id="firstselect">
<option value="optionOne">optionOne</option>
<option value="optionTwo">optionTwo</option>
</select>
<select name="secondselect" id="secondselect">
<option value="secondOptionOne">secondOptionOne</option>
<option value="secondOptionTwo">secondOptionTwo</option>
<option value="secondOptionThree">secondOptionThree</option>
<option value="secondOptionFour">secondOptionFour</option>
<option value="secondOptionFive">secondOptionFive</option>
</select>
I want the options in the secondselect to change based on the option the user chooses in the first select. How can I do this either in Javascript or PHP?
I have had the same problem as you. The following javascript, written inside the space corresponding to the <head> tag, could be useful if both lists have the same elements and the first element of the list "firstselect" is related to the first one of the list "secondselect", the second element of the list "firstselect" is related to the second one of the list "secondselect" and so on.
<script language="javascript" type="text/javascript">
// <!CDATA[
function Select1_onclick() {
var SelectList1 = document.getElementById('firstselect');
var SelectList2 = document.getElementById('secondselect');
SelectL2.selectedIndex = LSelectL1.selectedIndex;
// ]]>
</script>
You also should modify the <select> tag for the list "firstselect" to include the above script in this way:
<select name="firstselect" id="firstselect" onclick="Select1_onclick()">
If you pretend to make a different options choice, you could use a switch-case structure (see a example here).
I found a nice solution to this here:
http://www.webdeveloper.com/forum/showthread.php?91848-How-do-I-make-one-lt-select-gt-list-dependent-on-the-selection-made-in-another
It's not my code but I hope it helps.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>select change 2nd select</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var varieties=[
["varieties","granny smith","golden delicious","jonathan"],
["varieties","anjou","bartlett","conference"],
["varieties","valencia","pineapple","pera"]
];
function Box2(idx) {
var f=document.myform;
f.box2.options.length=null;
for(var i=0; i<varieties[idx].length; i++) {
f.box2.options[i]=new Option(varieties[idx][i], i);
}
}
</script>
</head>
<body onload="Box2(0);">
<form name="myform" method="post" action="http://www.mysite.com/mysite">
<fieldset>
<select name="box1" onchange="Box2(this.selectedIndex)">
<option value="a">apple</option>
<option value="b">pear</option>
<option value="c">orange</option>
</select>
<select name="box2">
</select>
</fieldset>
</form>
</body>
</html>