jquery ddslick not working - javascript

Okay, this is continuing from my prior asked question:
iFrame with Variable URL in PHP Variable
I even have it set to automatically turn on when the page is ready and that still doesnt work.
Now I am using ddslick so I can show an icon next to each drop down in a form.
This is what Im doing:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.ddslick.min.js"></script>
Then in the dropdown:
<select form="form1" id="MyMenu">
<option value="0" data-imagesrc="http://example.com/entry/value0.png" data-description="Description 0" >Nothing</option>
<option value="1" data-imagesrc="http://example.com/entry/value1.png" data-description="Description 1" >Value 1</option>
<option value="2" data-imagesrc="http://example.com/entry/value2.png" data-description="Description 2" >Value 2</option>
</select>
The scripts:
<script>
//Make it slick!
$('#make-it-slick').on('click', function(){
$('#MyMenu').ddslick();
});
//Restore Original
$('#restore').on('click', function(){
$('#MyMenu').ddslick('destroy');
});
$(document).ready(function(){
$('#MyMenu').ddslick(); // Turn on Slickness
});
</script>
Lastly the form
<form name="form1" id="form1">
<input type="submit" name="submit" id="submit" value="Submit Form">
<button id="make-it-slick"> Make it slick!</button>
<button id="restore"> Restore to Original</button>
</form>

Please replace the code you have written in script tag with below code
<script type="text/javascript">
//Make it slick!
$(document).ready(function(){
$('#MyMenu').ddslick(); // Turn on Slickness
$('#make-it-slick').click(function(){
$('#MyMenu').ddslick();
return false; //do not propogate click
});
$('#restore').click(function(){
$('#MyMenu').ddslick('destroy');
return false; //do not propogate click
});
});
</script>
With your code, when button is clicked, that click is followed and form is submitted. button tag in form submits the form. So now what we need to do here is when button is clicked, form should not get submit but it should only execute the javascript code. We do this by returning false in click method.
Hope this helps :)

Related

How to change the content of a page with javascript based on select input?

Let's say I have a webpage like this:
<div style="margin:auto;text-align:center;padding-top:10px;">
<form action="" method="POST">
<p style="text-align:center;">
<select>
<option value="blogs">blogs.php</option>
<option value="portfolio">portfolio.php</option>
<option value="contact">contact.php</option>
<option value="home">home.php</option>
</select>
</p>
<p style="text-align:center;">
<input type="submit" name="submit" value="Submit"/>
</p>
</form>
</div>
<div class="pagetitle">
<h5>Option Value (for example blogs)</h5>
</div>
As you can see, a user can choose from 4 options in the select menu. I want to know ,is there any way to change the content of this div => <div class="pagetitle"> with javascript onsubmit ? For example if a user choosed blogs.php ,the h5 tag will change to <h5>blogs</h5> & if he choosed portfolio.php ,it'll be changed to <h5>portfolio</h5> . I really appreciate if you know how to do this ... thanks in advance!
You'll need to start by adding a javascript function to handle the event.
<script>
function changedSelect(x)
{
document.getElementById('pageTitleDiv').innerHTML = "<h5>"+x+"</h5>";
}
</script>
And then you'll need to trigger the event when the "select" box is changed.
<select onchange="changedSelect(this.value)">
Finally, I would give the div an "ID" so that it is specifically altered.
<div class="pagetitle" id="pageTitleDiv">
You need to bind a jquery .change event to the select element and have it's selected value populated as the text of h5 tag
<script>
$(document).ready(function(){
$('select').change(function()
{
$('h5').text($(this).val());
}).change(); // this is optional - it basically invokes the change event as soon as the function is registered.
});
</script>
Example : https://jsfiddle.net/DinoMyte/6x80vabm/4/
Using vanilla javascript, I added an id to the select element and used javascript to get the value of the select option, then I updated the element on the DOM.
<div style="margin:auto;text-align:center;padding-top:10px;">
<form action="" method="POST">
<p style="text-align:center;">
<select id="myselect">
<option value="blogs">blogs.php</option>
<option value="portfolio">portfolio.php</option>
<option value="contact">contact.php</option>
<option value="home">home.php</option>
</select>
</p>
<p style="text-align:center;">
<input type="submit" name="submit" onclick="myFunction()" value="Submit"/>
</p>
</form>
</div>
<div class="pagetitle">
<h5>Option Value (for example blogs)</h5>
</div>
<script>
function myFunction() {
var x = document.getElementById("myselect").selectedIndex;
var _value = document.getElementsByTagName("option")[x].value;
document.getElementsByTagName('h5')[0].innerText = _value
}
</script>
Note: This can be achieved in several ways using vanilla JS or libraries, but I think this answers your question.

How to refresh page each time you press submit button?

I'm new to Javascript and HTML.
I have the following form in HTML:
<div id="form-select">
<form id="date_form" onsubmit="return myFunction();">
<datalist id="dates">
<option value="February 7">February 7</option>
<option value="February 14">February 14</option>
<option value="February 21">February 21</option>
<option value="February 28">February 28</option>
</datalist>
<input type="text" class="input" name="data" id="date" value="" list="dates" placeholder="pick a date"><br>
<input type="submit">
</form>
</div>
Here's the javascript in a file called script.js. The js file is linked in the header as <script type="text/javascript" src="script.js" />:
function myFunction(){
var input = document.getElementById("date").value;
if(input==="February 7"){
document.getElementById('w1').innerHTML = document.getElementById('w1').innerHTML + "<h2> HEADING </h2>";
}
return false;
};
When I fill out the form and hit submit, the javascript correctly executes the function and adds "HEADING." However, when I press submit again, it adds "HEADING" a second time under the first instance of it.
How do I make it so that the page "refreshes" each time submit is pressed?
Thanks!
You can Use
window.location.reload();
In your Submit event code..
use jQuery, bind('submit', function(e){ e.preventDefault; ....; })
$('#date_form').submit(function(e){
e.preventDefault();
var input = document.getElementById("date").value;
if(input==="February 7"){
document.getElementById('w1').innerHTML = "<h2> HEADING </h2>";
}
return false;
});
Found another way around the issue. I added the statement:
document.getElementById('week').innerHTML = "";
at the beginning of each call of the function. That way, every time the user clicks submit, the div is emptied out before it is repopulated.

How to submit clone of jQuery form with current data?

I need to dynamically create and submit HTML form.
I join many forms into one AJAX request so I clone them and send by jQuery. Code in the link shows the not working part. The problem is that jQuery is sending original HTML code instead of generated/user changes code.
What do I wrong?
http://ajax.dev.brown.sk/test1.html
Whole example:
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
// copy inputs and take it to form element
$clone = $(this).clone(true,true);
// display the code to below
$("pre:first").text($clone[0].outerHTML);
// ajax form submit
$.post("/post.php", $clone.serialize(), function(data){
// data contains output of <?php print_r($_POST) ?>
$("pre:last").text(data);
});
return false;
});
});
</script>
</head>
<body>
<form>
<select name="select">
<option value="a">aaa</option>
<option value="b" selected="selected">bbb</option>
<option value="c">ccc</option>
</select>
<input type="submit" />
</form>
<hr />
<pre></pre>
<hr />
<pre></pre>
</body>
</html>
EDIT:
I think the problem is with serialization of cloned form. Check this example:
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
// copy inputs and take it to form element
$clone = $(this).clone();
// display the serialized values below
$("pre").text($clone.serialize());
return false;
});
});
</script>
</head>
<body>
<form>
<select name="select">
<option value="a">aaa</option>
<option value="b" selected="selected">bbb</option>
<option value="c">ccc</option>
</select>
<input type="submit" />
</form>
<pre></pre>
</body>
</html>
You need to make it response to the delegate since it not with the initial DOM
$(document).ready(function(){
$("form").on('submit',function(){
// copy inputs and take it to form element
$clone = $(this).clone(true,true);
// display the code to below
$("pre:first").append($clone[0].outerHTML);
// ajax form submit
$.post("/post.php", $clone.serialize(), function(data){
$("pre:last").append(data);
});
return false;
});
});
Edit
You are only getting the outerHTML and you need everything
$(document).ready(function(){
$("form").on('submit',function(){
// copy inputs and take it to form element
$clone = $(this).clone(true,true);
// display the code to below
$("pre:first").append($clone);
// ajax form submit
$.post("/post.php", $clone.serialize(), function(data){
$("pre:last").append(data);
});
return false;
});
});
I hope this can help :)

javascript jquery carrying html form POST data

SO I have a form that look similar to
<form action="test.php" id="checksub" method="post">
<div>
<select name="mydropdown">
<option value="buy">buy</option>
<option value="sell">sell</option>
</select>
</div>
autocomplete text input that triggers "checksub"
<input type="submit" id="checksub" name="checksub" style="visibility:hidden">
<input type="submit" id="newsbutton" name="newsbutton">
</form>
<script type="text/javascript">
$('#newbutton').click(function() {
var newaction = "cantfinditems.php";
$("#checksub").prop("action", newaction);
$('#checksub').submit();
});
</script>
Now the submit button is hidden because the autocomplete triggers it anyway, but if the user cant find what they are looking for I want a button that says "cant find what your'e looking for?"
I want this button to have a different action to the form action, ie window.location = cantfinditems.php
but I also want to carry the POST data from the form ie "mydropdown".
Thank you
Ok, so you need a second button, which calls a JavaScript function. In this function, you do a number of things:
Set the action attribute of the form to your alternate action (e.g. cantfinditems.php)
var newaction = "cantfinditems.php";
$("#form_id").prop("action", newaction);
Submit the form
$('#form_id').submit();
So a full example would be:
<script type="text/javascript">
$('#yourbuttonid').click(function() {
var newaction = "cantfinditems.php";
$("#form_id").prop("action", newaction);
$('#form_id').submit();
});
</script>

Form submit through AJAX not working

My form will not submit through AJAX to show the return of the PHP page, 'myscript.php'.
This is the HTML I'm using:
<form name="myform" id="myform" method="post" action="#" enctype="multipart/form-data" accept-charset="utf-8" class="taxonomy-drilldown-dropdowns">
<ul>
<li>
<label>Destination:</label>
<select name="city" id="city">
<option class="level-0" value="atlanta">Atlanta</option>
<option class="level-0" value="miami">Miami</option>
</select>
</li>
</ul>
<input class="srch_btn" type="button" value="{{submit-text}}" />
</form>
Here is the javascript earlier in the page:
jQuery(document).ready(function($) {
$('#city').change(function() {
$(this).parents("form").submit();
});
$('#myform').submit(function() {
$.post(
'myscript.php',
$(this).serialize(),
function(data){
$("#mydiv").html(data)
}
);
return false;
});
});
Here is the myscript.php:
<?php
if ($_POST['city'] == "atlanta") {
echo "Div contents 1";
}
if ($_POST['city'] == "miami") {
echo "Div contents 2";
}
?>
The submit button won't respond at this point or make an attempt to access the 'myscript.php' file. Help is appreciated. Thanks in advance!
It is better to use .closest() rather than .parents() in this case.. As parents selector gets all the ancestors that match the selector.
$('#city').change(function() {
$(this).closest("form").submit();
});
And to stop the Default action use e.preventDefault instead of return false
$('#myform').submit(function(e) {
e.preventDefault();
// Your code here
});
In you HTML code, I think you should change input type=button to input type=submit
<input class="srch_btn" type="submit" value="{{submit-text}}" />
Then when you click that button, the form will be submitted to your php page.
Also, about select change event in your jQuery code, I think you can just try following selector, as you have the name/id attribute available in your HTML.
$('#city').change(function() {
$('#myform').submit();
});
One issue with your code is that it does not actually stop the form from being submitted. return false; does not exactly work in jQuery in the way that you think it does. Instead, to stop the default action, you would have to do something like this.
$('#myform').submit(function(event) {
event.preventDefault();
http://api.jquery.com/event.preventDefault/
On top of that, if you don't want the form submit to take place, and you want to replace it with your own AJAX submition, why are you calling form submit at all in this code? Why not just put the AJAX directly into your change code?
dqhendricks was right - why use form submit when you can just access ajax directly? In the below example, I added a div (#responder) below the form to show the output. Try it -- you'll see that it works perfectly.
You really don't need the button, although I left it there, because the data is sent/received the moment the drop-down is changed. You will see your messages appear in the div I included below the form.
REVISED HTML:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<form name="myform" id="myform" method="post" action="#" enctype="multipart/form-data" accept-charset="utf-8" class="taxonomy-drilldown-dropdowns">
<ul>
<li>
<label>Destination:</label>
<select name="city" id="city">
<option class="level-0" value="atlanta">Atlanta</option>
<option class="level-0" value="miami">Miami</option>
</select>
</li>
</ul>
<input class="srch_btn" type="button" value="Go" />
</form>
<div id="responder"></div>
REVISED JAVASCRIPT/JQUERY:
$(document).ready(function() {
$('#city').change(function() {
//var cty = $('#city').val();
$.ajax({
type: "POST",
url: "myscript.php",
data: "city=" + $(this).val(),
success:function(data){
$('#responder').html(data);
}
});
});
});

Categories