I'm having some problems thinking of a solution to this issue. Basically I would like to disable my submit/save button if the user has not selected a value from a dropdown list that I have. When the page loads, it defaults to the "-Select-" option, but I'm getting server errors if the user forgets to actually select an option. The only way to do so that I can think of is what I mentioned before, disable the submit/save if they haven't selected a value and the "-Select-" option is still selected. Any suggestions?
<tr>
<td class="fieldName_td">
#Html.Label("Copy Internal Form Group Actions:")<span class="requiredField">*</span>
</td>
<td class="fieldData_td">
<div id="form_shower">
<select id="myselect" name="ddlInternalAssociations">
<option value="4" selected="selected">-Select-</option>
<option value="1">Remove the association</option>
<option value="2">Copy and create new association</option>
<option value="3">Maintain the old association</option>
</select>
</div>
<div class="show-hide" name="form_name1" id="form_name1" style="display:none">
</div>
<div class="show-hide" name="form_name3" id="form_name3" style="display:none">
</div>
</td>
</tr>
<tr>
<td class="fieldName_td">
<div class="show-hide" name="form_name2" id="form_name2" style="display:none">
#Html.Label("Name for newly created internal form group:")
</div>
</td>
<td class="fieldData_td">
<div class="show-hide" name="form_name4" id="form_name4" style="display:none">
<input id="newInternalFormName" name="newInternalFormName" type="text" value="#Model.DetailObject.SuggestedInternalFormName" size="25" />
</div>
</td>
</tr>
}
<tr>
<td class="fieldName_td"></td>
<td class="fieldDataCenter_td">
#Html.HiddenFor(p => p.returnUrl)
#Html.HiddenFor(p => p.DetailObject.FormGroupId)
#Html.NWFormSubmitButtonFor(model => model, "btn_SaveButton", "Save", "btn_SaveButton", "SaveCollection", "disableOnSubmit")
</td>
</tr>
You can use jQuery to:
On page load test value and enable/disable the submit button
$(document).ready(function () {
var selectedVal = $('#myselect').val();
if(selectedVal == 4) {
//disable submit button
} else {
//enable submit button
}
});'
Track the changed of the select as
$('#myselect').change(function() {
//Check the change and use above logic to disable/enable submit button
});
Of course you can group this code in common method.
Related
I'm trying to add row to the table without refreshing page is it possible without using js? Basically I have a table and input in the modal my problem is that I need to refresh the page whenever I'm adding data to table which closes modal and data from the table has to be saved only when pressing save button in the modal. Maybe it is possible to do that using Laravel Controllers?
<table class="table" style="margin-top: 16px">
<tbody>
<tr>
<td class="table-text">
<div style="float: left">TASK NAME</div>
</td>
<td style="width: 10%">
<div style="float: end">DELETE</div>
</td>
</tr>
</tbody>
This is not possible without javascript.
Assuming you are using jquery, I would do something like this:
$('form').on('submit', function(e) {
e.preventDefault(); // Disable the sending of the form
var one = $('#one').val();
var two = $('#two').val();
$('#one').val('');
$('#two').val('');
$.ajax({
url: "/api/products/add",
method: 'post',
data: {
product: one,
price: two
},
success: function(){
appendToTable(one, two);
}
});
appendToTable(one, two); // The Success function in this ajax would never reach, because the url is not set. Thats because the function is called here.
});
function appendToTable(one, two) {
$('table').append(`
<tr>
<td>${one}</td>
<td>${two}</td>
</tr>
`);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/api/products/add" method="post">
<input id="one" name="product" type="text" placeholder="product" required>
<input id="two" name="price" type="number" placeholder="price" required>
<button>Add</button>
</form>
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>PC</td>
<td>500</td>
</tr>
</table>
You disable the forms default behavior (submitting) and do the nessesarry work with js (or jquery). If the user hover disables js, the form submits as normal and sends the data.
I have an Angular form with a dropdown list, and at the the end of the list is the option 'Other'. If a user selects other, I would like a new field to appear allowing them to input another option.
I tried using ngModel, but learned you can't include that within an *ngIf statement, but I think I might be on the right track.
<form class="form-horizontal" role="form" >
<tr>
<td>
<p>Location Type :</p>
</td>
<td> <select class="col-md-12 form-control"[(ngModel)]="newmp.locationType" name="locationType">
<option value="Outfall">Outfall</option>
<option value="Tide Gate">Tide Gate</option>
<option value="Upstream">Upstream Pipe</option>
<option value="Vault">Vault</option>
<option value="Other">Other</option></select>
</td>
</tr>
<tr *ngIf="locationType == Other">
<td class="left_td">
<p>Other (locationType) :</p>
</td>
<td>
<input type="text" name="locationTypeOther" placeholder="Other (Location Type) "class="col-md-12 form-control" [(ngModel)]="newmp.locationTypeOther" />
</td>
</tr>
</form>
In my component I have:
newmp = {
"locationType": "",
"locationTypeOther": ""
}
The way I have it now, the 'locationTypeOther" field will appear upon page load, even before a user selects an option. What might I be missing? Thanks a lot!
Instead of
<tr *ngIf="locationType == Other">
It should be
<tr *ngIf="newmp.locationType == 'Other'">
I have an HTML this is part of the form I'm working on
<form action="/goform/FormUpdateVAP" autocomplete="off" name="myform" id="formid" method="POST">
<table>
<tbody>
<tr>
<td align="right"><span class="label">Name:</span></td>
<td><input id="essid" name="essid" value="X" type="text"></td>
</tr>
<tr>
<td align="right"><input id="broadcast_essid" name="broadcast_essid" value="any" checked="" type="checkbox"></td>
<td><span class="label">Broadcast name:</span></td>
</tr>
</tbody>
</table>
<!-- BEGIN RIGHT COLUMN -->
<table>
<tbody><tr>
<td>
<input name="authentication" id="authentication" value="any" onclick="Update();" type="checkbox"><span class="label"><b>authentication</b></span>
</td>
<td>
<input onclick="Update();" name="wp" id="wp" value="any" type="checkbox"><span class="label"><b>Wp</b></span>
<select id="8021x_mode" name="8021x_mode" onchange="Update();"><option value="wpa">WPA</option>
<option value="wep">WEP</option>
</select>
</td>
</tr>
<tr>
<td height="26">
<input onclick="Update();" name="w_p" id="w_p" value="any" type="checkbox"><span class="label"><b>Wp</b></span>
<select id="8021x_mode" name="8021x_mode" onchange="Update();"><option value="wpa">WPA</option>
<option value="wep">WEP</option>
</select>
</td>
</tr>
<tr>
<td>
<input id="cancel" name="cancel" value="Cancel" onclick="window.location.href = '/fg/list.asp';" type="button">
</td>
<td>
<input id="add-2" name="add" value="Save" type="submit">
</td>
</tr>
</tbody>
</table>
I'm trying to submit it filling the Name and the Broadcast name. And checking the 8021x_mode and the wp checkboxes. If I tick 8021x_mode and set the fields the form submits just fine. But when I try ticking wp it doesn't submit. I got no error messages.
Here's my code so far:
use WWW::Mechanize::Firefox;
use Crypt::SSLeay;
use URI::Fetch;
use HTML::TagParser;
$ENV{PERL_LWP_SSL_VERIFY_HOSTNAME}=0; #not verifying certificate
my $url = 'https://';
$url = $url.#ARGV[0];
my $mech = WWW::Mechanize::Firefox->new;
$mech->get($url);
$mech->form_id('formid');
$mech->tick( '8021x_mode','any');
$mech->tick( 'wp','any'); --after I add this the form doesn't submit
my $name = #ARGV[1];
$mech->set_fields(
'vap_name' => $name,
'essid' => $name,
);
$mech->click_button( id => 'add-2' );
$mech->reload();
add-2 is the submit button. Any idea why is not working? If you need more information please let me now. Any help will be highly appreciated.
The problem is that the html doesn't contains the choice any for 8021x_mode.
I get this error :
No elements found for Checkbox with name '8021x_mode' and value 'any'
at test.pl line 24.
To check the form, I recommend you the mech-dump utility (installed with WWW::Mechanize)
$ mech-dump --forms http://domain.tld/path_to_forms
POST /goform/FormUpdateVAP [myform]
essid=X (text)
broadcast_essid=<UNDEF> (checkbox) [*<UNDEF>/off|any]
authentication=<UNDEF> (checkbox) [*<UNDEF>/off|any/authentication]
wp=<UNDEF> (checkbox) [*<UNDEF>/off|any/Wp]
8021x_mode=wpa (option) [*wpa/WPA|wep/WEP]
w_p=<UNDEF> (checkbox) [*<UNDEF>/off|any/Wp]
8021x_mode=wpa (option) [*wpa/WPA|wep/WEP]
cancel=Cancel (button)
add=Save (submit)
As you can see, there's no any choice...
Maybe the javascript there is doing some things that we don't know.
A workaround is to use LiveHttpHeaders Firefox addon to catch the forms POSTed to /goform/FormUpdateVAP and then instead of ticking, do a POST request with WWW::Mechanize.
<tr>
<td>
Delivery
</td>
<td>
<div class="confdelivery">
<select id="NxtDay" name="NxtDay">
<option selected="selected" value="1">Normal Devliery + 10.00</option>
<option value="2">Next Day Delivery + 20.00</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
Total
</td>
<td>
#{
var total = Model.CartTotal;
}
#total
</td>
</tr>
Basically if a user selects next day delivery. I want 20 to be added to #total?
I thing you are going about this the wrong way. You either update some input value with javascript, or use the NxtDay value in your controller action to assign the correct value, depending on the selection.
ADDED:
What you want to do is something like this: (I am assuming you are using jquery, since it come with MVC3).
HOWEVER: You should check out some tutorial if you are starting. This is pretty basic stuff and you won't go far without having to come back here unless to read up on this sutff.
<tr>
<td>
Delivery
</td>
<td>
<div class="confdelivery">
<select id="NxtDay" name="NxtDay">
<option selected="selected" value="10">Normal Devliery + 10.00</option>
<option value="20">Next Day Delivery + 20.00</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
Total
</td>
<td>
<span id="totalValue" style="display: none">#Model.CartTotal</span>
<span id="totalWithShipping">0</span>
<input id="hiddenTotal" type="hidden" value="0">
</td>
</tr>
<script>
$(document).ready(function () {
$('#NxtDay').change(function() {
addToTotal();
});
});
function addToTotal(){
$('#totalWithShipping').html($('#totalValue').html() + $("#NxtDay option:selected").val());
$('#hiddenTotal').val($('#totalWithShipping').html());
}
</script>
I'm trying to figure out how to create a test area where the user can either select from a list of items, or add to a textarea. Is this possible? Something like the following, except restrict the user to either selecting from the list, or entering into the textarea.
<tr>
<td width="100" class="formNames">Frequency</td>
<td colspan="2" class="cellColor">
<select name="yr" class="textbox">
<option value="0">-</option>
<option value="30">1</option>
<option value="30">2</option>
<option value="30">3</option>
<option value="30">4</option>
<option value="30">5</option>
</select>
</td>
<td width="10" class="formNames"> -or- </td>
<td class="formNames">
<input type="text" name="scheduletitle" class="textbox" value="default" />
</td>
</tr>
disable the other when data is changed in one. Using jQuery:
(function(){
var elements = $('select[name=yr],input[name=scheduletitle]');
elements.bind('change', function(){
var self = this;
elements.attr('disabled', false);
$(this).val() && elements.filter(function(){ return this != self; }).attr('disabled', true);
}
})();