I am trying to use framework 7 to create a mobile phone application. In the application I have a form that I would like the user to submit multiple times however the submit button seems to stop working after the first time. Any suggestions?
<form method="GET" class="form-ajax-submit" id="my-form">
<div class="userInput">
<input class="title" name="title" placeholder="Title your memory">
<textarea class="newmemory" name="newmemory" id="newmemory" rows="40" cols="30"></textarea>
<div class="tags">
<h4>Add some tags to this memory:</h4>
<textarea class="tags" name="tags" id="tags" rows="2" cols="30" placeholder="Seperate tags with a comma For example: mom, dad, grandma"></textarea>
</div>
<div class="convert-form-to-data"><input type="submit" id="rememberbtn" value="Remember this for me!"></div>
</div>
</form>
$$('.convert-form-to-data').on('click', function() {
mainView.router.navigate('/memories/');
var formData = app.form.convertToData('#my-form');
cards.push(app.form.convertToData('#my-form'));
});
Related
I'm doing a project and I don't understand the front end well.
I have this html page:
<form class="form-group" action="/create" method="post" enctype="multipart/form-data">
<div class="title">
<h1>Cadastre seu produto</h1>
</div>
<div class="single-input">
<input class="form-control" placeholder="nome do produto" type="text" id="nome_produto" name="nome_produto">
</div>
<div class="single-input">
<input class="form-control" placeholder="quantidade em estoque" type="number" id="quantidade" name="quantidade">
</div>
<div class="single-input">
<input class="form-control" placeholder="preco do produto" type="number" id="preco_produto" name="preco_produto">
</div>
<button onclick="loadPage()" id="button" type="submit" class="btn btn btn-danger">ENVIAR</button>
</form>
I want that when I click on the SUBMIT button, I am redirected to another page, I want to do this using Javascript.
I tried to do this:
<script type="text/javascript">
function loadPage(){
window.location("http://localhost:8080/list")
}
but it's not working, every time I click on the button I'm redirected to a blank page
Any solution ?
Window.location is a property not a function. So it should be
window.location = "http://localhost:8080/list";
More details here: https://developer.mozilla.org/en-US/docs/Web/API/Window/location
I have a button click function like this :
$("#submitButton").click(function (e) {
e.preventDefault();
console.log("let's show my div");
$('#mydiv').show();
//and then doing a lot of front end operations and some ajax calls
})
When I click the submit button, I get the console.log message immediately. But .show() method works like 7-8 seconds after that. Can you tell me how I can make .show() work immediately? Thanks.
EDIT :
My HTML code looks like this :
<div class="main">
<form id="myform" enctype="multipart/form-data" class="contact-forms">
<div class="first-line">
<div class="span3 main-row">
<div class="input">
<input type="text" id="id" name="id" placeholder="insert your ID" maxlength="7" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />
</div>
</div>
</div>
<div class="first-line">
<div class="span8 main-row">
<div class="input">
<input type="text" id="name" name="name" placeholder="Your name" />
</div>
</div>
</div>
<div id="mydiv" style="display:none">
<label>
Processing, please wait.
</label>
</div>
</form>
</div>
This is example of showing the div , you should hide your div with display none not hidden class , if you use hidden class just remove class to show your div
function ShowDiv(){
$("#mydiv").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv" style='display:none;'>Hello</div>
<button onclick="ShowDiv()"> ShowMe</button>
Please help me, I have a html that contain a link
Sign Up
When I was click it I want to move it right into other html
<div class="containerlogin">
<div class="avatarcontainer avatar">
<img src="avatar.jpg">
</div>
<div class="Loginbox">
<div class="form">
<form class="login-form" name="login">
<p>User Name</p>
<input type="text" placeholder="Enter Your Name"/><br>
<p>Password</p>
<input type="text" placeholder="Enter Your Password"/><br>
<input type="submit" value="Login"><br>
<p class="message">Create an account? Register</p>
</form>
<form class="register-form" name="signup">
<p>User Name</p>
<input type="text" placeholder="Enter Your Name"/><br>
<p>Password</p>
<input type="text" placeholder="Enter Your Password"/><br>
<p>Email</p>
<input type="email" placeholder="Enter Your Email"/><br>
<p>Phone number</p>
<input type="tel" placeholder="Enter Yo Telephone Number"/><br>
<p>Address</p>
<input type="text" placeholder="Enter Your Address"/><br>
<button>Create Account</button>
<p class="message">Alreday Have an account? Login</p>
</form>
</div>
</div>
</div>
Javascript
<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
<script>
$('.message a').click(function(){
$('form').animate({height:"toggle",opacity: "toggle"},"slow");
} )
</script>
Here is the form
https://i.imgur.com/vg27sQo.jpg
https://i.imgur.com/ogEdgSY.jpg
I use the javascript to change to login form to the sign up form but when I put a link like LoginandRegistration/Login_register.html#signup to the link on first html that can't link directly to sign up form, it still link to login form
Please help me, thanks.
The url hash is a link to an id related anchor in the page - You need to add the id to the form - such as:
<form class="register-form" name="signup" id="signup">
That said - I would do it differently - I would display only the form identified by the url hash - rather than showing both and scrolling to the indicated one.
I'm having problems simulating a click via javascript on a mailchimp pop-up subscribe form and i need your help.
<!-- Title & Description - Holds HTML from CK editor -->
<div class="content__titleDescription" data-dojo-attach-point="descriptionContainer"><strong>Unlock the content </strong>by subscribing to our page.</div>
<!-- Form Fields -->
<form action="//mc.us7.list-manage.com/subscribe/form-post?u=bcd9828fa83ea7a231ffbee26&id=1928481ac4" accept-charset="UTF-8" method="post" enctype="multipart/form-data" data-dojo-attach-point="formNode" novalidate="">
<div class="content__formFields" data-dojo-attach-point="formFieldsContainer">
<div class="field-wrapper" id="uniqName_3_0" widgetid="uniqName_3_0">
<label for="mc-EMAIL">Email Address</label>
<input type="text" name="EMAIL" value="" id="mc-EMAIL" class="invalid">
<div class="invalid-error" style="display: block;">This field is required.</div>
</div>
<div class="field-wrapper" id="uniqName_3_1" widgetid="uniqName_3_1">
<label for="mc-FNAME">First Name</label>
<input type="text" name="FNAME" value="" id="mc-FNAME" class="valid">
<div class="invalid-error" style="display: none;"></div>
</div>
<div style="position:absolute;left:-5000px;">
<input type="text" name="b_bcd9828fa83ea7a231ffbee26_1928481ac4" tabindex="-1" value="">
</div>
</div>
<div class="content__button">
<input class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
</div>
</form>
<!-- Footer - Holds HTML from CK editor -->
<div class="content__footer" data-dojo-attach-point="footerContainer"></div>
</div>
<div class="modalContent__image" data-dojo-attach-point="formImageContainer"></div>
The code that i'm trying to target is:
<input class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
It's the submit button "Subscribe" that you can also see in
http://www.aspeagro.com/EN_Program_Abricot.html
Thank you!
How about this? I think is should do what you're after?
HTML
<input id="submit-button" class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
JS
$('#submit-button').on('click', function(e){
e.preventDefault();
// Do what you want to do
});
set id="btn" attribute to your submitting button and using jQuery you can trigger click with $("#btn").click(); call
If your aim is to submit the form, then don't bother sending a click event, but use the form's submit method:
var form = document.getElementById('uniqName_3_0').parentNode.parentNode;
form.submit();
The code is of course easier if you give the form an id attribute:
<form id="myform" ...
and then:
document.getElementById('myform').submit();
That button is inside an iframe. To access it from the parent page you would trigger it like this:
$('iframe').contents().find('input:submit').click()
I am working on a webpage and I have this form that will execute a script once the submit button is pressed. I plan to add AJAX in to push data to a PHP script, but for now I can't even get the javascript code block to run. Am i doing something wrong? In addition, I do have the includes for jQuery.
Below are snippets of my code.
<!--Scripts -->
<script src="js/jquery.min.js"></script>
<!--Legacy jQuery support for quicksand plugin-->
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<div class="col-md-6">
<form id="contact-form" role="form">
<div class="form-group">
<label class="sr-only" for="contact-name">Name</label>
<input type="text" name="name" class="form-control" id="contact-name" placeholder="Name">
</div>
<div class="form-group">
<label class="sr-only" for="contact-email">Email</label>
<input type="email" name="email" class="form-control" id="contact-email" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="contact-message">Message</label>
<textarea rows="12" name="message" class="form-control" id="contact-message" placeholder="Message"></textarea>
</div>
<input type="submit" class="btn btn-primary" value="Send Message">
</form>
<!-- Function To Submit Contact Us Form-->
<script type="text/javascript">
$("#contact-form").submit(function(event) {
alert("Dammit");
});
</script>
</div>
When clicking submit the Web Browser URL shows the fields and content from the form, however the alert is not being executed. I appreciate any assistance in advanced.
$("#contact-form").submit(function(event) {
alert("Dammit");
});
You need the # character when querying for an element by ID. Your code is currently looking for a tag named contact-form