Passing parameters between multiple javascript functions

Question

I want to have a JSP like this:

<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>

My javascript is something like this:

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);
}

Things to note here:
1) There is no action tied to my form, I am submitting the second form through Ajax.
2) I need to have two different forms, first form has more elements besides Name. And the second form has another different set of elements besides the email. Only one of the functions (fun2) in form2 needs both parameters of the name from form1 and email id from form2.
3) Form1 has an uneditable name parameter, and form2 has an editable email parameter. The onclick function in form2 picks up the email text input with jQuery.
4) One other scenario to consider is if there are multiple entries of name in form1, like a list of names using loops. Eg,

<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>

What is the best way to write the name parameter from form1 into the javascript onclick url in form2?

form1 :- onclick="fun1(name);"
form2 :- onclick="fun2(email, name);"

Parzifal · Accepted Answer · 2012-01-11 21:06:17Z

1

You can either directly put the name in with JSP:

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

Or you can give the dom node containing the name an id and access it with jQuery

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


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

Also consider getting the required parameters directly in your functions or define the onclick handlers in your script section to avoid the code getting messy. Watch out for the quotes inside HTML attributes, you used single quotes twice in the second onclick handler.

answered Jan 11, 2012 at 21:06

Parzifal

1,0863 gold badges13 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rishi P Over a year ago

Thanks, this servers the purpose for me (never thought about it :) ) But now I wondering if there are multiple entries of name entries in form1. What can I do in such scenario? I have updated the question now for this scenario.

Halcyon · Accepted Answer · 2012-01-11 21:06:24Z

0

Don't put 'data' in your HTML model.

If you're using a server-side language, pass in all the data directly into your inline scripts, not inline HTML.

Example:

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

vs

<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>

The second example may seem like a lot more code but it really pays off if you have many of these things.

At this point, all your data is available in JavaScript, so it should be easy to tie it all together.

answered Jan 11, 2012 at 21:06

Halcyon

57.7k10 gold badges93 silver badges131 bronze badges

1 Comment

Rishi P Over a year ago

I'm not from PHP background, so I didn't understand this one much. Is there a similar alternative for Java/JSP? Is this similar to using beans - <bean:write name="record" property="name">

elijah · Accepted Answer · 2012-01-11 21:11:06Z

0

since your name value is being written in from the server (in JSP), can you just write it directly into your fun2 call?

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

answered Jan 11, 2012 at 21:11

elijah

2,9241 gold badge19 silver badges23 bronze badges

Collectives™ on Stack Overflow

Passing parameters between multiple javascript functions

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related