I have an input element,
<div>
<input type="text" id="query" autocomplete="off" />
</div>
that triggers an Apache Solr search. Upon submission the input field is cleared (possibly due to a page reload?).
How can I retain the query terms in the input field (or repopulate it, upon submission)?
I suspect the button associated with your page issues a submit (e.g. <button type="submit">Search</button>). If that is your case, you'll need to make sure you put the value the user submitted when you render the page again, you'll do this in the value attribute, e.g.
<div>
<input type="text" id="query" autocomplete="off" value="the-value-the-user-entered" />
</div>
You could also issue an AJAX call when the user issues the search, in which case, the form won't reload and you won't need to worry about this, but then you will need to write the code to issue the AJAX call.
Related
I have this simple web-form
<form id="MyFormDiv" method="post">
<input type="number" name="cmp_no" id="id_cmp_no">
<input type="text" name="cmp_lname" maxlength="40 id="id_cmp_lname">
<input type="submit" name="submit" value="Save" id="submit-id-submit">
</form>
and this form will be used for both add and update.
When insert I have no problem, but when update I don't want to allow user to update or change the value of item which its id= "id_cmp_no"
I used javascript code to set its readonly property to true but that was not the 100% solution, because user can use browser inspect tool and see page source and change it's value before submitting the form, and therefore the readonly property is not useful.
Can I override it's onchange event to prevent change of it's value even if the value changed from page source using inspect tool.
Any one can help, thank you in advance
There is nothing that stops a user from changing values in browser, u can try solutions given in the above answers but be cautious user can dig out number of ways to do so like by using firebug/inspect element/ what ever..
What we can do is checking our values on server side and prompting user if they mismatch.
Shouting again ..
Never trust/depend on client....
If a user is skilled enough to open dev tools and change values from there, chances are they can also alter any JS code that prevents editing the readonly value.
So, there is no substitute to proper server-side validation.
You could check that the value is not being altered from the form's onsubmit event handler (see below), but keeping in mind what I and many commenters stated above.
$("form").on("submit", function(e) {
//check value of the input
if(this.someInput.value != 1) {
//do something here
//return false; if you want to block submit
}
return true;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
<input type="number" name="someInput" readonly value="1"/>
<button type="submit">Submit</button>
</form>
I basically have a search box, I am trying to get the value inserted and use on a separate /results.htm screen via the submit button. I've been able to get and process the results within the same page; but I am trying to do this after redirecting to a new page
/search.html
<script>
jQuery(document).ready(function() {
jQuery("#submit").click(function() {
var ZipSearch = jQuery("#Zipcode").val();
});
});
</script>
<div class="search_bar">
<form action=""><input type="text" name="Zipcode" id="Zipcode" value="" maxlength="5" placeholder="Zipcode">
<input type="button" name="submit" id="submit" value="Submit"/></form>
</div>
Want to keep input value content from /search.htm within a variable on next page, separate, /results.htm
How can I keep the user input value and use on my separate 'results' page?
Remove all the JavaScript from search.htm. There's no point in writing custom software to do things HTML has built-in.
Set the action of the form to the URL of the second page (action="/results.htm").
Change the button to a submit button (type="submit")
Read the data from the query string (location.search in JavaScript or $_GET in PHP).
So I am having trouble linking from one page to another in JavaScript. I have the following code.
I am trying to call when users click submit. Below is the form I want users to fill out. I am trying to get to feed.html when users click submit.
function login(){
window.location="feed.html";
}
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username" value="">
<p>Password</p>
<input type="password" name="" placeholder="Enter Password">
<input type="submit" name="" value="Login" onClick="login()">
Lost your password?<br>
Don't have an account?
</form>
So I thought it would simply call the function and go to the feed page after clicking submit, but instead it does nothing. Does anyone see what the problem is?
Submitting a form navigates to the page that is the response to the form submission.
Assigning a URL to location navigates to that URL.
So:
Your JavaScript runs
The JS starts navigation to feed.html
The form submits
The form navigates to the current URL (since you didn't specify an action) instead.
The navigation in step 4 replaces the navigation in step 2.
Your options:
Don't use a submit button
Call preventDefault to prevent the default action of clicking on a submit button
Set an action instead of using JavaScript
The last of these choices is probably the sensible one. You have what appears to be a login form. Handling all the authentication logic that decides if the user can login or not inside the browser (which is under the control of the user) instead of on the server is a huge no-no.
You should maybe use the "action" attribute on your form tag.
<form action="feed.html">
...
</form>
This will submit your form and redirect to feed.html.
i have a input hidden field which has a value
<input type="text" name="ip_hide" id="ip_hide" value="suppose a ip">
this value i can set it by javascript function using document.getElementById().value method..
below this input field i have to load a jsp page dynamically. so i use
<jsp:include="dynamic.jsp">
<jsp:param name="ip" value="?"/>
</jsp:include>
I want to fetch the value from hidden input field and try to set it in jsp:param value ..
Is it possible by javascript ?? Or if there is another way then plz grab my attention
On the same page? You're confused as to the fact that JSP runs on the server and serves the page to the browser, and then the Javascript runs in the browser. So by the time you've changed the value in javascript, the JSP is no longer running.
If, on the other hand, you mean after the user clicks a submit button on a form and the post or get request is sent to the server again, then you just use request.getParameter:
<jsp:include="dynamic.jsp">
<jsp:param name="ip" value="<%= request.getParameter("ip_hide") %>"/>
</jsp:include>
By the way, if you want the value to be hidden on your HTML form (its not really hidden if the user views source, hidden just means not visible on the rendered page) then you should do type='hidden' not type='text':
<input type="hidden" name="ip_hide" id="ip_hide" value="suppose a ip" />
Question: How can you send a form with Javascript if one form input has the name submit?
Background: I am redirecting the user to another page with a hidden HTML form. I cannot change name on the (hidden) inputs, since the other page is on another server and the inputs need to be exactly as they are. My HTML form looks like this:
<form id="redirectForm" method="post" action="http://www.example.com/">
<input name="search" type="hidden" value="search for this" />
<input name="submit" type="hidden" value="search now" />
</form>
I use the following javascript line to send the form automatically today:
document.getElementById('redirectForm').submit();
However, since the name of one input is "submit" (it cannot be something else, or the other server won't handle the request), document.getElementById('redirectForm').submit refers to the input as it overrides the form function submit().
The error message in Firefox is: Error: document.getElementById("requestform").submit is not a function. Similar error message in Safari.
Worth noting: It's often a lot easier to just change the input name to something other than "submit". Please use the solution below only if that's really not possible.
You need to get the submit function from a different form:
document.createElement('form').submit.call(document.getElementById('redirectForm'));
If you have already another <form> tag, you can use it instead of creating another one.
Use submit() method from HTMLFormElement.prototype:
HTMLFormElement.prototype.submit.call(document.getElementById('redirectForm'));