i have a form that contains different buttons with different values that i want to post to a controller or something equal. Here is how this could look like:
<form action="thecontroller/post" method="post" id="buttons">
<div class="select_direct">
<button class="btn_quick_select" value="A">A</button>
<button class="btn_quick_select" value="B">B</button>
<button class="btn_quick_select" value="C">C</button>
</div>
<button type="submit" name="add">
</form>
So i want to submit the selected button (A, B or C) to the controller. As i want to satisfy the Open-Close-Principle, i want to be able to do this for any amount of buttons given, so my approach ist to parse the elements by class and filter for the active one:
var buttonValue;
function getSelectedButton() {
var buttons = document.getElementsByClassName("select_direct");
buttons.foreach(function(button) {
if(button.isActive) { buttonValue = button.value; }
});
}
Is there a better way to achieve this?
So i want to submit the selected button (A, B or C) to the controller.
Sounds like you're re-inventing a radio button.
const form = document.getElementById("buttons");
form.addEventListener("submit", (e)=>{
e.preventDefault();
console.log(document.querySelector('input[name="letter"]:checked').value);
});
<form action="thecontroller/post" method="post" id="buttons">
<div class="select_direct">
A<input type="radio" value="A" name="letter" />
B<input type="radio" value="B" name="letter" />
C<input type="radio" value="C" name="letter" />
</div>
<input type="submit" name="add">
</form>
No need for JavaScript.
If you want to first click on A/B/C and then the submit button, then don't use normal buttons for A/B/C, but radio buttons and use CSS to make them look like normal buttons.
If you want to just click on A/B/C and submit immediately, remove the normal submit button and just give A/B/C type=submit.
So far what I understand form your question is that you want to POST the value of the button that is clicked. In this case you do not need a submit button. You can do it when a button is clicked. You can do it in following way:
$(".btn_quick_select").click(function(){
var btnValue = $(this).val();
//code to POST btnValue goes here...
});
Otherwise, if you want to submit then you can't do it using button. Use checkbox or radio instead. Then your markup will be look like this:
Let me konw if it is helpful for you.
<form action="thecontroller/post" method="post" id="buttons">
<div class="select_direct">
<input type="checkbox" name="xyz" value="value1">
<input type="checkbox" name="xyz" value="value2">
<input type="checkbox" name="xyz" value="value3">
</div>
<button type="submit" name="add">
</form>
And JavaScript:
$("#buttons").submit(function(e){
e.preventDefault();
var btnValue = $(this).serialize();
//code to POST btnValue goes here...
});
Hope it will be helpful. Let me know about it.
Related
Here is the Code I written
<form>
<input type="radio" name="cand" value="fr" onclick="alert('You Have Selected Fresher Level \nPlease Click Next To Proceed');"> Fresher<br><br>
<input type="radio" name="cand" value="ex" onclick="alert('You Have Selected Experienced Level \nPlease Click Next To Proceed');"> Experienced<br><br>
<input type="button" onclick="location.href='http://google.com';" value="Next" />
</form>
If suppose user select option 1 (say: freshers) then Link 1 (Fresher form link) Should be open.
or If select option 2 i.e experienced then experienced link should open.
Please Provide Answer with explanation, I am new to HTML and JavaScript.
You need script to update the location.href' . Trigger a function on selecting radio button and update theonclickproperty usingsetAttribute` method
function updateLink(value) {
if (value === "fr") {
document.getElementById("next").setAttribute('onclick', "location.href='www.google.com'")
} else {
document.getElementById("next").setAttribute('onclick', "location.href='www:wikipedia.com'")
}
}
<form>
<input type="radio" name="cand" value="fr" onclick="updateLink(this.value)"> Fresher<br><br>
<input type="radio" name="cand" value="ex" onclick="updateLink(this.value)"> Experienced<br><br>
<input id="next" type="button" onclick="location.href='www.google.com';" value="Next" />
</form>
This demo is just based on your code. Using addEventListener is a better option than using inline event handler.
Do like this.
Try to submit the form and prevent the default behaviour of the form using e.preventDefault()
Then change the input button type with submit
And add the data-link attr for Each input .For applying with window targeted link after submit
How its work
if you submit the form .its find the checked radio button data-link then
apply with window.location.Finaly its redirect the respected url
$('from').on('submit',function(e){
e.preventDefault();
window.location.href = $('input:checked').attr('data-link');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form>
<input type="radio" name="cand" value="fr" data-link="Fresher"onclick="alert('You Have Selected Fresher Level \nPlease Click Next To Proceed');" > Fresher<br><br>
<input type="radio" name="cand" data-link="Experienced" value="ex" onclick="alert('You Have Selected Experienced Level \nPlease Click Next To Proceed');" > Experienced<br><br>
<input type="submit"/>
</form>
In the example below I add an attribute to each radio. When the user clicks on the button we fetch that attribute (data-href) and use window.location.href to transfer the user there. You can use value instead, if you find that better. Note that I removed the inline click-function and use an event for it instad.
$('#clickButton').click(function(){
var url = $('input[name=cand]:checked').data('href');
//Goto url
window.location.href = url;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio" name="cand" value="fr" data-href="https://www.stackoverflow.com" onclick="alert('You Have Selected Fresher Level \nPlease Click Next To Proceed');" > Fresher<br><br>
<input type="radio" name="cand" value="ex" data-href="https://stackoverflow.com/q/45627889/4949005" onclick="alert('You Have Selected Experienced Level \nPlease Click Next To Proceed');" > Experienced<br><br>
<input type="button" id="clickButton" value="Next" />
</form>
I created three separate forms and gave each of these forms an id. After the user presses next, the current form fades out and the second form fades in. After the user presses next again, the second form then fades out and the next form fades in. Inside the third form I included a submit button that should submit all my data to my database.
I am having issues passing the information through the three different forms and was wondering if anyone had any ideas on how I could more easily accomplish this.
Sample code:
<form id ="1">
<input type = "text"/>
</form>
<form id = "2">
<input type="checkbox"/>
</form>
<form id = "3" action ="upload.php">
<input type = "file">
<input type = "submit">
</form>
EDIT* adding more info: Once the user presses submit, the information passed in from form 1 and form 2 should both be posted into upload.php. I am not sure how to accomplish that so far.
You can solve this issue by using single form like below.
<form id ="1" action ="upload.php">
<div class="first-form">
<input type = "text"/>
</div>
<div class="second-form">
<input type="checkbox"/>
</div>
<div class="third-form">
<input type = "file">
<input type = "submit">
</div>
</form>
there are three div with different class. You must hide and show the div not the form.
If you want to do with normal php without ajax, try this.
<form id ="1">
<input type="text" name="form1" />
</form>
<form id = "2">
<input type="checkbox" name="form2"/>
</form>
<form id = "3" action="file.php" method="post">
<input type = "text" name="form3">
<input type = "submit" id="sub">
</form>
Script
$(document).on("click", "#sub", function () {
$('#1 :input').not(':submit').clone().hide().appendTo('#3');
$('#2 :input').not(':submit').clone().hide().appendTo('#3');
return true;
});
You can use jQuery's serialize function to achieve this:
Your html file:
<form id="1">
<input type="text" name="name" />
</form>
<form id="2">
<input type="checkbox" name="chk" />
</form>
<form id="3">
<input type="file" name="file">
<input type="submit">
</form>
Add this script (an AJAX way):
<script>
$(document).ready(function(){
$("#3").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "upload.php",
data: $('#1, #2, #3').serialize(),
success: function(res) {
if(res==="Success"){
alert("Success!!!");
}
}
});
});
});
</script>
UPDATE
As #Santosh Patel suggests, I too suggest the same, to enclose form contents inside div. But since you have come up with a design, I suggested you jQuery.
For better understanding what I want to do, here is a screenshot
I want to be able to submit whether checkboxes are checked or not. For this I used the trick to have hidden input fields, because otherwise unchecked boxes are not submitted. What I want to do now is to give pairs (one hidden, one checkbox) the same name, but each pair a different name. I tried quite a bit with javascript and jQuery but could not figure out how to get this done. The "+" Button is for adding more Checkboxes, the "-" Button is for deleting them again.
<html>
<head>
<title>test</title>
<script type="text/javascript">
function clone(button, objid)
{
tmpvalue = document.test.elements['param[]'][1].value;
document.test.elements['param[]'][1].value = '';
var clone_me = document.getElementById(objid).firstChild.cloneNode(true);
button.parentNode.insertBefore(clone_me, button);
document.test.elements['param[]'][1].value = tmpvalue;
}
function remove_this(objLink)
{
objLink.parentNode.parentNode.parentNode.parentNode.parentNode.removeChild(objLink.parentNode.parentNode.parentNode.parentNode);
}
</script>
</head>
<body>
<form name="test" method="post" action="test2.php">
<input name="param[0]" value="0" type="hidden">
<div id="hidden" style="visibility:hidden; display:none">
<div id="table"><table>
<tr><td>
<input name="param[]" type='hidden' value="0">
Parameter: <input name="param[]" type="checkbox" value="1">
</td>
<td>
<span style="margin-left:2em;"></span><input value="-" onclick="javascript:remove_this(this)" type="button">
</td>
</tr>
</table></div>
</div>
<div>
<input style="margin-top:2em;" value="+" onclick="javascript:clone(this, 'table');" type="button">
<button type="submit" name="sent">Submit</button>
</div>
</form>
</body>
</html>
So it would actually be nice to have some sort of counter like this:
<input name="param[i]" type='hidden' value="0">
Parameter: <input name="param[i]" type="checkbox" value="1">
Thanks for your help!
What about giving your checkboxes a class (for example "checkClass") and then scan all elements with this class using a jQuery? Like so..
// instead of $('button[type="submit"]') give your button an ID and use # selector
$('button[type="submit"]').click(function(){
//lets get all checkboxes..
$('.checkClass').each(function(){
// get their checked status
var checked = $(this).is(':checked');
// ..and do whatever you need here..
});
});
In terms of adding a new row on "plus" button click. Try considering the jquery "Append" method. Like so..
$('#plusButtonId').click(function(){
var rowHtml = '<tr><td>Parameter: <input name="param[]" type="checkbox" class="checkClass" value="1"></td><td><input value="-" type="button" class="remButton"></td></tr>';
$('#table').append(rowHtml);
});
..then use the ".remButton" selector and add a click event that will remove that tr element.
and last but not least - this is a great example why to start with AngularJS. It would be just one controller, a div with "ng-repeat" and a few methods. Try it ;)
I am new to forms, and Javascript, so please be forgiving.
I have a form that looks like this:
<form method="post" action="control" name="myform">
<input type="submit" name="Name" value="Do A"/>
<input type="submit" name="Name" value="Do B" />
<input type="submit" name="Name" value="Do C" />
<input type="submit" name="Name" value="Close" />
</form>
I need to change this so that there are two buttons, and the form is submitted using javascript dependent on some external conditions, so I want it to look something like this:
<form method="post" action="control" name="myform">
<script>
function submitForm(form){
if(someConditionA){
submit the form so that the script performs same action as if the button Do A had been clicked
} if (someConditionB){
submit the form so that the script performs same action as if the button Do B had been clicked
} if (someConditionC){
submit the form so that the script performs same action as if the button Do C had been clicked
}
}
function closeForm(form){
window.close();
}
</script>
<button name="doAction" onClick="SubmitForm(this.form)">Do Action<\button>
<button name="close" onClick="SubmitForm(this.form)">Close<\button>
</form>
How can I implement the function submitForm?
Thanks
Add a hidden field with the same name as the original submit buttons:
<input type="HIDDEN" name="Name" value=""/>
Set the value of that field based on your conditions:
function submitForm(form){
if(someConditionA){
form.Name.value = "Do A";
} if (someConditionB){
form.Name.value = "Do B";
} if (someConditionC){
form.Name.value = "Do C";
}
form.submit();
}
Change the new Close button to this:
<button name="close" onClick="this.form.Name.value='Close';this.form.submit();">Close<\button>
I haven't tested this, so it may contain a mistake or two, but that's the general idea. (+1 for 'this.form', not many folks know about that, nice.)
Have just figured out the answer to my question:
The way to do it is to have a hidden field:
<input type="hidden" name="Name" value=""/>
Then in the function, set this hidden field to have the same value as the respective button.
Well, you should simply name your submit buttons differently.
<form method="post" action="control" name="myform">
<input type="submit" name="SubmitA" value="Do A"/>
<input type="submit" name="SubmitB" value="Do B" />
</form>
This way, when submitted, the server will be able to distinguish which submit was clicked.
not sure if I got your Problem right, but why dont you just make a click event on those submit buttons?
like
$('#mysendbtn').click(function(){ ...do A });
<script type="text/javascript">
(function () {
var ButtonGroup = YAHOO.widget.ButtonGroup;
var onCheckedButtonChange = function (p_oEvent) {
};
YAHOO.util.Event.onContentReady("mediaFilterButtonsFieldset", function () {
var oButtonGroup = new ButtonGroup("mediaFilterButtons");
oButtonGroup.on("checkedButtonChange", onCheckedButtonChange);
});
}());
</script>
<div id="resultInfo">
<form id="button-example-form" name="button-example-form" method="post">
<fieldset id="mediaFilterButtonsFieldset">
<div id="mediaFilterButtons" class="yui-buttongroup ie7filter" style="z-index:11;">
<div id="mediaFilterLabel">Go to</div>
<input id="radio1" class="filter_but" type="radio" name="0" value="First" checked rel="0" >
<input id="radio2" class="filter_but" type="radio" name="2" value="Second" rel="2">
<input id="radio3" class="filter_but" type="radio" name="1" value="Third" rel="1">
</div>
</fieldset>
</form>
</div>
These are my YUI buttons. They're just 3 radio buttons turned into "buttons"--literally. My question is this:
After people click the third button, I cannot manually check the first button anymore. How can I manually check "radio1"?
Edit:
According to the official YUI website, there is a method called "set". But I don't know how to use that in this buttonGroup.
The radio buttons must all have the same name attribute in order for them to be grouped together.
Answering your question with the set method. Perhaps this does the trick:
YAHOO.one("#radio1").set("checked",true);
To manually check the radio buttons, it's necessary to have the same name of radio button. Put the same name of radio button and get your result.