Jak za pomocą jquery przeniść wartość na pole tekstowe

pol90

2018-04-13 09:16

pol902018-04-13 09:16

Rejestracja:ponad 10 lat
Ostatnio:ponad 3 lata
Postów:1181

0

Mam taki problem nie wiem jak prznieść wartość z diva na pole tekstowe typ text próbowałem takich sztuczek

Kopiuj

//alert("dobrze");
var d = $("#name").text();
//alert(d);
$("#pole_formularza").html(d);

i jeszcze

Kopiuj

$("#name").append($("#pole_formularza"));

reinman

2018-04-13 09:52

reinman2018-04-13 09:52

Rejestracja:około 20 lat
Ostatnio:około 17 godzin
Postów:74

1

Chodzi ci o coś takiego?

Kopiuj

<div id="tmstatus">bla bla</div>    
<input id="textBoxId" name="tm_name" >   



<script type="text/javascript">
	var div_val = jQuery("#tmstatus").html();
	jQuery("input[name='tm_name']").val(div_val);
</script>

pol90

2018-04-13 10:18

pol902018-04-13 10:18

Rejestracja:ponad 10 lat
Ostatnio:ponad 3 lata
Postów:1181

0

Udało się tylko musiałem jeszcze coś takiego dorobić

;```jquery
$("#name").hide()

Kopiuj

pol90

2018-04-13 11:33

pol902018-04-13 11:33

Rejestracja:ponad 10 lat
Ostatnio:ponad 3 lata
Postów:1181

0

Teraz po zmianie na boostrap 4 nie chcę działać.

pol90

2018-04-13 12:20

pol902018-04-13 12:20

Rejestracja:ponad 10 lat
Ostatnio:ponad 3 lata
Postów:1181

0

Jednak wszystko działa dobrze, a jak zrobić tak,żeby jak się najedzie na input to się w tym inpucie pokazywał ten tekst a jak się najedzie na pozostałą część to się ten input chowa w tym formie i tekst pokazuje się na górze.

jawlo

2018-04-13 14:12

jawlo2018-04-13 14:12

Rejestracja:ponad 7 lat
Ostatnio:około 10 godzin
Postów:134

0

Coś takiego?

Kopiuj

    <div style=" visibility: hidden;" id="tmstatus">bla bla</div>    
    <input id="textBoxId" name="tm_name" >   
 
    <script type="text/javascript">
        var div_val = jQuery("#tmstatus").html();
        jQuery("input[name='tm_name']")
            .mouseenter(function(){
                $(this).val(div_val);
            })
            .mouseleave(function(){
                $(this).hide();
                $("#tmstatus").css( "visibility", "visible");
            }); 
    </script>

pol90

2018-04-13 14:24

pol902018-04-13 14:24

Rejestracja:ponad 10 lat
Ostatnio:ponad 3 lata
Postów:1181

0

Ale to w ogóle nie działa tak jak powinno.

jawlo

2018-04-13 14:36

jawlo2018-04-13 14:36

Rejestracja:ponad 7 lat
Ostatnio:około 10 godzin
Postów:134

0

pol90 napisał(a):

Jednak wszystko działa dobrze, a jak zrobić tak,żeby jak się najedzie na input to się w tym inpucie pokazywał ten tekst a jak się najedzie na pozostałą część to się ten input chowa w tym formie i tekst pokazuje się na górze.

Tutaj jest przykład działania tego kodu:
https://jsfiddle.net/jcumd7mo/3/

To jak to ma działać?

edytowany 1x, ostatnio: jawlo 2018-04-13 14:37

pol90

2018-04-13 15:05

pol902018-04-13 15:05

Rejestracja:ponad 10 lat
Ostatnio:ponad 3 lata
Postów:1181

0

Ale tu chodzi o to, żby pole tekstowe nie znikało, a po na jechaniu na body ma się znowu znaleźć w polu tekstoym.

jawlo

2018-04-13 16:14

jawlo2018-04-13 16:14

Rejestracja:ponad 7 lat
Ostatnio:około 10 godzin
Postów:134

0

Czyli ma pojawiać się i znikać zawartość pola tekstowego?

Przykład

pol90

2018-04-13 16:21

pol902018-04-13 16:21

Rejestracja:ponad 10 lat
Ostatnio:ponad 3 lata
Postów:1181

0

jawlo napisał(a):

Czyli ma pojawiać się i znikać zawartość pola tekstowego?

Przykład

Tak a obraz pojawiać się na górze.

jawlo

2018-04-13 17:00

jawlo2018-04-13 17:00

Rejestracja:ponad 7 lat
Ostatnio:około 10 godzin
Postów:134

0

Obraz? znaczy się kopia?

https://jsfiddle.net/v9r0802r/2/

pol90

2018-04-13 17:13

pol902018-04-13 17:13

Rejestracja:ponad 10 lat
Ostatnio:ponad 3 lata
Postów:1181

0

Wszystko dobrze tylko, że to nie chce działać u mnie na mojej maszynie.

jawlo

2018-04-13 17:16

jawlo2018-04-13 17:16

Rejestracja:ponad 7 lat
Ostatnio:około 10 godzin
Postów:134

0

Co to za maszyna? Jakie środowisko?

pol90

2018-04-13 17:18

pol902018-04-13 17:18

Rejestracja:ponad 10 lat
Ostatnio:ponad 3 lata
Postów:1181

0

Debian 8.4 firefox 52

jawlo

2018-04-13 17:36

jawlo2018-04-13 17:36

Rejestracja:ponad 7 lat
Ostatnio:około 10 godzin
Postów:134

0

I jeszcze bootstrap...
Czyli problem leży w środowisku. W tym nie pomogę. Powodzenia

pol90 2018-04-13 17:44

Bootstrap to jest 4

NitroCrash

2018-04-13 17:57

NitroCrash2018-04-13 17:57

Rejestracja:około 7 lat
Ostatnio:ponad 6 lat
Postów:19

0

A co ci konsola wyświetla? Jak błąd?

pol90

2018-04-13 17:59

pol902018-04-13 17:59

Rejestracja:ponad 10 lat
Ostatnio:ponad 3 lata
Postów:1181

1

NitroCrash napisał(a):

A co ci konsola wyświetla? Jak błąd?

http://127.0.0.1/81/formularz/bootstrap-3/css/bootstrap-theme.min.css

n0name_l 2018-04-13 18:01

:-D

pol90 2018-04-13 18:03

Taki błąd mi wyświetla

NitroCrash 2018-04-13 18:03

Rozumiem że ci wyświetla Ci że nie masz takiego pliku?

pol90 2018-04-13 18:05

tak,całego błędu nie mogłem skopiować

NitroCrash 2018-04-13 18:05

To zrób screena, albo spróbuj skopiować wierze w Ciebie

pol90

2018-04-13 18:08

pol902018-04-13 18:08

Rejestracja:ponad 10 lat
Ostatnio:ponad 3 lata
Postów:1181

0

Taki załącznik

zrzut ekranu7.png (9 KB) - ściągnięć: 247

NitroCrash 2018-04-13 18:11

To skasuj tą linijke gdzie ładujesz ten styl, to nie bedzie ci się to wyświetlać. A co do właściwego problemu - podpiałeś w ogóle ten skrypt?

pol90 2018-04-13 18:14

To może ja jakiś błąd zrobiłem bo skopiowałem na żywca te pliki z boostrapa 4 na bootstrap 3 i mogły jakieś pliki z boostrap 3 zostać

NitroCrash 2018-04-13 18:16

Zobacz czy ci się biblioteka jQuery ładuje

pol90

2018-04-13 18:32

pol902018-04-13 18:32

Rejestracja:ponad 10 lat
Ostatnio:ponad 3 lata
Postów:1181

0

A jak w ogóle powinien być podłączony boostrap 4 bo mi taką ilość błędów wyrzuca, a ja ma tak go załadowane

Kopiuj

<link rel="stylesheet" href="./bootstrap4/css/bootstrap.min.css">

<script src="./bootstrap4/js/bootstrap.min.js"></script>

zrzut ekranu8.png (127 KB) - ściągnięć: 149

NitroCrash

2018-04-13 18:40

NitroCrash2018-04-13 18:40

Rejestracja:około 7 lat
Ostatnio:ponad 6 lat
Postów:19

0

Modyfikowałeś ten plik ? Może z cdna skorzystaj :
Najpierw ładujesz jquery i popper:

Kopiuj


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>

Później ładujesz bootstrapa

Kopiuj

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

Dodatkowo wysyłam Ci odnośnik do oficjalnej strony :
https://getbootstrap.com/docs/4.1/getting-started/download/

edytowany 2x, ostatnio: NitroCrash 2018-04-13 18:47

pol90

2018-04-13 19:50

pol902018-04-13 19:50

Rejestracja:ponad 10 lat
Ostatnio:ponad 3 lata
Postów:1181

0

NitroCrash napisał(a):

Modyfikowałeś ten plik ? Może z cdna skorzystaj :
Najpierw ładujesz jquery i popper:
Kopiuj
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
Później ładujesz bootstrapa
Kopiuj
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
Dodatkowo wysyłam Ci odnośnik do oficjalnej strony :
https://getbootstrap.com/docs/4.1/getting-started/download/
Też nie działa, a najlepsze jest to, że jak usunąłem definicje bootstrapa to tez nie działało, a przecież ten skrypt nie korzysta z bootstrapa.

NitroCrash 2018-04-13 19:52

podaj wynikowy kod twojej podstrony gdzie chcesz odpalić ten skrypt

pol90

2018-04-13 19:58

pol902018-04-13 19:58

Rejestracja:ponad 10 lat
Ostatnio:ponad 3 lata
Postów:1181

0

Kopiuj

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>



    <script type="text/javascript">
    //alert("dobrze");
var div_val = jQuery("#tmstatus").html();
jQuery("input[name='tm_name']")
	.mouseenter(function(){
    $(this).val(div_val); 
    $("#tmstatus").css( "visibility", "hidden");
  })
  .mouseleave(function(){
    $(this).val("");
    $("#tmstatus").css( "visibility", "visible");
  });
    </script>
<link rel="stylesheet" href="style.css" type="text/css" />
   <div class="container-fluid">
    <div class="row">
      <div class="col-md-3 col-xs-3">
     <div style=" visibility: hidden;" id="tmstatus">bla bla</div>   
	<input id="textBoxId" name="tm_name" class="form-control" >    
	<hr class=hr>
      </div>
      <div class="col-md-3 col-xs-3">
      asdasd
	<input type=text name=dd class=form-control>
	<hr class=hr>
      </div>
     </div>
    </div>

NitroCrash

2018-04-13 20:06

NitroCrash2018-04-13 20:06

Rejestracja:około 7 lat
Ostatnio:ponad 6 lat
Postów:19

1

Kopiuj

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
    crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
    crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
    crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css" type="text/css" />


<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 col-xs-3">
            <div style=" visibility: hidden;" id="tmstatus">bla bla</div>
            <input id="textBoxId" name="tm_name" class="form-control">
            <hr class=hr>
        </div>
        <div class="col-md-3 col-xs-3">
            asdasd
            <input type=text name=dd class=form-control>
            <hr class=hr>
        </div>
    </div>
</div>
<script type="text/javascript">
    var div_val = jQuery("#tmstatus").html();
    jQuery("input[name='tm_name']")
        .mouseenter(function () {
            $(this).val(div_val);
            $("#tmstatus").css("visibility", "hidden");
        })
        .mouseleave(function () {
            $(this).val("");
            $("#tmstatus").css("visibility", "visible");
        });
</script>

Na końcu daje się skrypty bo się dom nie załadował.

edytowany 2x, ostatnio: NitroCrash 2018-04-13 20:46

pol90 2018-04-13 20:22

Nadal nie działa.

NitroCrash 2018-04-13 20:47

Srry, zedytowałem post teraz wklej kod.

pol90 2018-04-13 21:02

Teraz działa dzięki.

NitroCrash 2018-04-13 21:04

Spoko. Dodatkowo polecałbym poczytać więcej o htmlu, css i javascript

pol90 2018-04-13 21:05

Specjalizuje się w PHP.

pol90

2018-04-14 16:31

pol902018-04-14 16:31

Rejestracja:ponad 10 lat
Ostatnio:ponad 3 lata
Postów:1181

0

A ja bym chciał jeszcze, żeby się dało wpisać jakiś text bo ciągle się wpisuje to bla bla i próbowałem czegoś takiego, ale to nie do końca działa

Kopiuj

    var div_val = jQuery("#tmstatus").html();
    alert("dobrze");
    
    jQuery("input[name='tm_name']")
    
        .mouseenter(function () {
        if (($("#tmstatus").text() == "") || ($("#tmstatus").text() == "bla bla")) {
            $(this).val(div_val);
            $("#tmstatus").css("visibility", "hidden");
            }
        })
        .mouseleave(function () {
        if (($("#tmstatus").text() == "") || ($("#tmstatus").text() == "bla bla")) {
            $(this).val("");
            $("#tmstatus").css("visibility", "visible");
            }
            
        });

I chciałbym, żeby to kliknięciem a nie opuszczeniem myszki się dało zrobić.

NitroCrash 2018-04-14 16:46

A po co chcesz to robić w ogóle? Bo mi to wygląda że chcesz zrobić zwykły placeholder.

pol90 2018-04-14 16:47

To nie zwykły placoholder.

jawlo

2018-04-14 17:36

jawlo2018-04-14 17:36

Rejestracja:ponad 7 lat
Ostatnio:około 10 godzin
Postów:134

0

Jak klikniesz to aktywujesz pole i możesz w nim pisać.
Jeżeli chcesz aby zawartość pola była przeniesiona to zobacz ten przykład:
https://jsfiddle.net/fahgd16e/2/

pol90 2018-04-14 17:38

Wszystko jest ta samo.

jawlo 2018-04-14 17:57

Napisz dokładnie o co Ci chodzi. Masz pole tekstowe... i co dalej?

pol90 2018-04-14 18:06

To ma wyglądać tak jak tutaj https://snp.agency/en/contacts

jawlo

2018-04-14 18:34

jawlo2018-04-14 18:34

Rejestracja:ponad 7 lat
Ostatnio:około 10 godzin
Postów:134

0

Jest trochu z tym zabawy. Główny efekt uzyskasz w ten sposób: https://jsfiddle.net/j29u4jLg/10/
Natomiast animacje uzyskasz funkcją.... animate(). https://www.w3schools.com/jquery/jquery_animate.asp

NitroCrash

2018-04-15 12:33

NitroCrash2018-04-15 12:33

Rejestracja:około 7 lat
Ostatnio:ponad 6 lat
Postów:19

2

Ja bym w tym wypadku nie robił tego na JQuery. Po co, jak można samym cssem :)
https://codepen.io/kaezarrex/pen/EmzVLM

Jak za pomocą jquery przeniść wartość na pole tekstowe

pol90

reinman

pol90

pol90

pol90

jawlo

pol90

jawlo

pol90 napisał(a):

pol90

jawlo

pol90

jawlo napisał(a):

jawlo

pol90

jawlo

pol90

jawlo

NitroCrash

pol90

NitroCrash napisał(a):

pol90

pol90

NitroCrash

pol90

NitroCrash napisał(a):

pol90

NitroCrash

pol90

jawlo

jawlo

NitroCrash

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami