Form that changes class attribute to active - javascript

I have a web page associated with 3 <li> and each has its own onclick() function. By default, one of them is active. Now I have a form, if this form is submitted I want it to take me to one of the other two <li>.
In other words, I want it to remove the active class from the default one, and add it to one of the other two. How can I do that?
HTML:
<div class="container">
<ul class="editor-nav">
<li id="content-w" class="en-nav active">1. Add Status</li>
<li id="setting-w" name="setting-w" class="en-nav">2. Upload Image</li>
<li id="cover-w" class="en-nav">3. Upload Video</li>
</ul>
</div>
<div class="be-large-post-align" id="firstdiv">
<form class="" action="work.php" method="post">
<textarea id="special" name="post" rows="10" cols="80" placeholder="What's on your mind, <?=$_SESSION['name']?>?"></textarea>
<input type="submit" name="submitMe" class="buttons-navbar btn btn-primary" value="POST" /></form>
</div>
<div class="be-large-post-align" id="seconddiv" style="display:none;">
<form class="" action="work.php" method="post" enctype="multipart/form-data">
<!-- <label class="btn btn-primary" for="my-file-selector">
<input id="my-file-selector" type="file" multiple="multiple" style="display:none"
onchange="$('#upload-file-info').html(this.files[0].name)">
Button Text Here
</label>
<span class='label label-info' id="upload-file-info"></span> -->
Select Image Files to Upload:
<input type="file" name="files[]" multiple>
<textarea id="special" name="post2" rows="10" cols="80" placeholder="What's on your mind, <?=$_SESSION['name']?>?"></textarea>
<input type="submit" name="submitIt" class="buttons-navbar btn btn-primary" value="Upload" />
</form>
</div>
<div class="be-large-post-align" id="thirddiv" style="display:none;">this is working! </div>
JQuery:
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" > </script>
<script src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"> </script>
<script type = "text/javascript" >
$("#setting-w").on("click", function() {
$("#firstdiv").fadeOut(1, function() {
$("#seconddiv").fadeIn(1, function() {});
$("#thirddiv").fadeOut(1, function() {});
});
});
$("#content-w").on("click", function() {
$("#seconddiv").fadeOut(0.1, function() {
$("#firstdiv").fadeIn(0.1, function() {});
$("#thirddiv").fadeOut(0.1, function() {});
});
});
$("#cover-w").on("click", function() {
$("#seconddiv").fadeOut(0.1, function() {
$("#firstdiv").fadeOut(0.1, function() {});
$("#thirddiv").fadeIn(0.1, function() {});
});
});
</script>

Use data attribute to fade your div.
$('.editor-nav li').click(function(e) {
$('.editor-nav li').removeClass('active');
var data = $(this).data('myval');
if (data == "2" || data == "3") {
$(this).addClass('active');
var tstDiv = data - 1;
$(this).attr('disabled', true);
$(document).find($('*[data-val="' + data + '"]')).fadeIn();
$(document).find($('*[data-val="' + tstDiv + '"]')).fadeOut();
}
});
.active {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="container">
<ul class="editor-nav">
<li data-myval="1" id="content-w" class="en-nav active">1. Add Status</li>
<li data-myval="2" id="setting-w" name="setting-w" class="en-nav">2. Upload Image</li>
<li data-myval="3" id="cover-w" class="en-nav">3. Upload Video</li>
</ul>
</div>
<div data-val="1" class="be-large-post-align" id="firstdiv">
<form class="" action="work.php" method="post">
<textarea id="special" name="post" rows="10" cols="80" placeholder="What's on your mind, <?=$_SESSION['name']?>?"></textarea>
<input type="submit" name="submitMe" class="buttons-navbar btn btn-primary" value="POST" /></form>
</div>
<div data-val="2" class="be-large-post-align" id="seconddiv" style="display:none;">
<form class="" action="work.php" method="post" enctype="multipart/form-data">
<!-- <label class="btn btn-primary" for="my-file-selector">
<input id="my-file-selector" type="file" multiple="multiple" style="display:none"
onchange="$('#upload-file-info').html(this.files[0].name)">
Button Text Here
</label>
<span class='label label-info' id="upload-file-info"></span> -->
Select Image Files to Upload:
<input type="file" name="files[]" multiple>
<textarea id="special" name="post2" rows="10" cols="80" placeholder="What's on your mind, <?=$_SESSION['name']?>?"></textarea>
<input type="submit" name="submitIt" class="buttons-navbar btn btn-primary" value="Upload" />
</form>
</div>
<div data-val="3" class="be-large-post-align" id="thirddiv" style="display:none;">this is working! </div>
After page submit if your page is reloaded page loose state. So set your value when page submit like:
localStorage.setItem('key', 'your form Number')
Get localStorage when page load like:
var formID = localStorage.getItem('key');
After that check for null before add class:
if (localStorage.getItem("key") != null) {
(".editor-nav ul li").eq(formID ).addClass("active"); // Check this one on page load
}

You can use removeClass() and addClass() if you wish to add/remove any class based on their id.
Example:
$("#setting-w").on("click", function(){
$("#content-w").removeClass('active');
$("#cover-w").removeClass('active');
$("#setting-w").addClass('active');
}

Related

Change checkbox value on click

I have checkbox nested in html elements. I want to target it and manipulates its value when somebody check it. I am trying this
jQuery(document).ready(function() {
jQuery('#my-form .checkbox-value input').click(function() {
jQuery('#my-form .checkbox-value input[value=yes]').prop('checked', jQuery(this).prop('checked'));
jQuery('#my-form .checkbox-value input[value=no]').prop('checked', jQuery(this).prop('checked') === false);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my-form">
<div id="checkbox" class="checkbox-value">
<label class="form-label forms-label-hide" for="checkbox_item">Checkboxes</label>
<ul id="checkbox_item">
<li class="choice-1 depth-1">
<input type="checkbox" id="checkbox_item_1" name="my-checkbox" value="Want to change this value on dom" />
<label for="checkbox_item_1">Yes, let me know when you have new blogs to share.</label>
</li>
</ul>
</div>
<div class="">
<button type="submit">Submit</button>
</div>
</form>
When someone click on label or checkbox it should changes values to yes if it is checked and no when it is not checked.
You could use this to target .on('change', '#my-form .checkbox-value input', function(){})
$(document).ready(function() {
$(document).on('change', '#my-form .checkbox-value input', function() {
console.log($(this).val())
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<form id="my-form">
<div id="checkbox" class="checkbox-value">
<label class="form-label forms-label-hide" for="checkbox_item">Checkboxes</label>
<ul id="checkbox_item">
<li class="choice-1 depth-1">
<input type="checkbox" id="checkbox_item_1" name="my-checkbox" value="Want to change this value on dom" />
<label for="checkbox_item_1">Yes, let me know when you have new blogs to share.</label>
</li>
</ul>
</div>
<div class="">
<button type="submit">Submit</button>
</div>
</form>
And use if($(this).is(':checked')) to check if the box is checked
This should do it.
It's working with click event handler also.
$(document).ready(function() {
$('#my-form .checkbox-value input').click(function() {
if ($(this).prop("checked")) {
console.log('yes');
$(this).val('yes');
} else {
console.log('no');
$(this).val('no');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my-form">
<div id="checkbox" class="checkbox-value">
<label class="form-label forms-label-hide" for="checkbox_item">Checkboxes</label>
<ul id="checkbox_item">
<li class="choice-1 depth-1">
<input type="checkbox" id="checkbox_item_1" name="my-checkbox" value="no" />
<label for="checkbox_item_1">Yes, let me know when you have new blogs to share.</label>
</li>
</ul>
</div>
<div class="">
<button type="submit">Submit</button>
</div>
</form>
If what you are trying to do is to pull the first assignment from the input value, it would be more logical to give a special id and process the elements with that id.
I hope the code below will enlighten you.
jQuery(document).ready(function() {
var my_inputs = jQuery('#my-form .checkbox-value input');
jQuery('#my-form .checkbox-value input').click(function() {
//jQuery('#my-form .checkbox-value input[value=yes]').prop('checked', jQuery(this).prop('checked'));
//jQuery('#my-form .checkbox-value input[value=no]').prop('checked', jQuery(this).prop('checked') === false);
$("#status").html(my_inputs.prop('checked') ? "true" : "false")
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my-form">
<div id="checkbox" class="checkbox-value" >
<label class="form-label forms-label-hide" for="checkbox_item">Checkboxes</label>
<ul id="checkbox_item">
<li class="choice-1 depth-1">
<input type="checkbox" id="checkbox_item_1" name="my-checkbox" value="Want to change this value on dom" />
<label for="checkbox_item_1">Yes, let me know when you have new blogs to share.</label>
</li>
</ul>
</div>
<div class="">
<button type="submit">Submit</button>
</div>
</form>
<p>
<span>input checked status : <code id="status"></code></span>
</p>

Appending <li> value to <ul> in jquery dialog box is not working

I have a jQuery dialog box in which a textbox, button and list has been added. I am trying to append the inputted value of textbox into list on the same dialogbox without loading the page.
<a href="#" class="view" >View</a>
<div id="dialogBox" title="details" style="display: none;">
<div id="list" class="ui-popup">
<label for="name">Add name</label><br/>
<input style="width: 50%;" type='text' id="name" value="" >
<input type="submit" class="save" id="save" value="SAVE"/>
<ul id="namelist">
<li>Reena</li>
</ul>
</div>
</div>
var view = function(eventData) {
$("#dialogBox").dialog({resizable: false,
height:'auto',
width:950,
modal: true
}).css("maxHeight", window.innerHeight - 200);
};
$('.view').click(view);
var update = function(e) {
var name = $("#name").val();
$.ajax({
url : "someApi.php",
type: "POST",
data : "function=updatenames&name="+name,
success: function() {
$("#namelist").append('<li>'+name+'</li>');
},
error: function () {
alert( "Could not Update" );
return false;
}
});
};
$('.save').click(update);
I have tried like above, ajax function and all working correctly,but in success function appending list to ul is not working
Please share your suggestion.
#name is in a modal window - to get its value you need to add the modal window name before the input id - try this: var name = $('#dialogBox #name').val():
var view = function() {
$("#dialogBox").dialog({resizable: false,
height:'auto',
width:950,
modal: true
});
};
$('.view').click(view);
var update = function(e) {
var name = $('#dialogBox #name').val();
$("#dialogBox #namelist").append('<li>'+name+'</li>');
};
$('.save').click(update);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<a href="#" class="view" >View</a>
<div id="dialogBox" title="details" style="display: none;">
<div id="list" class="ui-popup">
<label for="name">Add name</label><br/>
<input style="width: 50%;" type='text' id="name" value="" >
<input type="submit" class="save" id="save" value="SAVE"/>
<ul id="namelist">
<li>reena</li>
</ul>
</div>
</div>
Check this snippet... its working. let me know
var view = function() {
$("#dialogBox").dialog({resizable: false,
height:'auto',
width:950,
modal: true
});
};
$('.view').click(view);
var update = function(e) {
var name ='Nithya';
$("#namelist").append('<li>'+name+'</li>');
};
$('.save').click(update);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<a href="#" class="view" >View</a>
<div id="dialogBox" title="details" style="display: none;">
<div id="list" class="ui-popup">
<label for="name">Add name</label><br/>
<input style="width: 50%;" type='text' id="name" value="" >
<input type="submit" class="save" id="save" value="SAVE"/>
<ul id="namelist">
<li>reena</li>
</ul>
</div>
</div>
$("#namelist").append("<li>' + name + '</li>"); Change single quote to double quote.. This will work.. let me know

Jquery submit form having issue on click event

I am creating search form, when user click search icon, i need to show textbox, once i entered content, and again clicked same search icon, it needs to display search results. Below is the code i used.
HTML & Javascript
<div class="search_right">
<div class="search-top-container">
<div class="search-top"></div>
<div class="search-form">
<div class="search-form-border"></div>
<div class="search-top-title"><span class="icon"></span>Search</div>
<form id="search_mini_form" action="%%GLOBAL_ShopPath%%/search.php" method="get">
<div class="form-search">
<input id="search" type="text" name="q" value="" class="input-text" style="display:none;" autocomplete="off">
<button type="submit" title="Search" id="but" onclick="tog_input();" >
</button>
</div>
<div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
<script type="text/javascript">
function tog_input(){
if(jQuery("#search").is(':visible'))
{
if(jQuery("#search").val()!=''){ jQuery("#search_mini_form").submit();
}else{
jQuery("#search").animate({ width: 'hide' });
}
}
else
{
jQuery("#search").animate({ width: 'show' });
}
}
</script>
</form>
</div>
<div class="clear"></div>
</div>
Right now issue is, when i clicked search icon, it showing search page instead of textbox, any assistance would be appreciated.
Change the inline code from:
<button type="submit" title="Search" id="but" onclick="tog_input();">Submit</button>
To:
<button type="submit" title="Search" id="but" onclick="tog_input(this, event);">Submit</button>
Avoid this line:
jQuery("#search_mini_form").submit();
Prevent the form submission only when needed.
So:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="search_right">
<div class="search-top-container">
<div class="search-top"></div>
<div class="search-form">
<div class="search-form-border"></div>
<div class="search-top-title"><span class="icon"></span>Search</div>
<form id="search_mini_form" action="%%GLOBAL_ShopPath%%/search.php" method="get">
<div class="form-search">
<input id="search" type="text" name="q" value="" class="input-text" style="display:none;"
autocomplete="off">
<button type="submit" title="Search" id="but" onclick="tog_input(this, event);">Submit
</button>
</div>
<div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
<script type="text/javascript">
function tog_input(obj, e) {
if (jQuery("#search").is(':visible')) {
if (jQuery("#search").val() == '') {
jQuery("#search").animate({width: 'hide'});
e.preventDefault();
}
}
else {
e.preventDefault();
jQuery("#search").animate({width: 'show'});
}
}
</script>
</form>
</div>
<div class="clear"></div>
</div>
</div>
I'd suggest that it is because your button type is submit. If you change it to button type = "button" then it should work, although you may need another button to submit your form.
You need to prevent default behaviour of submit button else it will end up in action page. To achieve it you need to do as -
function tog_input(e){
e.preventDefault();// prevents default action
... other code
}

One form two actions depending on which button?

I have two files, preview.php & save.php
<form id="create-template" class="form" action="" method="post">
<p class="_50">
<label for="t-name">Template name</label>
<input type="text" name="t-name" class="required"/>
</p>
<p class="_100">
<label for="t-html">Template HTML</label>
<textarea id="t-html" name="t-html" class="required" rows="10" cols="40"></textarea>
</p>
<div class="clear"></div>
<div class="block-actions">
<ul class="actions-left">
<li><a class="button red" id="reset-template" href="javascript:void(0);">Clear</a></li>
</ul>
<ul class="actions-right">
<li><div id="preview"><input type="submit" class="button" value="Preview template" onclick="return false;"></div></li>
<li><input type="submit" class="button" value="Create template"></li>
</ul>
</div>
</form>
Current JS:
$("#preview").click(function() {
$.post('preview.php', {body:$('#t-html').val().replace(/\n/g,'<br />'), function (result) {
//maybe use .ajax instead?
//open preview.php in new window
});
});
How can I use the same form but have two different actions depending on what button one presses?
Preview template => preview.php => opens to a new tab
Create template => save.php => posts on same page
You can have a click event handler for both the button and attach simultaneous ajax call with each other.
and you can use javascript to open window in new tab.
window.open(<url>)
Try setting "target" attribute of the form based on what button was clicked.
Change your form to the following:
<form id="create-template" class="form" action="" method="post" target="_blank">
<p class="_50">
<label for="t-name">Template name</label>
<input type="text" name="t-name" class="required"/>
</p>
<p class="_100">
<label for="t-html">Template HTML</label>
<textarea id="t-html" name="t-html" class="required" rows="10" cols="40"></textarea>
</p>
<div class="clear"></div>
<div class="block-actions">
<ul class="actions-left">
<li><a class="button red" id="reset-template" href="javascript:void(0);">Clear</a></li>
</ul>
<ul class="actions-right">
<li><input id="preview-form" type="submit" class="button" value="Preview template" /></li>
<li><input type="submit" id="submit-form" class="button" value="Create template" /></li>
</ul>
</div>
</form>​
And add this JavaScript:
$('#preview-form').click(function(ev) {
$('#create-template').attr('action', 'preview.php');
$('#create-template').attr('target', '_blank');
});
$('#submit-form').click(function(ev) {
$('#create-template').attr('action', 'submit.php');
$('#create-template').attr('target', '');
});
​
I haven't tested this across all browsers, so you might want to do that.

JQuery basic form post

I am validating a form but when the validation is not passed it still posts the form. How do I prevent the this?
<form action="/Account/Registration" method="get">
<fieldset id="enterCode">
<ul>
<li class="inputBlock">
<input type="text" id="Code" name="Code" value="">
</li>
</ul>
</fieldset>
<div class="submitBlock">
<input type="submit" value="Send" class="button" onclick="validate();" />
</div>
</form>
<script type="text/javascript">
function validate() {
var val = $('#Code').val();
if (val == "") {
alert("Please enter code");
}
return false;
}
</script>
I'd do it like this:
<form action="/Account/Registration" method="get" id="registrationForm">
<fieldset id="enterCode">
<ul>
<li class="inputBlock">
<input type="text" id="Code" name="Code" value="">
</li>
</ul>
</fieldset>
<div class="submitBlock">
<input type="submit" value="Send" class="button" id="submitButton" />
</div>
</form>
<script type="text/javascript">
$(function(){
$('#submitButton').click(function(e){
e.preventDefault();
var val = $('#Code').val();
if (val.length > 0) {
$('#registrationForm').submit();
}
});
});
</script>
You need to stop the submit event from firing, or when it is fired, halt it by returning false on that event rather than the button's click event. You could change how your submit button behaves like in bunting's example, or bind a submit event to the form itself.
<form action="/Account/Registration" method="get" id="registrationForm">
<fieldset id="enterCode">
<ul>
<li class="inputBlock">
<input type="text" id="Code" name="Code" value="">
</li>
</ul>
</fieldset>
<div class="submitBlock">
<input type="submit" value="Send" class="button" />
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('#registrationForm').submit(function () {
var val = $('#Code').val();
if (val == "") {
alert("Please enter code");
return false;
}
return true;
});
});
</script>

Categories