Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="gm.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile.structure-1.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script src="assets/custom.js"></script>
<script type="text/javascript" src="assets/ejs_production.js"></script>
</head>
<body>
<div data-role="page" data-add-back-btn="true" id="pageregister">
<div data-role="header">
<h1>Sign Up</h1>
</div>
<!-- /header -->
<div data-role="content">
<form action="someurl.html" method="post" id="registerform">
<fieldset>
<div data-role="fieldcontain">
<label for="email">Email:</label>
<input type="text" name="email" id="email" value="" />
</div>
<div data-role="fieldcontain">
<label for="email2">Re-type email:</label>
<input type="text" name="email2" id="email2" value=""
/>
</div>
<div data-role="fieldcontain">
<label for="password">Password:</label>
<input type="password" name="password" id="password"
value="" />
</div>
<div data-role="fieldcontain">
<label for="password2">Re-type password:</label>
<input type="password" name="password2" id="password2"
value="" />
</div>
<button type="submit"
data-theme="b" name="submit" value="submit-value">Sign Up</button>
</fieldset>
</form>
<script>
$('#pageregister').live('pageshow', function (event) {
var url = baseURL + "users/add.json";
$("registerform").attr("action", url); //THIS HAS NO EFFECT?????
alert(url); //I SEE THIS
});
</script>
</div>
<!-- /content -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
Search
</li>
<li>
Info
</li>
</ul>
</div>
<!-- /navbar -->
</div>
<!-- /footer -->
</div>
<!-- /page -->
</body>
</html>
Your selector is wrong, you are missing # in id selector.
Change this
$("registerform").attr("action", url);
to
$("#registerform").attr("action", url);
As a side note, always wrap your code inside DOM ready event which will ensure that DOM is available before trying to find the elements.
$(function(){
//Your code goes here
$('#pageregister').live('pageshow', function (event) {
var url = baseURL + "users/add.json";
$("#registerform").attr("action", url);
});
});
Related
I have an issue with BS modal (im using BS 3) and it is confirming form submission. But it is placed in accordion and when i click e.g. 5th element modal and validator works but shows error in first element. I dont know what can be the problem, maybe data-toggle is mixed (modal and validator).Below I put that part of code (with erased loop and other things connected with template viewer -> smarty)
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="accordion_dotacja">
<b>Udostępnij kod pracownikowi:</b> <br>
<div class="row">
<div class="col-xs-9" style="padding-right:0;">
<input class="form-control" type="text" value="" id="" style="border-top-right-radius: 0; border-bottom-right-radius: 0;" readonly>
</div>
<div class="col-xs-3" style="padding-left:0;">
<button class="btn button btn-info" style="border-top-left-radius: 0; border-bottom-left-radius: 0;">Kopiuj kod</button>
</div>
</div><br>
<b>Albo załóż konto pracownika:</b> <br><br>
<form id="myForm" action="" method="post" data-toggle="validator" role="form">
<div class="row">
<div class="col-sm-6 form-group">
Imię:<br>
<input type="text" class="form-control" name="employee_name" data-error="Proszę podać imię." required>
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-6 form-group">
Nazwisko:<br>
<input type="text" class="form-control" name="employee_surname" data-error="Proszę podać nazwisko." required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="col-sm-6 form-group">
Numer telefonu:<br>
<input placeholder="9-cyfrowy numer telefonu" type="text" class="form-control" name="employee_phone" data-error="Proszę podać numer telefonu" pattern="[0-9]{9}" required>
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-6 form-group">
Adres e-mail:<br>
<input type="email" class="form-control" name="employee_email" data-error="Proszę podać prawidłowy adres e-mail." required>
<div class="help-block with-errors"></div>
</div>
</div>
<input type="hidden" name="action" value="register_employee">
<input type="hidden" name="kurs_id" value="">
<input type="hidden" name="hash" value="">
<input type="button" name="btn" value="Utwórz" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn button btn-primary" />
</form>
</div>
</div>
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<p class="body" style="font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; font-weight: 400;">
<b> Klikając „Załóż konto/Aplikuj” akceptujesz
Regulamin Serwisu i potwierdzasz, że zapoznałeś się z
Polityką ochrony prywatności oraz
Polityką Cookies.
</b>
</p>
</div>
<div class="modal-footer">
<button type="submit" form="myForm" class="btn btn-success col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1">Załóż konto/Aplikuj
</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I dont use any js file to this (only the validator, but its default code).
To clarify whats going on with this problem i attach video https://drive.google.com/file/d/1pYwLbxyZTZUFiGXny5LdO9Zg1S9_jKnr/view?usp=sharing
Earlier the code was without modals an validator was working correctly e.g i click submit on 5th element and validator runs in this element and so on.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="accordion_dotacja">
<div>
<b>Udostępnij kod pracownikowi:</b> <br>
<div class="row">
<div class="col-xs-9" style="padding-right:0;">
<input class="form-control" type="text" value="" id="hash_{$v.id}" style="border-top-right-radius: 0; border-bottom-right-radius: 0;" readonly>
</div>
<div class="col-xs-3" style="padding-left:0;">
<button class="btn button btn-info" style="border-top-left-radius: 0; border-bottom-left-radius: 0;">Kopiuj kod</button>
</div>
</div><br>
<b>Albo załóż konto pracownika:</b> <br><br>
<form action="" method="post" data-toggle="validator" role="form" onsubmit="return confirm('Czy na pewno chcesz założyć konto pracownikowi?');">
<div class="row">
<div class="col-sm-6 form-group">
Imię:<br>
<input type="text" class="form-control" name="employee_name" data-error="Proszę podać imię." required>
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-6 form-group">
Nazwisko:<br>
<input type="text" class="form-control" name="employee_surname" data-error="Proszę podać nazwisko." required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="col-sm-6 form-group">
Numer telefonu:<br>
<input placeholder="9-cyfrowy numer telefonu" type="text" class="form-control" name="employee_phone" data-error="Proszę podać numer telefonu" pattern="[0-9]{9}" required>
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-6 form-group">
Adres e-mail:<br>
<input type="email" class="form-control" name="employee_email" data-error="Proszę podać prawidłowy adres e-mail." required>
<div class="help-block with-errors"></div>
</div>
</div>
<input type="hidden" name="action" value="register_employee">
<input type="hidden" name="kurs_id" value="{$i}">
<input type="hidden" name="hash" value="{$v.hash}">
<input type="submit" class="btn button btn-primary" value="Utwórz">
</form>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
production code snippet
version of bootstrap - 3.3.7
Thanks in advance for help :)
I'm using bootstrap for a login page, I've seen people use the tag without the 'href' in bootstrap but it's not working for me, any ideas?
I'm just trying a simple alert atm before finishing, I will have the link switch between login and sign-up pages when I can get this working. At the moment it just appears as plain text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Secret Diary</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="login">
<div class="container">
<div class="center">
<div class="col-md-12 mx-auto">
<h1>Secret Diary</h1>
<h2>Store you thoughts</h2>
<div class="error"><?php echo $error; ?></div>
<form method="post" id="signupForm">
<input type="email" class="form-control" name="email" id="email" placeholder="email">
<input type="password" class="form-control" name="password" id="password" placeholder="password">
<div class="checkbox">
<label>
<input type="checkbox" name="stayLoggedIn" value="1"> Stay Logged In
</label>
</div>
<input type="hidden" name="signUp" value="1">
<input type="submit" name="submit" class="btn btn-primary btn-block mb-4" value="Sign Up!">
<p><a id="showLogInForm">Log In</a></p>
</form>
<form method="post" id="loginForm">
<input type="email" class="form-control" name="email" id="email" placeholder="email">
<input type="password" class="form-control" name="password" id="password" placeholder="password">
<div class="checkbox">
<label>
<input type="checkbox" name="stayLoggedIn" value="1"> Stay Logged In
</label>
</div>
<input type="hidden" name="signUp" value="0">
<input type="submit" name="submit" class="btn btn-primary btn-block mb-4" value="Log in!">
</form>
</div>
</div>
</div>
</section>
<script src="../js/jquery.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script type="text/javascript">
$("#showLogInForm").click(function(){
alert("hi!");
});
</script>
</body>
</html>
Try this:
Log In
You have to use <button> with some classes
<button class="btn btn-link p-0">Button</button>
You probably need need a href attribute, most browsers' default styling is setup to display a tags without href as plain text.
<a>some link</a>
<br />
some other link
you can just use the a tag without href like this:
<a id="showLogInForm">Log In</a>
please refer to the code below for details:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Secret Diary</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="login">
<div class="container">
<div class="center">
<div class="col-md-12 mx-auto">
<h1>Secret Diary</h1>
<h2>Store you thoughts</h2>
<div class="error"><?php echo $error; ?></div>
<form method="post" id="signupForm">
<input type="email" class="form-control" name="email" id="email" placeholder="email">
<input type="password" class="form-control" name="password" id="password" placeholder="password">
<div class="checkbox">
<label>
<input type="checkbox" name="stayLoggedIn" value="1"> Stay Logged In
</label>
</div>
<input type="hidden" name="signUp" value="1">
<input type="submit" name="submit" class="btn btn-primary btn-block mb-4" value="Sign Up!">
<p><a id="showLogInForm">Log In</a></p>
</form>
<form method="post" id="loginForm">
<input type="email" class="form-control" name="email" id="email" placeholder="email">
<input type="password" class="form-control" name="password" id="password" placeholder="password">
<div class="checkbox">
<label>
<input type="checkbox" name="stayLoggedIn" value="1"> Stay Logged In
</label>
</div>
<input type="hidden" name="signUp" value="0">
<input type="submit" name="submit" class="btn btn-primary btn-block mb-4" value="Log in!">
</form>
</div>
</div>
</div>
</section>
<script>
$( document ).ready(function() {
$("#showLogInForm").click(function(){ alert("hi!"); });
});
</script>
</body>
</html>
I am trying to display two alerts in a simple form. One, if any field is empty other on successful submission. This is a simple form for learning purpose.
It is now showing error that 'Undefined formGroupExampleInput'
Please Help so that the validation can be done.
Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/mycss.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<h1>Welcome to MAC Library!!</h1>
<h2>Registration Page</h2>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">GROUP 4</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>My Account</li>
<li>Register</li>
</ul>
</div>
</nav>
</br>
</br>
<h3 class="myh3">Sign up as new user to receive email updates about upcoming events in the city</h3>
<script type="text/javascript">
function submitForm()
{
if(document.form1.formGroupExampleInput.value==""||
document.form1.formGroupExampleInput2.value==""||
document.form1.exampleInputEmail1.value==""||
document.form1.exampleInputPassword1.value==""){
alert("Enter all fields");
}
else{
document.forms["form1"].submit();
alert("Your Form Successfully Submitted");
}
}
</script>
<div>
<form id="form1">
document.form1.formGroupExampleInput.value
<fieldset class="form-group">
<div class="required">
<label for="formGroupExampleInput">First Name</label>
<input type="text" required="required" class="form-control" id="formGroupExampleInput" placeholder="Enter your first name">
</div>
</fieldset>
<fieldset class="form-group">
<div class="required">
<label for="formGroupExampleInput2">Last Name</label>
<input type="text" required="required" class="form-control" id="formGroupExampleInput2" placeholder="Enter your last name">
</div>
</fieldset>
<fieldset class="form-group">
<div class="required">
<label for="exampleInputEmail1">Email address</label>
<input type="email" required="required" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
<small class="text-muted">We'll never share your email with anyone else.</small>
</div>
</fieldset>
<fieldset class="form-group">
<div class="required">
<label for="exampleInputPassword1">Password</label>
<input type="password" required="required" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</fieldset>
<fieldset class="form-group">
<label>Gender</label>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Female
</label>
</div>
</fieldset>
<button type="button" class="btn btn-primary" onclick="submitForm();">Submit</button>
</form>`enter code here`
</div>
</body>
</html>
How to write code for modal? I tried as semantic documentation but i can't get result.
I include:-
<link rel="stylesheet" type="text/css" href="css/semantic.css">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/components/modal.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/semantic.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/components/modal.min.js"></script>
<script type="text/javascript">
$('.ui.modal').modal('show');
});
</script>
Here is my code:-
<div class="ui modal">
<form class="ui form">
<div class="field">
<label>Old password</label>
<input type="text" name="oldpass" placeholder="old password">
</div>
<div class="field">
<label>Last Name</label>
<input type="text" name="newpass" placeholder="new password">
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" tabindex="0" class="hidden">
<label>I agree to the Terms and Conditions</label>
</div>
</div>
<button class="ui button" type="submit">Submit</button>
</form>
</div>
Please give some idea. Advance Thanks..
There are two problems in your code:
You're trying to get the .ui.modal before it's declared in the HTML. You must place the script tag before closing the body tag, but after all the other tags. Or you must use some ready event.
Your code has a sintax error. You must remove that }); at the end of your script.
Take a look at the example below working:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.css">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/components/modal.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/components/modal.min.js"></script>
<div class="ui modal">
<form class="ui form">
<div class="field">
<label>Old password</label>
<input type="text" name="oldpass" placeholder="old password">
</div>
<div class="field">
<label>Last Name</label>
<input type="text" name="newpass" placeholder="new password">
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" tabindex="0" class="hidden">
<label>I agree to the Terms and Conditions</label>
</div>
</div>
<button class="ui button" type="submit">Submit</button>
</form>
</div>
<script type="text/javascript">
$('.ui.modal').modal('show');
</script>
I am try to apply the jquery ui effect on a button, this is my head
<head>
<title>Bootstrap V3 template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/travelbuddy.css" rel="stylesheet" media="screen">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-selectify.js"></script>
<link rel="stylesheet" href="css/selectify.css" />
<script src="js/myfunctions.js"></script>
</head>
Everything seems to be loaded since there is no error in the Chrome console and I can see the files in the resources of the inspector.
Here is the part where I have my button:
<div class="container" >
<div class="row-fluid" >
<div class="span6" id="MyProfile">
<h1>Your profile</h1>
<form action="" method="post" id="registerform">
<p>
<label for="firstname">Firstname</label>
<input class="inputfields" type="text" name="firstname" id="firstname" />
</p>
<p>
<label for="lastname">Lastname</label>
<input class="inputfields" type="text" name="lastname" id="lastname" />
</p>
<p>
<label for="email">Email</label>
<input class="inputfields" type="email" name="email" id="email" />
</p>
<p>
<label for="phonenumber">Telephone number</label>
<input class="inputfields" type="tel" name="phonenumber" id="phonenumber" />
</p>
<p>
<label for="birthday">Birthday</label>
<input class="inputfields" type="datetime" name="birthday" id="birthday" />
</p>
<p>
<label for="selectgenre">Genre</label>
<select id="selectgenre">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</p>
<p>
<label for="cities">Where do you live?</label>
<input class="inputfields" type="text" name="cities" id="cities" />
</p>
<input id="saveprofile" type="submit" value="A submit button">
</form>
</div>
<div class="span2 offset1" id="MyPhoto">
</div>
</div>
</div>
And in my function I simple have:
$( "#saveprofile" ).button();
I also tried:
jQuery( document ).ready(function( $ ) {
$( "#saveprofile" ).button();
});
but didnt work. Any idea what I am missing?