I have this code
<script>
function cA( url )
{
document.myform.action = url;
}
</script>
<input type="whatever" name="whatever" id="whatever" />
<button class="whatever-button" id="defaultAction" value="Go for it" name="whatever" type="submit" onClick="cA('whatever.php#anchor')" >Go for it
</button>
When you click the Go for it-Button, whatever.php#anchor is being loaded. How do I need to change the input tag's elements for it to execute the same cA('whatever.php#anchor') as the button click?
So when a user presses enter in the field, the site whatever.php#anchor should be loaded or more specifically, cA('whatever.php#anchor') be executed.
The page has more buttons, so making one button the default button does not work.
PS:
Wrapping all in one form does not work as the page's structure is
<form>
<script>
function cA( url )
{
document.myform.action = url;
}
</script>
<input type="whatever1" name="whatever1" id="whatever1" />
<button class="whatever1-button" id="defaultAction1" value="Go for it" name="whatever1" type="submit" onClick="cA('whatever.php#anchor1')" >Go for it
</button>
<input type="whatever2" name="whatever2" id="whatever2" />
<button class="whatever2-button2" id="defaultAction2" value="Go for it" name="whatever2" type="submit" onClick="cA('whatever.php#anchor2')" >Go for it
</button>
<input type="whatever3" name="whatever3" id="whatever3" />
<button class="whatever3-button" id="defaultAction3" value="Go for it" name="whatever3" type="submit" onClick="cA('whatever.php#anchor3')" >Go for it
</button>
...
</form>
You can try this:
<input type="whatever" name="whatever" id="whatever" onkeydown="if (event.keyCode == 13) {cA('whatever.php#anchor');}" />
Check this post for more information.
Related
I'm having trouble carrying localstorage data from this form to more than one html. This code below works fine (with onload="setData()" in the body of both htmls), a user inputs text into the form, and when submitted, it is carried over to main2.html. However, I need the four submit buttons to carry that data to separate htmls.
I understand that this functions because the action="main2.html" is in the form tag. This obviously means that I can't have the same form sending this data to separate pages. Is there a way of resolving this, or do I need separate forms for each page?
SENDING PAGE HTML:
<form id="form" method="GET" action="main2.html">
<input
class="name-input"
type="text"
placeholder="YOUR NAME"
name="name"
id="name"
/>
<input
class="button1"
type="button"
value="Submit"
onclick="submitForm()"
/>
<input
class="button2"
type="button"
value="Submit"
onclick="submitForm()"
/>
<input
class="button3"
type="button"
value="Submit"
onclick="submitForm()"
/>
<input
class="button4"
type="button"
value="Submit"
onclick="submitForm()"
/>
</form>
SENDING PAGE JS
<script>
function submitForm() {
if (typeof localStorage != "undefined") {
localStorage.name = document.getElementById("name").value;
}
document.getElementById("form").submit();
}
</script>
RECEIVING PAGE HTML
<div class="hey">
<h1 id="show" class="name-placeholder">Luke Jones's</h1>
</div>
RECEIVING PAGE JS
<script>
function setData() {
if (typeof localStorage != "undefined") {
document.getElementById("show").innerHTML = localStorage.name;
}
}
</script>
This could be very messy, but I got it working by listening to the comment above and removing the form, and adding JS functions for the buttons linking them to separate pages. Also keeping the sending and receiving JS from the original question.
<input
method="GET"
class="name-input"
type="text"
placeholder="YOUR NAME"
name="name"
id="name"
/>
<input
class="button1"
type="button"
value="Page1"
onclick="myFunction1(); submitForm();"
/>
<input
class="button2"
type="button"
value="Page2"
onclick="myFunction2(); submitForm();"
/>
function myFunction1() {
window.location.href = "main2.html";
}
function myFunction2() {
window.location.href = "main3.html";
}
If I have a simple html form with two submit buttons:
<form method="POST" class="submit_form main_form" action="myaction">
<input type="submit" name="goback" value="Go Back" />
<input type="submit" name="confirm" value="Confirm">
<input type="hidden" name="secret" value="hello"/>
</form>
It is possible to only post the hidden input if the "confirm" submit is clicked?
If the "goback" submit is clicked the hidden input should be ignored. I know how to accomplish this with JavaScript but was wondering if it can be done with just html.
For anyone wondering, this is how you do this in JavaScript:
<script>
var elements = document.getElementsByClassName('submit_form');
elements[0].addEventListener(
'submit',
function(event) {
if(event.explicitOriginalTarget.name === 'goback'){
var hiddenInput = document.querySelector("input[name='step']");
hiddenInput.setAttribute("disabled", "disabled");
}
}
);
</script>
You could put the buttons in 2 separate forms:
<form method="POST" class="submit_form main_form" action="myaction">
<input type="submit" name="goback" value="Go Back" />
</form>
<form method="POST" class="submit_form main_form" action="myaction">
<input type="submit" name="confirm" value="Confirm">
<input type="hidden" name="secret" value="hello"/>
</form>
That way the secret field will only be posted if the confirm button is clicked.
If you want to do it in the php code you can leave your form as is
and check if isset($_POST["confirm"]) to check if the confirm button was the one clicked.
I'm trying to make my submit button a image and also when clicked it links to another page.
This is the current submit button which works but isn't a href or image
<input type="submit" name="submit" alt="add" onclick="add()" >
These are the multiple methods I've tried but none of them seem to work. Can anyone see where I'm going wrong?
<input type="image" name="submit" src="img/add.png" class="addButton" id="addButton" />
2.
<img src="img/add.png" class="addButton" id="addButton" alt="add button" />
3.
<img src="img/addToBookmarks.png" class="addButton" id="addButton" alt="add button" />
Lastly the form itself on stadiumLargeSymbol.php:
<form class="form" action="stadiumLargeSymbol.php?submit=true" method="post">
<img id="enlargedSymbol" type="text" size="60" name="pathOfSymbol" src='' />
<br />
<input class="inputBox" type="hidden" name="pathOfSymbol" id="pathOfSymbol" />
<script>
var querySrc = URI(window.location.href).search(true).src;
$("#enlargedSymbol").prop("src", querySrc);
$('#pathOfSymbol').val(querySrc);
</script>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br/>
<input type="submit" name="submit" alt="add to bookmarks button" onclick="add()" >
</form>
Check this link:
https://jsfiddle.net/0e2rykap/
<html>
<body>
<h1>
<button type="submit" class="btn_submit">
<img src="http://www.smartwebby.com/imgs/tutorials/fireworks/website-design/submit-button.jpg" />
</button>
</h1>
</body>
</html>
you can use javascript to mimick the href redirection
Try giving id to div where your image is being rendered, Assuming id of your div is "divImage",You can write following is JS :
$("#divImage").click(function(){
//On Click Event
});
You can write your form submission code and redirecting code inside "on-click" event.Your problem will be solved.
Apply a background image to the submit button using css.
// html
<input type="submit" name="submit" alt="add" onclick="add()" >
// css
form input[type=submit]{
background-image: url('img/example.png');
}
And add other styling properties as necessary. Don't forget to remove the border and such from the button in the css.
Instead of input type submit
Use a div , inside div set a image tag like below
<div id="yoyo">
<img src="whateva" />
</div>
Now on click of img tag ID or Div ID , submit the form.
Like :
$( "#yoyo" ).click(function() {
$( "#FormID" ).submit();
//or if you want to redirect than
window.location.href = "http://stackoverflow.com";
});
I am having trouble outputing text to a div in Javascript. When I call the function on button click it displays the text for a fraction of second and then disappears. Why is it so? The code is given below;
Code:
function val(){
var x = document.getElementById('us').value
document.getElementById("demo").innerHTML = x;
}
HTML:
<form method="post">
<p id="demo"></p>
<br />
<input type="text" id="us" name="username"></input>
<br />
<button type="submit" onclick="val()">Sign Up</button>
</form>
<form method="post">
<p id="demo"></p>
<br />
<input type="text" id="us" name="username"></input>
<br />
<button type="button" id="asd">Sign Up</button>
</form>
$('#asd').click(function () {
var x = document.getElementById('us').value
document.getElementById("demo").innerHTML = x;
});
FIDDLE
I made a few changes. I changed the button type from submit to button also i added an id for the button. check it
You have a submit button in a form, its default action is to submit the form that is why the result is disappearing(the page is getting refreshed).
Since you really don't want to submit the form(here you are just doing some dynamic changes to the page), one easy solution is to change the type of the button to button
function val() {
var x = document.getElementById('us').value
document.getElementById("demo").innerHTML = x;
}
<form method="post">
<p id="demo"></p>
<br />
<input type="text" id="us" name="username"></input>
<br />
<button type="button" onclick="val()">Sign Up</button>
</form>
Another solution is to prevent the default action of the submit button click by returning false
Try this:
Your code works as expected but as you have taken button type as submit, i submits the form.
function val() {
var x = document.getElementById('us').value
document.getElementById("demo").innerHTML = x;
}
<form method="post">
<p id="demo"></p>
<br />
<input type="text" id="us" name="username"></input>
<br />
<button type="button" onclick="val()">Sign Up</button>
</form>
I have many forms like the following on the page. Now I want change the form action based on which submit button the user clicked (and of course submit the form)
<form action="/shop/products.php" data-ajax="false" method="post">
<div data-role="fieldcontain">
<input name="submit" class="obutn" type="submit" value="Order" />
<input name="submit" class="oEbutn" type="submit" value="Extras" />
</div>
</form>
I tried with
$(".obtn").click(function() {
$(this).parent().parent().attr("action", "/shop/products.php");
});
$(".oEbtn").click(function() {
$(this).parent().parent().attr("action", "/shop/extras.php");
});
but the form is always submited to products.php. Can you tell me what's wrong?
Instead of setting the action attribute on the form itself, consider setting formaction attribute on each individual input element.
Docs: http://www.w3.org/TR/html-markup/input.submit.html#input.submit.attrs.formaction
<form data-ajax="false" method="post">
<div data-role="fieldcontain">
<input formaction="/shop/products.php"
name="submit" class="obutn" type="submit" value="Order" />
<input formaction="/shop/extras.php"
name="submit" class="oEbutn" type="submit" value="Extras" />
</div>
</form>
There are two typos:
obtn instead of obutn
oEbtn instead of oEbutn
Another suggestion is to use closest("form") to get the form that contains the clicked button.
$(".obutn").click(function() {
$(this).closest("form").attr("action", "/shop/products.php");
});
$(".oEbutn").click(function() {
$(this).closest("form").attr("action", "/shop/extras.php");
});
$("form").on("submit", function () {
alert($(this).attr("action"));
});
JSFIDDLE
Capture the submit event and determine which button was clicked. From that, you can change the action of the form.
Here's a link on how to do that.
How can I get the button that caused the submit from the form submit event?
Also, don't give the form the action until the click happens at all, it is superfluous.
<form data-ajax="false" method="post">
<div data-role="fieldcontain">
<input name="submit" class="obutn" type="submit" value="Order" />
<input name="submit" class="oEbutn" type="submit" value="Extras" />
</div>
</form>
What if you try it out with a switch instead? Something like:
<input name="submit" id = "1" class="obutn" type="submit" value="Order" />
<input name="submit" id = "2" class="oEbutn" type="submit" value="Extras" />
And then in JavaScript we have:
//param: The Id attr of the button that was clicked
function postTo(id){
switch(id){
case 1: postProducts();
break;
case 2: postExtras();
break;
default: //Do something else
}
}
Just an idea. Haven´t tested that yet, but maybe it could be helpful. I hope so.