Button not like Chrome - javascript

Hello , I have little problem with this html script :
<!DOCTYPE html>
<html>
<body>
<td>
<form name="tsform">
<p align="center">
<font face="Arial">Choisir un Pseudo :
<br>
<input type="text" name="NICKNAME"><br />
<input type="button" value="Se connecter" onClick="javascript:location.href='ts3server://ts.xxxxxxxxx.fr/?port=9987&channel=Accueil&nickname=' + tsform.NICKNAME.value">
</font>
</p>
</form>
</a>
</td>
</body>
</html>
This scipt work fine if you click , but I want click and push Enter key
I modify :
input type="button" value="Se connecter"
to
input type="submit" value="Se connecter"
And work fine only on FireFox , not work on IE and Chrome
Have you any idea ?

One I would suggest using a submit button just a lot less annoying than onClick, and have modified the form made it cleaner and easy to see (also i left your <br /> tags in but i would suggest you dont use them and use css instead)
<td>
<form name="tsform"action="ts3server://ts.xxxxxxxxx.fr/"method="get">
<input type="hidden" name="port" value="9987"><input type="hidden" name="channel" value="Accueil">
<p align="center">
<font face="Arial">Choisir un Pseudo :
<br>
<input type="text" name="NICKNAME">
<br />
<input type="submit" value="Se connecter" />
</font>
</p>
</form>
</a>
</td>

Add the action attribute to the form tag:
<form name="tsform" action="javascript:location.href='ts3server://ts.xxxxxxxxx.fr/?port=9987&channel=Accueil&nickname=' + tsform.NICKNAME.value">

Pressing enter will submit the form but since there is no action (eg. URL) the submission doesn't do anything. I would utilize the default form behaviour and add the URL to an action attribute on the form element as well as setting the method (eg. get). Then add the 2 default values (port and channel) to hidden inputs.
Also, rather than attaching an onClick event listener to the button I would use a submit button which will trigger the same form submit as pressing enter.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<td>
<form name="tsform" action="ts3server://ts.xxxxxxxxx.fr/" method="get">
<input type="hidden" name="port" value="9987">
<input type="hidden" name="channel" value="Accueil">
<p align="center">
<font face="Arial">Choisir un Pseudo :
<br>
<input type="text" name="nickname">
<br />
<input type="submit" value="Se connecter" />
</font>
</p>
</form>
</a>
</td>
</body>
</html>

Related

Set up a button listener

I have a problem with buttons on my website. I have taken it from a colleague and want to change the function of the keys.
At the moment this is solved directly in HTML. That looks like this:
<table class="formButtons">
<tr>
<td>
<form method="post">
<p> <input name='"Variable".allowStart' value="1" type="hidden"> </p>
<p> <input class="Start" value="Start" type="submit"> </p>
</form>
</td>
<td>
<form method="post">
<p> <input name='"Variable".allowStart' value="0" type="hidden"> </p>
<p> <input class="Stop" value="Stop" type="submit"> </p>
</form>
</td>
</tr>
</table>
When pressing the Start or Stop button, the whole page is reloaded. I do not want that.
As you can see, my variable '"Variable".allowStart"' is called and set to value=1. Now I want to set the value of the variable to 1 in Javascript. But I do not know how. Can you help me?
And please, detailed answers, I am a total beginner in programming.
Extra information:
'"Variable".allowStart'
is a variable that I get from my Siemens PLC.
It works as shown in the example. All I have to do is add the variable as a comment in the HTML file. Like this:
<!-- AWP_In_Variable Name='"Variable".allowStart' -->
I don't understand your '"Variable".allowStart' , but if you are able to use it in your javascript then you can proceed with this answer.
To stop the Start & Stop button from reloading the page, you can prevent the default behavior of the input elements by using preventDefault() and do your desired stuff from there.
Check out the modified HTML & the javascript for this:
window.onload = function (){
var start = document.getElementById('Start');
var stop = document.getElementById('Stop');
start.onclick = function (e) {
e.preventDefault();
//add desired code here
console.log('Clicked Start');
}
stop.onclick = function (e) {
e.preventDefault();
//add desired code here
console.log('Clicked Stop');
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weird Buttons</title>
</head>
<body>
<table class="formButtons">
<tr>
<td>
<form method="post">
<p> <input name='"Variable".allowStart' value="1" type="hidden"> </p>
<p> <input id="Start" class="Start" value="Start" type="submit"> </p>
</form>
</td>
<td>
<form method="post">
<p> <input name='"Variable".allowStart' value="0" type="hidden"> </p>
<p> <input id="Stop" class="Stop" value="Stop" type="submit"> </p>
</form>
</td>
</tr>
</table>
</body>
</html>

form validation in js

I am working on validating forms am not sure if I am making it more complicated than it needs to be. I have a variable that i'm comparing the element to and then on success replacing a img src with a check for success or x for failure. It is supposed to run my validateData function once the field is unfocused. Here is the js. My img src src does not change when I test the first field by putting in numbers to trigger the redx.png src change.
function validateData() {
var letters = /^[A-Za-z]+$/;
var image1=document.getElementsById("image1");
if (document.forms["quiz_form"]["last_name"].value.match(letters) && document.forms["quiz_form"]["last_name"].value!="")
{
image1.src="check.png";
}
else{
image1.src="redx.png";
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="author" content="Kenneth Dunn" />
<meta name="description" content="" />
<script src="quiz.js"></script>
<link rel="stylesheet" href="quiz.css" type="text/css" />
</head>
<body>
<div id="page">
<div id="logo">
<h1>Overwatch</h1>
</div>
<div id="content">
<h2>Overwatch Quiz</h2>
<p>
Hi there!
This quiz is dedicated to one of my favorite games Overwatch!
</p>
<form action="quiz.js" method="post" name="quiz_form">
<p><br>
<input name "first_name" type="text" placeholder="First Name" onblur="this.placeholder='First Name'" onfocus="this.placeholder='Use only letters'" onblur="validateData()"/>
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image1" class="image1"/>
</p>
<p><br>
<input name="last_name" type="text" placeholder="Last Name" onblur="this.placeholder='Last Name'" onfocus="this.placeholder='Use only Letters'" onblur="validateData()" />
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image2" class="image2"/>
</p>
<p><br>
<input name="email" type="text" placeholder="Email" onblur="this.placeholder='Email'" onfocus="this.placeholder='Must contain # '" onblur="validateData()"/>
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image3" class="image3"/>
</p>
<p><br>
<input name="number" type="text" placeholder="Phone Number" onblur="this.placeholder='Phone Number'" onfocus="this.placeholder='Must follow xxx-xxx-xxx '" onblur="validateData()" />
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image4" class="image4"/>
</p>
<p><br>
<input name="sulley" type="text" placeholder="Sulley Email" onblur="this.placeholder='Sulley Email Address'" onfocus="this.placeholder='Must contain ~ and https:// '" onblur="validateData()" />
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image5" class="image5"/>
</p>
<br>
<br>
<p>
<h2>Find out which Overwatch character you are most like!</h2>
<p>If you could pick what form to take in a fictional universe with magic and cool science what would you want to be?</p>
<input type="radio" name="exist" value="1">Male(Human).<br>
<input type="radio" name="exist" value="2">Female(Human).<br>
<input type="radio" name="exist" value="3">An Animal or something crazy.
<p>What is your preferred weapon to take on bad guys and defend yourself?</p>
<input type="radio" name="weapon" value="1">Twin Shotguns for close range.<br>
<input type="radio" name="weapon" value="2">Twin pistols medium range.<br>
<input type="radio" name="weapon" value="3">An electro gun that schocks enemies into submission.
<p>Which motivations most align with your own?<p>
<input type="radio" name="idea" value="1">To become more powerful and to defeat those who would oppose me.<br>
<input type="radio" name="idea" value="2">To explore the world and discover the unknown.<br>
<input type="radio" name="idea" value="3">To protect my friends and those I care about.
<p>What do you look like?</p>
<input type="radio" name="look" value="1">Dark and mysterious black-hooded figure ,very edgy, like people in the Matix.<br>
<input type="radio" name="look" value="2">Short and spunky British airforce pilot who can travel back in time.<br>
<input type="radio" name="look" value="3">I'm a large gorilla who likes to eat bananas and peanut butter and can sheild my friends from harm.
<br>
<br>
<input type="submit" name="submit" id="submit" value="submit" />
<input type="reset" name="reset" id="reset" value="Reset" />
</p>
</form>
<br>
<br>
<br>
<br>
<div id="footer">
<h2 align="center" >Created by </h2>
</p>
</div>
</div>
</div>
</body>
</html>
You can't just simply set the action to your JS script, you will need to use the onsubmit event handler.
<form onsubmit="validateData">
This will trigger the validateData method once the form is submitted. This won't stop the form from performing as usual though, you will need to stop that in your validateData method like so:
function validateData (event) {
// prevent the form from actually submitting
event.preventDefault();
}
There are multiple problems here; some have been mentioned by others. One of the main problems is you had getElementsById instead of getElementById. If you haven't figured out how to pull up the developer console and see what errors you're getting, now would be a good time.
Form validation can get pretty complicated and normally I use a library that does the heavy lifting. You might look into that.
Here is a working version of what I'm guessing you're trying to do. It's far from optimal but it's what I was quickly able to come up with.
https://jsfiddle.net/ec2L08vf/1/

Form or a on click trigger submit

I currently have a code, that is loaded dynamicly, so I can not tweak it much.
But now I want to trigger the submit when clicking the entire <form>.
How can I achive that?
My current code:
<form action="http://example.com" method="post" target="_blank">
<input type="hidden" name="token" value="1234567890">
<input type="hidden" name="SESSID" value="1234567890">
<input type="hidden" name="PHPID" value="1234567890">
<input type="submit" value="Open Panel">
<p class="pakb-box-icon"><i class="icon-webadres"></i></p>
<h2>Manage</h2>
<p class="pakb-box-desc">TEXT</p>
<p class="pakb-view-all">TEXT</p>
</form>
Okay man, i will answer this, but on the next time you need to post your javascript code.
This is your markup:
<!-- add a id here -->
<form id="form" action="http://example.com" method="post" target="_blank">
<input type="hidden" name="token" value="1234567890">
<input type="hidden" name="SESSID" value="1234567890">
<input type="hidden" name="PHPID" value="1234567890">
<!-- add a id here -->
<input id="submit" type="submit" value="Open Panel">
<p class="pakb-box-icon"><i class="icon-webadres"></i></p>
<h2>Manage</h2>
<p class="pakb-box-desc">TEXT</p>
<p class="pakb-view-all">TEXT</p>
</form>
With your markup set now is time for the JS:
<script type="text/javascript">
//call a anonymous function
$(document).ready(function(){
//Event On click of the form
$('#form').click(function(){
$('#submit').trigger('click');
})
})
</script>
Obs: submit the form on click in his body dont makes sense to me, please explain this.
Edit:
You can learn basic JS and JQuery on www.codecademy.com

PHP JS submit button

I need to develop a submit button with js but as I have a register and a login bn on the same page So, when I press the register, it goes fine but if I press the login, the login uses the register files for example.
<form name="as" method="POST" action="loginpro.php">
Username:
<input type="text" name="username" />
<br />
<br />
Password:
<input type="password" name="password" />
<br />
<br />
<input style="font-size: 17px" type=button onClick="submitform()" value="Submit"/>
</form>
This is the code that I am using to make the login form and as you can see I call a file with the name loginpro.php where I have the php settings to ask the db the files that I need but when I execute it he is calling regpro.php that is the file that I am using for register take a look.
<form name="register" method="POST" action="regpro.php">
Username:
<input type="text" name="username" />
<br />
<br />
Email:
<input type="text" name="Email" />
<br />
<br />
First Name:
<input type="text" name="fname" />
<br />
<br />
Last Name:
<input type="text" name="lname" />
<br />
<br />
Password:
<input type="password" name="password" />
<br />
<br />
<input style="font-size: 11px" type=button onClick="submitform()" value="Submit"/>
</form>
Well, it could be something in your submitform() Javascript function since both forms are triggering that function in the onclick event.
In JS, pass the form name to the function, like below:
<input style="font-size: 17px" type=button onclick="submitform('as')" value="Submit"/>
<input style="font-size: 11px" type=button onclick="submitform('register')" value="Submit"/>
And in your function:
function submitform(form) {
//will submit the form where the button was clicked from within
document.forms[form].submit();
}
jQuery (remove inline event handlers onclick="submitform()" from both forms)
$("input:button").on("click", function() {
var $form = $(this).closest("form");
$form.trigger("submit");
//OR
//$form[0].submit();
});
Why dont you give them id so you could call the onclick event for each button or other way you could use jquery like below
<input id="btnSubmit" type=button onClick="submitform()" value="Submit"/>
<script type="text/javascript">
$("#btnSubmit").click(function(){
$.post("the php page address goes here like regpro.php",
{
//here set the paramter
'firstname':$("#fname").val().trim(),
'lastname':$("#lname").val().trim()
}, function(data){
data=data.trim();
//you can retrive a data to find that the call is success or not
});
});
</script>
you could do the same with login button
Give different id for different form and use the simple way bellow
document.getElementById("your_form_id").submit();

Form being submitted on clicking image

Here is my code:
<form action="telecallerinfo.php?action=modify&id=<?php echo $id;?>" method="post" enctype="multipart/form-data">
<table class="panel1">
<tr>
<td>Caller Name: <input name="tele_caller" type="text" size="15" value="<?php echo $tele_caller?>" /></td>
</tr>
<tr>
<td align="right">
<input name="submit" id="submit" type="image" src="images/submit.gif" width="60" onclick="this.form.submit();"/>
<input name="cancel" id="cancel" type="image" src="images/cancel.gif" width="60" onclick="window.location.href='telecallerinfo.php';"/>
</td>
</tr>
</table>
</form>
but then I am clicking on the cancel image. The form is being submitted. How to stop it because I want only the page to be refreshed. Is there any way of giving reset functionality to an image?
Image inputs submit the form when clicked. You need to return false in your event handler to stop the normal action of the button taking place.
<input name="cancel" id="cancel" type="image" src="images/cancel.gif" width="60" onclick="window.location.href='telecallerinfo.php'; return false;"/>
In theory the same should hold for the submit-image, but actually you should just discard the event handler and let the default action submit the form when clicked.
For a button that just navigates to a page you would be better off using a simple link.
Is there any way of giving reset functionality to an image?
If you really wanted:
<img onclick="document.getElementById('someform').reset();">
But it'd be better to do it without JS using a real reset button:
<button type="reset">
<img src="images/cancel.gif" alt="Reset"/>
</button>
This will give you a button graphic around the image, but you can get rid of that with CSS:
border: none; padding: 0; margin: 0; background: transparent;
Are you sure you want a ‘reset’? They're rarely useful, and often annoying if accidentally clicked thinking they're submit buttons...
<img src="images/cancel.gif" alt="DON'T FORGET ALTERNATIVE TEXT">
You may try this if you want it as an image:
<button type="reset">
<img src="image location" alt="Reset" />
</button>
It works but, RESET buttons are destructive and should not
be used, except in situations where destruction of user input is really
desirable.
<input type="reset" name="Reset" id="button" value="Reset" />
Just try this one
<input type="image" src="butup.gif" alt="Submit button">
Some browsers wont support to "alt" tab so there is another way:
<html>
<body>
<form action="example.cgi" method="post">
<input type="text" name="login">
<br>
<input type="image" src="submit.gif">
<input type="image" src="reset.gif">
</form>
</body>
</html>

Categories