javascript not working for URL re-direct - javascript

Can anyone help me with this script I'm trying to get working? I need a text box with a submit button, when a certain id is entered I need them to be re-directed to a certain site (below examples in the script are are yahoo, bing, etc).
This below is what I have so far, but the submit button doesn't show up and when the submit button is hit it doesn't seem to execute the script.
I just get a #? added to the url... I'm working in opencart so I think part of the problem might be with opencart.
<html>
<head>
<script>
document.getElementById("gobutton").addEventListener("click", function(event){
event.preventDefault()
var idmap={
REDDIT:"http://reddit.com",
YAHOO:"http://yahoo.com",
BING:"http://bing.com"
};
id=document.getElementById("siteid").value;
if (id in idmap) {
alert("going to "+idmap[id]);
window.location.href=idmap[id];
} else {
alert("invalid code ["+id+"]")
}
event.preventDefault()
});
</Script>
</Head>
<Body>
<form id="urllauncher" action='#'>
<label for="siteid">Site id</label>
<input type="text" id="siteid">
<button type="submit" id="gobutton">Go</button>
</form>
</Body>
</Html>
Thanks for any help on this!

You should add your script at the end of the body.
You are calling document.getElementById("gobutton").addEventListener too early, at this point the button is not yet present in the page DOM, so no event is attached to it.
Working code :
<html>
<body>
<form id="urllauncher" action='#'>
<label for="siteid">Site id</label>
<input type="text" id="siteid">
<button type="submit" id="gobutton">Go</button>
</form>
<script>
document.getElementById("gobutton").addEventListener("click", function(event){
event.preventDefault()
var idmap = {
REDDIT:"http://reddit.com",
YAHOO:"http://yahoo.com",
BING:"http://bing.com"
};
var id = document.getElementById("siteid").value;
if(id in idmap) {
alert("going to "+idmap[id]);
window.location.href=idmap[id];
} else {
alert("invalid code ["+id+"]")
}
});
</script>
</body>
</html>
PS : try to indent your code prior to posting it !

I think if you remove that form tag ,it will solve all your problems.

I think there's no need for it be of submit type and have a form at all
Just remove those and the event.preventDefault()

Related

disable click button on submit

I try to update this jquery script in pure js (with bootstrap 5). The goal is to not allow someone to click twice on the payment button. Sorry I am not very strong in js.
My goal is to have the same reaction that the jquery script.
I tried to follow the process on this page :
Disabling a button in vanilla JavaScript and in jQuery
Thank you
My current script
<form name="checkout_confirmation" action="http://............/Process" method="post" id="checkout_confirmation" role="form" onsubmit="return checkCheckBox(this)"><section class="checkout_confirmation" id="checkout_confirmation">
div class="text-end" id="process_button" class="processButton">
<button type="submit" data-button="payNow" class="btn btn-success">Confirmer la commande avec paiement</button> </div>
</div>
</form>
<script>
$('form[name="checkout_confirmation"]').submit(function() {
$('form[name="checkout_confirmation"] button[data-button="payNow"]').html('Confirm the payment').prop('disabled', true);
});
</script>
Now the script update
<script>
var button = document.getElementById('checkout_confirmation');
button.addEventListener('submit', function() {
alert('Confirm the payment');
});
button.disabled = false;
button.click(); // No output
button.prop("disabled", true);
</script>
setAttribute can be used in JavaScript to set the attribute of the button as disabled.
Element.setAttribute("disabled", true);
This can be used to disabled the button.
So when someone clicked on the submit button, you can disable the button till the data is processed.
Check the below demo code:
const btn = document.getElementById("submit-data");
btn.addEventListener("click", submitForm);
function submitForm(){
btn.setAttribute("disabled", true);
btn.innerText = "Submitting..";
let userName = document.getElementById("user-name").value;
console.log("Name: ", userName);
setTimeout(() => {
btn.removeAttribute("disabled");
btn.innerText = "Submit";
}, 3000);
}
<form type="POST">
<label for="user-name">Full Name</label>
<input type="text" id="user-name" placeholder="Your Full Name" />
<br /><br /><br />
<button id="submit-data">Submit</button>
</form>
You have two problems:
Submit events fire on form elements, not button elements.
getElementById gets an element by its id and neither your button nor your form has an id. (See this question).
Could you not use e.preventDefault() to stop the default behaviour of the button being pressed?
More can be read here: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

How to submit form without button?

I am new here. I want my code to submit form without submit button. My code run like this:
Every time when user input data in input text and press enter, the result will be display on the same page just below input text. This code will work perfectly is I use submit button to submit data. Can anyone help me with this ? Thanks in advance.
This is my result.html
$(document).ready(function(){
$("#code").change(function(){
var st = '';
$('#Myform input[type=text]').each(function(){
st = st+ '<td>'+$(this).val()+'</td>';
$(this).val('');
});
$('#result').append('<tr>'+st+'</tr>');
});
});
html
<form id="Myform">
<table>
<tr>
<td>
<p>Code:</p>
</td>
<td><input id="code" type="text" name="code" size="40" autofocus/></td>
</tr>
</table>
</form>
<table id="result"></table>
This is my code.php
<?php if( $_REQUEST["code"] ) {$code = $_REQUEST['code'];}?>
A cursory Google search would have brought up that jQuery provides a means of doing this.
You can trigger form submission via either the submit() or trigger() methods, i.e.
$('#Myform').submit()
or
$('#Myform').trigger('submit')
The former is merely a shortcut method to the latter.
how are you?
If you need to send to another php page, you can to send AJAX, if don't want to send, you can show data directly to your js, without ajax.
https://jsfiddle.net/5L9Leso8/
UPDATE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>teste</title>
</head>
<body>
<div>
<label for="test">
<input type="text" name="test" id="test">
<p id="rest"></p>
</label>
</div>
<script>
$('#test').on('change', function(e) {
e.preventDefault();
var self = $(this);
/** if you don't need to send to your php code
$('#rest').html(self.val());
**/
if (self.val().length > 0) {
$.ajax({
url: 'yourUrlphp',
type: 'post',
data: {
yourText: self.val()
},
success: function(data) {
$('#rest').html(data);
}
});
}
});
</script>
</body>
</html>

Get the value from the form and insert that value in the table by using JavaScript

I have created simple form and table.. So I need to add values from the form. I have created the code but it is not working.
<html>
<body>
<script>
function clickFunction(){
document.getElementByName('inputvalue').innerHTML = document.getElementByName('name');
}
</script>
<form>
Name: <input type="text" name="name">
<input type="submit" value="Done" onclick="clickFunction()">
</form>
<table border="1">
<tr><td>Data input: </td><td><label name="inputvalue" > null </label></td></tr>
</table>
</body>
</html>
There are few things you have to fix first:
It should be document.getElementsByName, you are missing a 's'.
Since, the submit is in a form element. Once you click it, it will submit the form. So, you should stop it by using return false in the function.
To get the value from the input box, you should add 'value' after document.getElementByName('name'). it should be document.getElementByName('name').value.
I have added e.preventDefault. In-case, it tries to submit. In that case, there is a slight change in HTML.
...
<input type="submit" value="Done" onclick="clickFunction(event)">
...
The corrected source code: https://jsfiddle.net/gy03xz4b/4/
HTML is fine, the js will change a bit:
function clickFunction() {
document.getElementsByName('inputvalue')[0].innerHTML = document.getElementsByName('name')[0].value;
return false;
}
Hope that helps!
Refers:
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName
http://www.irt.org/script/155.htm (What does 'return false' do?)
https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault (e.preventDefault)

jQuery Popup submit not responding

I have created a popup which allows users to edit a value then they can submit it again
Html:
<body>
<input id="submit" type="submit" value="Submit" data-theme="b" data-icon="check" data-rel="popup"/>
<div id="success" data-role="popup">
</div>
<div id="fail" data-role="popup">
<p>Fail</p>
</div>
</body>
jQuery:
$('#submit').click(function(){
var doStuff = true;
if(doStuff === true){
$("#success").empty();
$("#success").append('<p> <input type="text" value="' + doStuff + '" /> <input type="submit" id="popupConfirm" value="Submit" /> </p>');
$("#success").popup("open");
}else{
$("#fail").popup("open");
}
});
$('#popupConfirm').click(function(){
console.log("jhasgd");
});
Currently the click is not working at all that's why I have gibberish in the console.log and also I am not sure how to get the value of the entered input.
So my question is first how can I get the submit click to work and then output what they wrote?
fiddle of the code
$(document).on('click', '#popupConfirm', function(){
console.log("jhasgd");
});
Where are you adding the jQuery code at? If you are adding it all above the HTML, it might be trying to bind the #submit input before it exists in the DOM. Can you try to wrap the code in a document ready so it won't do the click binding before the DOM gets filled up.
$( document ).ready(function()
{
$('#submit').click(function(){
console.log("clicked the button");
});
});
Edit: I just saw the comment where you figured this out above. You didn't really have a code solution provided, so I will just leave this as is.

Disable button whenever a text field is empty dynamically

Here's my code:
<input type="text" onkeyup="if(this.value.length > 0) document.getElementById('start_button').disabled = false; else document.getElementById('start_button').disabled = true;"/>
<input type="button" value="Click to begin!" id="start_button" disabled/>
This works but still not efficient since the user can delete the text inside the text box and click the button while he's holding on DELETE key. Is there a more efficient way to achieve this using javascript?
Easiest way to do it :-
Simple Html and JavaScript : Run the snippet (Just 7 lines)
function success() {
if(document.getElementById("textsend").value==="") {
document.getElementById('button').disabled = true;
} else {
document.getElementById('button').disabled = false;
}
}
<textarea class="input" id="textsend" onkeyup="success()" name="demo" placeholder="Enter your Message..."></textarea>
<button type="submit" id="button" disabled>Send</button>
I have used textarea, but you can use any html input tags and try it out!
Happy coding!
Add a check when the button is clicked to see if there is any text. If there isn't, pop up an alert box (or some other form of feedback) to tell the user to enter data, and don't do the button functionality.
Example:
<input id="myText" type="text" onkeyup="stoppedTyping()">
<input type="button" value="Click to begin!" id="start_button" onclick="verify()" disabled/>
<script type="text/javascript">
function stoppedTyping(){
if(this.value.length > 0) {
document.getElementById('start_button').disabled = false;
} else {
document.getElementById('start_button').disabled = true;
}
}
function verify(){
if myText is empty{
alert "Put some text in there!"
return
}
else{
do button functionality
}
}
</script>
You could poll the value of the input. This would be less efficient and less responsive but potentially more reliable.
As you pointed out, the keyup event won't neccessarily fire when an input's value is cleared. What if they highlight the text with the mouse, right click and cut?
The change event might help, but it's still not all that reliable. It only fires on blur, and misses some changes (like an autocompletion selection).
Here's a jsFiddle demonstrating the polling solution.
In response to Eng.Fouad's comment, here's how to add the JS:
You could put it in a script tag, like this:
<script type="text/javascript">
//my code
</script>
That will work, but it will mean that your user's browser won't cache the JavaScript, meaning it will take longer to load your page. It's also cleaner to separate your scripts from your content. But if you want a quick and easy option, this should do. Put this at the bottom of your body and wrap it in a dom ready handler (see the bottom part of the answer).
As a cleaner option, you can put it in an external file e.g. someScript.js, the contents of which would be your JavaScript (with no script tags). You then link to that script from your HTML file:
<html>
<head></head>
<body>
<!-- contents of page -->
<script type="text/javascript" src="/path/to/someScript.js"></script>
</body>
</html>
NB: You need to make your script web accessible so that browsing to http://www.your-site.com/path/to/someScript.js accesses the script.
The script tag is at the bottom of the body so that the page loads the actual content first, and the scripts afterwards. This will mean that your content is visible to your users sooner.
You should make one last modification to the JavaScript in the jsFiddle. The jsFiddle has the code running "onDomReady" (see top left of the fiddle). Technically, you don't need to do this if you have your script after your content. It's there to ensure that the script runs after the content has loaded, so that if the script attempts to find elements in the DOM, they have been loaded, and are found. You should probably add this to the script in case (for some reason) you move the script to before the content. In order to wrap your script in a dom ready handler in jQuery, do this:
$(function(){
// my code
});
In that example, code put where the //my code comment is will be run only when the page is ready.
<input type="number" id="abc" onkeyup="s()">
<input type="submit" id="abc2" disabled >
<script type="text/javascript">
function s(){
var i=document.getElementById("abc");
if(i.value=="")
{
document.getElementById("abc2").disabled=true;
}
else
document.getElementById("abc2").disabled=false;}</script>
This is what worked for me. I hope it works for someone else. I needed the button disabled when the user didn't have any text or when they deleted the text.
$('#textarea').on('keypress keyup keydown', function () {
if ($('#textarea').val() == "" ) {
$('#savebtn').prop('disabled', true);
}
else {
$('#savebtn').prop('disabled', false);
}
});
$('#textarea').on('keypress keyup keydown', function () {
if ($('#textarea').val() == "" ) {
$('#savebtn').prop('disabled', true);
}
else {
$('#savebtn').prop('disabled', false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" onkeyup="if(this.value.length > 0) document.getElementById('start_button').disabled = false; else document.getElementById('start_button').disabled = true;"/>
<input type="button" value="Click to begin!" id="start_button" disabled/>
Here button is disabled by default and when keyup event is triggered, check if text field value is length is zero or not. If zero then button is disabled, else enabled.
<head>
<title>Testing...</title>
</head>
<body>
<input id="myText" type="text" onkeyup="btnActivation()">
<input type="button" value="Click to begin!" id="start_button" disabled/>
<script type="text/javascript">
function btnActivation(){
if(!document.getElementById('myText').value.length){
document.getElementById("start_button").disabled = true;
}else{
document.getElementById("start_button").disabled = false;
}
}
</script>
</body>

Categories