I have an html form that looks like this:
<form name="form_" method="post" id="contactUs" action="myPage.aspx" enctype="text/plain">
<input type="text" class="acc_input" name="mail" id="emailadress" />
<input type="text" class="acc_input" name="name" id="firstName" />
<input type="button" value="Send" />
</form>
Now lets assume that "myPage.aspx" returns "Done" if success or returns "Error" if fails.
I want to display an alert showing the result.
How do i handle the myPage.aspx response?
You can emit javascript with the result you want:
Response.Write("<script language='javascript'>alert('Done');</script>")
Related
I used #John Strood's answer from here to build my current script. The below code is close to my need, I now just need to append text to the results.
For example, appending site:imdb.com/title toHakunamatata to get https://www.bing.com/search?q=site:imdb.com/title+Hakunamatata
#Spectric had a great answer for a single-submit form, but it does not seem to function with the current script.
<form action="" method="get">
<input type="text" value="Hakunamatata" id="box" name="search_query"placeholder="text" autofocus />
<input type="submit" value="BNG" formaction="https://testurl1.com"
onclick="document.getElementById('box').name='q'" />
<input type="submit" value="ABB" formaction="http://testurl2.com"
onclick="document.getElementById('box').name='s'" />
</form>
If you are wondering, the onclick functions are necessary
testurl1 uses the search modifier of ?q and testurl2 uses ?s
Prepend the string to the input's value when the submit event is fired.
form.addEventListener('submit', function() {
box.value = 'site:imdb.com/title ' + box.value;
})
<form action="" method="get" id="form">
<input type="text" value="Hakunamatata" id="box" name="search_query" placeholder="text" autofocus />
<input type="submit" value="BNG" formaction="http://www.bing.com/search" onclick="document.getElementById('box').name='q'" />
<input type="submit" value="ABB" formaction="http://www.bing.com/search" onclick="document.getElementById('box').name='s'" />
</form>
To conditionally prepend the string, move the logic to the button's click event listener.
<form action="" method="get" id="form">
<input type="text" value="Hakunamatata" id="box" name="search_query" placeholder="text" autofocus />
<input type="submit" value="BNG" formaction="http://www.bing.com/search" onclick="document.getElementById('box').name='q';box.value = 'site:imdb.com/title ' + box.value;" />
<input type="submit" value="ABB" formaction="http://www.bing.com/search" onclick="document.getElementById('box').name='s'" />
</form>
We have two different forms in one jsp page one for submission and one that approves.
The code is:
<%if(rs.getInt("approve")==0) {%>
<form method="get" action="storecomment3.jsp">
Comments:<br>
<textarea name="comments" id="comments"></textarea>
<br>
<input type="hidden" name="article" value="<%=realname%>">
<input type="hidden" name="Username" value="<%=request.getParameter("Username")%>">
<input type="hidden" name="Password" value="<%=request.getParameter("Password")%>">
<input type=submit value="Submit">
</form>
<%} %>
<%if(rs.getInt("approve")==0) {%>
<form name="form1" action="usermain.jsp">
<input type=button value="Approve" onclick="validate()">
<input type="hidden" name="user" value="<%=request.getParameter("user")%>">
<input type="hidden" name="Username" value="<%=request.getParameter("Username")%>">
<input type="hidden" name="Password" value="<%=request.getParameter("Password")%>">
<script type="text/javascript">
function validate()
{
<%
r1.updateInt("approve", 1);
r1.updateRow();
%>
document.form1.submit();
}
</script>
</form>
The problem with the code is that when the submit button in the first form is clicked, the validate function is also getting executed which should not be happening!
Is there anything wrong with the code or the script?
Thanks!
I see a few possible problems here.
First, your condition rs.getInt("approve")==0 appears twice, perhaps one of them should be !=0?
Also it seems odd that you put r1.updateInt("approve", 1); and r1.updateRow(); inside the JS function. That code gets executed server side(!) as soon as the condition (rs.getInt("approve")==0) is met, no user interaction required.
I have this code:
function src(){
var id = document.getElementsByName("query")[0].value;
window.location.href = "/search/?query=" + id;
}
var f_src = document.getElementById("search_form");
if(f_src)
f_src.onsubmit = function(){src();return false;};
I'm having problems with the submit part: I want, when I enter "example" in the field "url" to be redirected to "/search/?query=example", but it's not working, any help?
HTML:
<form id="search_form" method="get" action="" name="search_f">
<input id="search_field" maxlength="100" name="query" type="text" value="" placeholder="<?php echo $src_txt; ?>">
<input id="search_button" type="submit" value="">
</form>
Thanks.
Aside from the problem you might have, you can achieve the same behavior without JavaScript. You just have to give the form element the name "query" and make it submit a GET request to /search:
<form id="search_form" method="get" action="/search/" name="search_f">
<input id="search_field" maxlength="100" name="query" type="text" value="" placeholder="<?php echo $src_txt; ?>">
<input id="search_button" type="submit" value="">
</form>
The action attribute tells the browser where to make the request to. Every form control element with a name will be included with its value in the query string.
No JavaScript required.
If You don't insist on using javascript, You can achieve this using good old HTML:
<form action="/search/" method="get">
<input name="query" />
</form>
I'll use a toy example to illustrate my problem:
I have a form which gets some details about a user:
<form action="#" method="post" id="myform">
<input type="text" name="fname" />
<input type="text" name="sname" />
<input type="text" name="birthdate" />
<select name="hobbies">
<option>Programming</option>
<option>Eating cats</option>
<option>Explaining string theory to my grandmother</option>
</select>
</form>
and I'm going to send it to my server with an ajax call so I can give some kind of response without a page refresh:
$.post("myserverscript.php", $('#myform').serialize(), function(){...callback...});
This works fine.
Now, I need to take the same information about multiple users on the same page. No problem, I just add [] to my input names:
<form action="#" method="post" id="myform">
<input type="text" name="fname[]" />
<input type="text" name="sname[]" />
<input type="text" name="birthdate[]" />
<select name="hobbies[]">
<option>Programming</option>
<option>Eating cats</option>
<option>Explaining string theory to my grandmother</option>
</select>
</form>
And again, all is well with the world.
Now, I want to allow the user to pick more than one hobby each:
<form action="#" method="post" id="myform">
<input type="text" name="fname[]" />
<input type="text" name="sname[]" />
<input type="text" name="birthdate[]" />
<select name="hobbies[]" multiple>
<option>Programming</option>
<option>Eating cats</option>
<option>Explaining string theory to my grandmother</option>
</select>
</form>
and this is where things start going a little pear-shaped. When I call serialize() now, all the hobbies are put into one array - so I'm unable to say which user has which hobbies.
I've tried using [][] instead of [] but that just puts each individual item into it's own array within the hobbies array so I still lose the user->hobby link.
The only way that I can see of doing this is writing my own serialize() which groups things as I need them.
Is there a better, simpler or more elegant way of doing this?
My standard approach is to append the UserID to the input name, with an underscore between them.
So, instead of this:
<input type="text" name="fname[]" />
it would be:
<input type="text" name="fname_23423" />
Then, server-side, you split the input names on _. The first element is the input name, the second is the UserID, and you're all set.
I've had a similar problem but the way I did it was to assign each user a specific array
for example this fiddle
<form action="#" method="post" id="myform">
<input type="text" name="user1[fname]" />
<input type="text" name="user1[sname]" />
<input type="text" name="user1[birthdate]" />
<select name="user1[hobbies]" multiple>
<option>Programming</option>
<option>Eating cats</option>
<option>Explaining string theory to my grandmother</option>
</select>
Submit
</form>
I have a form element that contains about 5 fields which final query is going to create by processing values those fields. So I want to send only final query, not all of those, to the server. How can I exclude those fields from being submitted (using jQuery)?
<form action="abc/def.aspx" method="get">
<input type="text" name="field1" />
<input type="text" name="field2" />
<input type="text" name="field3" />
<input type="text" name="field4" />
<input type="text" name="field5" />
<input type="hidden" name="final" />
<input type="submit" value="Send" />
</form>
Output of form submission looks like below:
abc/def.aspx?field1=val1&field2=val2&field3=val3&field4=val4&field5=val5&final=finalQuery
Remove the name attribute on the fields you do not want submitted to the server.
<form action="abc/def.aspx" method="get">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="hidden" name="final" />
<input type="submit" value="Send" />
</form>
This is the simplest way to achieve what you want, and it works on all major browsers.
W3 spec talks about only submitting form values when name is present: http://www.w3.org/TR/html401/interact/forms.html#h-17.2
Remove the element on submit.
On the onsubmit handler:
$(formElement).submit(function() {
$(this.field1).remove(); //removing field 1 from query
return true; //send
});
Disabling the form element also stops it from being entered into the query.(tested on Chrome)
$(formElement).submit(function() {
this.field1.disabled = true;
return true; //send
});
I think the best solution is to handle the submit and then send the request yourself:
$(form).submit(function() {
//do everything you need in here to get the final result
var finalResult = alotoflogic();
$.get("abc/def.aspx",final=finalResult, "callbackfunction", "responseType");
return false;
});
that should do exactly what you want.
EDIT: as Alex pointed out this solution wouldnt send you to that page, just get the results if you need to go to the new page you can do:
$(form).submit(function() {
//do everything you need in here to get the final result
var finalResult = alotoflogic();
window.location('abc/def.aspx?final='+finalResult);
return false;
});
This way the browser is redirected to that page and only the final result is send.