On my form there are a few input fields, once the users entered the values into the input field and hit submit, I want the values to populate a few corresponding elements.
How can I do it using jQuery without refreshing the page?
<form method="get">
<label for="yourName">Your name</label>
<input name="yourName" id="yourName" type="text">
<button type="submit">Submit</button>
</form>
<div id="result">
<span class="rName"></span>
</div>
Some failed JS.
$('#hCardForm').submit(function() {
var rName = $('#yourName').val();
$('.rName').text(rName);
});
There are 2 things wrong with your code.
1. you don't have an id on your form
2. you are not stopping the submit of the form.
You could change the button type equal to button instead of submit and submit the form via jquery.
jsfiddle
<form method="get">
<label for="yourName">Your name</label>
<input name="yourName" id="yourName" type="text">
<button type="submit" id="submit">Submit</button>
</form>
<div id="result">
<span class="rName"></span>
</div>
$('#submit').click(function(event){
event.preventDefault();
$('#result .rName').text($('#yourName').val());
});
http://jsfiddle.net/MswhY/
Related
I have a noob question.
i have a form with a text field. If i type something in, and push enter, no result. If i type something in, and push the button, i get the result i want. Can someone help me fix this - this is written in vue.js
<div class ="well">
<form class="form-inline" onsubmit="searchName">
<h1><label>Enter Search</label></h1>
<input type="text" name="name" class="form-control" v-model="search">
</form>
</div>
<input id="clickMe" type="button" value="clickme" v-on:click="searchName" />
You may add an event in your text field.
<input
type="text"
name="name"
class="form-control"
v-model="search"
v-on:keyup.enter="searchName"
/>
Or add a submit event in your form
<form
class="form-inline"
v-on:submit.prevent="searchName"
>
put your button inside the <form> tag and change the button type to submit:
<div class ="well">
<form class="form-inline" #submit.prevent="searchName">
<h1><label>Enter Search</label></h1>
<input type="text" name="name" class="form-control" v-model="search">
<input id="clickMe" type="submit" value="clickme"/>
</form>
</div>
EDIT
instead of onclick event in the button, use #submit.prevent in the form.
So basically I have a page where users can post a status, users are able to comment on these status's by typing in the textbox and clicking on the 'Reply' button. However I much rather remove the button so users can just press the enter key to post a reply. Any help would be greatly appreciated!
<div id="status_'.$statusid.'" class="panel panel-default">
<form>
<div class="input-group">
<input type="text" id="replytext_'.$statusid.'" onkeyup="statusMax(this,250)" class="form-control" placeholder="Add a comment.." autocomplete="off">
</div>
<button id="replyBtn_'.$statusid.'" onclick="replyToStatus('.$statusid.',\''.$url.'\',\'replytext_'.$statusid.'\',this)">Reply</button>
</form>
</div>
You can submit a form by pressing enter when a form element is active. See the following snippet that just hooks into the form via it's onSubmit event handler.
function handleSubmit() {
alert('Do your thing...');
}
<form id="commentForm" onSubmit="handleSubmit(); return false;">
<div class="input-group">
<input type="text" id="replytext_" class="form-control" placeholder="Add a comment.." autocomplete="off">
</div>
</form>
I'm using jquery form validation from http://www.runningcoder.org/jqueryvalidation/
demo.html
<form id="form-signup_v1" name="form-signup_v1" method="get" class="validation-form-container">
<div class="field">
<label for="signup_v1-username">First Name</label>
<div class="ui left labeled input">
<input id="first_name" name="first_name" type="text">
<div class="ui corner label">
<i class="asterisk icon">*</i>
</div>
</div>
</div>
<input name="ok" id="ok" type="submit" class="ui blue submit button" value="Ok">
<input name="cancel" id="cancel" type="submit" class="ui blue submit button" value="Cancel">
</form>
<script>
$('#form-signup_v1').validate({
submit: {
settings: {
inputContainer: '.field'
}
}
});
</script>
I'm use form validation in the url not include the value of submit button
demo.html?first_name=John
I try to remove jquery form validation in the url include the value of submit button
demo.html?first_name=John&ok=OK
I want to check submit button when click from query string but when i use validation the url alway not include query string of button like the figure 1
If you want that the query doesn't include the button name just remove the name attribute from <input type = "button" name="ok">. Also assign a value to the button. By default the submit action forms the query string from the name value pairs in the form.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="get">
<input name="first_name" type="text" />
<input type="submit" value="button">
</form>
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 need to submit form by button which is out of scope of the form by JavaSript.
<form>
<input name="data" type="text">
<input type="submit" name="send" id="send-button" style="display: none">
</form>
<button onclick="$('#send-button').click() || .submit()"></button>
The button #send-button is visible and I need to send whole form to server. It means I receive $data and $send (both).
Now I am getting just the $data.
Any idea?
You can do with javascript form method
<button onclick="document.forms[0].submit()"></button>
if you have multiple forms in the document then set id to the form
<form id="form1">
<input name="data" type="text">
<input type="submit" name="send" id="send-button" style="display: none">
</form>
<button onclick="document.getElementById("form1").submit()"></button>
Give the form a name:
<form name="myform">
Submit
</form>
Submit form function:
<script type="text/javascript">
function submitform()
{
document.myform.submit();
}
</script>
Invoke submission:
document.forms["myform"].submit();
you should add value attribute on submit button like that
<input type="submit" name="send" value="xyz" id="send-button" style="display: none">
i think you will received both values