I am using the following code to palce two buttons in a form. But The buttons will come one by one. I mean to say, one button will come first and just below that another button will come.
code snippet
<form name="myform" action="xxxx.cgi" method="POST">
<input type="submit" value="hello" name="d">
</form>
<form name="myform" action="yyyy.cgi" method="POST">
<input type="submit" value="hai" name="dd">
</form>
I am able to place two buttons in the same row with the following code.
<form name="myform" action="xxxx.cgi" method="POST">
<input type="submit" value="hello" name="d">
<input type="submit" value="hai" name="dd">
</form>
But both button will be loading xxxx.cgi on click. What can I do to place two buttons on a web page on the same row in which first button will be loading xxxx.cgi on click and second button will be loading yyyy.cgi on click. Please help
By
Dominic
You can use either float:left for form element or you can use display: inline-block
form{display: inline-block;}
See http://jsfiddle.net/
Add a style like this in your CSS
form{
float:left;
}
See this fiddle
I have used this markup as this is the right one
<form name="myform" action="xxxx.cgi" method="POST">
<input type="submit" value="hello" name="d">
</form>
<form name="myform" action="yyyy.cgi" method="POST">
<input type="submit" value="hai" name="dd">
</form>
the other one uses two buttons with same name.
One problem with the above code is that it uses two forms in the same page which can create problems sometime.
So use just one form
See the fiddle for that..
Html
<form name="myform" class='myform' action="xxxx.cgi" method="POST">
<input type="submit" value="hello" name="d">
</form>
<form name="myform" class='myform' action="yyyy.cgi" method="POST">
<input type="submit" value="hai" name="dd">
</form>
You can put a style on both forms with the following css.
.myform
{
float: left;
}
hey #Dominic here is what you can do to fix the problem.You just have to use some javascript.
create two forms but place both buttons in one form
<body>
<form action='1.php' name='first'>
<input type="button" value='1.php' id='one'/>
<input type="button" value='2.php' id='two'/>
</form>
<form action='2.php' name='second'>
</form>
</body>
Trigger actions using javascript
var one = document.getElementById('one');
one.onclick=function(){
alert(document.first.submit());
}
var two = document.getElementById('two');
two.onclick=function(){
alert(document.second.submit());
}
Related
so I don't know if I'm doing it right, but I wanted to make a button with a link in the submit input, but I don't know how to do that, the code is like this
<form class="box" action="index.html" method="post">
<h1>Login</h1>
<input type="text" name="" placeholder="Usuario">
<input type="password" name="" placeholder="Insira Sua Senha">
<input type="submit" name="" value="Login">`in this part`
I tried to make a link with href and ul, I tried to create the button with div button, but it didn't stay in the position it was when I use the input.
i am new contributor to, i hope to help answer your question, actually I'm not sure what you mean by "a button with a link in the submit input", maybe like this, you can change the type to button
<form class="box" action="index.html" method="post">
<h1>Login</h1>
<input type="text" name="" placeholder="Usuario">
<input type="password" name="" placeholder="Insira Sua Senha">
<input type="button" name="" value="Login" onclick="functionHere()">`in this part`
source : Html input type="button" - W3Schools
I would remove the submit element entirely then. With a little bit of JavaScript, you can get anything to submit the form. It's not the most conventional way to go about things but it does exactly what you need it to do. If you wanted to pass any other data through the submit element, you can simply add invisible elements.
<form class="box" action="index.html" method="post" id="form">
<h1>Login</h1>
<input type="text" name="" placeholder="Usuario">
<input type="password" name="" placeholder="Insira Sua Senha">
<div class="submit-button" onclick="document.getElementById("form").submit()">
<p>Login</p>
Link
</div>
</form>
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 made this simple search box and want to use an svg image as the submit button, how could I do that without any javascript?
here's the form:
<form method="post" action="#">
<input type="text" name="rechercher" id="rechercher" placeholder="Rechercher"/>
<input type="submit" value="none" onerror="this.onerror=null; this.src='images/loupe.png'"/>
</form>
You can use an image button on the button
<input type=image src=PATH_TO_YOUR_IMAGE alt="Submit Me">
or set submit button background to an image using css
input[type=submit] {
background:url(BACKGROUND_IMAGE_PATH_HERE);
border:0;
display:block;
height:Change_TO_backgroundimageheight;
width: Change_To_backgroundimageWidth;
}
<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
<input type="image" src="submit.gif" alt="Submit">
</form>
The long and short is input type image will also submit the form
I have a simple HTML form with multiple submit buttons and I want my application to act differently on whichever submit button I click.
Example:
<form method="POST">
<input type="submit" value="test" name="test" />
<input type="text" name="search_query" style="width: 300px; padding: 5px" value="some text">
<input type="submit" value="Search" name="search" />
<input type="text" name="search_query2" style="width: 300px; padding: 5px" value="some text">
<input type="submit" value="Search" name="search2" />
<input type="submit" value="GO" name="next" />
</form>
This works for me, and I know how to distinguish which button I clicked. The problem I have is that if I push Enter while editing the text-field then the first submit button gets clicked (the one named test). Is this possible to let the browser know (with HTML only - the whole point of this is to make it work with NO JavaScript) that I pushed Enter and it should send search with POST, not test?
So is there some kind of binding of text field to the submit button?
A solution to this problem would be to have multiple form elements, including your different submit buttons and the corresponding textfields.
I can't think of a solution with just one formular but no Javascript in use.
You could move the one you want to be submitted to first in that list, like so:
<form method="POST">
<input type="text" name="search_query" style="width: 300px; padding: 5px" value="some text">
<input type="submit" value="Search" name="search" />
<input type="submit" value="test" name="test" />
<input type="submit" value="GO" name="next" />
</form>
But it seems that your HTML is just poorly formed, I'd recommend Merguez's answer
Since your edit, there is no way to do this without Javascript/jQuery.
This would not be hard to do with PHP.
First: Change your buttons to actual controls:
becomes
<form method="POST">
<input type="text" name="search_query" style="width: 300px; padding: 5px" value="some
text" />
<button type="submit" name="actionB" onclick="javascript:checkBtn();" value="Search">Search</button>
<button type="submit" name="actionB" onclick="javascript:checkBtn();" value="Test">Test</button>
<button type="submit" name="actionB" onclick="javascript:checkBtn();" value="Go">Go</button>
</form>
Now, when the form is submitted, check the returned value of actionB. If it's "Search", then piece together your search URL using the returned value of search_query.
There is NO way to read variables using only HTML. JavaScript is required if you're not going to use a scripting language to do this. You can totally do this in native JavaScript. JQuery is NOT required for this relatively simple function.
<script language="JavaScript">
function checkBtn() {
var btnX=document.getElementById("actionB").value;
if (btnX=="Search") {
// compose your new URL here
}
// repeat for each of the possible buttons
</script>
Hope that helps somewhat!
Steve
ttI know this is a lame question but in order to do it right i need your help.
this is my html code
<form name="form1" class="form1">
<fieldset>
<legend>Subscription</legend>
<label for="subname">Name</label>
<input type="text" name="subname" />
<label style="padding-left:20px;" for="subemail">Your Email</label>
<input type="text" name="subemail" />
</fieldset>
</form>
<div style="width:100%; font-size:14px;text-align:center;">Click here to subscribe
</div>
<div class="subscribe">
</div>
and here is the fiddle
http://jsfiddle.net/V8RB2/
how can i associate the "Click here to subscribe" text and the button with this form?
If i understood you correctly, you want to submit the form when the link is clicked. To do this, you'll have to use JavaScript.
A quick way of doing it is by telling the form to submit itself in the onclick attribute of the link.
<a onclick="form1.submit()" href="#">Click here to subscribe</a>
What happens is, that when the link is clicked, you trap its onclick event and then you tell form1 to submit itself.
The easiest way would make this a button within the form and use CSS to style it however you want.
<input type="submit" id="button1" class="button1" name="subscribe" value="Click here to subscribe!" />
Then to style:
form input.button1 {
style here
}
The below will work.
<form name="form1" class="form1">
<fieldset>
<legend>Subscription</legend>
<label for="subname">Name</label>
<input type="text" name="subname" />
<label style="padding-left:20px;" for="subemail">Your Email</label>
<input type="text" name="subemail" />
</fieldset>
Click here to subscribe
</form>
Change your link's href to:
href="javascript:document.forms['form1'].submit()"
Or add that as an onClick attribute.
Updating with a technique to route around disabled javascript.
<script>document.write('Click here to subscribe</div><div class="subscribe">');</script><noscript><input type="submit" value="submit"></noscript>