So I'm working on a form that when you click it it brings up another form, then another, etc etc.
For the example, this is what I have so far:
<head>
<script langauge="javascript">
function showGeneral(){
document.getElementById('general').style.display="block";
document.getElementById('colors').style.display="none";
document.getElementById('domain').style.display="none";
document.getElementById('details').style.display="none";
}
function showColors(){
document.getElementById('general').style.display="none";
document.getElementById('colors').style.display="block";
document.getElementById('domain').style.display="none";
document.getElementById('details').style.display="none";
}
function showDomain(){
document.getElementById('general').style.display="none";
document.getElementById('colors').style.display="none";
document.getElementById('domain').style.display="block";
document.getElementById('details').style.display="none";
}
function showDetails(){
document.getElementById('general').style.display="none";
document.getElementById('colors').style.display="none";
document.getElementById('domain').style.display="none";
document.getElementById('details').style.display="block";
}
</script>
</head>
<body>
<div id="general" name="general">
<h1> General </h1>
<form id="general" name="general">
Name <input type="text" id="frm1txt1" name="frm1txt1"/> <br>
Email <input type="text" id="frm1txt2" name="frm1txt2"/> <br>
<input type="button" id="frm1btn1" name="frm1btn1" value="Continue" onclick="showColors();"/> <br>
</form>
</div>
<div id="colors" name="colors" style="display:none">
<h1> Colors </h1>
<form id="frm2" name="frm2">
Green? <input type="text" id="frm2txt1" name="frm2txt1"/> <br>
Red? <input type="text" id="frm2txt2" name="frm2txt2"/> <br>
<input type="button" id="frm2btn1" name="frm2btn1" value="Continue" onclick="showDomain();"/> <br>
</form>
</div>
<div id="domain" name="domain">
<h1> Domain Name? </h1>
<form id="frm1" name="frm1">
Yes <input type="text" id="frm1txt1" name="frm1txt1"/> <br>
No <input type="text" id="frm1txt2" name="frm1txt2"/> <br>
<input type="button" id="frm1btn1" name="frm1btn1" value="Continue" onclick="showDetails();"/> <br>
</form>
</div>
<div id="details" name="details">
<h1> Describe Your Order </h1>
<form id="frm1" name="frm1">
Img <input type="text" id="frm1txt1" name="frm1txt1"/> <br>
kk <input type="text" id="frm1txt2" name="frm1txt2"/> <br>
<input type="button" id="frm1btn1" name="frm1btn1" value="Finish" onclick="showGeneral();"/> <br>
</form>
</div>
</body>
The functions work fine - but the problem is it displays all the forms at on page refresh/load. How do I make it so just the first one displays when you load that page?
Cheers!
When the page loads there is no call to any of the JS functions so none of them are being processed and all your forms are displayed. You need to add an explicit call to one of the functions. So to display the first form only you'd need to add
showGeneral();
In your script block (after the showDetails() function for example).
You need to tie up each of your JS functions with an event, so that the function is called when the event is triggered.
From what I understood of your question, you need to have an onclick event handler associated with some element of your form - so that when the first one is clicked, it calls the appropriate function for the second form and so on. Also, initially just set the first form to be visible (through your CSS).
Related
I used #John Strood's answer from here to build my current script. The below code is close to my need, I now just need to append text to the results.
For example, appending site:imdb.com/title toHakunamatata to get https://www.bing.com/search?q=site:imdb.com/title+Hakunamatata
#Spectric had a great answer for a single-submit form, but it does not seem to function with the current script.
<form action="" method="get">
<input type="text" value="Hakunamatata" id="box" name="search_query"placeholder="text" autofocus />
<input type="submit" value="BNG" formaction="https://testurl1.com"
onclick="document.getElementById('box').name='q'" />
<input type="submit" value="ABB" formaction="http://testurl2.com"
onclick="document.getElementById('box').name='s'" />
</form>
If you are wondering, the onclick functions are necessary
testurl1 uses the search modifier of ?q and testurl2 uses ?s
Prepend the string to the input's value when the submit event is fired.
form.addEventListener('submit', function() {
box.value = 'site:imdb.com/title ' + box.value;
})
<form action="" method="get" id="form">
<input type="text" value="Hakunamatata" id="box" name="search_query" placeholder="text" autofocus />
<input type="submit" value="BNG" formaction="http://www.bing.com/search" onclick="document.getElementById('box').name='q'" />
<input type="submit" value="ABB" formaction="http://www.bing.com/search" onclick="document.getElementById('box').name='s'" />
</form>
To conditionally prepend the string, move the logic to the button's click event listener.
<form action="" method="get" id="form">
<input type="text" value="Hakunamatata" id="box" name="search_query" placeholder="text" autofocus />
<input type="submit" value="BNG" formaction="http://www.bing.com/search" onclick="document.getElementById('box').name='q';box.value = 'site:imdb.com/title ' + box.value;" />
<input type="submit" value="ABB" formaction="http://www.bing.com/search" onclick="document.getElementById('box').name='s'" />
</form>
I need to add a single JavaScript statement in the function clickHandler() to make sure the input from the text boxes form a border around the first paragraph. I know that the getElementById only accepts one element not multiple however this approach is also not working. Would very much appreciate any help. This is all the code involved.
<head>
<script>
function clickHandler(){
document.getElementById('para1').style.border =
document.querySelectorAll('#size, #style, #colour).value;
}
</script>
</head>
<body>
<h1>Introduction to JavaScript</h1>
<p id="para1">JavaScript is also known as ECMAScript.</p>
<p>Size:
<input type="text" id="size">
</p>
<p>Style:
<input type="text" id="style">
</p>
<p>Colour:
<input type="text" id="colour">
</p>
<button type="button" onclick="clickHandler()" value="Change style">Change style</button>
You might use Array.from to transform a NodeList of each input into an array of each input's values, then join by spaces:
function clickHandler() {
document.getElementById('para1').style.border = Array.from(
document.querySelectorAll('input'),
input => input.value
).join(' ');
}
<p id="para1">JavaScript is also known as ECMAScript.</p>
<p>Size:
<input type="text" id="size" placeholder='5px'>
</p>
<p>Style:
<input type="text" id="style" placeholder='solid'>
</p>
<p>Colour:
<input type="text" id="colour" placeholder='green'>
</p>
<button type="button" onclick="clickHandler()" value="Change style">Change style</button>
Why does the following code not add another text input field when clicking on the add another field input button?
<html>
<head>
<script>
function add_field()
{
var elem = document.createElement("input");
elem.setAttribute('type','text');
elem.setAttribute('name','user');
document.body.insertBefore(elem, document.getElementById('su'));
}
</script>
</head>
<body>
<form name="input" method="get">
Put input here:<br>
<input type="text" name="user">
<input type="button" onclick="add_field()" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
</body>
</html>
According to the MDN reference page, you need to call parent.insertBefore(newElem, referenceElem). In your example, I suppose that <form> is the parent, not <body>. Changing the last line of your function to this:
var target = document.getElementById('su');
target.parentNode.insertBefore(elem, target);
will make it work.
jQuery solution here
<form name="input" method="get">
Put input here:<br>
<input id='ap' type="text" name="user">
<input id="addField" type="button" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
JavaScript
$('#addField').click(function(e)
{
$('<input type="text" />').insertBefore('#su')
});
I have a form with an input textbox and a button. When I click on a button I want to go to a different page depending on the value of the input textbox. For example:
<form name="frm1" id="frm1" action="page.php">
<input type="text" name="txt_name" id="txt_name" value="simple text" />
<input type="button" Onclick="redirect_to('page2.php/?id=8&input=this.txt_name.value')" value="Save" />
</form>
How can I get this value? Can this be done without using a function?
Well I would recommend a function for following reasons:
Cleaner code.
Better way if you have multiple buttons.
Less code.
Better manageability.
Add this to your buttons
onclick="redirect('mytextbox.value');";
Add this to your markup inside <head>(just few lines of code):
<script type="text/javascript">
function redirect(value){
window.location="page.php/?id=8&input="+value.ToString();
}
</script>
Why wouldn't you just do this?
<form name="frm1" id="frm1" action="page2.php">
<input type="hidden" value="8" name="id" />
<input type="text" name="txt_name" id="txt_name" value="simple text" />
<input type="submit" value="Save" />
</form>
if you have something like :
<form>
<input type="text" name="formelem" />
<input type="button" />
</form>
you can put to the button :
onclick="redirect_to('page.php/?id=8&input='+this.form.formelem.value)"
you are on the button, so "this" will be the button and you need to get the form from which you can get the input
another way ( if you don't need a form for another purpose ) would be to just put :
<input type="text" id="formelem" />
<input type="button" onclick="redirect_to('page.php/?id=8&input='+document.getElementById('formelem').value)" />
onclick="window.location.href = 'page.php/?id=8&input=' +this.value.toString()"
I've been at this for two days and can't seem to get it. Basically, I'm using the JQuery Cookbook modal from scratch. My problem is the form html page loads fine but the code will not recognize my submit button. Here's the relevant parts of the code:
Separate HTML:
<div id="contact">
<form action="" id="register_form" method="post">
<p>First Name <br />
<input type="text" id="firstname" name="firstname" /></p>
<p>Last Name <br />
<input type="text" id="lastname" name="lastname" /></p>
<p>Username: <span class="micro">Must be a valid email address</span></span><br />
<input type="text" id="username" name="username" /></p>
<p><input type="submit" value="Register" id="register" /></p>
</form>
</div>
Here's the relevant parts of the modal code:
// Insert modal at end of </body>.
$('body').append('<div id="modal_wrapper"><!--[if IE 6]><iframe id="modal_iframe" frameborder="0"></iframe><![endif]--><div id="modal_overlay"></div><div id="modal_window"><div id="modal_bar"><strong>Modal window</strong>Close</div><div id="modal_content"><div id="contact"><form><p><input id="firstname" /></p><p><input id="register" /></p></form></div></div></div>');
$('#modal_content').load('mediaKitF.html#contact'.replace('#', ' #'), '', showModal);
$("input[type=text]").focus(function(){
// Select field contents
this.select();
});
$('input #firstname').focus();
$('#register').click(function () {
alert("hello there");
});
$('#modal_content').load() is an asynchronous method, which means that you are trying to attach your click event to the $('#register') element before receiving the new content. You need to either use $('#register').live('click', function() {}) or move the code attaching the click handler into your showModal function.