How to select a hidden submit button - javascript

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!

Related

Button didnt disable inside the form

greeting developers. i am doing project for university related to Javascript. i create one page got button add and unfriend button which is disable.once user click add button the prompt box appear and after they click Ok for promp, the unfriend button will able to click while add button become disable. if click unfriend, add button will able to click. i don't know how explain it. may be read my question can be headache. sorry for that. my problem is button does not disable,if i never put inside form it work but since i put inside form doesnt work. guys is there any solution please help me
function myFunction(add){
var subject = prompt("Please enter Subject that want to study");
if (subject != null){
document.getElementById("subject").value = subject;
document.getElementById("btn").disabled=false;
document.getElementById("add").disabled=true;
document.getElementById("add").value="request sent";
}
}
function disableButton(btn){
document.getElementById("add").disabled=false;
document.getElementById("btn").disabled=true;
document.getElementById("add").value="Add friend";
form.submit();
}
<form method="post" id="form" enctype="multipart/form-data" autocomplete="off" >
<input type="submit" value="unfriend" id="btn" onClick="disableButton(btn)" disabled/>
<input type="hidden" id="subject" name="subject"/>
<input type="submit" value="add" id="add" onclick="myFunction(add)" /></form>
The "add" and "unfriend" buttons both submit a POST request which is refreshing the page since there is no form action specified. Perhaps you need to read up on HTTP methods. https://www.w3schools.com/tags/ref_httpmethods.asp is a good resource.
If your plan is to add a server side page to handle the request at a later time you can temporarily add the following to the form tag onsubmit="return false".
If you simply want to use the form inputs without submitting the form you should remove form.submit() from the disableButton function and change the types of the add and unfriend buttons from type="submit" to type="button". You can also remove the method and enctype of the form.
Personally I don’t really use forms unless its more than 3 fields.
Two things to think about:
You got the right written idea, you are however missing event.preventDefault(), which will make your website refresh itself, which will then force out everything to refresh.
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
The other is that try between the both buttons as they are both i suggest one myfunction to be onclick in a button tag. just to avoid two inputs types.
Additional:
I suggest you add jquery to make things easier with the toggle function.

One submit button opens two pages - one in a new window

I have a zip code submit button on my website. When user presses submit button I would like the current page (self) to go to a different page (of results) as well as a new tab / page opening. Here is what I am using. The problem I am having is that the second window does not open. Everything else works. I don't have much experience in coding. I've pieced this together through search.
<form id="header-box-form" action="http://www.quotesfortermlife.com/results.html" method="get">
<input type="text" onkeypress="return submitenter(this,event)" maxlength="10" size="16" id="zipcode" name="zipcode" tabindex="1">
<input onmouseover=
"this.src='http://www.quotesfortermlife.com/pictures/orng_btn02.png';"
onmouseout="this.src='http://www.quotesfortermlife.com/pictures/orng_btn01.png';"
onclick=
"newWindow('http://www.quotesfortermlife.com/compare-rates.html','window2');window.open('http://www.quotesfortermlife.com/results.html','_self',' ')"
src="http://www.quotesfortermlife.com/pictures/orng_btn01.png"
type="image">
</form>
Thanks for any help you can offer.
Try changing this
onclick="javascript:window.open("http://www.quotesfortermlife.com/compare-rates.html","other_window")
to this
onclick="window.open('http://www.quotesfortermlife.com/compare-rates.html','other_window')
Firstly the "javascript:" part is wrong, it's only needed in a link's "href" attribute, this is misused a lot. Secondly because you had a " around your URL it was closing the onclick attribute. So lesson is to use single quotes if you have to quote inside a double quote.

Accidental JavaScript redirct?

I have a form that adds an item to a list when I press enter or hit a submit button. I'm not sure what I've changed, but suddenly pressing enter seems to redirect the URL, while clicking the button acts normally.
The HTML portion looks like this:
<form id="add-ingr">
<input class="new-ingredient" type="text" size="50" name="new-ingredient" placeholder=" Your ingredient"></input>
<img id="check" src="imgs/check.png" alt=""/>
</form>
The jQuery is:
$('#check').click(function () {
addIngredient('new-ingredient');
});
$('.new-ingredient').keypress(function (e) {
if (e.keyCode == 13) {
addIngredient('new-ingredient');
}
});
So it's running the same function either way. In both cases, it successfully adds the ingredient to the list, but in the 2nd case, the page is redirected from "recipe.html" to "recipe.html?new-ingredient=".
And here's the part that really confuses me: when I add an extra input to the form, this problem doesn't occur when I press enter in either box:
<form id="add-ingr">
<input class="new-ingredient" type="text" size="50" name="new-ingredient" placeholder=" Your ingredient"></input>
<img id="check" src="imgs/check.png" alt=""/>
<input type="text"></input>
</form>
Also, if I add in an actual button (not my clickable image), it redirects like pressing enter, even though I have no code to do anything if the button is pressed. In this case, the extra input field has no effect.
<form id="add-ingr">
<input class="new-ingredient" type="text" size="50" name="new-ingredient" placeholder=" Your ingredient"></input>
<img id="check" src="imgs/check.png" alt=""/>
<button id="button">Add Ingredient</button>
</form>
I have absolutely no idea why this is happening. Even if I get rid of the jQuery to perform an action when I hit enter, this still happens. I'm new to JavaScript, so sorry if this is something obvious, but I'd really appreciate some help.
I can also provide more of my code if it's relevant, but I didn't want to clog things up with a ton of code.
Hitting enter (or clicking the button if its there) is submitting the form (this makes it appear to "redirect the URL"). You need to prevent that from happening with e.preventDefault(). So in the click listener:
$('#button').click(function(e){
e.preventDefault();
addIngredient('new-ingredient');
});
Put that in each of the listeners, or get rid of your form tags so there isn't anything to submit (as was mentioned in the comments).
I don't entirely blame you for being confused. The browser default behavior is to perform the "submit" action, whatever it is, when someone presses enter while a field in the form is highlighted. As elclanrs said, you can override the submit action; in fact, I'm pretty sure in JQuery it's just this:
$('#add-ingr').submit(function(e) {
if ('event is not coming from button')...{
e.preventDefault();
}
});
I'm afraid I couldn't explain why adding a blank input changed the effect, though. Through my laziness, I have also left you the work of determining the best way of allowing actual submissions, though (if the form gets submitted to the server, you won't want to block submit every time)

Send enter from 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.

Submit a Form to a new Tab more than once

I am trying to build a simple form for sending a newsletter:
<form method="post" id="newsletter_form" action="">
<label for="subject">Newsletter Subject:</label><br/>
<input type="text" name="subject" class="textField large" id="subject" /><br/><br/>
<label for="contents">Newsletter Contents:</label><br/>
<textarea class="textField" rows="6" cols="40" name="contents" id="contents"></textarea>
</form>
And then two buttons, one of them sets the action to a preview page, and target to _blank, to open in a new tab, and then the other button sets another action, and removes the target, so that it submits normally and sends out the newsletter. However, hitting the preview button only works once in Chrome/Safari.
I have searched, and found out that this is a bug in Chrome and Safari. However, I am trying to bypass this by creating another form using jQuery, with a different ID, removing the first form, and making the preview submit that second form. This still doesn't work. It works for IE and Firefox, just not in Webkit based browsers.
Is there any way to get around this?
This seems to work for webkit. Not sure how it will work for IE.
$("#newsletter_form").submit(function(){
$("#newsletter_form").submit();
});

Categories