링크 제출 -JavaScript 없음 : 다운 사이드?

StackOverflow https://stackoverflow.com/questions/1473999

문제

나는 다른 날에 계시에왔다. 이미지를 사용하여 제출 버튼을 만들려고 할 때 이미지가 표시되지 않은 문제가 있지만 value 텍스트. 당시 이것은 내가 원했던 것이 아니지만 지금은 되돌아 보면서 나는 이것에 잠재적 인 용도를 볼 수 있습니다.

다른 페이지로 데이터를 보내야하지만 사용자 입력이 필요하지 않으면 링크 (또는 양식)로 보낼 수 있습니다. GET 또는 양식을 통해 POST. 문제는 전자가 못생긴 URL을 생성하고 후자는 submit 제자리를 벗어난 버튼. 물론 이미지를 생각해 낼 수는 있지만 선택 가능한 텍스트를 원한다면 어떻게해야합니까?

그래서 나는 약간의 재생을 시작했고 Firefox는 양식을 제출하는 클릭 가능한 링크로서 내가 원하는 방법을 렌더링하는 것으로 보입니다. 당신이해야 할 일은 그것을 제거하기 만하면됩니다 src .의 속성 input type='image' 꼬리표:

<form action='some_page' method='post'>
  <input type='hidden' name='email_address' value='test@test.com' />
  <input type='image' value='E-mail User' />
</form>

이 솔루션은 다른 브라우저에서 작동합니까? 링크 CSS가 제대로 적용되지 않는다는 명백한 사실을 제외하고는이 작업을 수행하는 단점은 무엇입니까?

도움이 되었습니까?

해결책

나는 noscript 태그 내부의 버튼과 함께 JavaScript를 통해 노출되는 실제 링크 (Hidden)를 사용하는 솔루션을 좋아합니다.

 <form action="some_page" method="post">
    <input type="hidden" name="email_address" value="test@test.com" />
    <a href="#" class="submit-link" style="display: none;">E-mail User</a>
    <noscript>
       <input type="submit" value="E-mail User" />
    </noscript>
 </form>

 $('submit-link').click( function() {
     $(this).closest('form').submit();
     return false;
 })
 .show();

다른 팁

이미지 입력을 사용할 필요가 없습니다. 정기적 인 제출 버튼을 사용하고 무거운 스타일을 적용하여 일반 텍스트처럼 보이게하는 이유는 무엇입니까?

<input type="submit" value="E-mail User" class="link">

<style>
input.link {
    border: none;
    background: none;
    cursor: pointer;
    /* etc */
}
</style>

HTML 4.01을 사용하면 FF3.5에서 작동했지만 IE8 또는 Chrome에서는 작동하지 않았습니다. 링크는 작동하지만 누락 된 이미지를위한 빈 지점은 없습니다.

따라서 이것은 하나의 브라우저에서만 작동 할 수 있기 때문에 나쁜 생각 인 것 같습니다. 나에게 그것은 당신의 유일한 시장이 Firefox 브라우저를위한 것이 아니라면, 좋은 아이디어를 계속하십시오. :)

James Skidmore가 제안한 것처럼 JavaScript와 함께 Onclick을 수행하여 게시물로 제출하는 것은 쉽습니다.

나는 눈에 띄지 않는 JS를 제안 할 것입니다. 누군가 JS가 없다면 링크로 작동하고 제출을 제출할 수 있지만 JS가 있으면 Ugly URL 변경없이 게시되도록 동작이 변경됩니다.

또는 언급 된 바와 같이 이미지의 배경은 형태 배경과 혼합 될 수 있습니다.

대신 JS를 통해 동적으로 양식을 제출하거나 투명하거나 흰색 배경으로 일반 제출 버튼을 사용할 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top