Hi i'm having a problem with posting from the input "searchtag" into "hash:'searchTag'" inside the javascript array. Please help me out! I'm very new to Javascript.
<form action="" method="post">
<input type="text" name="searchTag" placeholder="Search">
<input class="submit" name="Search" type="submit">
<div class="instagram"></div>
<script type="text/javascript">
$(".instagram").instagram({
hash:'searchTag',
clientId: 'My-clientId',
image_size:'tumbnail'
});
</script>
You need to collect the value from searchTag, which I assume you'll want to do when clicking the search button. For example:
$(document).ready(function() {
$('#SearchButton').click(function () {
var searchTag = $('#SearchTagInput').val();
$(".instagram").instagram({
hash: searchTag,
clientId: 'My-clientId',
image_size:'tumbnail'
});
});
});
The above example requires that you add the corresponding ids, SearchButton and SearchTagInput, to the input fields.
See this fiddle for an example.
Related
My code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form>
<button id="test" value="123" name="test" >ok</button>
</form>
<script>
$(document).ready(function () {
$("#test").click(function() {
var combinedData = $("#test").serialize();
$.post(
"element_submit.php",
combinedData
).done(function(data) {
//alert("Successfully submitted!");
$("#result").html(data);
}).fail(function () {
//alert("Error submitting forms!");
})
});
});
</script>
<div id="result" ></div>
The element_submit.php file
<?php
//just to test it should output in the #result div
echo $_POST['test'];
?>
What I am trying to do is submit the with the value="attribute" so the data is serialized and send the post request, it's not like a submit when user insert a value and submit,What I need is to get the value attribute and submit to the php, this code is only for To simplify and illustrate what I am trying to do, because in this page I have the following buttons with ids #follow #unfollow so I need a way to get the button value to make the user follow and unfollow.
you need to serialize the form - not the elements within it .You can also have the triggering button outside the form which will prevent hte form from submitting on the button click.
<form id="testForm">
<input type="hidden" name="testInput" value="123"/>
</form>
<button name="test" id="testButton">submit</button>
...
<script>
$(document).ready(function () {
$("#testButton").click(function() {
var combinedData = $("#testForm").serialize();...
$(document).ready(function () {
$("#testButton").click(function() {
var combinedData = $("#testForm").serialize();
console.log(combinedData);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="testForm">
<input type="hidden" value="123" name="testinput"/>
</form>
<button id="testButton">Click</button>
Straight JS might help you out. Include a function that sends the id and get the value of that id. Then just send a regular post of the value without serialize... easier.
<script>
function fetchButtonValue(theId){
var p = document.getElementById(theId).value;
alert (p);
}
</script>
<button id="myFormBtn" value ="woo"
onclick="fetchButtonValue(this.id)">My Button</button>
this works...
You could also put a class on the button let's say class="followBTN" then on a click you could just snag the value by $(this).val() I'd use this method if I had more than one button per page.
I have an HTML page in Django where I send my input from the form to javascript and which will inturn will send it to the views, get processed and the output will come to javascript. Now I want to display this output back in the same html page in one particular DIV.
My form is
<form id="form_id" method="POST" action="/your_Value/">
{% csrf_token %}
<label for="your_Value">Sentence: </label>
<input id="your_Value" type="text" name="your_Value">
<input type="submit" value="Compare">
</form>
<div class="details"></div>
My javascript is
<script type="text/javascript">
$(function() {
$(".details").hide();
$("#form_id").submit(function(event) {
event.preventDefault();
var friendForm = $(this);
var posting = $.post(friendForm.attr('action'), friendForm.serialize());
posting.done(function(data) {
$(".details").show();
});
posting.fail(function(data) {
alert("Fail")
});
});
});
</script>
Where the values from posting.done() should go to 'details' div.
Kindly let me know how to send the values from javascript to HTML DIV and display it.
Thanks in advance!!
include a pointer for the output.
posting.done(function(data) {
$(".details").show();
$(".details").html(data);
});
reference:
https://www.w3schools.com/jquery/html_html.asp
I am trying to save an HTML field (for later use in a form) from a JS script.
This is the code:
Form
<form class="new_client" id="new_client" action="/clients" accept-charset="UTF-8" method="post">
<div class="form-group">
<input class="form-input" type="hidden" name="client[city]" id="client_city">
</div>
<div class="form-group">
<input class="form-input" type="hidden" name="client[address]" id="client_address">
</div>
<div id="locationField">
<input autocomplete="off" class="autocomplete" placeholder="Enter your address" type="text">
</div>
<div class="text-center">
<button class="btn button-general ">Save</button>
</div>
</form>
And the javascript:
function configureGeoAutocomplete(context) {
if( context === undefined ) {
context = $('body');
}
var element = context.find('.autocomplete')
//It doesn't really matter what this line does, it's from Google Places API
var autocomplete = new google.maps.places.Autocomplete(
element[0], {types: ['geocode']});
autocomplete.addListener('place_changed', fillInAddress)
}
function fillInAddress() {
var client_address = autocomplete.getPlace().formatted_address;
document.getElementById("client_address").value = client_address;
}
The javascript is queried when loading the modal in which the form is
jQuery(function() {
$('div.modal').on('loaded.bs.modal', function(e) {
configureGeoAutocomplete(context);
}
}
I wanna save that client_address to the text field so when the form is submitted I can have that information.
Sounds like an excellent candidate for cookies if you are allowed to use them: http://www.w3schools.com/js/js_cookies.asp. Another idea is to pass it along in a Query String. It isn't PII or anything like that. Try an event code on that input. I do not like to hit "enter"!
onkeypress="if (event.keycode==13) { // do something }"
Handle the form submit event:
$(function() {
$("#new_client").submit(function(e) {
e.preventDefault();
// This is your value stored in the field.
$("#client_address").val();
});
})
Apparently, for some reason, if I searched the element by ID it was not saving the information on the field. If I istead search by class:
function fillInAddress() {
var place = autocomplete.getPlace();
$(".client-address").val(place.formatted_address);
}
It works as intended.
I want to replace the following HTML code
<form action="diagrafi.php" method="post" name="users" id="users" onsubmit="return
check()">
<input type="submit" name="submit_button" id="submit_button" value="go" />
</form>
with this HTML code
<form action="" method="post" name="users" id="users"> </form>
and this Jquery code
$("#ok").click(function () {
$("#users").attr("action", "diagrafi.php");
$("#users").submit();
});
where "ok" is a button (not submit) outside of form "users" which will replace submit_button. The above code works; however, I cannot find how to embed function check()...
Please, do not ask why I want this way and do not suggest other solutions. I want exactly what am I asking.
Thank you very much
$("#ok").click(function () {
if(check()){
$("#users").attr("action", "diagrafi.php");
$("#users").submit();
}
});
But why do you want it this way? Sorry, couldn't resist
you can also chain the 2 methods, so as not to repeat yourself
$("#ok").click(function () {
if(check()){
$("#users").attr("action", "diagrafi.php").submit();
}
});
If you really want on this way...this will surely work.
$("#ok").click(function () {
$("#users").attr("action", "diagrafi.php");
$("#users").attr("onsubmit", "return check();");
$("#users").submit();
});
This should work:
$("#users").submit(function() {
if(!check()){
return false;
}
});
Awesome people of Stack Overflow,
I'm trying to use Happy.js for validating my form, and it works fine. However, since my form is long and the submit button is at the very bottom of the form, I need a way to let the user know that there a errors on the form.
I'd love some help adding this functionality. Maybe unhiding a div right below the submit button or something like that.
Here's the HTML:
<form name="data" action="#" method="POST" id="JumpstartForm">
<label for="f1" class="control-label">First Name<span class='required'>*</span> </label>
<input title="First Name" type="text" id="f1" name="First_Name" class="input-large" value="" size="25" />
<div class="centered"><input type="submit" id="submitSignup" value="Submit" class="green-button" /></div>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://www.democracy-nc.org/jumpstart/js/happy.js"></script>
<script src="http://www.democracy-nc.org/jumpstart/js/happy.methods.js"></script>
Here's the js bit:
$(document).ready(function () {
$('#JumpstartForm').isHappy({
fields: {
// reference the field you're talking about, probably by `id`
// but you could certainly do $('[name=name]') as well.
'#f1': {
required: true,
message: 'Please enter your first name'
},
}
});
});
I created a JSfiddle: http://jsfiddle.net/gcasalett/E9Lq7/1/
Live page: http://democracy-nc.org/jumpstart/index.html
First post, so please be kind. Thanks!
What you need it's to use the callback that the plugin provide, called unHappy that it's called when the validation fails for any reason.
For other options you can check the Happy.js mainpage http://happyjs.com/
$(document).ready(function () {
$('#JumpstartForm').isHappy({
fields: {
// reference the field you're talking about, probably by `id`
// but you could certainly do $('[name=name]') as well.
'#f1': {
required: true,
message: 'Please enter your first name'
},
unHappy: function () {
//here you can show a div, or scroll to the last error.
},
}
});
});
Updated jsFiddle : http://jsfiddle.net/E9Lq7/4/