Develop Reference

Form action attribute not working with js script [duplicate]

This question already has answers here:
Submit form after calling e.preventDefault()
(11 answers)
Closed 11 months ago.
I wrote a simple register form with an action attribute on HTML that when the user fills the inputs
it sends them to my database. Everything works fine until I added a validation script using Javascript. The script works fine with my parameters but when I press the submit button the form doesnt execute the action attribute. One way I thought around this is make a simpler script inside my HTML but I'd prefer to keep it on a separate file.
HTML:
<script defer src = "validation.js">
.......
<form action="register_user.php" method="post" id="formRegister" name = "formRegister" >
<div class="formfield">
<table style="display: inline-table; margin: 0px 12px 0px 12px;" >
<tr>
<td> Name<b style="color:red;">*</b> </td>
<td>
<div class = "input-control">
<input type="text" name="name" size="32" id="name" >
<div class="error"></div>
</div>
</td>
</tr>
<tr>
<td> Surename<b style="color:red;">*</b> </td>
<td>
<div class = "input-control">
<input type="text" name="surename" size="32" id="surename" >
<div class="error"></div>
</div>
</td>
</tr>
<tr>
<td> AMKA<b style="color:red;">*</b> </td>
<td>
<div class = "input-control">
<input type="text" name="amka" size="32" id="amka" >
<div class="error"></div>
</div>
</td>
</tr>
<tr>
<td> AFM<b style="color:red;">*</b> </td>
<td>
<div class = "input-control">
<input type="text" name="afm" size="32" id="afm" >
<div class="error"></div>
</div>
</td>
</tr>
<tr>
<td> PID<b style="color:red;">*</b> </td>
<td>
<div class = "input-control">
<input type="text" name="pid" size="32" id="pid">
<div class="error"></div>
</div>
</td>
</tr>
<tr>
<td> Age<b style="color:red;">*</b> </td>
<td>
<div class = "input-control">
<input type="text" name="age" size="32" id="age">
<div class="error"></div>
</div>
</td>
</tr>
<tr>
<td> Gender </td>
<td>
<div class = "input-control">
<input type="text" name="gender" size="32">
<div class = "error"></div>
</div>
</td>
</tr>
<tr>
<td> Email </td>
<td>
<div class = "input-control">
<input type="text" name="email" size="32" id = "email">
<div class="error"></div>
</div>
</td>
</tr>
<tr>
<td> Mobile Phone<b style="color:red;">*</b> </td>
<td>
<div class = "input-control">
<input type="text" name="mphone" size="32" id="mphone">
<div class="error"></div>
</div>
</td>
</tr>
<tr>
<td> Role<b style="color:red;">*</b> </td>
<td>
<div class="dropdown">
<div class = "input-control">
<select id="dropdown" name = "dropdown">
<option value= "">Select...</option>
<option value="1">Civilian</option>
<option value="2">Doc</option>
</select>
<div class="error"></div>
</div>
</div>
</td>
</tr>
</table>
<br><br>
<button type="submit" name="register" > Register </button>
</div>
</form>
Javascript (validation.js):
const formRegister = document.getElementById('formRegister');
const nameid = document.getElementById('name');
const surename = document.getElementById('surename');
const amka = document.getElementById('amka');
const afm = document.getElementById('afm');
const pid = document.getElementById('pid');
const age = document.getElementById('age');
const mphone = document.getElementById('mphone');
const dropdown = document.getElementById('dropdown');
const email = document.getElementById('email');
formRegister.addEventListener('submit', e => {
e.preventDefault();
validateInputs();
});
const setError = (element, message) => {
const inputControl = element.parentElement;
const errorDisplay = inputControl.querySelector('.error');
errorDisplay.innerText = message;
inputControl.classList.add('error');
inputControl.classList.remove('success')
}
const setSuccess = element => {
const inputControl = element.parentElement;
const errorDisplay = inputControl.querySelector('.error');
errorDisplay.innerText = '';
inputControl.classList.add('success');
inputControl.classList.remove('error');
};
const isValidEmail = email => {
const re = /^(([^<>()[\]\\.,;:\s#"]+(\.[^<>()[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
const validateInputs = () => {
const nameidValue = nameid.value.trim();
const surenameValue = surename.value.trim();
const amkaValue = amka.value.trim();
const afmValue = afm.value.trim();
const pidValue = pid.value.trim();
const ageValue = age.value.trim();
const mphoneValue = mphone.value.trim();
const dropdownValue = dropdown.value;
const emailValue = email.value.trim();
var letters = /^[A-Za-z]+$/;
var symbols = /[!##$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/;
var numbers = /^[0-9]+$/;
//error check
//name
if (nameidValue === ''){
setError(nameid, 'Error');
}else if(nameidValue.match(letters)){
setSuccess(nameid);
}else{
setError(nameid, 'Error');
}
//surename
if (surenameValue === '' ){
setError(surename, 'Error');
}else if (surenameValue.match(letters)){
setSuccess(surename);
}else{
setError(surename, 'Error');
}
//amka
if (amkaValue === ''){
setError(amka, 'Error');
}else if(amkaValue.length != 11){
setError(amka,'Error');
}else{
setSuccess(amka);
}
//afm
if (afmValue === ''){
setError(afm, 'Error');
}else if(afmValue.length != 9){
setError(afm,'Error');
}else {
setSuccess(afm);
}
//pid
if (pidValue === ''){
setError(pid,'Error');
}else if(pidValue.length != 8){
setError(pid, 'Error');
}else{
setSuccess(pid);
}
//age
if (ageValue === ''){
setError(age, 'Error');
}else {
setSuccess(age);
}
//mphone
if (mphoneValue === ''){
setError(mphone,'Error');
}else if(mphoneValue.length != 10){
setError(mphone, 'Error')
}else {
setSuccess(mphone);
}
//dropdown
if (dropdownValue == ""){
setError(dropdown, 'Error');
}else{
setSuccess(dropdown);
}
};

It won't submit the form due to this line:
e.preventDefault();
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
My suggestion is you resubmit the form after your validation logic has run providing the form is valid.

You're preventing the default action of the browser to submit the post request to the given route.
Try removing the "e.preventDefault" from the script.js. That should send the data to the route

Angular js model value changes are not reflected in ui

Values in the UI doesn't change even after executing the code in controller.
It displays the initial values with out a problem.
I've tried calling $scope.$apply() at the end of each function (submit and transfer) but it didn't work(it only gave an error with the $http.post()). What am i missing here?
app.controller('RegisterController', ['$scope','$http', function($scope,$http) {
$scope.user = {
email: 'admin#blah.com',
password1: '1qaz2wsx',
password2:'1qaz2wsx',
password:'1qaz2wsx',
username:'Admin',
profile_picture:'',
dobDay:'12',
dobMonth:'12',
dobYear:'1993',
date_of_birth:'',
stateMessage:'',
messageColor:'white',
};
var transfer = function(){
$http.post('http://localhost/cw/index.php/rest/resource/user/action/create',$scope.user).then(function successCallback(response) {
if(response.data.status!=null){
if(response.data.status=='success'){
$scope.user.stateMessage = 'success';
$scope.user.messageColor = "green";
}
else if(response.data.status=='failure'){
$scope.user.stateMessage = response.data.message;
$scope.user.messageColor = "red";
}
}
},function errorCallback(response) {
$scope.user.stateMessage = "Error occured.";
$scope.user.messageColor = "red";
});
};
$scope.submit = function(){
$scope.user.stateMessage="";
$scope.user.messageColor="white";
var proceed = true;
if(!validateFields()){
$scope.user.stateMessage = "All fields must be filled!";
$scope.user.messageColor = "red";
proceed = false;
}
if(validateDate($scope.user.dobDay,$scope.user.dobMonth,$scope.user.dobYear)){
$scope.user.date_of_birth= $scope.user.dobYear+"-"+$scope.user.dobMonth+"-"+$scope.user.dobDay;
}else {
proceed = false;
$scope.user.stateMessage = "Date is invalid!";
$scope.user.messageColor = "red";
}
if($scope.user.password1!=$scope.user.password2){
proceed = false;
$scope.user.stateMessage = "Passwords don't match!";
$scope.user.messageColor = "red";
}else $scope.user.password = $scope.user.password1;
if(proceed){
var file = document.getElementById('filePicker').files[0];
reader = new FileReader();
reader.onloadend = function(e) {
$scope.user.profile_picture = JSON.stringify(e.target.result);
$scope.$apply();
console.log($scope.user.profile_picture);
transfer();
}
reader.readAsDataURL(file);
}
function validateFields(){
/*some form validation*/
return true;
}
function validateDate(day,month,year){
/*some date validation*/
return true;
}
}
}]);
HTML code
<div ng-controller="RegisterController">
<span style="background-color:{{user.messageColor}}"><h4>{{user.stateMessage}}</h4></span>
</div>
<table style="text-align: left" ng-controller="RegisterController">
<tr>
<td>
Username
</td>
<td>
<input type="text" ng-bind="user.username" ng-model="user.username">
</td> <td> </td><td> </td>
</tr>
<tr>
<td>
Email
</td>
<td>
<input type="email" ng-bind="user.email" ng-model="user.email">
</td> <td> </td><td> </td>
</tr>
<tr>
<td>
Password
</td>
<td>
<input type="password" ng-bind="user.password1" ng-model="user.password1">
</td> <td> </td><td> </td>
</tr>
<tr>
<td>
Retype password
</td>
<td>
<input type="password" ng-bind="user.password2" ng-model="user.password2">
</td> <td> </td><td> </td>
</tr>
<tr>
<td>
Date of Birth
</td>
<td>
<input type="text" ng-bind="user.dobDay" ng-model="user.dobDay" value="DD" size="2" maxlength="2">
<input type="text" ng-bind="user.dobMonth" ng-model="user.dobMonth" value="MM" size="2" maxlength="2">
<input type="text" ng-bind="user.dobYear" ng-model="user.dobYear" value="YYYY" size="4" maxlength="4">
</td>
</tr>
<tr>
<td>
Profile picture
</td>
<td>
<input id="filePicker" type="file" ng-bind="user.profile_picture" ng-model="user.profile_picture" accept="image/*">
</td>
</tr>
<tr>
<td></td>
<td style="float:left">
<button ng-click="submit()">Submit</button>
</td>
</tr>
</table>

It seems like i cannot use the same controller in 2 instances.
Moving the status div in to the table assigned with the controller worked for me. There are ways to share data between controllers by using a service but i won't go there since this is only for a coursework.
AngularJS: share the data of the same controller in two different, not nested parts of the page

On textbox change change label value to HTML (array)

I have a array of textbox and labels which are toggled in a html table, say the label vl be visible on first and then on the row click the text box are visible , but the problem is on that row if i change the text box value the label value should also change but hear in my case am not able to do it.
JS Fiddle demo
HTML:
<table border="1" cellspacing="1" width="100%" id="table1">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
<th>Column5</th>
</tr>
<tr>
<td>
<label>data1</label>
<input type="text" value="data1" />
</td>
<td>
<label>data2</label>
<input type="text" value="data2" />
</td>
<td>
<label>data3</label>
<input type="text" value="data3"/>
</td>
<td>
<label>data4</label>
<input type="text" value="data4"/>
</td>
<td>
<label>data5</label>
<input type="text" value="data5"/>
</td>
</tr>
<tr>
<td>
<label>data6</label>
<input type="text" value="data6" />
</td>
<td>
<label>data7</label>
<input type="text" value="data7"/>
</td>
<td>
<label>data8</label>
<input type="text" value="data8" />
</td>
<td>
<label>data9</label>
<input type="text" value="data9" />
</td>
<td>
<label>data10</label>
<input type="text" value="data10" />
</td>
</tr>
</table>
<input id="printdata" type="button" value="printdata" />
<div class="showresult">1: <span></span></div>
<div class="showresult">2: <span></span></div>
<div class="showresult">3: <span></span></div>
<div class="showresult">4: <span></span></div>
<div class="showresult">5: <span></span></div>
JS:
$('#table1 input').hide();
$('#printdata').fadeTo(0, 0);
// This shows or hides the button deppending on the inputs
$('#table1 tr').on('change keyup click', function() {
var text = '';
$('input', this).each(function(){
text += $(this).val();
});
if (text !='')
{
$('#printdata').fadeTo(0, 100);
}
else
{
$('#printdata').fadeTo(0, 0);
}
});
$('#table1 tr').on('click', function (e) {
if ($( e.target ).is("input") || $( e.target ).is("th") ) {
return;
} else if ($(this).hasClass('selected')) {
$(this).toggleClass('selected');
$('input', this).toggle();
$('label', this).toggle();
} else {
$('tr.selected input').hide();
$('tr.selected label').toggle();
$('tr.selected').toggleClass('selected');
$(this).toggleClass('selected');
$('label', this).toggle();
$('input', this).toggle();
}
});
$('#printdata').click(function () {
$('.showresult').each(function (index) {
$('span', this).html('');
$('span', this).html($('#table1 .selected input').eq(index).val());
});
});

try to add this code:-
$('#table1 tr').on('change','[type="text"]', function(e) {
$(this).prev('label').text($(this).val());
});
Demo

Well, that's what you need to add to make your code working:
$('#table1 input').each(function(idx, input) {
var jqInput = $(input);
var label = jqInput.parent().find("label")
jqInput.change(function() {
label.text(jqInput.val())
})
})
However, this is a slippery road.
You're trying to maintain some state, display it in different views...
You will always have some sort of data synchronization bug with this approach.
You need to use some sort of MVC to make your life easier and code more stable.

Show and hide input fields using 4 radio buttons using HTML and Javascript

I am a complete beginner with Javascript.
I have 4 radio buttons:
House
Flat / Apartment
Bungalow
Commercial
And 2 input fields:
Rooms:
Bedrooms:
on click of House, Flat, Bungalow, I want to hide Rooms and show the input field Bedrooms on click of commercial I want to hide Bedrooms and show Rooms.
Please see my code below:
HTML CODE:
<table id="CurrentProperty">
<tr>
<td colspan="3">
<label>Type of Property:</label>
<br/>
<input type="radio" id="showBedrooms" value="bedrooms" name="fromType" checked="checked" />House
<input type="radio" id="showBedrooms" value="bedrooms" name="fromType" />Flat / Appartment
<input type="radio" id="showBedrooms" value="bedrooms" name="fromType" />Bungalow
<input type="radio" id="showRooms" value="rooms" name="fromType" />Commercial</td>
</tr>
<tr class="showCta">
<td colspan="3">
<label>Rooms:</label>
<input name="fromRooms" lable="From Rooms" type="text" class="body" ID="fromRooms" size="10" />
</td>
</tr>
<tr class="showTr">
<td colspan="3">
<label>Bedrooms:</label>
<input name="fromBedrooms" lable="From Bedrooms" type="text" class="body" ID="fromBedrooms" size="10" />
</td>
</tr>
</table>
JAVASCRIPT:
$(window).load(function () {
$('#showBedrooms').on('click', function () {
$('.showCta').hide();
});
});
$(window).load(function () {
$('#showRooms').on('click', function () {
$('.showCta').show();
});
});

JS should be something like
function update (el) {
var $rooms = $('tr.showCta');
var $bedrooms = $('tr.showTr');
if (el.checked && el.value === 'bedrooms') {
$rooms.hide();
$bedrooms.show();
} else {
$rooms.show();
$bedrooms.hide();
}
}
$(function () {
//get initial state.
update($('input:checked')[0]);
$('input[name="fromType"]').change(function () {
update(this);
});
});
jsFiddle http://jsfiddle.net/bj4Lx7ms/

JAVASCRIPT:
$( document ).ready(function () {
$('#showBedrooms').on('click', function () {
$('.showCta').hide();
});
$('#showRooms').on('click', function () {
$('.showCta').show();
});
});
After the document loaded and set the onclick handlder
And I think you should set
<tr class="showCta">
to
<tr class="showCta" style="display:none;">

in your case, user change from jquery. Bind an event handler to the "change" JavaScript event, or trigger that event on an element (your radiobuttons). With $(this).val() you can get the value from the value attribute, to check is the value bedrooms. Then call the methode show or hide like in this example:
$(document).ready(function () {
$('input:radio[name="fromType"]').change(function(){
if($(this).val() == 'bedrooms'){
$('.showCta').hide();
$('.showTr').show();
}else if ($(this).val() == 'rooms'){
$('.showCta').show();
$('.showTr').hide();
}
});
});
And hide the showCta tr as default with:
<tr class="showCta" style="display:none">
Here my JsFiddle-example

$(window).load(function () { /* You don't need to call twice this function, just wrap all your function in it */
function hideRooms() {
$("#rooms").hide(0);
$("#bedrooms").fadeIn(250);
}
function hideBedrooms() {
$("#bedrooms").hide(0);
$("#rooms").fadeIn(250);
}
$("#label").text("House selected");
hideRooms(); /* Hidding at start of website */
$("#showBedrooms_house").change(function() {
$("#label").text("House selected");
if (this.checked) {
hideRooms();
}
});
$("#showBedrooms_flatAppart").change(function() {
$("#label").text("Flat / Appartment selecrted");
if (this.checked) {
hideRooms();
}
});
$("#showBedrooms_bungalow").change(function() {
$("#label").text("Bungalow selected");
if (this.checked) {
hideRooms();
}
});
$("#showRooms_commercial").change(function() {
$("#label").text("Commercial selected");
if (this.checked) {
hideBedrooms();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="CurrentProperty">
<tr>
<td colspan="3">
<label>Type of Property:</label>
<br/>
<input type="radio" id="showBedrooms_house" value="bedrooms" name="fromType" checked="checked" />House
<input type="radio" id="showBedrooms_flatAppart" value="bedrooms" name="fromType" />Flat / Appartment
<input type="radio" id="showBedrooms_bungalow" value="bedrooms" name="fromType" />Bungalow
<input type="radio" id="showRooms_commercial" value="rooms" name="fromType" />Commercial</td>
</tr>
<tr class="showCta" id = "rooms">
<td colspan="3">
<label>Rooms:</label>
<input name="fromRooms" lable="From Rooms" type="text" class="body" ID="fromRooms" size="10" />
</td>
</tr>
<tr class="showTr" id = "bedrooms">
<td colspan="3">
<label>Bedrooms:</label>
<input name="fromBedrooms" lable="From Bedrooms" type="text" class="body" ID="fromBedrooms" size="10" />
</td>
</tr>
<tr>
<td style ="color : blue">
<label id ="label"></label>
</td>
</tr>
</table>

Validation on dynamically added rows

I'm cloning a row and I want to check in the database if the code exists. This all works fine on the first row but not on the cloned rows. I have an idea that I have to make the id of the field unique, I have tried to add the the code that checks if the code exist to the add button event but it doesn't work. Can someone please tell me how to merge the two script so it works on the cloned rows.
Code:
HTML
<table>
<tr id="show_codes">
<td colspan="2" class="text-fields" align="center" valign="middle">
<div class="codeForm">
<table class="codeForm" align="left" width="500px" cellpadding="0" style="padding-left: 20px;" cellspacing="0">
<tr>
<td height="15px">Codes that exist is 0011, 1234</td>
</tr>
<tr class="code_row">
<td class="details-border1" height="40px" valign="middle" bgcolor="#f3f3f3" align="center">
<input id="code" value="" class="text ui-widget-content ui-corner-all" type="text" name="code[]" />
<div id="status"></div>
</td>
<td class="details-border2" bgcolor="#f3f3f3" align="center">
<input value="" class="text ui-widget-content ui-corner-all" type="text" name="value[]" />
</td>
<td class="borders-right-bottom" bgcolor="#f3f3f3" align="center">
<input type="button" class="btnDeleteCode" value="Delete" />
</td>
</tr>
</table>
</div>
<table width="500px" align="left">
<tr>
<td align="right"><span style="cursor: pointer; color: #007FC6; font-weight: bold;" id="btnAddCode" value="add more">Add another code</span>
</td>
</tr>
</table>
</td>
</tr>
JQUERY
var dom = {};
dom.query = jQuery.noConflict(true);
dom.query(document).ready(function () {
var clonedRow = dom.query('.code_row').clone().html();
var appendRow = '<tr class = "code_row">' + clonedRow + '</tr>';
var counter = 0;
dom.query('#btnAddCode').click(function () {
dom.query('.codeForm tr:last').after(appendRow);
counter++;
$('.codeForm tr:last input[type="text"]').attr('id', 'code[' + counter + ']');
$('.codeForm tr:last').find('input').val('');
});
dom.query('.btnDeleteCode').live('click', function () {
var rowLength = dom.query('.code_row').length;
if (rowLength > 1) {
deleteRow(this);
} else {
dom.query('.codeForm tr:last').after(appendRow);
deleteRow(this);
}
});
function deleteRow(currentNode) {
dom.query(currentNode).parent().parent().remove();
}
});
pic1 = new Image(16, 16);
pic1.src = "loader.gif";
pic2 = new Image(16, 16);
pic2.src = "tick.gif";
dom.query(document).ready(function () {
dom.query("#code").change(function () {
var usr = dom.query("#code").val();
if (usr.length >= 4) {
dom.query("#status").html('<img src="loader.gif" align="absmiddle"> Checking availability...');
alert(usr);
dom.query.ajax({
type: "POST",
url: "setup_practice_preference_check_code.php",
data: "username=" + usr,
success: function (msg) {
dom.query("#status").ajaxComplete(function (event, request, settings) {
if (msg == 'OK') {
dom.query("#code").removeClass('object_error'); // if necessary
dom.query("#code").addClass("object_ok");
dom.query(this).html(' <img src="tick.gif" align="absmiddle">');
} else {
alert('msg');
dom.query("#code").removeClass('object_ok'); // if necessary
dom.query("#code").addClass("object_error");
dom.query(this).html(msg);
}
});
}
});
} else {
dom.query("#status").html('<font color="red">The username should have at least <strong>4</strong> characters.</font>');
dom.query("#code").removeClass('object_ok'); // if necessary
dom.query("#code").addClass("object_error");
}
});
});
Fiddle
Thanks