I have 1 form, with 2 Submit buttons.
When I click one button, I want certain values to be posted. When I click other button I want other values to be posted.
This is what I tried, did not work:
<form action="/test" method="post">
<input type="hidden" id="bool" name="bool" value="" />
<input type="submit" value="Yes" onclick="test()" />
<input type="submit" value="No" onclick="test1()" />
</form>
<script type="text/javascript">
function test() {
document.getElementById('bool').value = "true";
}
function test1() {
document.getElementById('bool').value = "false";
}
</script>
<form action="/test" method="post" name="myform">
<input type="hidden" id="bool" name="bool" value="" />
<input type="button" value="Yes" onclick="test()" />
<input type="button" value="No" onclick="test1()" />
</form>
<script type="text/javascript">
function test() {
document.getElementById('bool').value = "true";
document.myform.submit();
}
function test1() {
document.getElementById('bool').value = "false";
document.myform.submit();
}
</script>
Use this instead:
<form action="/test" method="post" onsubmit="document.getElementById('bool').value = 'true'; return true;">
<input type="hidden" id="bool" name="bool" value="" />
<input type="submit" value="Yes" onclick="test()" />
<input type="submit" value="No" onclick="test1()" />
</form>
Related
I'm having some issues with a js script that I made (probably because is not the right way but i came up with this idea).
Basically I have a form with some radio buttons in it. Yes or No
<form action="#" method="POST" OnSubmit="return check()">
<input type="radio" id="effettuato" name="sicep" value="Effettuato" />Effettuato <br/>
<input type="radio" id="noneffettuato" name="sicep" value="Non Effettuato" />Non Effettuato <br/>
<input class="button" type="submit" name="submit" value="Invia" button style="height:50px;width:150px">
</form>
Now I made this JavaScript script because I'd like to stop the user if none radio button is selected.
function check() {
if (document.getElementById('effettuato').checked) {
window.location = 'processiorari.php';
}
else if (document.getElementById('noneffettuato').checked) {
window.location = 'processiorari.php';
}
else {
alert('Seleziona tutti i campi per continuare!');
return false;
}
}
If he has selected an option I'd like to redirect him to another page called
processorari.php
The page where those line are written is
orari.php
Any help? I'm just doing the redirect wrong or the entire concept is wrong?
All the files are in the same folder and I'm running everything using xampp
You can use required="required" in the fields and set the form action to the page you want to redirect.
<form action="processorari.php" method="POST">
<input type="radio" id="effettuato" name="sicep" value="Effettuato" required="required" />Effettuato <br/>
<input type="radio" id="noneffettuato" name="sicep" value="Non Effettuato" required="required" />Non Effettuato <br/>
<input class="button" type="submit" name="submit" value="Invia" button style="height:50px;width:150px">
</form>
You can use a click event listener to achieve this. When the button is clicked, it checks if the radio button is checked, if it is then it'll redirect using window.location.href. There is no need to use the submit.
document.getElementById("submit-btn").addEventListener("click", function() {
if(document.getElementById('effettuato').checked) {
window.location.href = 'processiorari.php';
} else if(document.getElementById('noneffettuato').checked) {
window.location.href = 'processiorari.php';
} else {
alert('Seleziona tutti i campi per continuare!');
}
});
<form method="POST" action="#">
<input type="radio" id="effettuato" name="sicep" value="Effettuato" />Effettuato <br/>
<input type="radio" id="noneffettuato" name="sicep" value="Non Effettuato" />Non Effettuato <br/>
<input class="button" id="submit-btn" type="button" name="submit" value="Invia" button style="height:50px;width:150px">
</form>
I have no clue if this is the right way to do it but somehow this work just fine
function check() {
if (document.getElementById('effettuato').checked) {
return true;
}
else if (document.getElementById('noneffettuato').checked) {
return true;
}
else {
alert('Non puoi lasciare un campo in bianco!');
return false;
}
}
and i leave in my form the action just like this
<form action="processorari.php" method="POST" OnSubmit="return check()">
<input type="radio" id="effettuato" name="sicep" value="Effettuato" />Effettuato <br/>
<input type="radio" id="noneffettuato" name="sicep" value="Non Effettuato" />Non Effettuato <br/>
<input class="button" type="submit" name="submit" value="Invia" button style="height:50px;width:150px">
</form>
To check which check box is checked and redirect page accordingly:
$(document).ready(function() {
$('#mychckbx1').prop('checked') ? window.location.href = 'page1.php' : false;
$('#mychckbx2').prop('checked') ? window.location.href = 'page2.php' : false;
});
The problem is that you are calling the check() function only when the form is submitted. Other than that I can't see anything wrong.
It will work if you change onsubmit to onchange like this:
<form action="#" method="POST" onchange="check()">
<input type="radio" id="effettuato" name="sicep" value="Effettuato" />Effettuato <br/>
<input type="radio" id="noneffettuato" name="sicep" value="Non Effettuato" />Non Effettuato <br/>
<input class="button" type="submit" name="submit" value="Invia" button style="height:50px;width:150px">
</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 element which contains a bunch of input elements (however, I expect it would be the same if instead of a form, the inputs were in a given div) . JavaScript needs the the values within the form multiple times. Instead of using a bunch of var id=$('#id').val(); script, how can I grab everything in the form, and then use the values like mainForm.id?
<form method="post" id="mainForm">
<input id="id" name="id" type="hidden" value="1" />
<input id="cid" name="cid" value="pages" type="hidden" />
<input id="task" name="task" value="delete" type="hidden" />
<input id="controller" name="controller" value="display" type="hidden" />
<input id="CSRF" name="CSRF" value="123" type="hidden">
</form>
EDIT
Not perfect, but maybe just:
var obj=document.getElementById('mainForm');
console.log(obj.id.value);
Try creating an empty object , utilizing $.each() to populate object with property id of input , object value with value of input
var obj = {};
$.each($("#mainForm input"), function(key, val) {
obj[val.id] = val.value
});
console.log(obj)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<form method="post" id="mainForm">
<input id="id" name="id" type="hidden" value="1" />
<input id="cid" name="cid" value="pages" type="hidden" />
<input id="task" name="task" value="delete" type="hidden" />
<input id="controller" name="controller" value="display" type="hidden" />
<input id="CSRF" name="CSRF" value="123" type="hidden">
</form>
Without jQuery
var obj = {};
var inputs = document.querySelectorAll("#mainForm input");
[].forEach.call(inputs, function(val, key) {
obj[val.id] = val.value;
});
console.log(obj)
<form method="post" id="mainForm">
<input id="id" name="id" type="hidden" value="1" />
<input id="cid" name="cid" value="pages" type="hidden" />
<input id="task" name="task" value="delete" type="hidden" />
<input id="controller" name="controller" value="display" type="hidden" />
<input id="CSRF" name="CSRF" value="123" type="hidden">
</form>
$('#mainForm input').each(function() {
// do what you want with the input here
// console.log($(this).attr('id')); will print the id of every input for example
});
i want a javascript form that takes text and make it x , and goes to the new link by a button .
href="aaa"+x+"bbb"
i tried on Html and i cant do that !
enter code here
<form action="/my/link/location" method="get" >
<input type="text" name="url" >
<input type="submit" value="Go" name="Submit" id="frm1_submit" />
</form>
<form onSubmit="submitForm()" method="get">
<input type="text" name="url" id="url" />
<input type="submit" value="Go" name="Submit" id="frm1_submit" />
</form>
<script>
function submitForm() {
window.location = 'aaa'+document.getElementById('url').value+'bbb';
}
</script>
While submitting my form which will not validating. I am using submit for form submission and I have to redirect my page. By using onclick event it should be validated..
<td id="main">
<h2>Add Info </h2>
<form action="create_info.php" name="f1" method="post">
<p>Info Title:
<input type="text" name="menu" value="" id="menu" />
</p>
<p>Position:
<select name="position">
<?php
$info_set = get_all_info();
$info_count = mysql_num_rows($info_set);
for($count=1; $count <=$info_count+1; $count++){
echo " <option value=\"{$count}\">{$count}</option>";
}
?>
</select>
</p>
<p>Visible:
<input type="radio" name="visible" value="0" />NO
<input type="radio" name="visible" value="1" />YES
</p>
<input type="submit" value="Add" onclick="validateForm()"/>
</form>
<br>
Cancel
</td>
</tr>
</table>
</div>
<script language="text/java script">
function validateForm()
{
if(f1.menu.value== "")
{
alert("name must be filled out");
return false;
}
}
</script>
It didn't validate because you havn't block the submit event. You should put your validation in onsubmit event, it will be triggered when you click the submit button.
Working code in jsFiddle : http://jsfiddle.net/FHZKr/
<form action="create_info.php" name="f1" method="post" onsubmit="return validateForm();">
<p>Info Title:
<input type="text" name="menu" value="" id="menu" />
</p>
<p>Position:
<select name="position">
<?php
$info_set = get_all_info();
$info_count = mysql_num_rows($info_set);
for($count=1; $count <=$info_count+1; $count++){
echo " <option value=\"{$count}\">{$count}</option>";
}
?>
</select>
</p>
<p>Visible:
<input type="radio" name="visible" value="0" />NO
<input type="radio" name="visible" value="1" />YES
</p>
<input type="submit" value="Add" />
</form>
JavaScript
<script type="text/javascript">
function validateForm()
{
if(f1.menu.value== "")
{
alert("name must be filled out");
return false;
}
return true;
}
</script>