Hi I have a Laravel Blade template where I built a search function and I want to load a div after the page has reloaded, when I submit the form. Otherwise when the page loads with the results, the results don't show. I want the Javascript to execute while on the page (hide the div), and then when the page refreshes then the div must become visible.
My HTML form is:
<form action="" class="search-form" method="GET" onsubmit="showDiv();">
<input type="text" name="location" placeholder="Search" required>
<button class="search-btn" type="submit"><i class="flaticon-026-search"></i></button>
</form>
And the div I want to show after page load is:
<div id="hideDiv" style="display:none">
#foreach($locations as $location)
#foreach($location->landmark as $landmark)
<p>{{$landmark->name}}</p>
#endforeach
#endforeach
</div>
My JavaScript:
function showDiv() {
var div = document.getElementById("hideDiv");
if (div.style.display == 'none') {
div.style.display = '';
}
else {
div.style.display = 'block';
}
}
Write window.onload = showDiv; before your function
If you have only one submit button on same page than you can use like bellow (not tested, just try to suggest)
#if (Request::isMethod('post'))
<div id="hideDiv" style="display:none">
#foreach($locations as $location)
#foreach($location->landmark as $landmark)
<p>{{$landmark->name}}</p>
#endforeach
#endforeach
</div>
#endif
PS: try to identify ispostback event in Page or Javascript which one is preferable.
Related
So I have some buttons that will toggle some input text areas where I can send a message, how do I make it so when I click a button from a specific list, it only activates the button in that specific list.
I tried so many other things but I really don't know how to get this over it.
I'm kinda new to JS, I mainly do Java.
function showFeedback (list) {
var lines = "";
var counter = 0;
list.forEach(function (obiect) {
$(document).ready(function(){
$("button").click(function(){
$("#div"+ obiect.idfeedback +"").fadeToggle("slow");
});
});
counter++;
var style = "";
if(obiect.feedbackType == 1){
style = "style=\"background: green;\"";
} else if(obiect.feedbackType == 0){
style = "style=\"background: red;\"";
}
lines += `<div class="page-block"><div style="text-align: right">X</div><div class="cv-block" ${style} >
<div id="parent_div_1">
Name: ${obiect.firstn}
${obiect.lastn}
</div>
<div id="parent_div_2" style="float: right">
Date: ${obiect.date}
</div>
<div class="message_div"><p>${obiect.message}</p></div>
</div>
<button>Contact</button>
<div id="div`+ obiect.idfeedback +`" style="display: none">
<form action="contact" method="post">
<textarea name="message" id="umessage" cols="30" rows="10" maxlength="450" placeholder="Type your message here..." style="height:115px;width: 620px"></textarea>
<input type="hidden" name="email" id="umail" value="`+obiect.email+`">
<input type="hidden" name="action" value="feedback">
<div><input type="submit" value="Send Email"></div>
</form>
</div>
</div>`;
}); if(counter==0){
lines+= `<div class="page-block">No feedbacks to review.</div>`;
}
$("#obiect").html(lines);}
Get rid of $(document).ready, it is used to make sure the markup has been loaded before assigning events. In your scenario, markup is being generated dynamically, plus document.ready inside a loop does not make sense.
The simplest way to fix this code is to move the $('button') outside the loop. After the loop, do the following
$('button').click(function(){
$(this).next().fadeToggle("slow");
})
What this code does is add a handler on the click event of every button element, when the button's clicked, it finds the element which is placed next to the button element, which in your case is the required div element, and show that.
What i requeire is very very simple, but im quite stuck, im trying to modify an old html form and spice up with some javascript or react. All i want to do here is Say for example the original form (<form>) is
Username:
Password:
And i would like to add a button, and on click it changes the form to
Login Key:
Hiding both Username and Password fields. bascially replace them with the Login Key Form. Any answers are very well aprecciated. Thanks.
You can use jQuery hide and show to accomplish what you're wanting.
$("#thisIsYourBtnID").click(function() {
$("#div").hide(); //this is your div that has username and password inputs in it
$("#div2").show(); //this is your new div showing login key form
});
I don't know a lot about javascript, but maybe you can use PHP to do this writing something like
<?php
if (isset($_POST['buttonNewForm']))
{
echo "......your new form.......";
echo "<form action=page.php method=post>
<button name='buttonOldForm'>Button</button>
</form>"
}
else
{
echo "......your old form.......";
echo "<form action=page.php method=post>
<button name='buttonNewForm'>Button</button>
</form>"
}
?>
The file must be page.php
I didn't check the code, but it should work as you want showing at the first time your old form.
I made a quite simple javascript function, is it what you were trying to do ?
<html>
<body>
<form>
<div id="divNo1">
<label>Username : </label>
<input type="text" />
<br />
<label>Password : </label>
<input type="text" />
</div>
<div id="divNo2" style="display:none">
<label>Login Key : </label>
<input type="text" />
</div>
</form>
<button onclick="changeDisplay()">Button</button>
</body>
<script type="text/javascript">
function changeDisplay() {
var div1 = document.getElementById("divNo1");
var div2 = document.getElementById("divNo2");
if (div1.style.display == 'none') {
div1.style.display = '';
div2.style.display = 'none';
} else {
div1.style.display = 'none';
div2.style.display = '';
}
}
</script>
</html>
I am able to open an external page in the DOM.
But I am trying to fetch all the child tags from a div and save it to the javascript variable and then print the variable in the input value
I need to save in the input all html content of the div and the child tags:
<form method="POST" action="test.php">
<input id="content" type="text" name="content" value="<script>document.write(content)</script>">
<input type="submit" value="submit">
</form>
<div id="mydiv"></div>// here load external page
<script>
$(document).ready(function(){
$("#mydiv").load("index.html"); // load external page in Dom
var content = $(this).closest('#div1');
/* find all parents tags e content of div id="div1"
(This is inside the external index.html file) */
});
</script>
I'm not getting it, I do not know where I'm going wrong in the code above
Thanks
//try like below
<form method="POST" action="test.php">
<input id="content" type="text" name="content" value="">
<input type="submit" value="submit">
</form>
<div id="mydiv"></div>// here load external page
<script>
$(document).ready(function(){
$("#mydiv").load("index.html");
var loadFile = load("index.html");
var content = $(loadFile).find('#div1').html();
$('#content').val(content);
});
</script>
you need to use callback function to view/explore the loaded contents using $.fn.load
$(document).ready(function(){
$("#mydiv").load("index.html", function(data){
// assuming #div1 is inside "index.html"
var content = $(data).find("#div1");
});
});
So I have a joomla! page that is partly generated by functions based on the user. So parts of the forms that I need to use the 'masked input plug-in' on are loaded via functions on page load. The issue I have is, on the fields that are standard HTML on the page, the plugin works fine but on the fields that are generated by my php functions, the fields lock up and don't allow any input. My guess is that it's an issue with the php functions pulling in the forms after the jquery plugin has fired but I tried placing the .mask call in a $(document).ready and no luck.
here's a snippet...
jQuery(function($){
$("#subNumber").mask("(999) 999-9999");
$(".numFix").mask("(999) 999-9999");
});
THIS WORKS -->
<form name = "subAct" id = "subAct" method="post">
<div class="col1"><input class="subaccountname" name="subName" type="text" id="subName"/></div>
<div class="col2"><input class="subaccountnumber" name="subNumber" type="text" id = "subNumber"/></div>
<div class="col3">Add a New Account</div>
</form>
THIS ONE DOESN'T -->
this function -->
<?php dashboardFunction::displaySubAccount($uid) ?>
loads in this form -->
<form name = "add_reg_num_<?php echo $pin ?>" id = "add_reg_num_<?php echo $pin ?>" method="post">
<div class="regisnumberadd"><input name="regNum" type="text" class = "numFix" />
<input name="regNumPin" type="hidden" value = "<?php echo $pin ?>"/>
</div>
<div class="clear"></div>
<div class="addregisnum">Add Number</div>
</form>
All you need to do is attach an event binding using jQuery .on method and any dynamically created item will be wired to that event.
I answered a similar question here https://stackoverflow.com/a/10203361/12442
I think since the content loads dynamicly you need to use .live
I don't know how to use .live with .mask.
There is also an alternative. You can put .mask code in callback function of dynamic loading.
$("#dynamicContent").load("loadFromMe.php",function(){
$("#subNumber").mask("(999) 999-9999");
$(".numFix").mask("(999) 999-9999");
});
Dynamic Jquery Input mask Solution (swicth masking programatically)
$(document).ready(function () {
$("[data-mask]").inputmask();
// Do something exciting
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
// re-bind your jQuery events here
$("[data-mask]").inputmask();
});
});
if (is_loose == "True") {
$("#it_qty").removeAttr("data-inputmask","'mask': '9{0,20}'");
$("#it_qty").attr("data-inputmask", "'mask': '9{0,20}.9{0,2}'");
$("[data-mask]").inputmask();
} else {
$("#it_qty").removeAttr("data-inputmask", "'mask': '9{0,20}.9{0,2}'");
$("#it_qty").attr("data-inputmask", "'mask': '9{0,20}'");
$("[data-mask]").inputmask();
}
I have a HTML form. On submission the form POST values to page.php. The view then navigates to page.php and displays a success message. I want to prevent the user from navigating to page.php, and display <div id="first">
In other words, what i want to do is a reset. (Displaying <div id="first"> after user clicks the Done button)
<form action="page.php" method="post">
<div id="first" class="m span3">
THIS DIV CONTAINS FEW TEXT BOXES
</div>
<div id="second" class="m2 span3">
THIS DIV CONTAINS FEW TEXT BOXES AND COMBOBOXES
</div>
<div id="last" class="m3 span3">
THIS DIV CONTAINS FEW TEXT BOXES
</div>
</form>
Once the user clicks the DOne button the following function gets fired
function onComplete() {
$('form').submit();
alert("clicked");
}
if you want to post data to main.php without redirecting the page I recommend you to use Ajax. this is a simple code but can give you an idea to build your application :
<html>
<head>
<script type="javascript" src="jquery.js"></script>
<script type="text/javascript">
function complete() {
$.ajax({
type : "post",
data : "text="+$("#"+textbox_1).value,
url : "page.php",
success : function(response){
alert("Done!");
}
});
}
</script>
</head>
<body>
<form action="page.php" method="post">
<input type="text" id="textbox_1">
<button onclick="complete()">submit</button>
</form>
</body>
</html>
and use $_POST['text'] in page.php
$('form').submit(function (e) {
e.preventDefault();
$('first').show();
}
Try something like this.
you can ad a value to the url and use that one value to call the div.
eg:
<form action="page.php?action=formSent" method="post">
// form data
</form>
then use some php to get the action call and use it to show the div:
<?php
if(isset($_GET['action']) && $_GET['action'] == "formSent" ){
<div id="first">
div content
</div>
}
?>
you can place the php code above of the form