Передача параметров между несколькими яваскрипта функциями

Question

Я хочу иметь JSP, как это:

<form id="form1"> 
Name is: <%=request.getParameter("name") %> 
<a href="#" onclick="fun1('<%=request.getParameter("name") %>')">Show Email Form</a> 
</form> 

<form id="form2"> 
<input type="text" name="emailid" /> 
<a href="#" onclick="fun2('$('input[name=emailid]').val()', <name required here>)">Submit</a> 
</form> 

Мой браузер что-то вроде этого:

function fun1() { 
//Nothing important here, just show second form 
$('#form2').show(); 
} 

function fun2(myemail, myname) { 
//Do something important here, 
//Like update email for the given name 
xmlhttp = GetXmlHttpObject(); 
var url = "updateEmail.do?email=" + myemail + "&name=" + myname; 
xmlhttp.open("POST", url, true); 
} 

вещи, чтобы отметить здесь:
1) Существует никаких действий, связанных с моей формой, я представляю вторую форму через Ajax.
2) Мне нужно иметь две разные формы, первая форма имеет больше элементов, кроме имени. А вторая форма имеет другой набор элементов помимо электронной почты. Только одна из функций (fun2) в form2 нуждается в обоих параметрах имени из form1 и id электронной почты из form2.
3) Form1 имеет неизменяемый параметр имени, а form2 имеет редактируемый параметр электронной почты. Функция onclick в form2 берет ввод текста электронной почты с помощью jQuery.
4) Еще один сценарий, который следует учитывать, заключается в том, что в форме 1 есть несколько записей имени, например список имен с использованием циклов. Например,

<form id="form1"> 
<logic:iterate id="record" name="peoplerecords" property="records"> 
    Name is: <bean:write name="record" property="name"> 
<a href="#" onclick="fun1('<bean:write name="record" property="name">')">Show Email Form</a> 
</logic:iterate> 
</form> 

Каков наилучший способ записи параметра имени из Form1 в яваскрипте OnClick URL в form2?

form1: - onclick = "fun1 (name);"
form2: - onclick = "fun2 (электронная почта, имя);"

Answer 1

Вы можете либо непосредственно поставить имя с JSP:

<a href="#" onclick="fun2($('input[name=emailid]').val(), <%=request.getParameter("name") %>)">Submit</a> 

Или вы можете дать узел DOM, содержащий имя, идентификатор и доступ к нему с JQuery

Name is: <span id="nameNode"><%=request.getParameter("name") %></span> 


<a href="#" onclick="fun2($('input[name=emailid]').val(), $('#nameNode').innerHTML)">Submit</a> 

рассмотреть также получение требуемые параметры непосредственно в ваших функциях или определить обработчики onclick в разделе вашего скрипта, чтобы избежать недоработки кода. Следите за кавычками внутри атрибутов HTML, вы использовали одинарные кавычки дважды во втором обработчике onclick.

Answer 2

Не помещайте «данные» в свою HTML-модель.

Если вы используете серверный язык, передайте все данные непосредственно в свои встроенные скрипты, а не встроенный HTML.

Пример:

<a onclick="alert('<?php echo $the_string;?>');">alert!</a> 

против

<a id="alert_link">alert!</a> 

<script type="text/javascript"> 

    var the_string = <?php echo json_encode($the_string);?>; // you get javascript safe encoding with json_encode, almost for free! 

    document.getElementById("alert_link").onclick = function() { 
     alert(the_string); 
    }; 
</script> 

Второй пример может показаться, что намного больше кода, но это действительно окупается, если у вас есть многие из этих вещей.

На данный момент все ваши данные доступны на JavaScript, поэтому должно быть легко связать все это вместе.

Answer 3

Поскольку ваше имя указывается с сервера (в JSP), можете ли вы просто написать его прямо в свой fun2-вызов?

onclick="fun2('$(\'input[name=emailid]\').val()', '<%=request.getParameter("name") %>')"