How can I get radio button's value before form submission through PHP or jQuery?
It would be great if anybody could suggest some way :)
You can easily do it with Javascript.
<script>
function getRadioValue(id) {
var radioBtn = document.getElementById(id);
alert(radioBtn.value);
}
</script>
<form action="" method="post">
<input type="radio" id="btn1" name="123" value="value1" onclick="getRadioValue(this.id)"/>
<input type="radio" id="btn2" name="123" value="value2" onclick="getRadioValue(this.id)"/>
<input type="radio" id="btn3" name="123" value="value3" onclick="getRadioValue(this.id)"/>
<input type="submit">
</form>
var value = $('#your-form :radio:first').val();
Drive your users nuts:
<form onsubmit="alert(this.fooBar.value);" action=""
onclick="alert(this.fooBar.value);">
<div>
<input type="text" name="fooBar" value="foo bar">
<input type="submit">
</div>
</form>
Related
I'm making a web app and I'm struggling with replacing the page.
In the function myPage(), when I put the location.replace("file.html"); in the start, it works if I don't insert inputs on the web app, but when I put the location.replace("file.html"); in the if statement then doesn't work at all, and is there where I need to put the location.replace.
Please help me.
js code:
var submit = document.getElementById("submit");
submit.addEventListener("click",myPage);
function myPage(){
//location.replace("file.html"); // here this is working
var name=document.formId.nameRadio.value;//name="abc"
if (name=="abc"){
location.replace("file.html");//but here not
}
}
html code:
<form id="formId" name="formId" >
<label>sth </label><br><br>
<label for="name"> name </label>
<input type="text" id="name" name="name" required>
<fieldset>
<legend>sth</legend>
<ul class="class-radio" >
<li> <input type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
<li> <input type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>
</ul>
</fieldset>
<input id="submit" type="submit" value="next" >
</form>
change your button type to button. your browser submits first.
var submit = document.getElementById("submit");
submit.addEventListener("click",myPage);
function myPage(){
//location.replace("file.html"); // here this is working
var name=document.formId.nameRadio.value;//name="abc"
alert(name);
if (name=="abc"){
location.replace("file.html");//but here not
}
}
<form id="formId" name="formId" >
<label>sth </label><br><br>
<label for="name"> name </label>
<input type="text" id="name" name="name" required>
<fieldset>
<legend>sth</legend>
<ul class="class-radio" >
<li> <input type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
<li> <input type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>
</ul>
</fieldset>
<input id="submit" type="button" value="next" >
</form>
You can stop the usual form submission by adding preventDefault() to your onClick function.
var submit = document.getElementById("submit");
submit.addEventListener("click", myPage);
function myPage(e) {
//prevent form submission
e.preventDefault();
var name = document.getElementById('formId').nameRadio.value;
if (name == "abc") {
location.replace("file.html");
}
}
<form id="formId" name="formId">
<label>sth </label><br><br>
<label for="name"> name </label>
<input type="text" id="name" name="name" required>
<fieldset>
<legend>sth</legend>
<ul class="class-radio">
<li> <input type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
<li> <input type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>
</ul>
</fieldset>
<input id="submit" type="submit" value="next">
</form>
It seems that you want more control over the form submit.
You can change the input type from submit to button; Also rename that button to avoid confusion with submit method of the form.
You can also simplify the code, by using the click event directly on the input.
Here is something you can try:
<html>
<body>
<form id="formId" name="formId">
<label>sth</label><br><br>
<label for="name">name</label>
<input type="text" id="name" name="name" required>
<fieldset>
<legend>sth</legend>
<ul class="class-radio">
<li><input type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
<li><input type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>
</ul>
</fieldset>
<input id="btnSubmit" type="button" value="next" onclick="mySubmit()">
</form>
<script>
function mySubmit()
{
var name = document.formId.nameRadio.value;
if (name == "abc"){
location.replace("file.html");
} else {
// Submit a form
document.formId.submit();
}
}
</script>
</body>
</html>
So basically I'm having two forms like this:
<form method="post" action="url1">
<input type="hidden" name="add-to-cart" value="product_id1">
<input type="hidden" name="wc_bookings_field_start_date_year" value="2018">
<input type="hidden" name="wc_bookings_field_start_date_month" value="06">
<input type="hidden" name="wc_bookings_field_start_date_day" value="30">
<button type="submit">Add to cart</button>
</form>
<form method="post" action="url1">
<input type="hidden" name="add-to-cart" value="product_id2">
<input type="hidden" name="wc_bookings_field_start_date_year" value="2018">
<input type="hidden" name="wc_bookings_field_start_date_month" value="06">
<input type="hidden" name="wc_bookings_field_start_date_day" value="30">
<button type="submit">Add to cart</button>
</form>
Is there anyway I can merge the two button into one button that submit both forms? Kind of add both product to cart at the same time
You can use a seperate button independent of either forms. On that Button's click event, you can submit both the forms using their submit method.
var btn = document.getElementById("myBtn");
var forms = document.getElementsByTagName("form");
for(var i = 0; i < forms.length; i++) {
forms[i].submit();
}
<form method="post" action="url1">
<input type="hidden" name="add-to-cart" value="product_id1">
<input type="hidden" name="wc_bookings_field_start_date_year" value="2018">
<input type="hidden" name="wc_bookings_field_start_date_month" value="06">
<input type="hidden" name="wc_bookings_field_start_date_day" value="30">
<button type="submit">Add to cart</button>
</form>
<form method="post" action="url1">
<input type="hidden" name="add-to-cart" value="product_id2">
<input type="hidden" name="wc_bookings_field_start_date_year" value="2018">
<input type="hidden" name="wc_bookings_field_start_date_month" value="06">
<input type="hidden" name="wc_bookings_field_start_date_day" value="30">
<button type="submit">Add to cart</button>
</form>
<button id="myBtn">Add both</button>
As far as I know you can't do it since it will make the browser redirect to the URL specified in action attribute of your forms. And it can't redirect to two different locations.
To accomplish multiple form submission , you can use an XMLHttpRequest with JavaScript's FormData API or encode it in JSON before sending it to server.
Im trying to build some JS to add a date in format dd-MoN-yyyy (10-OCT-2017) when certain radios are selected and submitted. Below is a basic skeleton of my form:
<html>
<body>
<form method="post" action="https://sample.sample.com" onsubmit="return setform(this);">
<input type="hidden" name="OPT_DOWN_FREQ_DATE" value="">
<input type="radio" name="OPT_DOWN_FREQ" value="D" id="daily">
<input type="radio" name="OPT_DOWN_FREQ" value="W" id="weekly">
<input type="radio" name="OPT_DOWN_FREQ" value="B" id="biweekly">
<input type="radio" name="OPT_DOWN_FREQ" value="A" id="all">
<input type="image" src="sample.submit.button" name="submit" value="submit" class="bnt" id="subBtn"></td>
</form>
</body>
</html>
So whenever a OPT_DOWN_FREQ radio it selected, we should submit dd-MoN-yyyy to field OPT_DOWN_FREQ_DATE
Any help would be appreciated!
Add a change listener to the radio button group. From there you can add a handler to add the value of the selected radio button to the input you need it at.
Depending on how you plan to pass around the date information, you can format it before setting the radio input values, or during runtime.
A few things to note: don't forget to add your self-closing tags, and you also have a random /td lurking around there.
$(document).ready(function(){
$('input[name="OPT_DOWN_FREQ"]').change(function(){
var dateString = this.value;
// format dateString as needed, if dateString is a timestamp.
$('input[name="OPT_DOWN_FREQ_DATE"]').val(dateString); // Set the value of OPT_DOWN_FREQ_DATE
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="https://sample.sample.com" onsubmit="return setform(this);">
<input type="text" name="OPT_DOWN_FREQ_DATE" value=""/>
<input type="radio" name="OPT_DOWN_FREQ" value="D" id="daily"/>
<input type="radio" name="OPT_DOWN_FREQ" value="W" id="weekly"/>
<input type="radio" name="OPT_DOWN_FREQ" value="B" id="biweekly"/>
<input type="radio" name="OPT_DOWN_FREQ" value="A" id="all"/>
<input type="image" src="sample.submit.button" name="submit" value="submit" class="bnt" id="subBtn"/>
</form>
<form>
First Name:
<INPUT type="text" ><br>
<input type="radio"><br>
<input type="checkbox"><br>
<input type="textarea">
</FORM>
<FORM action="file.php" method="post" name=form1>
<INPUT type="submit" value="Submit">
</FORM>
https://jsfiddle.net/674brq05/
Not sure I understand your question, but you can get the form information from JS:
<form onsubmit="myFunc()">
Enter name: <input type="text" id="name">
<input type="submit">
</form>
The above does so the function "myFunc()" runs on submit.
And then the JS:
function myFunc() {
var name = document.getElementById('name');
alert(name.value);
return false; // Return false to cancel the submit
}
Way to take two form tag for submitting one form:
Try this:
HTML:
<form id="myForm" action="action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Submit form">
</form>
JAVASCRIPT:
<script>
function myFunction() {
document.getElementById("myForm").submit();
}
</script>
I am trying to find away to select all inputs within a form using jquery, where the trigger was initiated from. so for example if the button was clicked in form 1 only the inputs from form 1 would be selected, and nothing from form 2 would be selected.
<form action="" method="POST"> <!--form 1-->
<input type="text" />
<input type="text" />
<input type="hidden" value="87678" />
<input type="button" onclick="doit()" />
</form>
<form action="" method="POST"> <!--form 2-->
<input type="text" />
<input type="text" />
<input type="hidden" value="87678" />
<input type="button" onclick="doit()" />
</form>
Try this...
$(':button').on('click', function(){
var form = $(this).parents('form:first');
$(form).children().each(function(evt){
if($(this).attr('type') == 'text'){
alert(this.value);
}
});
});
See this Example jsFiddle
Greetings.
$('input[type=button]').click(function(){
console.log( $('input',$(this).closest('form')) )
});
http://jsfiddle.net/kR3ws/1/
Use the event target to get to the parent form and the find all inputs in that form
function doit(event){
$(event.target).parent("form").find("input")
}
for this to work you will have change your html of the anchor tag to
<input type="button" onclick="doit(event)" />
Add id fields to your buttons and forms.
<form id="form1" action="" method="POST"> <!--form 1-->
<input type="text" />
<input type="text" />
<input type="hidden" value="87678" />
<input id="btn1" type="button" onclick="doit()" />
</form>
<form id="form2" action="" method="POST"> <!--form 2-->
<input type="text" />
<input type="text" />
<input type="hidden" value="87678" />
<input id="btn2" type="button" onclick="doit()" />
</form>
Then declare event like this :
$('#btn1').click(function(){
var data = $('#form1').serialize();
alert('form1 : '+data);
});
$('#btn2').click(function(){
var data = $('#form2').serialize();
alert('form2 : '+data);
});