I've got a short question colegues! Here it is: is this the fastest script way to change the input field's value when some of the 3 buttons are clicked? Here is the script:
<form name="viewtype" action="javascript:alert(document.viewtype.option.value);">
<input name="option" type="hidden" value="" />
<input name="" type="button" onclick="document.viewtype.option.value='0';"/>
<input name="" type="button" onclick="document.viewtype.option.value='1';"/>
<input name="" type="button" onclick="document.viewtype.option.value='2';"/>
<input name="" type="submit"/>
</form>
I'd do it like so:
HTML:
<form name="viewtype">
<input type="hidden" name="option">
<input type="button" value="0">
<input type="button" value="1">
<input type="button" value="2">
<input type="submit">
</form>
JavaScript:
var form = document.forms.viewtype,
buttons = form.querySelectorAll( '[type="button"]' );
[].forEach.call( buttons, function ( button ) {
button.onclick = function () {
form.elements.option.value = this.value;
};
});
form.onsubmit = function ( e ) {
e.preventDefault();
alert( this.elements.option.value );
};
Live demo: http://jsfiddle.net/9B7du/1/
Related
My html code like this :
<form>
<label for="name">* Name</label>
<input type="text" id="name" required><br>
<label for="name">* Address</label>
<input type="text" id="address" required><br>
<input type="submit" value="Submit">
</form>
I'm using required HTML5 attribute to validate fields.
If user does not input text, it will display HTML5 error.
I want to disable the submit button if any of the required fields are left empty.
How can I do it?
You can disable the pointer events on the button with CSS.
form:invalid>#submit {
pointer-events: none;
}
<form>
<label for="name">* Name</label>
<input type="text" id="name" required><br>
<label for="name">* Address</label>
<input type="text" id="address" required><br>
<input type="submit" value="Submit" id="submit">
</form>
You could also disable the button using Javascript.
function disableField() {
const invalidForm = document.querySelector('form:invalid');
const submitBtn = document.getElementById('submit');
if (invalidForm) {
submitBtn.setAttribute('disabled', true);
} else {
submitBtn.disabled = false;
}
}
disableField();
const inputs = document.getElementsByTagName("input");
for (let input of inputs) {
input.addEventListener('change', disableField);
}
<form>
<label for="name">* Name</label>
<input type="text" id="name" required><br>
<label for="name">* Address</label>
<input type="text" id="address" required><br>
<input type="submit" value="Submit" id="submit">
</form>
you can do it after true
$("#button").prop("disabled", true);
You can try something like this:
$(function() {
$("#input-text").keyup(function () {
if($("#input-text")[0].checkValidity()){
$('#submit-button').attr('disabled', 'disabled');
}else{
$('#submit-button').removeAttr('disabled');
}
});
})($);
<form id="newRecord">
<input type="text" required id="input-text"/>
<button form="newRecord" type="submit" id="submit-
button">Submit</button>
</form>
An more generic solution for multiple forms and supporting multiple inputs and buttons.
It detects the change event directly on forms individually, and then change the disabled attribute for all submit types
function disableFormSubmit(form) {
const buttons = form.querySelectorAll(
'button[type="submit"], input[type="submit"]'
);
const disableButtons = () =>
buttons.forEach(el => (el.disabled = form.matches(":invalid")));
form.addEventListener("change", disableButtons);
disableButtons();
}
document.querySelectorAll("form").forEach(disableFormSubmit);
<form action="/">
<legend>First form</legend>
<input type="text" required> <br>
<input type="Checkbox" required> required checkbox <br>
<input type="submit">
<button type="submit">Button submit</button>
</form>
<hr>
<form action="/">
<legend>Second form</legend>
<select required>
<option value="" disabled selected>Select one</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select> <br>
<input type="radio" required name="radio"> required radio <br>
<input type="submit">
<button type="submit">Button submit</button>
</form>
Personally i would go on an solution using only CSS as a visual cue, unless you need the disabled attribute
As you may know, Reset buttons in a form can not reset checkboxes to their initial status. How can I make that happen either with javascript or PHP or jquery or ...?
Here is the code I have:
<form method="POST">
<input type="text" name="name" id="name" value="default value" required >
<input type="checkbox" name="group[]" id="checkbox1" value="0" checked>
<input type="checkbox" name="group[]" id="checkbox2" value="1" >
<button type="reset"> Reset </button>
<button type="submit"> Submit </button>
</form>
Iterate over all your input elements and uncheck the ones which are checked.
var allInputs = $( ":input" );
for(var i = 0; i < allInputs.length; i++) {
if( $( 'input[type="checkbox"]:checked' ) )
$( this ).prop('checked', false);
}
Or as James pointed out, this could be done in one line like this:
$( 'input[type="checkbox"]' ).prop('checked', false);
Try this:
var resetForm = function(){
$('#form')[0].reset();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form method="POST" id="form">
<input type="text" name="name" id="name" value="default value" required >
<input type="checkbox" name="group[]" id="checkbox1" value="0" checked>
<input type="checkbox" name="group[]" id="checkbox2" value="1" >
<button type="reset" onclick="resetForm()"> Reset </button>
<button type="submit"> Submit </button>
</form>
This allows me to change the category of photos without leaving the page. IT WORKS.
Next step - The pre-defined category of a photo has a button with a green background and the other two have red. When making a new choice I want the pressed button to turn green and the other two buttons for that photo to turn to/stay red. The green css is c_on and the red css is c_off.
How can I set the right css to the right button with javascript/ajax/jquery?
Any help greatly appreciated. (Styles are defined correctly in my code but I could not get it to paste here properly so I used a comment).
JS:
<script type="text/javascript">
$(function () {
$('form').on('submit', function (e) {
$.ajax({
type: 'post',
url: "test_ajax_update_code.php",
data: $(this).serialize(),
});
e.preventDefault();
});
});
</script>
CSS:
.c_on {color: #000;background-color:#F00;}
.c_off {color: #000;background-color:#0F0;}
HTML:
<img src="myfoto1.jpg" width="500" height="333" border="0"><br>
<form id="form1">
<input name="num" type="hidden" value="1373" >
<input name="shw" type="hidden" value="1" >
<input type="submit" value="1" class="c_on">
</form>
<form id="form2">
<input name="num" type="hidden" value="1373" >
<input name="shw" type="hidden" value="2" >
<input type="submit" value="2" class="c_off">
</form>
<form id="form3">
<input name="num" type="hidden" value="1373" >
<input name="shw" type="hidden" value="3" >
<input type="submit" value="3" class="c_off">
</form>
<img src="myfoto2.jpg" width="500" height="333" border="0"><br>
<form id="form1">
<input name="num" type="hidden" value="1374" >
<input name="shw" type="hidden" value="1" >
<input type="submit" value="1" class="c_off">
</form>
<form id="form2">
<input name="num" type="hidden" value="1374" >
<input name="shw" type="hidden" value="2" >
<input type="submit" value="2" class="c_on">
</form>
<form id="form3">
<input name="num" type="hidden" value="1374" >
<input name="shw" type="hidden" value="3" >
<input type="submit" value="3" class="c_off">
</form>
You can do it as follows:
// set all buttons to c_off
$('input[type="submit"]').removeClass('c_on').addClass('c_off');
// set the submitted one to c_on
$(this).find('input[type="submit"]').removeClass('c_off').addClass('c_on');
This would make your code look as follows:
$(function () {
$('form').on('submit', function (e) {
$.ajax({
type: 'post',
url: "test_ajax_update_code.php",
data: $(this).serialize(),
});
// set all buttons to c_off
$('input[type="submit"]').removeClass('c_on').addClass('c_off');
// set the submitted one to c_on
$(this).find('input[type="submit"]').removeClass('c_off').addClass('c_on');
e.preventDefault();
});
});
I find it hard to understand exactly what you mean, but with a couple of events and booleans you should probably be able to do something like this fairly easy.
var image_1 = false
if (image_1 === true) {
//change button styles
}
var element = getElement('div.image') // example
element.addEventListener('click', function () {
image_1 = true'
}
And the wouldn't even be any ajax involved. For example you could submit when all are true.
Hope this helps
$('input:submit').on('click',function(){
$('input:submit').removeClass('c_on').addClass('c_off');
$(this).removeClass('c_off').addClass('c_on');
})
You should add a click event for each button, which allow you to remove any .c_on class, and apply it to the clicked button.
$('input[type="submit"]').on('click', function () {
$(".c_on").removeClass('c_on').addClass('c_off');
$(this).removeClass('c_off').addClass('c_on');
}}
Try this solution and check theCSS for appropriate color to the class.
UPDATE:
id must be unique. Hence I have changed the id of the forms to class.
Then I have added new data-image property to differentiate the set of buttons.
Updated Code snippets:
$(function() {
$('form').on('click', 'input[type="submit"]', function(e) {
$.ajax({
type: 'post',
url: "test_ajax_update_code.php",
data: $(this).parent().serialize(),
});
var clicked = $(this),
imageName = clicked.data("image");
clicked.removeClass("c_off").addClass("c_on");
$('input[type="submit"]').each(function() {
var self = $(this);
if (!clicked.is(self)) {
if (self.hasClass("c_on") && imageName == self.data("image"))
self.removeClass("c_on").addClass("c_off");
}
});
e.preventDefault();
});
});
.c_off {
color: #000;
background-color: #F00;
}
.c_on {
color: #000;
background-color: #0F0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<img src="myfoto1.jpg" width="500" height="333" border="0">
<br>
<form class="form1">
<input name="num" type="hidden" value="1373">
<input name="shw" type="hidden" value="1">
<input type="submit" value="1" class="c_on" data-image="img1">
</form>
<form class="form2">
<input name="num" type="hidden" value="1373">
<input name="shw" type="hidden" value="2">
<input type="submit" value="2" class="c_off" data-image="img1">
</form>
<form class="form3">
<input name="num" type="hidden" value="1373">
<input name="shw" type="hidden" value="3">
<input type="submit" value="3" class="c_off" data-image="img1">
</form>
<img src="myfoto2.jpg" width="500" height="333" border="0">
<br>
<form class="form1">
<input name="num" type="hidden" value="1374">
<input name="shw" type="hidden" value="1">
<input type="submit" value="1" class="c_off" data-image="img2">
</form>
<form class="form2">
<input name="num" type="hidden" value="1374">
<input name="shw" type="hidden" value="2">
<input type="submit" value="2" class="c_on" data-image="img2">
</form>
<form class="form3">
<input name="num" type="hidden" value="1374">
<input name="shw" type="hidden" value="3">
<input type="submit" value="3" class="c_off" data-image="img2">
</form>
I have a form with two buttons one should submit the form and other should add a dropdown menu each time I click it.(If I click it two times two dropdowns should appear).
Here is my form:
<form name="form1" action="anotherfile.jsp">
<input type="text" name="box1">
<input type="text" name="box2">
<input type="submit" name="Add_dropdown">
<input type="submit" name="Submit_form">
</form>
i think this should work:
<form name="form1" action="anotherfile.jsp">
<input type="text" name="box1">
<input type="text" name="box2">
<input type="button" id="add_dd">
<span id="cont"></span>
<input type="submit" name="Submit_form">
</form>
<script>
ddBtn = document.getElementById("add_dd");
ddBtn.addEventListener("click",function(){
c = document.getElementById("cont");
dd = "<select name='dd'><option>1</option><option>2</option></select>";
c.innerHTML += dd;
}
</script>
http://jsfiddle.net/KYDPd
Is there a way to make the minimum number be 0, and not allow the user to go below 0 when clicking down?
<form>
<input type="text" name="name" value="0" />
<input type="button" value="up" onclick="this.form.name.value++;" >
<input type="button" value="down" onclick="this.form.name.value--;">
</form>
If separate buttons are not necessary and HTML5 is an option you could just use this:
<form>
<input type="number" min="0" name="name" value="0" />
</form>
This should do the trick. Check what the value is before you allow each operation. Also added an onchange to the text input to inforce your minimum 0 requirement. Agree with other answer that this should be in a function though.
http://jsfiddle.net/xqV6V/1/
<form>
<input type="text" name="name" value="0" onchange="if(this.value<0){this.value=0;}" />
<input type="button" value="up" onclick="if(this.form.name.value>=0){this.form.name.value++;}" >
<input type="button" value="down" onclick="if(this.form.name.value>0){this.form.name.value--};">
</form>
You should probably put this JavaScript in a function.
<form>
<input type="text" name="name" value="0" />
<input type="button" value="up" onclick="this.form.name.value++;" >
<input type="button" value="down" onclick="if(this.form.name.value>0)this.form.name.value--;">
</form>
Additional Answer with functions.
<script>
function ud_find_text(self) {
var children = self.parentNode.getElementsByTagName('input');
for (var i = 0; i < children.length; i++) {
if (children[i].getAttribute('type') == 'text') {
return children[i];
}
}
}
function ud_inc(self) {
var text = ud_find_text(self);
text.value++;
}
function ud_dec(self) {
var text = ud_find_text(self);
if (text.value > 0) text.value--;
}
</script>
<form>
<input type="text" name="name" value="0" />
<input type="button" value="up" onclick="ud_inc(this)" >
<input type="button" value="down" onclick="ud_dec(this)">
</form>