Send enter from javascript - javascript

How to send enter from javascript to site?
What I real need is to send text to site like filehippo.com in search box, and press enter to search for those text.
So piece of code from site is:
<div id="searchbox">
<form name="f" action="/search">
<input style="color: #999" type="text" id="q" name="q" maxlength="150" value="Search..." onfocus="javascript:clearInputValue('q', 'Search...')" onblur="javascript:setDefaultIfEmpty('q', 'Search...')">
<input type="submit" id="search-submit" value="GO" onclick="javascript:submitQuery('q', 'Search...')">
</form></div>
And my simple code look like this:
javascript: document.getElementById('q').focus();document.getElementById('q').value='Winrar';document.getElementById('f').item(0).click();
And those script just put focus on search box and send text to them, but I need also to do automatically search (send enter), how to do that?
document.getElementById('f').item(0).click(); -> dont work
What I need is to simulate click of mouse, by enter, cause can't send click to element that work properly.
Is it possible to send enter with text?

Use document.f.submit(); to submit the form.
The problem is that there are multiple forms named 'f'
javascript:document.f[0].submit();
So the fully functional line would be:
javascript:document.getElementById('q').value='Winrar';document.f[0].submit();

Use onkeypress attribute of input element.

Related

How to retain search terms in input field?

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.

How to create multimedia input field that would take text, picture, gif like Facebook/Twitter "Create Post" input field

Please can someone help me with how to create an input field that would take text, pictures, gif, attachment etc. just like Facebook/twitter/Quora's "Create Post" input field... it would be good to see a plugin that can help with that or if I can create it myself! thanks in advance... I know what you are about to say, I did my research and I couldn't find anything that help me with building. I just want something like a 101 of such palette so that I can continue build it... I will also like to add my own conventions (like Ctrl + B to bold etc.)
Take a look at this.
"post" Sends the form-data as an HTTP post transaction. The HTML action attribute is used to specify where the form data is to be sent to the server after submission of the form. It can be used in the element.
URL: It is used to specify the URL of the document where the data to be sent after the submission of the form.
All you need now is to specify a textarea where that post will be sent and style the button to say "Post" instead of the regular "Submit".
<form action="/action_page.php" method="post">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><be>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><be>
<input type="submit" value="Submit">
</form>

How to recheck required input fields in JavaScript/HTML5

I'm trying to stay away from JQuery for this one (nothing against JQuery, I just don't want to load a huge library into this project for something small like this).
I'm curious how I might tell HTML5 to recheck all the required input fields in a given form. For example, I have this form (albeit slightly more complicated but you get the point):
<form action="here" onsubmit="check()">
<input required name="something">
<input type="submit">
</form>
If I don't have anything in that required field, HTML5 shows a popup error, something to the effect of "Please fill in this required field". What is stopping the user from putting in a single space, or some nonsense character like % or >? I'd like to partially validate this client-side (in addition to server side) so it isn't particularly inconvenient when the page redirects to the form submission page and then shows the error, and then goes back to the form, prompting the user to enter everything over again.
Assuming in my onsubmit function check I've removed all whitespace and/or nonsense characters from the ends of the string, how can that function then tell HTML5 to recheck the form to see if the required fields are still not empty?
Instead of onsubmit="check()" use addEventListener.
Now you can do everything with input data.
document.getElementById("submit").addEventListener("click", function(event){
var something = document.getElementById("something").value;
document.getElementById("something").value = something.replace(/[^A-Z0-9]/ig, "");
});
<form action="here">
<input required name="something" id="something">
<input type="submit" id="submit">
</form>
try to use regexp pattern (e.g. exclude white chars: [^\s]*, allow only letters [A-Za-z]*, ...)
<form action="here" onsubmit="check()">
<input required pattern="[^\s]*" name="something" >
<input type="submit">
</form>

How to select a hidden submit button

If a website that has a property to hide a form, how could I be able to press submit? This form has a hidden submit button, but if certain parameters are not correct, it automatically hides this form.
I can see it for a split second until it goes white. I tried firefox inspect element, and it's there, but is there a way to press submit while hidden? I tried pressing tab and hopefully selecting it, but it won't do it.
I'm sure there is a way to basically "push" the submit button while hidden.
Thanks
In jQuery that would be
$("name_of_form).submit();
In vanilla Javascript it should be
document.getElementById(id).submit();
or
document.forms.form_name.submit();
Of course, to retrieve the name you'd open up the browser's dev tool, there's usually an arrow you can click to find the element on the page, or just read the html and find it, and then you'll know the name of the form. This is also where you'll run the command.
Here's an example:
<form action="/weather/searchauto" method="POST" id="latlongForm">
<input id="lat" name="lat" type="hidden" value="">
<input id="long" name="long" type="hidden" value="">
</form>
So in this case the name is "latlongForm", so you can type in the console:
document.forms.latlongForm.submit()
See if that works!

Input form only accept some few chars

My problem is that i have a input form with a php code that insert into table. And later retrieving data from msql database. The issue is that in the input people can type in what they want en edit the page. They are acctuly only suppose to be able to insert a link but now they can make new divs.
So i want to make so they only can use character (http://EXAMPLE.com)
the code i use
<form action="updatehref.php" method="POST">
<textarea type="text" name="href" id="href">
Link here</textarea>
<input type="submit" name="btn" id="btn" value="submit"/>
</form>
The textarea element that you are using (and malformed BTW) is c pable of holding upto 65K of text. If you only want a URL, which is about 255 characters then use
<input type='text' name='href' id='href' value=''>
You will need to use JavaScript AND a server-side language (incase JavaScript is disabled) to test the validity of the input.

Categories