Buttons go on the same address - html

I have the following html code
gogu#yahoo.com wants to be your partner. Do you agree?
<br><input type="button" id="1" name="btn1" class="button" value="Yes" onclick="window.location='confirm/gogu#yahoo.com';" />
<input type="button" id="2" name="btn2" class="button" value="No" onclick="window.location='decline/gogu#yahoo.com';" />
The problem is when i click on the No button it gets me on the same address confirm/gogu#yahoo.com.
How can i redirect properly?

Try using window.location.href=

Related

Using images as buttons

I'm working on a calculator script which is working fine. (got it form a tutorial). Now I want the buttons to be images. for example 1.jpg 2.jpg etc.
<html>
<form name="calculator">
<input type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input type="button" value="3" onClick="document.calculator.ans.value+='3'">
<input type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input type="button" value="6" onClick="document.calculator.ans.value+='6'">
<input type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input type="button" value="-" onClick="document.calculator.ans.value+='-'">
<input type="button" value="+" onClick="document.calculator.ans.value+='+'">
<input type="button" value="*" onClick="document.calculator.ans.value+='*'">
<input type="button" value="/" onClick="document.calculator.ans.value+='/'">
<input type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="Reset">
<input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
<br>Solution is <input type="textfield" name="ans" value="">
</form>
</html>
You can simply use image as input type for your form elements. That should work for you i think. :)
If you use the <button> tag instead of <input type="button" you can just do this:
<button>
<img src="example.jpg" />
</button>
Moshiach now!
You should use the <img src="image.jpg"> tag, like:
<html>
<form name="calculator">
<img src="1.jpg" onClick="document.calculator.ans.value+='1'">
<img src="2.jpg" onClick="document.calculator.ans.value+='2'">
<img src="3.jpg" onClick="document.calculator.ans.value+='3'">
<img src="4.jpg" onClick="document.calculator.ans.value+='4'">
<img src="5.jpg" onClick="document.calculator.ans.value+='5'">
<img src="6.jpg" onClick="document.calculator.ans.value+='6'">
<img src="7.jpg" onClick="document.calculator.ans.value+='7'">
<img src="8.jpg" onClick="document.calculator.ans.value+='8'">
<img src="9.jpg" onClick="document.calculator.ans.value+='9'">
<img src="minus.jpg" onClick="document.calculator.ans.value+='-'">
<img src="plus.jpg" onClick="document.calculator.ans.value+='+'">
<img src="mult.jpg" onClick="document.calculator.ans.value+='*'">
<img src="div.jpg" onClick="document.calculator.ans.value+='/'">
<img src="0.jpg" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="Reset">
<input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
<br>Solution is <input type="textfield" name="ans" value="">
</form>
</html>
Note that this assumes your images are in the same folder as your .html file. If they are in a sub folder, like "images", you would do <img src="images/image.jpg">.
If you want to use that code and just want to add images to the buttons, you can use CSS:
<style>
Form input[type=button]:first-child {background: url(/image/btn1.png) no-repeat;}
Form input[type=button]:nth-child(2) {background: url(/image/btn2.png) no-repeat;}
</style>
You can read more about CSS pseudo-class here:
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
Also, Maybe this old quetions (and answers) will help:
How to add background image for input type="button"?
html input with background image
BTW - I think you should write your own calculator script - it is a basic must...
Good Luck!

Value (words) on upload button prevent from clicking it

Here is my upload form
<div class="view-form">
<input type="hidden" name="MAX_FILE_SIZE" value="<?=maxFileSize?>"/>
<input name="files" id="files" type="file" class="ui input-file" style="position:absolute;left:380px;top:200px;"/>
<input id="submit_btn" type="submit" value="Upload" class="ui-button-orange input-btn"; onclick="upload();" style="position:absolute;left:380px;top:300px;width:350px;height:70px;font-size:30px;font-family:arial;font-weight:bold;"/>
<iframe name="iframe" style="display:none;"></iframe>
</div>
The text 'Upload' which is on the button makes it so that most of the button can't be clicked, only the edges where there isn't any text. Anyone know how I can fix this? Thanks

How not to validate HTML5 text box with required attribute

I have one HTML text box (for quantity) and two HTML buttons (Add, Cancel) inside my form.
<form>
<input type="number" min="1" max="100" required />
<button type="button">Add</button>
<button type="button">Cancel</button>
</form>
I do not want my second button (cancel) to validate the form when clicked.
Is this possible? In ASP.NET, I can use CausesValidation="false" to not trigger the validation.
Try this;
<button type="button" formnovalidate>Cancel</button>
I changed your code:
What you want is that your form should not be validated on click of cancel, so that's why i added the formnovalidate to the button cancel.
<form>
<input type="number" min="1" max="100" required />
<input type="submit">Add</input>
<input type="submit" formnovalidate>Cancel</input>
</form>
Try to add formnovalidate attribute to your cancel button
<button type="button" formnovalidate>Cancel</button>
You could use the formnovalidate-option on the cancel-button, like this:
<input name="cancel" type="submit" value="Cancel" formnovalidate/>
See Symfony2 form validation with html5 and CANCEL button
If you have the input button as runat=server then you must have the property causesvalidation="false" or else if you are simply using html input type button for cancel use javascript to redirect to your page on click of cancel.
For eg.
1)
<input type="button" id="btnCancel" class="button blue" value="Cancel" **causesvalidation="false"** onserverclick="btnCancel_Click" runat="server" />
2)
<input type="button" id="btnCancel" class="button blue" value="Cancel" **onclick="GoTo();"**/>
<script type="text/javascript">
function GoTo() {
window.location.href = '../default.aspx';
}
</script>
Try this code at asp.net 5enter link description here button control
<form>
<input type="number" min="1" max="100" required />
<button type="button">Add</button>
<button type="button" formnovalidate="formnovalidate">Cancel</button>
Aldo Flores Reyes
#alduar
.net news
try this one.it works fine.It will work on submit button
<asp:TextBox runat="server" ID="inputusername" required />

Form link (button) not firing

I am working with this piece of code and it is not firing when I put it in the page need which is static HTML. It does work if you create a plain HTML page, but it is not working on the page I need.
What could it be?
<form name="CTTPDD" action="https://example.com" method="post" target="_blank">
<input type="hidden" value="##.##" name="campaign" />
<input name="repeat" type="hidden" value="1">
<input type="image" src="image.gif" value="submit" name="submit" />
</form>
Where you have
<input type="image" src="image.gif" value="submit" name="submit" />
I think really should say <input type="image" src="image.gif" name="submit" /> Your problem was your value="Submit was saying that the image should say which will mess every thing up.

HTML styling Help

I need help in HTML styling
here is the case:
<div id="hidden" style="display: none;">
<label>URL:</label>
<input type="text" name="url" size="50"/><br/>
<input type="button" id="button2" value="Update"/> <br/>
</div>
<input type="button" id="button1" value ="Get Info" onclick="document.getElementById('hidden').style.display = '';" size="25"/>
as we can see all the elements inside
<div></div>
will be displayed on clicking button1(they will hidden initially).When all the fields appear the another button inside div(button2) is unaligned to button1.
What i want is when i click button1 both button1 and button2 should be aligned..
how can i do this??
<div id="hidden" style="display: none;">
<label>URL:</label>
<input type="text" name="url" size="50"/><br/>
</div>
<input type="button" id="button1" value ="Get Info" onclick="document.getElementById('hidden').style.display = '';document.getElementById('button2').style.display=''" size="25"/>
<input type="button" id="button2" value="Update" style="display:none"/>
If you want the two buttons next to each other, but the second one can only be displayed upon clicking the other button, then you'll need to include script to show the button onclick.
What do you mean "aligned"? Are they supposed to be aligned horizontally, that-is, they should appear on the same line? If so, you need to remove your <br /> tags that force line-breaks, and set the display of your div not to blank, but to inline (as divs are displayed as block by default):
<div id="hidden" style="display: none;">
<label>URL:</label>
<input type="text" name="url" size="50"/>
<input type="button" id="button2" value="Update"/>
</div>
<input type="button" id="button1" value ="Get Info" onclick="document.getElementById('hidden').style.display = 'inline';" size="25" />
This produces the following when you click on the "Get Info" button:
Note that the text input, update and get info are all on one line!
If you want them all to appear left-aligned, the code that you provided looked just fine when I tested it. Upon clicking the get info button, I get a display that looks like this:
[INPUT "URL" AREA]
[Update Button]
[Get Info]
If you aren't trying to get your display horizontally aligned or left-aligned, then what type of alignment are you looking for? Can you provide a diagram or screen shot if this is not the answer you're looking for?
I generally agree with what Kiley mentioned a moment ago. If you must maintain that exact structure and want the buttons horizontally aligned, adding float:left; styles to the <div></div> and to button1 would solve your issue.
<div id="hidden" style="display:none; float:left;">
<label>Url:</label>
<input type="text" name="url" size="50" />
<input type="button" id="button2" value="Update" />
</div>
<input type="button" id="button1" value="Get Info" onClick="document.getElementById('hidden').style.display = '';" style="float:left;" size="25" />
Hope that helps!
They shouldn't be unaligned, there's probably an style on that div.
try this css
#hidden {
margin:0;
padding:0;
}