I am trying to confirm a confirmation box in Javascript for a school project. The confirmation box comes up asking if you want to submit, and I would like to submit programmatically. Here is the HTML for the form:
<form action="https://weekend.lps.wels.net/lpswp/index.php" method="post" id="form_wp_entry" onsubmit="return lpswp_confirm_submission('3,4','Friday,Saturday','Sunday')" style="display: inline;">
<table class="em_table" width="100%" style="margin-bottom: 5px;">
<tbody><tr>
<th align="left" id="lpswp_night_label_title_3">
Friday
</th>
</tr>
<tr>
<td>
Location: <input type="radio" name="lpswp_nights[3][location]" id="lpswp_nights_location_dorm_3" value="dorm" checked="checked" onclick="lpswp_toggle_location(3)"> <label for="lpswp_nights_location_dorm_3">Dorm</label> |
<input type="radio" name="lpswp_nights[3][location]" id="lpswp_nights_location_home_3" value="home" onclick="lpswp_toggle_location(3)"> <label for="lpswp_nights_location_home_3">Home</label><br>
<input type="radio" name="lpswp_nights[3][location]" id="lpswp_nights_location_other_3" value="other" onclick="lpswp_toggle_location(3)"> <label for="lpswp_nights_location_other_3" id="lpswp_night_label_text_3">Other</label>:
<input type="text" size="60" name="lpswp_nights[3][other]" id="lpswp_nights_other_3"><br>
Phone Number (if known): <input type="text" size="20" name="lpswp_nights[3][phone]" id="lpswp_nights_phone_3"> (999-999-9999)
</td>
</tr>
<tr>
<th align="left" id="lpswp_night_label_title_4">
Saturday
</th>
</tr>
<tr>
<td>
<input type="checkbox" name="lpswp_nights[4][same]" id="lpswp_nights_same_4" value="1" checked="checked" onclick="lpswp_toggle_same(4)"> <label for="lpswp_nights_same_%temp_night%">Same as Friday night.</label><br>
Location: <input disabled="disabled" type="radio" name="lpswp_nights[4][location]" id="lpswp_nights_location_dorm_4" value="dorm" checked="checked" onclick="lpswp_toggle_location(4)"> <label for="lpswp_nights_location_dorm_4">Dorm</label> |
<input disabled="disabled" type="radio" name="lpswp_nights[4][location]" id="lpswp_nights_location_home_4" value="home" onclick="lpswp_toggle_location(4)"> <label for="lpswp_nights_location_home_4">Home</label><br>
<input disabled="disabled" type="radio" name="lpswp_nights[4][location]" id="lpswp_nights_location_other_4" value="other" onclick="lpswp_toggle_location(4)"> <label for="lpswp_nights_location_other_4" id="lpswp_night_label_text_4">Other</label>:
<input disabled="disabled" type="text" size="60" name="lpswp_nights[4][other]" id="lpswp_nights_other_4"><br>
Phone Number (if known): <input disabled="disabled" type="text" size="20" name="lpswp_nights[4][phone]" id="lpswp_nights_phone_4"> (999-999-9999)
</td>
</tr>
<tr>
<th align="left" id="lpswp_final_dinner_label_title">
Sunday Dinner
</th>
</tr>
<tr>
<td id="lpswp_final_dinner_label_text" style="border: 0px;">
I WILL be eating in the cafeteria: <input type="radio" name="lpswp_final_dinner" id="lpswp_final_dinner_1" value="1"><br>
I will NOT be eating in the cafeteria: <input type="radio" name="lpswp_final_dinner" id="lpswp_final_dinner_0" value="0"><br>
<input type="hidden" name="lpswp_final_dinner_night" value="5">
</td>
</tr>
</tbody></table>
<input type="submit" value="Submit Weekend Plans">
<!--input type="reset" value="Cancel" /-->
</form>
Here is my current code that does not do anything to the confirmation box:
mWebView.loadUrl("javascript:(function(){" +
"document.getElementById('form_wp_entry').setAttribute('onsubmit','return true;');" +
";})()");
Please help me, I am new to javascript... and coding in general.
You're looking for .submit().Note that this won't trigger any functionality that's hooked up to the onsubmit of the form:
function output() {
console.log('Submitted');
return false;
}
// Forcibly submit the form
function customSubmit() {
document.getElementsByTagName('form')[0].submit();
}
<form name="a_form" onsubmit="return output()">
<button type="submit">Submit</button>
</form>
<br />
<button onclick="customSubmit()">Submit Programmatically</button>
Hope this helps!
Related
How can I make a server request when the contect of a table cell is changed?
i.e. on a table like this:
<form class="formclass">
<table border="1" style="float:left">
<tr>
<td><input type="text" name="country" value="USA" readonly/></td>
<td>
<input type="radio" name="enabled" value="1" checked>enabled
<input type="radio" name="enabled" value="0">disable
</td>
</tr>
<tr>
<td><input type="text" name="country" value="England" readonly/></td>
<td>
<input type="radio" name="enabled" value="1" checked>enabled
<input type="radio" name="enabled" value="0">disable
</td>
</tr>
<tr>
<td><input type="text" name="country" value="Sweden" readonly/></td>
<td>
<input type="radio" name="enabled" value="1" checked>enabled
<input type="radio" name="enabled" value="0">disable
</td>
</tr>
</table>
</form>
I tried adding an onchange function
$('.formclass').change(function() {console.log("succes")});
but this only works when every row is it's own form.
<form class="formclass">
<table border="1" style="float:left">
<tr>
<td><input type="text" name="country" value="USA" readonly/></td>
<td>
<input type="radio" name="enabled" value="1" checked>enabled
<input type="radio" name="enabled" value="0">disable
</td>
</tr>
</table>
</form>
<form class="formclass">
<table border="1" style="float:left">
<tr>
<td><input type="text" name="country" value="Englang" readonly/></td>
<td>
<input type="radio" name="enabled" value="1" checked>enabled
<input type="radio" name="enabled" value="0">disable
</td>
</tr>
</table>
</form>
<form class="formclass">
<table border="1" style="float:left">
<tr>
<td><input type="text" name="country" value="Sweden" readonly/></td>
<td>
<input type="radio" name="enabled" value="1" checked>enabled
<input type="radio" name="enabled" value="0">disable
</td>
</tr>
</table>
</form>
However this makes the styling really bad.
I just want a table where if on cell is changed it makes a server request with the data of that row. So here the country and radio button value if someone changes the the radio button.
Attach it to inputs instead of form
$('input[type=radio]').change(function() {console.log("succes")});
<form id="myForm" action="firstjsp" method="post">
<table>
<tr>
<td> User Name:</td>
<td><input type="text" name="userName"></td></tr>
<tr><td>Email:</td><td><input type="text" name="emailID"></td></tr>
<tr><td>New Password:</td><td> <input type="password" name="userPassword"></td></tr>
<tr><td>Confirm Password: </td><td> <input type="password" name="confirmPassword"></td></tr>
<tr><td>Address: </td><td><input type="text" cols="40" rows="5" name="address"></td></tr>
<tr><td>Gender:</td> <td><input type="radio" name="radioGender" value="Male" >Male</td>
<td><input type="radio" name = "radioGender" value="female">Female </td></tr>
<tr><td><center><input type="submit" value="Submit"></center></td> <td><center><button onClick="myFunction()">Reset</button></center></td></tr>
</table>
</form>
<script>
function myFunction(){
document.getElementByName("myForm").(reset);
}
</script>
<--firstjsp is a servelt file. on clicking reset the program moves to the servlet program instead of displaying the same page-->
This should reset all values in the Form to its defaults. No need for Javascript.
In order to work you need to place the <input ... > inside the same <form> </form> tag as the form you would like to reset.
<input type="reset" value="Reset">
IT is working fine, try this once
<form id="myForm" action="firstjsp" method="post">
<table>
<tr>
<td> User Name:</td>
<td><input type="text" name="userName"></td></tr>
<tr><td>Email:</td><td><input type="text" name="emailID"></td></tr>
<tr><td>New Password:</td><td> <input type="password" name="userPassword"></td></tr>
<tr><td>Confirm Password: </td><td> <input type="password" name="confirmPassword"></td></tr>
<tr><td>Address: </td><td><input type="text" cols="40" rows="5" name="address"></td></tr>
<tr><td>Gender:</td> <td><input type="radio" name="radioGender" value="Male" >Male</td>
<td><input type="radio" name = "radioGender" value="female">Female </td></tr>
<tr><td><center><input type="submit" value="Submit"></center></td> <td><center><input type="Reset" value="Reset" onClick="myFunction()"></button></center></td></tr>
</table>
</form>
<script>
function myFunction(){
document.getElementByName("myForm").(reset);
}
</script>
I have six columns with six checkboxes (or radio).
My intention is, that only one checkbox can be selected in the same row and the same column.
For example:
When I select the checkbox in column4 and row3', every checkbox in row3 and column4 have to be unselected immediately.
I tried it with radio buttons, but I simply can´t do it, because every single radio always to be in two different groups.
Edit:
My HTML Code:
<div style="position:absolute; left: 20px; top: 20px" class="checkcolumn2" >
<input type="checkbox" ID="column1row1">column1row1<br>
<input type="checkbox" ID="column1row2">column1row2<br>
<input type="checkbox" ID="column1row3">column1row3<br>
<input type="checkbox" ID="column1row4">column1row4<br>
<input type="checkbox" ID="column1row5">column1row5<br>
<input type="checkbox" ID="column1row6">column1row6<br>
</div>
<div style="position:absolute; left: 200px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column2row1">column2row1<br>
<input type="checkbox" ID="column2row2">column2row2<br>
<input type="checkbox" ID="column2row3">column2row3<br>
<input type="checkbox" ID="column2row4">column2row4<br>
<input type="checkbox" ID="column2row5">column2row5<br>
<input type="checkbox" ID="column2row6">column2row6<br>
</div>
<div style="position:absolute; left: 380px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column3row1">column3row1<br>
<input type="checkbox" ID="column3row2">column3row2<br>
<input type="checkbox" ID="column3row3">column3row3<br>
<input type="checkbox" ID="column3row4">column3row4<br>
<input type="checkbox" ID="column3row5">column3row5<br>
<input type="checkbox" ID="column3row6">column3row6<br>
</div>
<div style="position:absolute; left: 560px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column4row1">column4row1<br>
<input type="checkbox" ID="column4row2">column4row2<br>
<input type="checkbox" ID="column4row3">column4row3<br>
<input type="checkbox" ID="column4row4">column4row4<br>
<input type="checkbox" ID="column4row5">column4row5<br>
<input type="checkbox" ID="column4row6">column4row6<br>
</div>
<div style="position:absolute; left: 740px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column5row1">column5row1<br>
<input type="checkbox" ID="column5row2">column5row2<br>
<input type="checkbox" ID="column5row3">column5row3<br>
<input type="checkbox" ID="column5row4">column5row4<br>
<input type="checkbox" ID="column5row5">column5row5<br>
<input type="checkbox" ID="column5row6">column5row6<br>
</div>
<div style="position:absolute; left: 920px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column6row1">column6row1<br>
<input type="checkbox" ID="column6row2">column6row2<br>
<input type="checkbox" ID="column6row3">column6row3<br>
<input type="checkbox" ID="column6row4">column6row4<br>
<input type="checkbox" ID="column6row5">column6row5<br>
<input type="checkbox" ID="column6row6">column6row6<br>
</div>
It depends on the markup. Here's a simple example:
html
<div>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
<div>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
<div>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
jquery
$('input[type="checkbox"]').on('change', function() {
// uncheck sibling checkboxes (checkboxes on the same row)
$(this).siblings().prop('checked', false);
// uncheck checkboxes in the same column
$('div').find('input[type="checkbox"]:eq(' + $(this).index() + ')').not(this).prop('checked', false);
});
Here's a fiddle
Here's another example using classes
I'm not sure if this is the best possible solution, but I think it does what you want.
$(":radio").change(function() {
// find column
var tdColumn = $(this).closest("td");
// find row
var trRow = tdColumn.closest("tr");
// uncheck all radios in current row, except the selected radio
trRow.find(":radio").not($(this)).prop("checked",false);
// index of current column
var i = tdColumn.index();
// uncheck all radios in current column, except the selected radio
trRow.siblings("tr").each(function(key, value) { $(value).find(":radio")[i].checked = false; } );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<table>
I created it by 3 columns and 5 rows BUT it works for N cols and M rows... just increase td and tr tags...
Try this...
Also you can test it live here ;)
Result
.....................................................................................................................................
jQuery:
$(document).ready(function(){
var $table = $('#MyTable');
var $rowCount = $table.find('tr').length;
var $colCount = $($table.find('tr')[0]).find('td').length;
console.log($rowCount);
console.log($colCount);
$table.find('tr').each(function(i, e){
$tr=$(e);
console.log($tr);
});
});
$(".chBox").click(function() {
console.log('clicked');
$this=$(this);
$row=$this.parent().parent();
$table=$this.closest('table');
$row.find('.chBox').each(function(i, e){
$checkbox=$(e);
$checkbox.prop('checked',false);
console.log($checkbox);
});
$this.prop('checked',true);
var col = $this.parent().parent().children().index($this.parent());
var row = $this.parent().parent().parent().children().index($this.parent().parent());
console.log(col);
console.log(row);
$table.find('tr').each(function(i, e){
$tr=$(e);
$tr.find('.chBox').each(function(k,ex){
$chBox=$(this);
if(k==col && i!=row)
$chBox.prop('checked',false);
});
});
});
HTML:
<table id="MyTable">
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
</table>
Select only one checkbox/radiobutton in the same row and column with Angular 7 and JavaScript
The Idea behind this is that with radio button we have name property which makes single select either by row or column but for both row and column. I placed the row in name and handled column with javascript whenever button will click.
This is HTML CODE
<section class="editor">
<strong>Editor</strong>
<div>
<label>Add option</label>
<button (click)="addOption()">+</button>
<div *ngFor="let option of options;let i = index">
<span>{{option.title +(i+1)}}</span><button (click)="deleteOption(i)"
*ngIf="options.length>2">X</button>
</div>
</div>
</section>
<hr>
<section>
<strong>Builder</strong>
<div class="builder">
<label>Question title goes here</label><br>
<div *ngFor="let option of options;let row_index = index">
<span>{{option.title +(row_index+1)}}</span>
<span *ngFor="let rank of options;let column_index=index">
<input type="radio" name="{{row_index}}" class="{{column_index}}"
(click)="check(column_index,$event)">
</span>
</div>
</div>
</section>
And this is my .ts file code where I Implemented with Javascript
export class AppComponent {
options = [{
title: "option",
rank: 0,
}, {
title: "option",
rank: 0
}]
constructor() {
}
ngOnInit(): void { }
addOption() {
this.options.push({
title: "option",
rank: 0
})
}
deleteOption(i) {
this.options.splice(i, 1);
}
check(column_index, event) {
Array.from(document.getElementsByClassName(column_index)).map(x=>x['checked']=false);
event.target.checked=true;
}
}
I'm trying to get form in table with enabling and disabling inputs by checkbox.
When I realized, that <form> is not working in tables I put form argument in inputs, but now disabling/enabling doesn't working (my js skill is kinda poor)
My checkbox to disable/enable inputs look like:
<td>
<input type="checkbox" onclick="this.form.elements['bleh'].disabled = this.form.elements['bleh2'].disabled = !this.checked" />
<input type="submit" value="Edytuj"/>
</td>
And my input boxes for now are:
<td><input type="text" name="bleh" form="id7" value="default" disabled=disabled></td>
<td><input type="text" name="bleh2" form="id7" value="admin" disabled=disabled></td>
if you give your form a name you can reach the elements like this:
document.FORM_NAME.ELEMENT_NAME.disable
Eg
document.id7.bleh.disabled
So you can change your onclick to
<input type="checkbox" onclick="document.id7.bleh.disabled = document.id7.bleh2.disabled = !this.checked" />
Example
Using form attribute to external form
Demo Fiddle
When you have your table within the form
<form action="#">
<table>
<tr>
<td>
<input type="text" name="bleh" value="default" disabled="disabled" />
</td>
<td>
<input type="text" name="bleh2" value="admin" disabled="disabled" />
</td>
<td>
<input type="checkbox" onclick="this.form['bleh'].disabled = this.form['bleh2'].disabled = !this.checked" />
<input type="submit" value="Edytuj" />
</td>
</tr>
</table>
</form>
When you declare your form elements outside the form
<table>
<tr>
<td>
<input type="text" name="bleh" form="id7" value="default" disabled="disabled" />
</td>
<td>
<input type="text" name="bleh2" form="id7" value="admin" disabled="disabled" />
</td>
<td>
<input type="checkbox" onclick="document.forms['id7']['bleh'].disabled = document.forms['id7']['bleh2'].disabled = !this.checked" />
<input type="submit" value="Edytuj" />
</td>
</tr>
</table>
<form name="id7" id="id7" action="#"></form>
So I have this pizza order form, and for the topping section, I want multiple selections to be able to be checked. For example, a user can check pepperoni, sausage, olives, etc. But if the user selects "No Toppings", I want it to clear the rest of the checkboxes. I tried writing some JavaScript to do it, but it was unstable and it only worked onClick. So basically, I don't want users to be able to select "No Toppings", I want nothing else to be selected, and when users select a different topping, I don't want "No Toppings" to be selected. I hope this makes sense! Any help is appreciated! Here is my code so far:
<script type="text/javascript">
function unCheck(el, n){
el.form.elements[n].checked = false;
}
</script>
<table>
<tr>
<td style="border: none;">
<input name="size" type="radio" value="8.00" id="small"
onclick="this.form.total.value=calculateTotal(this);" />
<label for="small">Small ($8.00)</label>
</td>
<td style="border: none;">
<input type="checkbox" name="topping" id="pepperoni" value="0.50"
onclick="this.form.total.value=calculateTotal(this);"/>
<label for="pepperoni">Pepperoni</label>
<input type="checkbox" name="topping" id="sausage" value="0.50"
onclick="this.form.total.value=calculateTotal(this);" />
<label for="sausage">Sausage</label>
</td>
</tr>
<tr>
<td style="border: none;">
<input name="size" type="radio" value="10.00" id="medium"
onclick="this.form.total.value=calculateTotal(this);" />
<label for="medium">Medium ($10.00)</label>
</td>
<td style="border: none;">
<input type="checkbox" name="topping" id="mushroom" value="0.50"
onclick="this.form.total.value=calculateTotal(this);" />
<label for="mushroom">Mushroom</label>
<input type="checkbox" name="topping" id="olive" value="0.50"
onclick="this.form.total.value=calculateTotal(this);" />
<label for="olive">Olive</label>
</td>
</tr>
<tr>
<td style="border: none;">
<input name="size" type="radio" value="12.00" id="large"
onclick="this.form.total.value=calculateTotal(this);"/>
<label for="large">Large ($12.00)</label>
</td>
<td style="border: none;">
<input type="checkbox" name="Un_CheckAll" value="0.00" id="none"
onclick="unCheck(this, 'pepperoni','sausage', 'mushroom', 'olive'); "/>
<label for="none">No Toppings (Cheese Pizza)</label>
</td>
</tr>
<table>
Utilizing jQuery, this becomes trivial. Check out this sample.