>  기사  >  웹 프론트엔드  >  jQuery는 너무 많은 inputs_jquery로 양식 제출을 해결합니다.

jQuery는 너무 많은 inputs_jquery로 양식 제출을 해결합니다.

WBOY
WBOY원래의
2016-05-16 15:46:011099검색

최근 상대방이 회사 웹사이트에 사용자가 온라인으로 작성하고 제출할 수 있는 단어 같은 양식을 추가해 달라는 다소 이상한 요청을 받았습니다.

자세히 살펴보면 양식에 필드가 100개가 넘는데, 꽤 무섭습니다. 각 입력에 대해 ID와 이름을 수동으로 입력한다면 정말 끔찍한 물리적 작업이 될 것입니다.

계속해서 고민한 끝에 입력된 ID와 이름을 하나씩 입력하는 수고를 피하기 위해 JS와 PHP를 사용하여 이 양식의 일련의 제출 작업을 해결하기로 결정했습니다.

양식 구성요소

양식은 먼저 고객의 요구사항을 따르며, 작성해야 할 양식과 옵션은 워드 문서의 프로토타입에 따라 배치되어 사용자 경험과 일관되게 다음과 같이 구성됩니다.

(위 사진은 예시로 나온 형태의 일부일 뿐입니다. 사실 이 형태는 엄청나게 큽니다)

양식의 html 레이아웃이 완료된 후 양식 제출을 위해 이러한 양식 입력의 ID와 이름 설정을 시작해야 합니다.

서문에서 언급했듯이 입력이 많기 때문에 여기서는 JS를 사용하여 입력에 ID와 이름을 자동으로 추가합니다. 코드는 다음과 같습니다(jquery 메소드):

$(document).ready(function(){
var inputNum = 0;
$(‘input').each(function(){
$(this).attr({name:‘val'+inputNum,id:‘val'+inputNum});
inputNum++
})})

js를 통해 처리한 후 페이지의 모든 입력은 자동으로 1씩 증가하여 ID와 이름을 추가합니다. 이때 이 형태는 기본적으로 정상적으로 사용할 수 있습니다. (설명하지 않겠습니다. 모든 프로그래머가 이해하고 있습니다.)

GET 부분 양식

알겠습니다. 양식을 PHP 프로그램에 제출하여 정상적으로 처리할 수 있습니다. 물론 위 방법은 .net, jsp, asp 등 어떤 종류의 웹 프로그램에도 적용 가능합니다...

다음 단계는 제출된 문자열을 분해하여 형식의 값을 얻는 것입니다. 이 문서에서는 양식의 전달된 값을 얻는 방법을 설명하지 않습니다.

폼에서 전달된 N개의 값도 있기 때문에 이 값을 얻기 위해 배열 변수를 하나씩 작성하는 것은 불가능하므로 여기서도 이를 처리하려면 몇 가지 방법을 사용해야 합니다.

자, 이제 본론으로 들어가겠습니다. 먼저, 배열의 출력을 얻기 위해 이전 js 프로그램 논리에 따라 이러한 각 배열을 1씩 증가시키는 방법에 대해 생각해 보겠습니다.

프로그램 코드는 다음과 같습니다.

<&#63;php
$num = 0; //初始化计数变量
$_REQUEST[‘val'.$num]; $num++; //插入到需要获取值的地方,每个需要获取传值的地方重复使用这串代码即可
&#63;>

이 코드 집합은 양식 입력 및 요청 순서가 일치할 때 주로 사용됩니다. 순서가 하나씩 일치하지 않으면 혼란이 발생합니다. 그러니 사용시 주의가 필요해요!

데이터베이스에 제출할 때 foreach를 사용하여 얻은 매개변수를 배열로 처리한 다음 데이터베이스에 삽입하는 것이 더 편리할 것입니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.