I don't know much about JS, I'm new in this world, I know about HTML and CSS but this time I was asked to make an aplication where I have to receive data from a plain text to my formulary using JS.
Here's my Plain Text data.txt:
Interfaces: test1,
IP: 192.168.1.1,
Mask : test,
Gateway : test,
DNS 1: test,
DNS 2: test,
Broadcast: test
Here's my Div:
<div class="col-md-12">
<div class="form-panel">
<h4><i class="fa fa-angle-right"></i> Formulario </h4>
<hr />
<form method="post">
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Interfaces:</label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group ">
<label class="col-sm-3 col-sm-3 control-label">IP: </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Mask : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label"> Gateway : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 1 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 2 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Broadcast : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<br><br>
<div class="form-group">
<button type="submit" name="Save" class="btn btn-success btn-sm" " title="Save"><i class="fa fa-save"></i> Save</button>
</div>
</form>
</div>
That's the script I got from you guys, because I was looking for code to do it and that's what I got.
The point is the data that contains "data.tx" should be on my formulary and if I modify any field there and I hit "save" button it has to write on my plain text as well.
Is there a way to make it work? thanks!
Entire code bellow.
var mytext;
var connection = new XMLHttpRequest();
connection.open('GET', '/data.txt');
connection.onreadystatechange = function() {
mytext=connection.responseText;
}
connection.send();
<div class="col-md-12">
<div class="form-panel">
<h4><i class="fa fa-angle-right"></i> Formulario </h4>
<hr />
<form method="post">
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Interfaces:</label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group ">
<label class="col-sm-3 col-sm-3 control-label">IP: </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Mask : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label"> Gateway : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 1 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 2 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Broadcast : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<br><br>
<div class="form-group">
<button type="submit" name="Save" class="btn btn-success btn-sm" " title="Save"><i class="fa fa-save"></i> Save</button>
</div>
</form>
</div>
</div>
I don't know i a more efficient solution exists, but below code is working.
Here is how I achieved it, using jQuery .load()
$(document).ready(function(){
// Load the file in an hidden div element.
$("#hiddenFileLoad").load("data.txt", function(){
// Callback executes when content is loaded
// Place the content in a var
var loadedText = $("#hiddenFileLoad").text();
console.log("loadedText:\n\n"+loadedText);
// Split into an array
var loadedTextSplitted = loadedText.split(",");
// Remove the label part for each
for (i=0;i<loadedTextSplitted.length;i++){
temp = loadedTextSplitted[i].split(": ");
loadedTextSplitted[i] = temp[1];
}
// Place each info in the HTML form
$(".form-panel").find("input").each(function(index){
$(this).val( loadedTextSplitted[index] );
});
}); // End of .load callback
});
I used and hidden div, in order to load the .txt file content, which I gave the "hiddenFileLoad" id.
I made absolutely no change to your HTML (except the hidden div add) and I used your txt file content.
I assume you know how to save to file...
I didn't make the save button to work.
Here is a live example on my server.
Related
I have a webpage that contains a div that users can print using a print button that has an onclick javascript function. The div contains a couple of paragrapghs with bootstrap classes.The div also contains 3 bootstrap wells with bootstrap forms within them.
When I view the print preview, page 1 shows the first paragraph that is within the div, then no other content. The print preview shows more of the content being on page 2 and on page 3. However, it is cutting off some of the content at the end of the div.
I have spent several hours researching this issue and have tried several solutions, most of which try to modify overflow and float properties. None of these have resolved my problem.
I do have one css print rule that hides the print button when printing. I have disabled this css rule, but that has made no difference. I also have 1 page-break-before-always, which I have commented out, but this makes no difference.
These issues do not exist when using chrome.
My FireFox browser version is 52.0.2 (32-bit).
My Chrome browser is version 49.0.2.2623.112m.
My OS is windows XP.
p.s. keep in mind I am a pretty inexperienced developer.
<div class="row" id="sign_up">
<p class="lead text-danger text-center">Please sign me up for the 7 day Carnival Cruise.
<br>
Please print and fill out this sign-up form for each person.
</p>
<br>
<button type="button" onclick="printContent('sign_up')" class="btn btn-primary center-block"><span><i class="glyphicon glyphicon-print"></i></span> Print form</button>
<form class="well form-horizontal" action="" method="post" id="sign-up_form">
<fieldset>
<!-- Form Name -->
<legend>Sign-Up Form</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">First Name:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="first_name" placeholder="" class="form-control" type="text" data-delay="5000">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group inline">
<label class="col-md-2 control-label" >Last Name:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="last_name" placeholder="" class="form-control" type="text">
</div>
</div>
</div>
<!-- Date input-->
<div class="form-group">
<label class="col-md-2 control-label" >Date of Birth:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input name="date" placeholder="MM/DD/YYY" class="form-control" type="date">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">E-Mail:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="" class="form-control" type="email">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">Phone #</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="phone" placeholder="" class="form-control" type="tel">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">Address:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="address" placeholder="" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">City:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="city" placeholder="" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input -->
<div class="form-group">
<label class="col-md-2 control-label">State:</label>
<div class="col-md-6 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="state" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">Zip Code:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="zip" placeholder="" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">Emergency Contact Name:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="emerg_name" placeholder="" class="form-control" type="text" data-delay="5000">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">Emergency Contact Phone #</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="emerg_phone" placeholder="" class="form-control" type="tel">
</div>
</div>
</div>
</fieldset>
</form>
<form class="well form-inline">
<!-- Checkbox -->
<div class="form-group">
<label class="col-md-4 control-label">Inside Cabin</label>
<div class="col-md-2 inputGroupContainer">
<input name="ins_yes" placeholder="" class="form-control" type="checkbox">
</div>
</div>
<!-- Checkbox -->
<div class="form-group">
<label class="col-md-4 control-label">Balcony Cabin</label>
<div class="col-md-2 inputGroupContainer">
<input name="ins_no" placeholder="" class="form-control" type="checkbox">
</div>
</div>
</form>
<form class="well form-inline">
<!-- Checkbox -->
<div class="form-group">
<label class="col-md-4 control-label">Yes.<br> I do want insurance</label>
<div class="col-md-2 inputGroupContainer">
<input name="ins_yes" placeholder="" class="form-control" type="checkbox">
</div>
</div>
<!-- Checkbox -->
<div class="form-group">
<label class="col-md-4 control-label">No. <br>I don't want insurance</label>
<div class="col-md-2 inputGroupContainer">
<input name="ins_no" placeholder="" class="form-control" type="checkbox">
</div>
</div>
</form>
<p class="no-indent text-danger">I understand the payment / cancellation policy as stated above:
<br>
(sign) ________________________________________
</p>
<p><mark>Please bring or mail this completed form with payment.</mark></p>
<br>
<p style="page-break-before: always">
<p>
If you have any questions, please call Michelle # (810)-686-3524 or Denise # (989)-876-6102.
<br>
1390 E. Willard Rd.
<br>
Clio, MI 48420
<br>
810 - 686 - 3524
<br>
www.milesawaytravel.net
<br>
e-mail: <span class="text-primary">3524#Hughes.net</span>
<img class="responsive center-block" src="http://res.cloudinary.com/dx1tairmq/image/upload/v1499127232/miles%20away%20travel/newmatlogo.png" alt="miles away logo">
<button type="button" onclick="printContent('sign_up')" class="btn btn-primary"><span><i class="glyphicon glyphicon-print"></i></span> Print form</button>
</p>
</div>
I am trying to use parsley.js to validate the user input in client validation but no matter what I tried it doesn't work and have already taken these steps below.
Have downloaded parsley.js from http://parsleyjs.org/dist/parsley.min.js
Then add the path to the script like this: (This is added to the master.blade.php which all other pages extend).
After which I add data-parsley-validate to the form that I want to be validated. And this is the form and how I did it.
#extends('master')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">AJAX Register</div>
<div class="panel-body">
<form class="form-horizontal" id="registration" method="POST" action="{{ url('users/register') }}" data-parsley-validate="">
{!! csrf_field() !!}
<div class="form-group">
<label class="col-md-4 control-label">Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="name" id="name" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
<input type="email" class="form-control" name="email" id="email" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="password" id="password" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Confirm Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="password_confirmation" id="password_confirmation" data-parsley-equalto="#password" required="">
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-primary ladda-button" data-style="expand-left" data-size="s" data-color="green">
<i class="fa fa-btn fa-user"></i> Register
</button>
<a href="{!! asset('login/facebook') !!}">
<div class="btn btn-md btn-primary ladda-button" data-style="expand-left" data-size="s" data-color="blue"> <i class="fa fa-facebook"></i> Login with Facebook </div>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
#endsection
If you are using jQuery wrap your parsley code in:
$(document).ready(function(){
// your code here
})
Also post your script code with parsley.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="">
<div class="radio_toggle">
<label class="hubilo">
<input type="radio" name="registration_options" checked="checked">
<span>Company ABC</span></label>
<label class="other" >
<input type="radio" name="registration_options" ng-click="show_other=true">
<span>Other</span></label>
<label class="none" >
<input type="radio" name="registration_options" ng-click="display=false">
<span>None</span></label>
</div>
<div class="form-group" ng-show="show_other">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<form role="form">
<div class="form-group set_margin_0 set_padding_0">
<label>Button</label>
<input class="form-control" placeholder="Enter Button Name" type="text">
</div>
</form>
</div>
</div>
<div class="form-group">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
</div>
clicking on company radio button only link will be opened and clicking on other radio button button text box and link , both should be opened. and clicking on none. both of them should hide.
Any help would be great.
Thank You.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="">
<div class="radio_toggle">
<label class="hubilo">
<input type="radio" name="registration_options" checked="checked" ng-click="option='company'" ng-init="option='company'">
<span>Company ABC</span></label>
<label class="other" >
<input type="radio" name="registration_options" ng-click="option='other'">
<span>Other</span></label>
<label class="none" >
<input type="radio" name="registration_options" ng-click="option='none'">
<span>None</span></label>
</div>
<div class="form-group" ng-show="option ==='other'">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<form role="form">
<div class="form-group set_margin_0 set_padding_0">
<label>Button</label>
<input class="form-control" placeholder="Enter Button Name" type="text">
</div>
</form>
</div>
</div>
<div class="form-group" ng-show="option ==='other' || option === 'company'">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
</div>
Following changes are done.
1) Clicked item is saved in 'option' variable.
2) Show the form field based on data in 'option' variable.
It is seems confusing because you want to start with the URL box shown so you need to use a mix of ng-show and ng-hide then override them on click.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="">
<div class="radio_toggle">
<label class="hubilo"><input type="radio" name="registration_options" checked="checked" ng-click="show_url=false;show_other=false"><span>Company ABC</span></label>
<label class="other"><input type="radio" name="registration_options" ng-click="show_other=true;show_url=false"><span>Other</span></label>
<label class="none"><input type="radio" name="registration_options" ng-click="show_other=false;show_url=true"><span>None</span></label>
</div>
<div class="form-group" ng-show="show_other">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<form role="form">
<div class="form-group set_margin_0 set_padding_0">
<label>Button</label>
<input class="form-control" placeholder="Enter Button Name" type="text">
</div>
</form>
</div>
</div>
<div class="form-group" ng-hide="show_url">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
</div>
I need help with this code..
I need to get date in those inputs from an external plain text to fill the fields..
I have read in many forums but I have no clue how to do that... if someone of you guys could help would be helpfull!
Thanks in advance..
Here's What I have:
<div class="col-md-12">
<div class="form-panel">
<h4><i class="fa fa-angle-right"></i> Formulario </h4>
<hr />
<form method="post" name="ibisaserver">
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Interfaz:</label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group ">
<label class="col-sm-3 col-sm-3 control-label">Direccion IP: </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Mascara Subred : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Direccion Gateway : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 1 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 2 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Direccion Broadcast : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<br><br>
<div class="form-group">
<button type="submit" name="Guardar" class="btn btn-success btn-sm" onclick=" this.form.action ='/ibisaserver/' " title="Guardar"><i class="fa fa-save"></i> Guardar</button>
<button type="submit" name="Probar" class="btn btn-success btn-sm" onclick=" this.form.action ='/probarconexion' " title="Probar Conexión"><i class="fa fa-check"></i> Probar Conexión</button>
</div>
</form>
</div>
</div>
All I need to create an external plain text and the information there should appears on those fields.
Sorry for my bad english.
First: you have to load the text file using xmlHttp (if available on client system elsewhere you may use FileReader):
var mytext;
var connection = new XMLHttpRequest();
connection.open('GET', 'yourfile.txt');
connection.onreadystatechange = function() {
mytext=connection.responseText;
}
connection.send();
second: if you have wrote data in different lines, split it to an array:
var myarray = mytext.split("\n");
and finally use the array to fill the form fields.
I have 2 forms log in and sign up written on same index.php and they toggle according to the users need.The log in form appears when you open index.php while the sign up form is hidden and appears only when you click on signup here link.
Now my issue is that while signing up if there is any error(validation,database error) then the page refreshes when submit button is clicked obviously and returns to my login form which appears when you open/refresh index.php.Again I have to click on signup here link to solve the errors.
I just want to stay on signup form when errors appear that means I dont want the page to be refreshed when clicked on submit but want the errors to appear and solve them then and there.
$.ajax({
type: "POST",
url: "phpindex.php",
data: $("#signUpForm").serialize(),
success:function(data)
{
if ("#error".val(data))
{
e.preventDefault();
}
}
});
});
My validation and database code is written in phpindex.php
***************signup form************************
<form method="post" id="signUpForm">
<div class="container" id="signupContainer">
<h1>Sign Up</h1>
<div id="error"><?php if ($error!="") {
echo '<div class="alert alert-danger" role="alert">'.$error.'</div>';
} ?></div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" placeholder="Your name">
<span class="fa fa-user"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Address1</label>
<div class="col-sm-10">
<input type="text" id="address1" class="form-control" name="address1" placeholder="Home address">
<span class="fa fa-map-marker"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Address2</label>
<div class="col-sm-10">
<input type="text" id="address2" class="form-control" name="address2" placeholder="City,Pincode....">
<span class="fa fa-map-marker"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" placeholder="Email Address">
<span class="fa fa-envelope"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password" placeholder="Password">
<span class="fa fa-key"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-5 col-sm-10">
<input type="submit" id = "submit1"class="btn btn-success btn-lg" value="Sign In" name="submit">
</div>
</div>
<p><a class="toggleForms">Back to Log in</a></p>
</div>
</form>
***************login form*****************
<form method="post" id="logInForm">
<div class="container" id="logInContainer">
<h1>Log In</h1>
<div id="success"><?php if ($success!="") {
echo '<div class="alert alert-success" role="alert">'.$success.'</div>';
} ?></div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">Emai</label>
<div class="col-sm-8">
<input type="email" class="form-control" placeholder="Email" name="email">
<span class="fa fa-envelope"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">Password</label>
<div class="col-sm-8">
<input type="password" class="form-control" placeholder="Password" name="password">
<span class="fa fa-key"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-4 col-sm-10">
<input type="hidden" name="signUp" value="0">
<input type="submit" id = "submit2" class="btn btn-success btn-lg" value="Log In" name="submit">
</div>
</div>
<p><a class="toggleForms">Sign Up Here</a></p>
</div>
</form>
Firstly, there are numerous errors in the code you have submitted. I believe they are mainly due to clumsy copy and pasting, but there is one that I think you just have in your code, and it is the missing jQuery reference for "#error".
"#error".val(data)
I think you wanted to write something like this
$("#error").val(data)
This error would stop "preventDefault" from happening.
Secondly, I wonder where is your submit handler for those forms and how it looks like. If you have none, then there is you answer. You just do not catch the submit event.
Lastly, I would consider calling, instead of preventDefault:
return false
Please see this thread as for the reasons why
event.preventDefault() vs. return false