jQuery를 사용하여 양식 필드 채우기 방법

다음 그림과 같이 jQuery를 사용하여 이미지의 아무 곳이나 클릭하면 (그림 그림), 아이콘을 클릭하면 마커가 배치됩니다 지도 -jQuery를 사용하여 양식 필드 채우기 방법

<img src="images/marker.png" id="marker" style="display: none; position: absolute;" /> 
<img src="images/square.png" id="map"/> 

$('#map').click(function(e) 
{ 
    $('#marker').css('left', e.pageX).css('top', e.pageY).show(); 
    // Position of the marker is now e.pageX, e.pageY 
    // ... which corresponds to where the click was. 
});

아이디어는 당신이지도를 클릭 한 때 당신은 당신이 클릭 한 위치의 정보 양식을 제출할 수 있도록하는 좌표가 양식 필드에 채워집니다 것입니다.

이 기능을 추가하려면 jQuery에서 무엇을 변경해야합니까? 또한, IE 내에서 정확하게 작동합니까?

감사합니다.

출처

2014-06-20 Tim

양식 필드에 숨겨진 입력을 사용하여 좌표를 저장할 수 있습니다. 코드는 아래를 참조하시기 바랍니다 :

$('#map').click(function(e) 
{ 
    $('#marker').css('left', e.pageX).css('top', e.pageY).show(); 
    // Position of the marker is now e.pageX, e.pageY 
    // ... which corresponds to where the click was. 

    $('#xValue').val(e.pageX); 
    $('#yValue').val(e.pageY); 
});

그리고 때를 :처럼 jQuery를 수정

<form action="..."> 
    <input type="hidden" id="xValue" name="xValue"> 
    <input type="hidden" id="yValue" name="yValue"> 
</form>

:가 xValue 및 yValue 가정

다음과 같은 양식 태그 내부에 두 개의 숨겨진 입력을 작성, 양식 필드입니다 양식을 제출하면 xValue 및 yValue를 읽을 수 있습니다.

출처

2014-06-20 10:34:06

고맙습니다. Internet Explorer에서 마커의 마우스 위치를 얻으려면이 방법이 유용할까요? 나는이 코드를 다른 곳에서 Stack Overflow와 관련하여 보았거나 내 코드가 정상적으로 작동 할까? var isIE = document.all? true : false; document.onmousemove = getMousePosition; 함수 getMousePosition (e) { var _x; var _y; if (! isIE) { _x = e.pageX; _y = e.pageY; } if (isIE) { _x = event.clientX + document.body.scrollLeft; _y = event.clientY + document.body.scrollTop; } posX = _x-5; posY = _y-5; return true; } – Tim

예 그래야합니다. x 및 y 좌표를 읽고있는 이벤트 객체이므로 모든 브라우저에서 작동해야합니다. –

여기를 클릭하십시오.

<img src="images/marker.png" id="marker" style="display: none; position: absolute;" /> 
<img src="images/square.png" id="map"/> 
<form action="..."> 
    <input type="hidden" name="coord[x]" id="coordX" /> 
    <input type="hidden" name="coord[y]" id="coordY" /> 
    <input type="submit" value="submit" /> 
</form> 

$('#map').click(function(e) 
{ 
    $('#marker').css('left', e.pageX).css('top', e.pageY).show(); 
    $('#coordX').val(e.pageX); 
    $('#coordY').val(e.pageY); 
});

출처

2014-06-20 10:34:18

jQuery를 사용하여 양식 필드 채우기 방법

답변

관련 문제