I want to use an image as a submit button for a form:
<!DOCTYPE html>
<html>
<body>
<form action="/cgi-bin/script.cgi" method="GET">
<input type="hidden" name="status" value="ok">
<input type="image" src="/images/button.png">
</form>
</body>
</html>
The HTML above will result in a clickable image, but also a regular submit button right next to the image with the text http://127.0.0.1:80/cgi-bin/script.cgi.
I only want the image the be shown. What am I doing wrong?
EDIT:
This will work if CSS is enabled: https://stackoverflow.com/a/1193338/5185801
Close <input> tags properly like
<form action="/cgi-bin/script.cgi" method="GET">
<input type="hidden" name="status" value="ok" />
<input type="image" src="/images/button.png" />
</form>
I don't see any problem.
Check out this fiddle.
Here is the snippet.
<body>
<form action="/cgi-bin/script.cgi" method="GET">
<input type="hidden" name="status" value="ok" />
<input type="image" src="http://cdn.sstatic.net/stackoverflow/img/favicon.ico?v=6cd6089ee7f6" />
</form>
</body>
Related
Please see the code below.
<!DOCTYPE html>
<html>
<body>
<form action="#" method="post" id="frmIdSave" name="frmNmSave" onsubmit="alert('Save');return false;">
<div>
<input type=submit class="greyBttn" value="Save" id="btnIdSave" name=btnNameSave/>
<input type="hidden" name="testsave" value="1" />
</form>
<form action="#" id="frmback" name="frmback" onsubmit="alert('Back');return false;">
<input type="submit" class="greyBttn" value="Back" id="btnIdBack" name="btnNameBack"/>
<input type="hidden" name="testback" value="1" />
</form>
</div>
</body>
</html>
On IE11/Edge The back button is firing the onsubmit event on both forms on the page.
This is because the first form tag is outside the Div.
How can I get round this?
Thanks
Simon
This is because the first form tag is outside the Div.
Yes
How can I get round this?
Write valid HTML. Move it inside the div.
I have resolved it with the code below.
It is worth noting though that when you submit using javascript, then the onsubmit event on the form is not called, so the complete solution for this would abstract any onsubmit code into a separate function.
<!DOCTYPE html>
<html>
<body>
<form action=# method=post id=frmIdSave name=frmNmSave onsubmit="alert('Save');return false;">
<div>
<input type=submit class="greyBttn" value="Save" id=btnIdSave name=btnNameSave/>
<input type=hidden name=testsave value='1'/>
<input type=button class="greyBttn" onclick='document.getElementById("frmback").submit();' value="Back" id=btnIdBack name=btnNameBack/>
</div>
</form>
<form action=# id=frmback name=frmback onsubmit="alert('Back');return false;">
<input type=hidden name=testback value='1'/>
<input type=submit>
</form>
</body>
</html>
I have a search form that has a image as the button which is great, but i can't get the image to look the same as other text, i would like to remove this image and just use it as text instead then style it accordingly, if someone could give me some advice on doing this the simplest way possible that would be appreciated.
<form action=".php" method="get" onsubmit="return check_small_search_form()">
<label for="search_query"></label>
<input type="text" name="search_query" id="search_query" class="Textbox" value="Search" autocomplete="off">
<input type="image" src="Search.gif" class="Button">
</form>
Many thanks.
You can replace the image with a submit button and remove the borders and background with css. That should show just plain text
<form action=".php" method="get" onsubmit="return check_small_search_form()">
<label for="search_query"></label>
<input type="text" name="search_query" id="search_query" class="Textbox" value="Search" autocomplete="off" />
<input type="submit" value="The text you want" class="Button" />
</form>
I am using this code to show a textbox and a button:
<html>
<body>
<form name="form" method="post">
<input type="text" name="text_box" size="50"/>
<input type="submit" id="search-submit" value="submit" />
</form>
</body>
</html>
How can I make the input to be with multiline?
The best way to have a multiline input is to use a textarea:
<textarea name='multiline_ip' rows='5' cols='15'></textarea>
I have a form on a remote server I'm trying to submit data to, example below
<html>
<head>
</head>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
<input type="submit" name="send" value="Submit" />
</form>
</body>
</html>
I'm trying to auto submit the data like this
<html>
<head>
</head>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
<script type="text/javascript">
document.forms[0].submit();
</script>
</form>
</body>
</html>
It works fine if the first example didn't have a (name="send") name but when it does have a name nothing submits. My question is how would I go about sending the data with a input button that has a name.
Thank you
Note: The answer turned out to be type="hidden" instead of type="submit", in which the second does not allow DOM submission while also submitting that input's value in the GET/POST data. type="hidden" does, and it works here since the button does not need to be physically clicked.
Pick one:
<form name="formname" id="formid" action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
<input type="submit" name="send" value="Submit" />
</form>
<script type="text/javascript">
if (confirm('Ok for "formname", Cancel for "getElementById"')) {
console.log('document.formname.submit()');
document.formname.submit();
} else {
console.log('document.getElementById("formid").submit()');
document.getElementById('formid').submit();
}
</script>
http://jsfiddle.net/userdude/EAmwj/3
Your JavaScript code will get executed as soon as the page is loaded. That is why it gets submitted immediately.
You need to wrap the JS code in a function and let an event call it from the page.
You can use a regular button and set the function for the onclick event of a button.
<html>
<head>
<body>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
<input type="button" name="send" value="test2" onclick="doSubmit()" />
<script type="text/javascript">
function doSubmit() {
document.forms[0].submit();
}
</script>
</form>
</body>
</html>
I have a form and when the form is loaded through a browser, I want it to submit the data automatically.
The problem is I wrote a PHP script that will submit it all fine on a test form. My problem is the server I'm trying to submit the data to named the button "submit".
Here is the example form:
<html>
<head>
</head>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
</form>
<script type="text/javascript">
document.forms[0].action="submit"
</script>
</body>
</html>
The person that created the form on the other server named it "submit". Is there a workaround until they fix it?
Here is a example of the person's form
<html>
<head>
</head>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
<input type="submit" name="submit" class="submit" value="Send Data" />
</form>
</body>
</html>
You want to submit the form? Then simply use its submit() method:
document.forms[0].submit();
If the server expects submit to be POSTed, i.e. the button being clicked, you can simply trigger the click() event of the button. Since you cannot access it using its name, I'd use jQuery for it:
$('input[name="submit"]').click();
Instead of:
<html>
<head>
</head>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
</form>
<script type="text/javascript">
document.forms[0].action="submit"
</script>
</body>
</html>
Try this:
<html>
<head>
</head>
<form name="MyForm" action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
</form>
<script type="text/javascript">
document.MyForm.submit();
</script>
</body>
</html>
If I understand your question correctly, the input element has name="submit" and type="submit". They are different things.
So you can also create the same behavior easily.