Add required Checkbox to a custom button [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I want to add "I accept Terms and Conditions" checkbox to my page.
I tried
<p><input type="checkbox" required>
<input type="submit" name="submit" value="submit" onclick="if(!this.form.checkbox.checked){alert('You must agree to the terms first.');return false}" />
but this type of check box links to this submit button not to the form submit button which i already have on that page. This is the button code to which i want it to be attached
<a class="wt-btn wt-post-service" data-id="" data-type="add" href="javascript:;"><?php esc_html_e('Save & Update',); ?></a>
Please help.
Thanks.

When you use a type=submit or name=submit the behavior is controlled by the submit button. Just prevent default behavior, check the box, and then either issue alert or submit form.
function warning(){
event.preventDefault();
var check = document.getElementById('checkbox');
var myForm = document.getElementById('myForm');
if (check.checked==false){
alert("you must agree to terms and conditions");
}else{
myForm.submit();
}
}
<form id='myForm' action="/action_page.php" method = 'POST'>
<p><input id='checkbox' type="checkbox" required>
<input type="button" name='button' value="submit" onclick="warning()" />
</form>
<a class="wt-btn wt-post-service" data-id="" data-type="add" href="javascript:;"><?php esc_html_e('Save & Update',); ?></a>
Please help.

I think you are using Javascript/jquery to submit your form. So you need to check if a checkbox is checked or not using Jquery on the button click.
$(document).ready(function(){
//Submit button click
$('.wt-post-service').click(function(){
if($(input[type="checkbox"]).is(":not(:checked)")){
alert("You must agree to the terms first.");
}
});
});

Related

How to use e.preventDefault properly here? [duplicate]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I have a simple form with two HTML5 buttons. Each button submits the form to a different php page. This is working well, but the 'onsubmit' function is never triggered. I want to show a dialog box before the delete.php page is called.
<form method="post">
<input type="text" name="fname">
<!-- HTML5 FORMACTION -->
<button type="submit" name="update" formaction="update.php">Update</button>
<button type="submit" name="delete" onsubmit="return confirm('Do you really want to delete?');" formaction="delete.php">Delete</button>
</form>
I have tried different variations, but the javascript code is never triggered. Why?
Buttons don't have submit events, forms do.
Buttons have click events.
onsubmit is valid for a form, not for a button. You will have to use onclick instead of onsubmit.
try like this
<form method="post">
<input type="text" name="fname">
<!-- HTML5 FORMACTION -->
<button type="submit" name="update" formaction="update.php">Update</button>
<button type="button" name="delete" onclick="return delete();" formaction="delete.php">Delete</button>
</form>
<script>
function delete(){
if(confirm('Do you really want to delete?')){
// delete code
}
return false;
}
</script>

How to send a form with multiple select lists by clicking enter [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I have found some threads where this is realized with the JS onkeypress function but all forms have input fields and the JS function is linked to them. So I have no clue how to do it with a form where I have no input field but multiple select lists. It works perfectly with the submit button but in addition I want it to happen by pressing enter. So I just want to link the enter key with my submit button - if possible without jQuery
My code is something like:
<button form='form1' type='submit' name='setfilter'>filter</button>
<form id='form1' action='".$_SERVER['PHP_SELF']."' method='post'>
<select name='filter_1[]' multiple size='5'><option selected>%</option></select>
<select name='filter_2[]' multiple size='5'><option selected>%</option></select>
<select name='filter_3[]' multiple size='5'><option selected>%</option></select>
</form>
Then on the server side
if (isset($_POST['filter_1'])).....
echo ...
In plain JS:
document.getElementsByClassName("class_of_select")
.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("id_of_button_tosubmit").click();
}
});
Notice, that form must be in focus (click on select fields). Here you go:
var form = document.getElementById("form1");
form.addEventListener("keypress", function (event) {
if (event.key === 'Enter') {
form.submit();
}
});
<button form='form1' type='submit' name='setfilter'>filter</button>
<form id='form1' action='' method='post'>
<select name='filter_1[]' multiple size='5'>
<option selected>%</option>
</select>
<select name='filter_2[]' multiple size='5'>
<option selected>%</option>
</select>
<select name='filter_3[]' multiple size='5'>
<option selected>%</option>
</select>
</form>

How to change preview value in form input without page refresh [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have form simple like this..
And this for code
<form action="aksi.php?opsi=edit&aksi=update" method="post">
<input name="cabangID" type="hidden" value="'.$row['id'].'"/>
<div class="form-group"><label>Image (link)</label><input type="text" class="form-control input-xlarge" name="image_cabang" value="'.$row['image'].'"/>
<img src="'.$row['image'].'" width="420" height="275">
</div>
</form>
Now, I want to improve code like this.. When I change Image link, preview image change automatically without page refresh..
What is the code that I can use? Thank You
Try this (change input field to http://i.stack.imgur.com/uUHMf.png for example and click 'Change' button):
function fnOC()
{
var oim,oin;
oim=document.getElementById('idImg');
oin=document.getElementById('idInput');
oim.src=oin.value;
}
<div class="form-group">
<label>Image (link)</label><input id='idInput' type="text" class="form-control input-xlarge" name="image_cabang" value='http://www.vemix.net/MorningGloryFlower.jpg'/>
<input type='button' value='Change' onclick='fnOC();'/>
<img id='idImg' src="http://www.vemix.net/MorningGloryFlower.jpg" width="420" height="275">
<!--http://i.stack.imgur.com/uUHMf.png-->
</div>
You can do like this:
<input type="text" oninput="update(this.value)">
<img id="image" />
<script>
function update(value) {
document.getElementById("image").src = value;
}
</script>
On input update function is called with one parameter - the value of input field then the value is assigned to attribute src of image.
Note that there is no validation, there is no communication with server (you can do it by AJAX) it is just an example of data binding.
You should propably learn JavaScript.

the conditions radio button to another page after submit [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I'm making an application with PHP and javascript
There are 2 choices Yes and No.
When he chose NO option and submits, then going to the page "Thank You" and its data into the database. When selecting the YES option it will go to another page and its data into the database
<label class="radio inline"><input type="radio" name="choose" id="optionsRadios1" value="Yes">YES</label>
<label class="radio inline"><input type="radio" name="usia" id="optionsRadios2" value="No">NO</label>
<label class="control-label" for="">Nama</label>
<div class="controls"><input type="text" name="nama" ></div><input type="submit" name="submit" value="" class="btn next">
Try this,
function submitPage(url){
window.location.href=url;
}
$('input:radio').on('click',function(){
var url=this.value=='Yes' ? 'xyz.php' : 'abc.php';
submitPage(url); // or you can use ajax for post
});
Create a javascript function and fire it on the onclick event of the radiobutton passing the radio value in the parameter
And then in the function put condition for redirect and form submit
or you can call a ajax to insert data in the database

make the form pause after a submit? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm trying to design a Login form let's say something like this:
<form action="target.php" method="POST">
Username: <input type="text" name="user" id="user" /><br /><br />
Password: <input type="password" name="pass" id="pass" /><br /><br />
<input type="submit" value="submit" id="submit" />
</from>
what I'm trying to do is to make the form show some pic.gif for 3 seconds when user hits submit and then continue I don't want it to start the next process directly.
Have your image initially with style "display:none" and modify your form declaration to hanlde "onsubmit" event:
<form action="target.php" method="POST" onsubmit = "mySubmit(this)">
and then define function:
function mySubmit(frm) {
document.getElementById("myImg").style.display = 'block';
setTimeout(function() {frm.submit()}, 3000);
return false;
}
It will display your image and cancel original submit request. But after 3 seconds it will submit form from code.
It sounds like you can just use the setTimeout() function.
<input type="submit" value="submit" id="submit" onclick="window.setTimeout(doStuffAfter, 30000)">
You call it in whatever way you want with func being the called after the delay. So you can open the image and then navigate away once the delay is done.
window.setTimeout(func, delay, [param1, param2, ...]);
https://developer.mozilla.org/en-US/docs/Web/API/window.setTimeout
Try
$('form').submit(function () {
if (showPic()) {
return true;
} else {
return false;
}
}
From a UX perspective I recommend giving them a prompt in your pic.

Categories

Resources