I want to have a JSP like this:
<form id="form1">
Name is: <%=request.getParameter("name") %>
Show Email Form
</form>
<form id="form2">
<input type="text" name="emailid" />
Submit
</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">
')">Show Email Form
</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);"
You can either directly put the name in with JSP:
Submit
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>
Submit
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.
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.
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") %>')"
Related
i created a Google Form and list down all the ID in each input type, and then created a localhost with the same ID,
The first thing i want to do is to save the values into a localhost and pass the values in the Google Form or set the values into the corresponding ID or Name in each input type in a new tab, is there a way to do this using ajax or jquery?
my form looks like this
<form method="post" action"">
<input type="text" name="FName">
<input type="text" name="LName">
<input type="Submit">
</form>
$post('https://docs.google.com/a/grabtaxi.com/forms/d/e/1FAIpQLSfjiuhFbURVavdNW82ofHG3gPpBUKkK2VATQQKmV-YKKrJ75Q/viewform'{FName:Fname,LName}function(){
window.open('https://docs.google.com/a/grabtaxi.com/forms/d/e/1FAIpQLSfjiuhFbURVavdNW82ofHG3gPpBUKkK2VATQQKmV-YKKrJ75Q/viewform');
});
i am trying to use the $.post() in jquery but it looks like i cannot set the values into the Google Form.
Any tips please... Thank You very much
You should wrap your javascript code inside a scipt tag. Then, you should bind the code to submit event, tha happened when you press the submit button.
<script type="JavaScript">
$('input[type=submit]').submit(
// here you should put your code
});
</script>
And check your code, you wrote $post instead of $.post mi sing the dot.
I am required to send data from an html page, via input elements to a php script and I cannot use ajax for some reason. How to accomplish this?
My code is something like this:
HTML:
First Name : <input type"text" name="first_name">
<br><br>
Last Name : <input type"text" name="last_name">
<br><br>
<button id="submit_btn">Submit</button>
Now, I want the javascript to be something like :
function redirect_from_here() {
close(); //close the current window
window.location='./phpfile.php'; //load the new page which will process the data sent to it.
}
My question is how do I send the value in the input elements in the HTML portion, as data to be processed, to the php script (phpfile.php in this case).
Please note that I prefer not to use html form for doing the job.
You are using HTML form as there are input fields in you code.
Inputs are part of a form and should be wrapped by a form element
Why using JS for submitting the form when you can use <form action='script.php'.. for that?
I suggest that you revise your requirements instead of trying to come up with a hackish way of how to send the data..
Just submit a form with action="phpfile.php"
if not interested with html,
then in the window location bind the values as a GET form method do
i have a textarea defined by an id
<textarea id='vegetable'> Tomato </textarea>
i have a button
<button type="button" onclick="MyFunction()">generate vegetable</button>
which trig a javascript in order to modify the content of the textarea
<script>
function MyFunction()
{
document.getElementById("vegetable").innerHTML = VegetableNameGenerator();
}
</script>
The problem is this php action :
<form action="{{ path('mypath', { 'myparam': ??? }) }}" method="post" >
<input type="submit" />
</form>
??? must be the content of the textarea (which is also known by the javascript code) but i don't know how to access it in twig.
I guess there are several way of doing that : jquery, dom, global variable twig... any syntax example would be great.
This is impossible in the way you're describing it.
When a request is made to the server, twig renders the page, then it is sent to the browser, and then javascript can run.
There are options for how to make this work:
Create a controller action which returns the rendered path when you call it using a GET request with the provided parameter. Then create an event listener on the submit button that blocks the submit process until it has retrieved the route via AJAX and modified the form's action attribute.
Redirect from your controller to the path you want displayed. myparam will be included in the post data, so you can redirect from your controller action after you've handled the form.
$this->redirect($this->get('router')
->generate('mypath',
array('myparam'=>
$this->getRequest()->get('myparam')
),
true);
Ok so i have a form that has three input boxes, at the moment they're text, but they will be changed to password. When the submit button is pressed i want the for to send the form data to an Ajax script.
I have this working with just one parameter the button looks like this:
<input type="submit" name="submit" value="Submit"
onClick="return pass(this.form.oldPass.value;">
Now i've tried adding the 'this.form' part three times because thats how many parameters the function would take but it just doesn't seem to do anything:
<input type="submit" name="submit" value="Submit"
onClick="return pass(this.form.oldPass.value,
this.form.newPass.value,
this.form.newPassCheck);">
Is this the right way to go about passing form data to a script? is there another way around it or am i just doing something wrong here?
thanks for the help, if you need anymore code i'll add it.
try this one. (you need jquery to do this.)
<form>
old pass <input type="password" id="old_pass" />
new pass <input type="password" id="new_pass" />
new pass confirmation <input type="password" id="new_pass_confirm"/>
</form>
in your .js file , write this:
$(document).ready(function(){
var old_pass = $('#old_pass').val();
var new_pass = $('#new_pass').val();
var new_pass_confirm = $('#new_pass_confirm').val();
//then call your method with those vars as parameter
anyMethod(old_pass, new_pass, new_pass_confirm);
});
//this is your function
function anyMethod(old_pass, new_pass, new_pass_confirm)
{
//put your validation code or ajax call here...
}
Add id for each of your input boxes and you can get value in function, like:
function pass() {
var old = document.getElementById("yourOldPassId").value;
var new = document.getElementById("yourNewPassId").value;
var newConfirm = document.getElementById("yourNewConfirmPassId").value;
}
Did you mean something like this
Give the inputs some ids and get the data from there.
Something like:
<input type bla bla id="whateverId0" />
For each input.
The submit should have something like onclick="whateverFunction()"
The js should look like:
function whateverFunction()
{
val0 = document.getElementById('whateverId0');
// For all 3 values.
// Do whatever you want with them.
}
I believe that you should add an onSubmit listener to your form. There are good js frameworks out there like jquery which are easy to use. That way you can make a listener which runs a function when you submit your form. In that function you can extract the data to json for example and ajax it to your server.
info about jquery
jquery ajax
how to extract form data
Is it possible to dynamically set a Spring MVC portlet:actionURL portlet:param using javascript? I have tried with the following code, but the id value always comes across as null to the controller. I have verified that setting the portlet:param manually passes the value correctly:
<portlet:param name="id" value="2" />
I have also verified the value in the javascript is being set correctly and is not null.
(Note: I've changed the variable names, etc. from the original code to simplify it and obfuscate it since it is my employer's code.)
JSP:
<portlet:actionURL var="modifyURL">
<portlet:param name="do" value="modify" />
<portlet:param name="id" value="${model.id}" />
</portlet:actionURL>
...
<form:form action="${modifyURL}" id="modifyForm" modelAttribute="model">
<form:hidden path="id" id="id" />
</form:form>
Javascript called when the update URL is clicked:
function update() {
document.forms[0]["id"].value = selectedId;
document.forms[0].submit();
}
Controller:
#RequestMapping(params = {"do=modify"})
public void modify(#ModelAttribute("model") Model model,
#RequestParam(value = "id", required=true) Long id,
ActionRequest request, ActionResponse response,
SessionStatus sessionStatus, ModelMap modelMap) {
....
A co-worker figured it out. It looks like you just have to add the parameter to the action within the javascript and not include it in the actionURL or form.
JSP:
<portlet:actionURL var="modifyURL">
<portlet:param name="do" value="modify" />
</portlet:actionURL>
...
<form:form action="${modifyURL}" id="modifyForm" modelAttribute="model" method="POST">
</form:form>
Javascript called when the update URL is clicked:
function update() {
$("modifyForm").action = '${modifyURL}&id='+selectedId;
$("modifyForm").submit();
}
I came across this almost 3 years later, still i found it easier to add a hidden form field and when the action is clicked than to set this value to the hidden field
something like
<input type="submit" id="btn_terminate_cmpn"
value="Terminar campaña" onclick="setAction('terminate');">
and the javascript code
function setAction(action){
$("#actionToDo").val(action);
}
The URL generated by the portlet tag is on the server side. Javascript doesn't see the portlet tag. It only sees the actual URL. What your coworker is suggesting would work but it's not a good approach. Here he's just adding the dynamic parameter as a query string parameter which makes it visible to all the portlets on your target portal page. A better solution is to keep a hidden element (text box or something) and set the dynamic value to this hidden element in your onSubmit Javascript hander function.