I am trying to add more links to this drop down menu, the menu itself works and the links I've provided works as well, the problem is that when I try to add links through a Javascript file using appendChild, nothing seems to be happening. Also the form handling is successful in other codes, the only thing wrong is what is described above.
dropdown.html
<body>
<form id="aform">
URL:<br>
<input type="text" name="URL" id="URL">
<br>
Bookmark Name:<br>
<input type="text" name="bookmarkname" id="bookmarkname">
<br><br>
<input type="submit" id="formsubmit">
</form>
<div class="dropdown">
<button class="dropbtn" id="dropdown">Links</button>
<div id="myDropdown" class="dropdown-content">
Youtube
Amazon
Yahoo
</div>
</div>
<script src="dropdown.js"></script>
dropdown.js
function retrieveFormData() {
var URL = document.getElementById("URL").value;
var Bookmarkname = document.getElementById("bookmarkname").value;
var y = document.getElementById("myDropdown");
var aTag = document.createElement('a');
aTag.appendChild(document.createTextNode(Bookmarkname))
aTag.href = URL;
y.appendChild(aTag);
}
So I try to append new to 'y', but nothing happens in the actual drop down menu, no is added.
That is because you are using a submit button. The submit button tells the browser to send the contents of the form to the server side.
What you want to do is change the submit button to a regular button and add an onclick event.
<body>
<form id="aform">
URL:<br>
<input type="text" name="URL" id="URL">
<br>
Bookmark Name:<br>
<input type="text" name="bookmarkname" id="bookmarkname">
<br><br>
<input type="button" id="formsubmit" onclick="retrieveFormData();" value="Submit">
</form>
<div class="dropdown">
<button class="dropbtn" id="dropdown">Links</button>
<div id="myDropdown" class="dropdown-content">
Youtube
Amazon
Yahoo
</div>
</div>
<script src="forminput.js"></script>
This:
var Bookmarkname = document.getElementById("bookmarkname").value;
...will set Bookmarkname to the string value of #bookmarkname. Then you have this line:
aTag.appendChild(Bookmarkname);
appendChild is for appending a child DOM Node; it won't work for setting text, so you may be getting a link that has no content. You can, however, do aTag.appendChild(document.createTextNode(Bookmarkname)).
Related
I'm trying to make a table in Javascript that does not use a table element, and I'm using pure vanilla nodeJS. I can get a new row to show up very briefly, but it disappears when I hit the button that made it show up in the first place. My code is:
<!DOCTYPE html>
<html>
<body>
<h1> Title Tests </h1>
<div id="Experiments">
<form id="Exp">
<input type="text" name="url box" placeholder="publisher URL"><br>
<div class="Title">
<input type="text" name="title box" placeholder="Test Title"><br>
</div>
<button id="addButton" onclick="newRow()">+</button><br>
<input type=submit value="Submit">
</form>
</div>
<script>
function newRow(){
var number = 2;
var newTitleRow = document.createElement('div');
newTitleRow.setAttribute('id',`Title${number}`);
var newBT = document.createElement('input');
newBT.setAttribute('type','text');
newBT.setAttribute('name',`title box ${number}`);
newBT.setAttribute('placeholder','Test Title');
newTitleRow.appendChild(newBT)
var button = document.querySelector("#addButton");
button.before(newTitleRow);
number++;
}
</script>
</body>
</html>
The problem is that you're using a html <button> inside a <form> element. This means it will automatically act as a submit button unless you declare it to be something different. So as soon as you push the + button it will try to submit the form to an undefined URL.
To work around you need to define that + button to be of type "button" like:
<button type="button" id="addButton" onclick="newRow()">+</button><br>
I have a form on my page and want to be able to submit the text box value (partnumber) as a query string in a hyperlink without submitting the form itself ? Is this possible ?
I have done some research and have tried document.getElementById("partnumber").value but am getting the error "Object Required". Code Below.
<form id="form3" name="form3" method="post" action="formpost?rmaid=<%=rmaid%>">
<input name="partnumber" type="text" id="partnumber" size="10" />
<span class="style11">Suggest Link</span>
<input name="invoice" type="text" id="invoice" size="15" />
</form>
I'll set the new page to open in a pop up window and list a series of values in the database but then I need the value selected to come back into the invoice field on the original page. I believe this can be done with JavaScript but I am new to this, can anyone help ?
For those Looking to pass values back I have found this snippet that works...
Put this in the child window
<script language="javascript">
function changeParent() {
window.opener.document.getElementById('Invoice').value="Value changed..";
window.close();
}
</script>
<form>
<input type=button onclick="javascript:changeParent()" value="Change opener's textbox's value..">
</form>
For the input field you should add an OnChange to it. This event should call a function which will then set your link's value.
You can see an example of this here (it uses a button press though and not an input OnChange Event): http://www.java2s.com/Code/JavaScript/HTML/ChangeURLandtextofahyperlink.htm
Edit: Added a Stack Snippet illustrating the solution.
function SetSuggestLink() {
var suggest = document.getElementById('partnumber').value;
document.getElementById('innerSpan').innerHTML =
"Suggest Link: suggest.asp?partnumber=" + suggest;
document.getElementById('QueryLink').href =
"suggest.asp?partnumber=" + suggest;
}
.style11 {
color:black;
}
.style2 {
text-decoration:none;
}
<form id="form3" name="form3" method="post" action="formpost?rmaid=SomeValue">
<input name="partnumber" type="text" id="partnumber" size="10"
OnChange="SetSuggestLink()" /> </br>
<a id="QueryLink" class="style2" href="#">
<span id="innerSpan" class="style11">Suggest Link</span>
</a></br>
<input name="invoice" type="text" id="invoice" size="15" />
</form>
I have a form that I have two buttons on. One button should take the user to one php script and the other button would take the user two a different php script. However for some reason the buttons aren't doing anything. Here is the code.
<script language="Javascript">
function OnButton1()
{
document.contactform.action = "../scripts/email-info.php"
// document.Form1.target = "_blank"; // Open in a new window
document.contactform.submit(); // Submit the page
return true;
}
function OnButton2()
{
document.contactform.action = "../scripts/email-info2.php"
//document.contactform.target = "_blank"; // Open in a new window
document.contactform.submit(); // Submit the page
return true;
}
</script
Then here is the actual form code:
<form id="contact-form" name="contactform" method="post">
<fieldset>
<div id="holder">
<div id="formLeft">
<div class="txtlabel">Name* </div><div class="input-bg"><input type="text"
name="name" id="name" required></div>
</div>
</div>
<div id="msgbox">
<div class="txtlabel">Tell Us About Your Business Needs</div>
<div class="message-bg">
<textarea name="message" id="message" rows="9" cols="56" required></textarea><input
name="formpage" type="hidden" value="<?=$pagename;?>" />
</div></div><div style="clear:both"></div><br /><br />
<input src="/submitbtn.jpg"
name="submit" value="View Now" class="submit-button" onclick="OnButton1();"/>
<input src="/submitbtn.jpg"
name="submit" value="Download Now" class="submit-button2" onclick="OnButton2();" />
</fieldset>
</form>
I've removed some of the submission fields to make it more easily viewable. But I get nothing when I click either button...Any thoughts??
problem is in input:
<input src="/submitbtn.jpg"
name="submit" value="View Now" class="submit-button" onclick="OnButton1();"/>
When you have a form:
document.contactform.submit
Javascript returns the input with name submit, not the submit function.
You could change the name of the input:
<input src="/submitbtn.jpg"
name="yourName" value="View Now" class="submit-button" onclick="OnButton1();"/>
Also, your inputs are not buttons, check this.
Update
This question mentions HTML5 formaction attribute:
<form action=#">
<buton formaction="script-1.php">submit one</button>
<buton formaction="script-2.php">submit two</button>
</form>
I'm surprised no one mentioned formaction. It is a legal attribute (in HTML5) for the input and button tag in submit/image state and can be used to send form data to a different action page. http://mdn.beonex.com/en/HTML/Element/input.html (it is also valid in button too).
<form action=#">
<buton formaction="script-1.php">submit one</button>
<buton formaction="script-2.php">submit two</button>
</form>
In case you need to support IE9-, you simply can polyfill this, using webshims.
<script src="webshims/polyfiller.js"></script>
<script>
webshims.polyfill('forms');
</script>
<!-- now it also works with IE8/9 and other legacy browsers -->
<form action=#">
<buton formaction="script-1.php">submit one</button>
<buton formaction="script-2.php">submit two</button>
</form>
The reference to your form is
document.forms.contactform
and not
document.contactform
So, for example, the submit button should be:
document.forms.contactform.submit();
// ^^^^^
The same correction should be applied to other references.
Alright ive been working on a project and have ran into an issue, I am trying to extract a whole table from a different website, the website changes based on user input, here is my code. The table id on the 173.193.183.122 site is table 4 So basically I need when the person hits Set Vin and it gets loaded into setVin I need the decode vin button to open the 173.193.183.122 website into an iframe (right now its set to to iframe i ) and only display table 4 (its listed as table 4 in index when looking through the other websites source code) I would like to keep all my code in one file like it is now. please help me out I cant figure out after hours and hours of researching.
let me know thanks
<html>
<head>Plate Lookup<head>
<br>
<TITLE>VIN</TITLE>
<BASE HREF="http://example.com/cfx/queryVin">
</HEAD>
<BODY>
<div id="vinDiv"> </div>
<script>
function setVin(){
myVin= document.forms["myform"]["text1"].value
}
function test() {
iframe = document.getElementById('i');
iframe.src = 'http://173.193.183.122/VIN-Decoded/vin/'+myVin;
}
function setPlate(){
plate= document.forms["myform2"]["text2"].value;
}
function setState(){
state= document.forms["myform3"]["text3"].value;
}
function sPlate() {
iframe = document.getElementById('k');
iframe.src = 'http://example.com/cfx/queryVin?Plate=' + plate+'&State=' + state;
}
//-->
enter code here
</script>
<form name="myform">
<input type="text" name="text1" value="Decode Vin">
<input type="button" value="Set Vin" onclick="setVin()">
</form>
<form name="myform2">
<input type="text" name="text2" value="Type license plate here no spaces">
<input type="button" value="Set Plate" onclick="setPlate()">
</form>
<form name="myform3">
<input type="text" name="text3" value="Type your 2 digit State code">
<input type="button" value="Set State" onclick="setState()">
</form>
<a onclick="test()" target="i" onmouseover="test()"></a>
<iframe src="" id="i" name="i" width="700" height="400" ></iframe>
<iframe src="" id="k" name="k" width="500" height="400"></iframe>
<br>
<button type="button" onclick="test()" >Decode Vin!</button> ^
<pre><pre>
<button type="button" onclick="sPlate()" >Decode plate!</button> ->
</body>
</html>
Using iframes to access the DOM, cookies, etc, between different domains is always prevented for security reasons.
Using iframes to access this kind of data when both the host page and the page within the iframe are on the same domain is okay.
HTML
<form id="create-template" class="form" action="" method="post">
<p class="_50">
<label for="t-name">Template name</label>
<input type="text" name="t-name" class="required"/>
</p>
<p class="_100">
<label for="t-html">Template HTML</label>
<textarea id="t-html" name="t-html" class="required" rows="10" cols="40"></textarea>
</p>
<div class="block-actions">
<ul class="actions-left">
<li><a class="button red" id="reset-template" href="javascript:void(0);">Clear</a></li>
</ul>
<ul class="actions-right">
<li><div id="preview"><input type="submit" class="button" value="Preview template"></div></li>
<li><input type="submit" class="button" value="Create template"></li>
</ul>
</div>
</form>
JavaScript:
$("#preview").click(function() {
$('#create-template').submit(function() {
window.open('', 'formpopup', 'width=400,height=400,resizeable,scrollbars');
this.target = 'formpopup';
});
});
When pressing Preview template it opens a popup window and will display a preview of the template. This is correct.
After previewing the template, when pressing Create template the page submits to the pop up. This is incorrect.
This problem only happens when previewing the template. Create template submits the form on the same page unless you preview the template.
How can I keep the preview template from conflicting with create template?
This line is telling the form to submit to the popup window:
this.target = 'formpopup';
Change it to:
this.target = window.opener;
You'll probably want to close the popup after submitting. To do that, add this line:
formpopup.close();