event.preventDefault() works in one case but not other - javascript

I have two forms on my page, one for submitting a comment and another for voting in a poll. These two functions are just a couple dozen lines apart but only the one for #comment-form actually prevents the default. The #poll-form submit button refreshes the page which is not what I want it to do.
$("#comment-form").submit(function(event){
event.preventDefault();
addComment();
});
//ajax stuff for adding the comment, addComment() etc.
$("#poll-form").submit(function(event){
event.preventDefault();
castVote();
});
HTML looks like:
<div class="add-comment">
<form id="comment-form">
<textarea id="comment-content" name="comment" placeholder="Leave a comment"></textarea>
<br>
<button type="submit">Submit</button>
</form>
</div>
<div class="poll">
<h1 class="title">Poll</h1>
<h3>Poll Question</h3>
<form id="poll-form">
<input type="radio" name="vote" value="0">
Choice 1
<br>
<input type="radio" name="vote" value="1">
Choice 2
<br>
<input type="radio" name="vote" value="2">
Choice 3
<br>
<input type="radio" name="vote" value="3">
Choice 4
<br>
<button type="submit">Submit</button>
</form>
</div>
I can't see the difference or figure out why the #poll-form submit won't prevent default.

You can try this also for stop form submit,
$("#poll-form").submit(function(e){
e.preventDefault();
alert('it works!');
return false;
});

Related

unselect Radio Button and Disable Submit when all inputs are empty

We have an interactive map which connects over PHP to an database.
Since i'm pretty new to javascript i have some question.
We have around 15 text input and one dropdown input.
I only provide the Problematic parts of our code.
HTML
<div class="nav nav-sidebar">
<form action="./action_page.php" method="post">
<ul class="dropdown-item" id="u3">
<div data-toggle="buttons">
<label class ="btn btn-default" style="float:left;">
<input type="radio" class="btn btn-default" name="politic" id="politic" value="2"> Trump
</label>
<label class ="btn btn-default" style="margin-bottom:10px; margin-right: 20%; float:right;">
<input type="radio" class="btn btn-default" name="politic" id="politic" value="1"> Hillary
</label>
</div>
</ul>
<button input type="submit" id="submit-button" class="submit-button" value="Submit">Submit</button>
</form>
<button type="button" onclick="test()" class="clear-button">Reset</button>
</div>
JS
function test(){
$('input[name="politic"]').prop('checked', false);
}
How can I disable the Submit button if atleast 1 input is emtpy?
My test() function resets the value of "poltics" but the Button is still selected. How can I fix this?
I would appreciate to not get the working code, more like a guideline how to start on this Problem, or if you want to provide code, I would appreciate some shorts explanation.
I have added example with 3 input fields that will be empty till all of them are filled.. also for radios I have added class removal that was missing,,
hope that helps, cheers
EDIT: try now..
EDIT2: try now :)
function checkallinputs(){
var ch = false;
$('form input[type="text"]').each(function(el){
if( $(this).val() != '' ) ch = true; return false;
});
if( ch ){ $('button[type="submit"]').removeClass('disabled'); return true; }
if(!ch ){ $('button[type="submit"]').addClass('disabled'); return false; }
}
// run this on document.ready or in (function())() self exe block on page
checkallinputs();
$('form input[type="text"]').on( 'change', function(){ checkallinputs(); });
// disable submit
$( 'form' ).on( 'submit', function(){ return checkallinputs(); });
// reset radio ==>remove class
function test(){
$('input[name="politic"]').prop('checked', false);
$('input[name="politic"]').parent().removeClass('active');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form action="./action_page.php" method="post">
<div class="form-group">
<label for="input1">Input 1</label>
<input type="text" class="form-control" id="input1">
</div>
<div class="form-group">
<label for="input2">Input 2</label>
<input type="text" class="form-control" id="input2">
</div>
<div class="form-group">
<label for="input3">Input 3</label>
<input type="text" class="form-control" id="input3">
</div>
<div class="checkbox">
<div data-toggle="buttons">
<label class ="btn btn-default" style="float:left1;">
<input type="radio" class="btn btn-default" name="politic" id="politic1" value="2"> Trump
</label>
<label class ="btn btn-default" style="margin-bottom:10px; margin-right: 20%; float:right;">
<input type="radio" class="btn btn-default" name="politic" id="politic2" value="1"> Hillary
</label>
</div>
</div>
<button type="submit" class="btn btn-default disabled">Submit</button>
<br>
<button type="button" onclick="test()" class="btn btn-default">Reset</button>
</form>
How can I disable the Submit button if atleast 1 input is emtpy?
There are a few ways you can get this done.
Number One:
The easiest way is to add in the required attribute to the field, and the user would not be able to submit the form unless all required field are filled up. This is not the recommended way though as it depends on the browser and I believe there are work arounds for this.
<input type="text" name="username" required>
Number Two:
Another way is to add an onkeyup event handler to all your inputs, which calls a function where you check if all the inputs are filled up. Here, by default, you have your submit button disabled, and when all the inputs are filled, you can enable your submit button. This is not the best way since the user might not know why the button is disabled unless you specifically give a feedback, like making the borders red for invalid fields. Also running the validation after every keyup might be demanding for the application.
Number Three:
The one which I would prefer and recommend is this. You can leave the submit button enabled, and bind it to a click event where you check whether your validation is satisfied, that is, for your case you check if any input is empty and if one is empty, then you don't submit the form and display an alert or give the user a feedback to fill in the field. You might want to set focus to an empty field too.
My test() function resets the value of "poltics" but the Button is
still selected. How can I fix this?
What did you mean by "the button is still selected"? The Reset button? You can set focus to another input of your choice if you want
$(.'input-name').focus();
How can I disable the Submit button if atleast 1 input is emtpy?
You just need to keep trace of the change events of the inputs, like the following. If an input is checked, then you have to re-enable the submit button. If the reset button is used, you need to disable the submit button. This button can be disabled by default.
My test() function resets the value of "poltics" but the Button is still selected. How can I fix this?
As you provided your code, the radio buttons for both politicians successfully deselected.
function test(){
$('input[name="politic"]').prop('checked', false);
$('#submit-button').prop('disabled', true);
}
$('input[type="radio"]').on('change', function () {
// Here we set the button to not disabled if the radio was selected
$('#submit-button').prop('disabled', !$(this).prop('checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav nav-sidebar">
<form action="./action_page.php" method="post">
<ul class="dropdown-item" id="u3">
<div data-toggle="buttons">
<label class ="btn btn-default" style="float:left;">
<input type="radio" class="btn btn-default" name="politic" id="politic" value="2"> Trump
</label>
<label class ="btn btn-default" style="margin-bottom:10px; margin-right: 20%; float:right;">
<input type="radio" class="btn btn-default" name="politic" id="politic" value="1"> Hillary
</label>
</div>
</ul>
<button type="submit" id="submit-button" class="submit-button" value="Submit" disabled>Submit</button>
</form>
<button type="button" onclick="test()" class="clear-button">Reset</button>
</div>

Cannot change to different windows using window.location.href

I am trying to re-direct my code to another page but for some reason It wont allow me too. I have the exact page name but it will not re-direct to that page or any page for that matter. My code is dependant on a user select a radio button that displays either yes or no. Please advise on what my errors are. Thanks
<script type="text/javascript">
function idForm()
{
if(document.getElementById('No').checked) {
alert("Please book a meeting room, before organising catering.");
}
if (document.getElementById('Yes').checked)
{
window.location.href = "homePage.php";
}
}
</script>
<body>
<div id=""> <img src="" alt="" style="">
</div>
<div class="verify" style="margin:0 auto;">
<form name="form1" action="" onsubmit="idForm()" method="post">
<!-- Booking Filter -->
<h1>HAVE YOU BOOKED A MEETING ROOM PRIOR TO ORGANISING CATERING?</h1>
<input type="radio" id="Yes" name="agree" value="Yes"> Yes
<input type="radio" id="No" name="agree" value="No"> No<br> <br> <br>
<input type="submit" class="space" name="Submit" value="Submit">
</form>
</div>
window.location.href is a property not a method. just assign it.
window.location.href = "homePage.php";

HTML5 validation does not trigger

I will go directly to the problem
So here is my form
<form action="<?php echo base_url()?>" method="post" id="formfield">
<center>
<label>How much? <small>( Minimum of 100 )</small></label>
<div class="ui input">
<input type="number" name="amount" required>
</div>
<br>
<label>Payment type <small>( see all )</small></label>
<br>
<div class="ui input">
<input type="text" name="type" required>
</div>
<br>
<div class="">
<input type="submit" class="btn btn-primary" value="Order Now" id="btnsubmit" >
</div>
</center>
</form>
And here is my Javascript, newbie here.
<script>
$(function()
{
$('#btnsubmit').on('click',function()
{
$(this).val('Please wait ...')
.attr('disabled','disabled');
$('#formfield').submit();
});
});
</script>
So the problem is that the form submit without triggering the html5 validation
I also wanted to add alert if Ok proceed but should trigger the html5 validation
Can anyone help me? I will really appreciate it. Advance thank you.
The form is submitting without triggering the HTML5 validation because you're submitting the form in your JavaScript when you call: $('#formfield').submit();
To add a confirmation dialog, you could use something as simple as confirm, though confirm is not always the best idea. You could add something like this to your event listener:
if (confirm('Are you sure?')) {
// Yes
$(this).val('Please wait ...').attr('disabled','disabled');
} else {
// Prevent form from being submitted
return false;
}
Snippet (doesn't exactly work, because stacksnippets.net doesn't allow forms to be submitted, but check your console)
function go() {
if (confirm('are you sure?'))
// Form would be submitted, but stacksnippets prevents it.
document.querySelector('form').submit();
else
return false;
}
<form action="">
<input type="text" required>
<button onclick="go()">
Submit
</button>
</form>
May be this will help you;
$(document).ready(function() {
$('#formfield').on('submit', function(e) {
$("#btnsubmit").val('Please wait ...')
.attr('disabled', 'disabled');
});
});
<form action="<?php echo base_url()?>" method="post" id="formfield">
<center>
<label>How much? <small>( Minimum of 100 )</small>
</label>
<div class="ui input">
<input type="number" name="amount" required>
</div>
<br>
<label>Payment type <small>( see all )</small>
</label>
<br>
<div class="ui input">
<input type="text" name="type" required>
</div>
<br>
<div class="">
<input type="submit" class="btn btn-primary" value="Order Now" id="btnsubmit">
</div>
</center>
</form>

HTML/Javascript radio button forms that redirects to different links

I need to create a radio button form where the selection would redirect you to a different index.html link when a Continue button is pressed. I cant seem to find an easy way to do this. Help!!
Basically as follows:
<form>
<input type="RADIO" name="button" value="^button1^" checked>this button goes to index1.html (Default)<BR></BR>
<input type="RADIO" name="button" value="^button2^">this button goes to index2.html<BR> </BR>
<input type="RADIO" name="button" value="^button3^">this button goes to index3.html<BR> </BR>
<input type="submit" value="Continue">
</form>
In html add a data-href attribute for each button and ID to submit button
<form>
<input type="RADIO" name="button" value="^button1^" data-href="index1.html" checked>this button goes to index1.html (Default)<BR></BR>
<input type="RADIO" name="button" value="^button2^" data-href="index2.html">this button goes to index2.html<BR> </BR>
<input type="RADIO" name="button" value="^button3^" data-href="index3.html">this button goes to index3.html<BR> </BR>
<input type="submit" value="Continue" id="btnFormSubmit">
</form>
Javascript:
var submit = document.getElementById('btnFormSubmit');
submit.addEventListener('click', submitForm);
function submitForm(event){
event.preventDefault();
event.stopPropagation();
var href = '',
inputs = this.parentNode.getElementsByTagName('input')
for(var i=0;i<inputs.length;i++){
if(inputs[i].getAttribute('name') == 'button' && inputs[i].checked){
href = inputs[i].getAttribute('data-href');
window.location = href;
}
}
}
Using jQuery will be like that, add the url to the value field of the radio.
<form method="post">
<input type="RADIO" name="button" value="index1.html" checked>this button goes to index1.html (Default)<BR>
<input type="RADIO" name="button" value="index2.html">this button goes to index2.html<BR>
<input type="RADIO" name="button" value="index3.html">this button goes to index3.html<BR>
<input type="submit" value="Continue">
</form>
jQuery code:
$(function(){
$("form").submit(function(e) {
e.preventDefault();
window.location = $(this).find('input[type="radio"]:checked').val();
});
});
Live example:
http://jsfiddle.net/nnEny/
This might be too obvious but
<form>
<input type="RADIO" name="button" value="^button1^" checked>this button goes to index1.html (Default)<BR></BR>
</form>
<form>
<input type="RADIO" name="button" value="^button2^">this button goes to index2.html<BR> </BR>
</form>
<form>
<input type="RADIO" name="button" value="^button3^">this button goes to index3.html<BR> </BR>
<input type="submit" value="Continue">
</form>

Linked Dynamic Radio Buttons HTML Javascript

All,
Have used this site a few times before and had some great replies so hopefully someone can help again. I want a set of radio buttons, so that when you click a button - you get another set below it. Then again, when you click one of the 2nd set of buttons, you'll get a third etc. Currently I have the following:
<html>
<head>
<title>My Wizard</title>
<script language="javascript">
function Display(question) {
h1=document.getElementById("yes");
h2=document.getElementById("no");
h3=document.getElementById("dk");
h4=document.getElementById("yes2");
if (question=="yes") h1.style.display="block";
else h1.style.display="none";
if (question=="no") h2.style.display="block";
else h2.style.display="none";
if (question=="dk") h3.style.display="block";
else h3.style.display="none";
if (question=="yes2") h4.style.display="block";
else h4.style.display="none";
}
</script>
</head>
<body>
<hr>
<form name="form1">
<p>Do you like the colour blue?</p>
<input type="radio" name="type" value="yes" checked
onClick="Display('yes');">
Yes
<input type="radio" name="type" value="no"
onClick="Display('no');">
No
<input type="radio" name="type" value="dk"
onClick="Display('dk');">
Don't know
<br>
<div ID="yes" style="display:none;">
<hr>
<p>Do you like the colour red?</p>
<input type="radio" name="type" value="yes2" checked
onClick="Display('yes2')">
Yes
<input type="radio" name="type" value="no2"
onClick="Display('no2');">
No
</div>
<div ID="yes2" style="display:none">
I want this to appear beneath the 2nd set of buttons, not replacing it!
</div>
<div ID="no2" style="display:none">
test2
</div>
<div ID="no" style="display:none">
<b>this is my no box:</b>
<input type="text" name="no" size="25">
</div>
<div ID="dk" style="display:none">
<b>dk:</b>
<input type="text" name="dk" size="15">
</div>
</form>
</body>
</html>
So basically, i'm trying to make a little wizard - so something that will ask the user a question, and based on this - it will ask them another. I dont want to use server side applications so am trying something simple like this - but whenever the user selects an option from the 2nd set of buttons, the text which goes with it replaces the 2nd set of buttons. What am i doing wrong?
Please select 'yes' and 'yes' again to see what i mean. Any help will be appreciated!
Joe
Radio input elements are grouped by their name attribute. You should assign a different name to the other sets of radio input elements.
Visual example:
[x] name=favColor [ ] name=favRed
[ ] name=favColor [x] name=favRed
[ ] name=favColor [ ] name-favRed
See also: https://developer.mozilla.org/en/HTML/Element/input
Your if statement is wrong. You ask again and again this: if (question=="yes") h1.style.display="block";
else h1.style.display="none"; and the second time if is not true, so you set the h1 to be hidden.
here is one solution:
<html>
<head>
<title>My Wizard</title>
<script language="javascript">
function Display(question, i) {
h1=document.getElementById("yes");
h2=document.getElementById("no");
h3=document.getElementById("dk");
h4=document.getElementById("yes2");
if(i==1){
if (question=="yes") h1.style.display="block";
else h1.style.display="none";
if (question=="no") h2.style.display="block";
else h2.style.display="none";
}else if(i==2){
if (question=="dk") h3.style.display="block";
else h3.style.display="none";
if (question=="yes2") h4.style.display="block";
else h4.style.display="none";
}
}
</script>
</head>
<body>
<hr>
<form name="form1">
<p>Do you like the colour blue?</p>
<input type="radio" name="type" value="yes" checked
onClick="Display('yes', 1);">
Yes
<input type="radio" name="type" value="no"
onClick="Display('no', 1);">
No
<input type="radio" name="type" value="dk"
onClick="Display('dk', 1);">
Don't know
<br>
<div ID="yes" style="display:none;">
<hr>
<p>Do you like the colour red?</p>
<input type="radio" name="type" value="yes2" checked
onClick="Display('yes2', 2)">
Yes
<input type="radio" name="type" value="no2"
onClick="Display('no2', 2);">
No
</div>
<div ID="yes2" style="display:none">
I want this to appear beneath the 2nd set of buttons, not replacing it!
</div>
<div ID="no2" style="display:none">
test2
</div>
<div ID="no" style="display:none">
<b>this is my no box:</b>
<input type="text" name="no" size="25">
</div>
<div ID="dk" style="display:none">
<b>dk:</b>
<input type="text" name="dk" size="15">
</div>
</form>
</body>
</html>

Categories