Similar Question:
How to change an input button image using CSS?
Can I create a form with two image submit buttons?
I am working on a language selection page that displays two flags (.png's) and I would like it so that when a user clicks on a flag, it submits the form.
What is the best way to achieve this functionality?
<a href="javascript:document.myform.submit()" name="flag1">
<img src="img1.png" width="20" height="10" alt="" />
</a>
<a href="javascript:document.myform.submit()" name="flag2">
<img src="img2.png" width="20" height="10" alt="" />
</a>
That strategy should meet your requirements :) Just be sure to update
javascript:document.myform.submit()name attribute from your form element.
You can achieve this functionality using inline events, but it is advisable to use either pure JavaScript or jQuery. jQuery simplifies cross-browser compatibility for you.
Here is an example using jQuery:
$("#imgID").click(function(){
$("#formID").submit();
});
To utilize Javascript, consider the following approach:
<img src="image.png" onclick="send_data()" />
<img src="image.png" onclick="send_data()" />
JavaScript function to submit form
function send_data()
{
// Update action if needed
document.form_name.action="new action";
document.form_name.submit();
}
Here's a method you can use to pass a parameter:
<form name="FormularName">
<input type="hidden" name="valueField" />
<a href="#" onclick="submit_form('FlagA')"><img src="picture1.jpg" /></a>
<a href="#" onclick="submit_form('FlagB')"><img src="picture2.jpg" /></a>
</form>
JavaScript:
function submit_form(value) {
document.FormularName.valueField.value = value;
document.FormularName.submit()
}
I'm struggling to achieve something seemingly simple but can't quite get it to work. My goal is to display article previews on my website in a tiled format. For example, the tiles would have a fixed height and width, say 300px by 300px. I&apos ...
Having trouble aligning an image/logo next to my header text while maintaining its aspect ratio and fitting within the container size. The goal is to have both the text and image horizontally centered. The parent div cannot have a fixed height as it needs ...
On my webpage, I have an ASP:Grid with a small copy button in each row to copy the text inside that cell. The javascript function I created for copying the text is as follows: var copyText = function (textToCopy) { $(".copy").append("<textarea id=&ap ...
My content div is not pushing my footer down like I want it to. When I add more text, it just overlaps the footer. I need help with the CSS code that will fix this issue. I considered using overflow: scroll;, but I prefer the webpage to expand vertically ...
I'm attempting to validate a radio button group and apply a specific CSS class to it. Since this is a server control, I can only apply the class one way. However, upon checking with jQuery, I discovered that the class is actually being attached to the ...
I have an input field of type "text" and a button that displays the user's input. However, if there are extra spaces in the input, they will also be displayed. How can I remove these extra spaces from the input value? var nameInput = $('#name ...
In need of some creative brainstorming, I'm working on a website design featuring ten overlapping cards. When the mouse hovers over a card, it expands while others move away. My goal is for each card to return to its original position once the cursor ...
After using JavaScript to adjust the opacity of an element from 0 to 1, I expected it to instantly disappear and then slowly fade back in. However, nothing seems to happen as anticipated. Interestingly, if I insert a setTimeout function before applying th ...
Is there a method to enable the summary tag in Internet Explorer 11, such as using an external library? <details> <summary>Here is the summary.</summary> <p>Lorem ipsum dolor sit amet</p> </details> App ...
Exploring the world of SailsJS, I am on a mission to save HTML content in a database, retrieve it, and display it as rendered HTML. To achieve this goal, I have set up a sails model and a controller. This is what my model looks like: attributes: { ht ...
Currently tackling a responsive website design challenge where I'm dealing with conflicting styles in media queries and parent css. Here's the CSS from the parent style sheet: .sec1 p { text-align: left; width: 55%; margin-left: 8%; float:lef ...
I'm attempting to replicate the outcome shown in the screenshot but I'm having difficulty achieving it without adding any new DOM elements. When I click on the demo link and choose a date range, the start date and end date selections are not dis ...
As I was experimenting with Javascript, I attempted to implement a feature where my 'Player' character would fall down after reaching a jumpDistance of 50. The idea was to simulate a small jump-like motion for the player. While the code may not ...
I'm in the process of creating a website using Next and Typescript, with some interesting packages incorporated: Framer-motion for smooth page transitions Gsap for easy animations One issue I encountered was when setting images like this: <Link&g ...
I have currently integrated Processing JS with the HTML canvas element on a website. The goal is to have the Processing JS animation run smoothly over the existing HTML elements on the page. You can check out the site at [usandthings.com][1] to get an idea ...
import Section from '@/components/section' import {Card, CardHeader, CardBody, CardFooter, Divider, Link, Image, Button} from "@nextui-org/react"; import { CSSProperties, useState } from 'react'; const Index = () => { c ...
My current project involves creating a portfolio showcasing my work, but I've encountered an issue: When you visit my website and click on the "About" link, the text at the bottom of the tab is displayed differently in Chrome compared to IE and Firef ...
Struggling to make this work the way I want. I have a button that should execute Javascript function A when clicked, and in function A, I need to change the onclick attribute to function B. This way, on the second tap of the button, it will trigger functio ...
My navigation element looks like this: <ul> <li name='first_item'> <ul> <li>item 1</li> <ul> <li>item 1.1</li> <li ...
I have attempted using itemReviewed in various tags, but it doesn't seem to be working as I keep getting the following error: The review has no reviewed item specified. Click here for a scan on Google's Structured Data Testing Tool. <!-- ...