Trying to open a new tab with JS with a function - javascript

Im trying to call a function in an html to a javascript file with a button and I think the function is going through because the alert is working but the 2nd part of the js file isnt working (This is the part where the javascript opens the new tab.) Please help.
This is my html file. Don't mind the class="submit_button" thing. I just cut of my styling. And the rest of my popup.html file.
<div>
<form>
<input class="URL_Textbox" id="WebsiteName" name="WebsiteURL_Name" placeholder="URL" >
<input
type="button"
class="submit_button"
onClick="submitFunction()"
value="Go"
>
</form>
</div>
This is my javascript file
function submitFunction() {
alert("1234567890")
location.href("https://www."+document.getElementById('WebsiteURL_Name').value,"_self")
}
Thanks for taking the time to respond and read my question!

The id should be WebsiteName. I suppose, you want to open a new browser window with the inserted value. That can be done with window.open(...).
function submitFunction() {
alert("1234567890")
window.open("https://www." + document.getElementById('WebsiteName').value, "_self")
}
<div>
<form>
<input class="URL_Textbox" id="WebsiteName" name="WebsiteURL_Name" placeholder="URL">
<input type="button" class="submit_button" onClick="submitFunction()" value="Go">
</form>
</div>

You need to use location.href this way:
location.href = 'someURL';
About Window.location property (MDN)
function submitFunction() {
location.href = "https://www." + document.getElementById('WebsiteName').value;
}
<div>
<form>
<input class="URL_Textbox" id="WebsiteName" name="WebsiteURL_Name" placeholder="stackoverflow.com" >
<input
type="button"
class="submit_button"
onClick="submitFunction()"
value="Go"
>
</form>
</div>

Related

JavaScript window.location.href code not working

I know this question has been asked a lot before, but none of the fixes worked for me. I made a window.location. href thing before and that worked but this one does not. I know the function runs because I tested it with an alert. Can someone see anything wrong here?
<form>
<input type="submit" name="agree" value="agree" onclick="fagree()">
<input type="submit" name="disagree" value="Decline and go to google" onclick="fdisagree()">
</form>
<script type="text/javascript">
function fagree(){
window.location.assign("index.html")
localStorage.setItem("Terms", "true")
}
function fdisagree(){
window.location.href="https://www.google.com/"
return false;
}
</script>
</body>
You can use button type instead of submit, otherwise, well, the form will be submit.
<form>
<input type="button" name="agree" value="agree" onclick="fagree()">
<input type="button" name="disagree" value="Decline and go to google" onclick="fdisagree()">
</form>
<script type="text/javascript">
function fagree(){
window.location.assign("index.html");
localStorage.setItem("Terms", "true"); //This line won't be executed, because the above line will reload the page
}
function fdisagree() {
window.location.href="https://www.google.com/"
return false; //This can be removed because the above line will redirect to google and the return false won't be executed
}
</script>
If you don't need any else form elements than those 2 buttons, you can get ride of the <form></form> and simply use <button>. In example :
<button type="button" name="agree" value="agree" onclick="fagree()">
<button type="button" name="disagree" value="Decline and go to google" onclick="fdisagree()">
Do not put it in the form if you don't have to (if that's the whole form code in the example). You are submitting it before functions have a chance to trigger.
OR:
<form>
<input type="button" name="agree" value="agree" onclick="fagree()">
<input type="button" name="disagree" value="Decline and go to google" onclick="fdisagree()">
</form>
<script type="text/javascript">
function fagree(){
window.location.assign("index.html")
localStorage.setItem("Terms", "true")
}
function fdisagree(){
window.location.href="https://www.google.com/"
return false;
}
</script>
</body>

Form with two submit buttons doing two different things

I have a form that I have two buttons on. One button should take the user to one php script and the other button would take the user two a different php script. However for some reason the buttons aren't doing anything. Here is the code.
<script language="Javascript">
function OnButton1()
{
document.contactform.action = "../scripts/email-info.php"
// document.Form1.target = "_blank"; // Open in a new window
document.contactform.submit(); // Submit the page
return true;
}
function OnButton2()
{
document.contactform.action = "../scripts/email-info2.php"
//document.contactform.target = "_blank"; // Open in a new window
document.contactform.submit(); // Submit the page
return true;
}
</script
Then here is the actual form code:
<form id="contact-form" name="contactform" method="post">
<fieldset>
<div id="holder">
<div id="formLeft">
<div class="txtlabel">Name* </div><div class="input-bg"><input type="text"
name="name" id="name" required></div>
</div>
</div>
<div id="msgbox">
<div class="txtlabel">Tell Us About Your Business Needs</div>
<div class="message-bg">
<textarea name="message" id="message" rows="9" cols="56" required></textarea><input
name="formpage" type="hidden" value="<?=$pagename;?>" />
</div></div><div style="clear:both"></div><br /><br />
<input src="/submitbtn.jpg"
name="submit" value="View Now" class="submit-button" onclick="OnButton1();"/>
<input src="/submitbtn.jpg"
name="submit" value="Download Now" class="submit-button2" onclick="OnButton2();" />
</fieldset>
</form>
I've removed some of the submission fields to make it more easily viewable. But I get nothing when I click either button...Any thoughts??
problem is in input:
<input src="/submitbtn.jpg"
name="submit" value="View Now" class="submit-button" onclick="OnButton1();"/>
When you have a form:
document.contactform.submit
Javascript returns the input with name submit, not the submit function.
You could change the name of the input:
<input src="/submitbtn.jpg"
name="yourName" value="View Now" class="submit-button" onclick="OnButton1();"/>
Also, your inputs are not buttons, check this.
Update
This question mentions HTML5 formaction attribute:
<form action=#">
<buton formaction="script-1.php">submit one</button>
<buton formaction="script-2.php">submit two</button>
</form>
I'm surprised no one mentioned formaction. It is a legal attribute (in HTML5) for the input and button tag in submit/image state and can be used to send form data to a different action page. http://mdn.beonex.com/en/HTML/Element/input.html (it is also valid in button too).
<form action=#">
<buton formaction="script-1.php">submit one</button>
<buton formaction="script-2.php">submit two</button>
</form>
In case you need to support IE9-, you simply can polyfill this, using webshims.
<script src="webshims/polyfiller.js"></script>
<script>
webshims.polyfill('forms');
</script>
<!-- now it also works with IE8/9 and other legacy browsers -->
<form action=#">
<buton formaction="script-1.php">submit one</button>
<buton formaction="script-2.php">submit two</button>
</form>
The reference to your form is
document.forms.contactform
and not
document.contactform
So, for example, the submit button should be:
document.forms.contactform.submit();
// ^^^^^
The same correction should be applied to other references.

I have 1 form with 2 submit buttons

I am trying to set-up a form that has 2 buttons, accept and deny. It doesn't seem to be working. Any thoughts on what I should fix?
<form name="iform" method="post" onsubmit="" onreset="" enctype="multipart/form-data" action="formapprovedeny" class="iform">
Form content here.
<input type="button" onclick="submitForm('html_form_approve.php')" class="submit_button" value="Approved" name="Approved" />
<input type="button" class="submit_button" onclick="submitForm('html_form_deny.php')" value="Denied" name="Denied" />
</form>
Here is the script part.
<script>
function submitForm(action)
{
document.getElementById('formapprovedeny').action = action;
document.getElementById('formapprovedeny').submit();
}
</script>
Your Javscript is trying to submit a form with an id of formapprovedeny but your form does not have an id. Try adding id="formapprovedeny" to your form
It should id="formapprovedeny" not action="formapprovedeny"
<form name="iform" method="post" onsubmit="" onreset="" enctype="multipart/form-data" id="formapprovedeny" class="iform">
You have a problem with your naming.
You try to get the form by it's id, but it is not set. It's name is.
You should use either getElementByName or give your form an id.
The type of button must be 'submit' and the value whatever you want, look this:
<input type="submit" class="submit_button" value="Approved" name="Approved" />
<input type="submit" class="submit_button" value="Denied" name="Denied" />
What do you want to achieve using the 2 buttons? What do you expect?
http://jsfiddle.net/xaW5P/
<script>
function submitForm(action)
{
alert('hello submitForm '+action);
document.getElementById('formapprovedeny').action = action;
document.getElementById('formapprovedeny').submit();
}
</script>
if I use your code (added an alert) this seems to work...whatever it should be doing ;)

Validate a textbox using JQuery

I have TextBox and a Button
first the button is in disabled position
When the user starts typing the text in textbox
the button should be enabled
How can i achieve this using JQuery or Java Script
Seems like you are a newbie to jQuery. I would say you start with jQuery Tutorials and then move on to jQuery Validate. If you prefer books to start with, you can pick up a copy of jQuery in Action.
you can try with this also
<input type='text' id='textbox'>
<input type="button" class="button-disabled" id="change" disabled="disabled" value="click">
$("#textbox").keyup(checkForm).focus(checkForm);
function checkForm()
{
if($("#textbox").val()=='')
{
$("#change").addClass("button-disabled").removeClass("button");
$("#change").attr("disabled","disabled");
}
else
{
$("#change").removeClass("button-disabled").addClass("button");
$("#change").removeAttr("disabled");
}
}
<input type='text' id='textbox'>
<input type="button" id="button'" value="click me">
$('#button').attr('disabled', 'disabled');
$('#textbox').change(function(){$('#button').removeAttr('disabled')} );
<input type="text" id="myText">
<input type="submit" id="myButton" disabled="disable"/>
jQuery(function(){
jQuery('#myText').bind('keypress',function(e){
if((jQuery(e.target).val()+"").length>0)
{
jQuery('#myButton').removeAttr('disabled');
}
else
{
jQuery('#myButton').attr('disabled','disable');
}
});
});
<input type='text' id='thetext' value=''>
<input type='button' disabled='disabled' id='thebutton' value='the button'>
$(document).ready(function(){
$('#thetext').change(function(){
$('#thebutton').removeAttr('disabled');
});
});
Read up on the jQuery API : http://api.jquery.com/
HTML:
<input type='text' id='textbox'>
<input type="button" id="mybutton" value="click me">
JS:
$(document).load(function() {
$('#mybutton').attr('disabled', 'disabled');
}
$('#textbox').change(function() {
$('#mybutton').removeAttr('disabled');
}
Update: regarding the use of jQuery w/ ASP.NET, keep in mind that ASP.NET outputs standard HTML once the page is rendered, so the above code would work similarly, except you need to figure out the ID's of the textboxes generated by ASP.net. See this link for further explanation on this:
http://www.search-this.com/2009/08/06/using-jquery-with-asp-net-controls/

Form submit problem using JavaScript in Internet Explorer 6

I have just done the code for submit the form using JavaScript.
It works in all browsers except in Internet Explorer 6.
I have pasted my HTML form and JavaScript code below.
Can you please find what's the problem with it?
JavaScript:
<script type="text/javascript" language="javascript">
function dodelete(image_id)
{
if (confirm("Are you sure want to delete this image?"))
{
document.getElementById('image_id').value=image_id;
document.del_form.submit();
}
}
</script>
HTML Code:
<form name="del_form" id="del_form" method="post">
<input type="hidden" name="do" id="do" value="delete" />
<input type="hidden" name="image_id" id="image_id" />
</form>
Function Call Code:::
<p class="video">
<a href="javascript:void(0)" onclick="dodelete('<?php echo $row['image_id']?>')">
<img src="<?php echo $cfg->admin_image_path; ?>/delete_icon1.gif" border="0" alt="Delete"/>
</a>
</p>
What is returned by:
document.getElementById('image_id')
It returns one INPUT element of collection of elements?
Try to replace:
document.getElementById('image_id').value=image_id;
with:
document.del_form.image_id.value=image_id;
OnSubmit call for javascript would help.
<form name="del_form" id="del_form" onsubmit="dodelete(value);" >
<input type="hidden" name="do" id="do" value="delete" />
<input type="hidden" name="image_id" id="image_id" />
</form>
There are two things I'd like to try, I'm not sure why or when this doesn't work it seems random, first try to set a timeout for the submit :
document.doSubmit = function() {
document.del_form.submit();
}
setTimeout("document.doSubmit();", 100);
Sometimes, just return something after the click works :
<input type="hidden" name="image_id" id="image_id" onclick="submitFormFunction(); return false;” />
What happens if you replace:
document.del_form.submit();
with:
document.getElementById('del_form').submit()
Try to move method='POST' to the beginning of form element definition.
I mean -- method attribute should be the first attribute of form element.
If I remember well, this fixed some problems with submitting forms on IE6.
I have edited your code a little bit.
<script type="text/javascript" language="javascript">
function dodelete(image_id)
{
if (confirm("Are you sure want to delete this image?"))
{
document.getElementById('image_id').value=image_id;
document.del_form.submit();
}
return false;
}
</script>
and the HTML with some test Image ID and it works in IE6
<form name="del_form" id="del_form" method="post" onSubmit="return(dodelete('2'));">
<input name="do" id="do" value="delete" />
<input name="image_id" id="image_id" />
<input type="submit" value="Submit">
</form>
Let's try again :).
What happen after replacing:
onclick="dodelete('<?php echo $row['image_id']?>')">
with:
onclick="dodelete('<?php echo $row['image_id']?>'); return false;">
What exactly doesn't work with your code? Throw JS error, there is no server request, values in request are empty?
And (maybe the most important question) -- where is action attribute for your del_form form?
replace
<a href="javascript:void(0)"
with
<a href="#"
IE have problem with that for the dom that fires the JS submit.

Categories

Resources