ФорумПрограммированиеJavaScript → Кнопка-картинка

Кнопка-картинка

  • smv

    Сообщения: 236 Репутация: N Группа: Кто попало

    Spritz 19 января 2010 г. 5:18

    Здравствуйте. Помогите пожалуйста сделать картинку - кнопку (Submit). Делал по разному но не получается. И с использованием Javascript и просто используя <input type="image">. Была идея сделать обычную кнопку и стилями ее отредактировать… сделать фон картинкой… но там один косяк который неустраивает, это то что когда картинки отключены в браузере то и кнопку не видно.

    С использованием JS делал так:

    <SCRIPT language="JavaScript"> 
    function submitform(){
    document.myform.submit();
    }
    </SCRIPT>

    <a href="javascript: submitform()">Найти</a>


    Но к сожалению не работает… Там еще штука такая есть… Когда у меня была кнопка Submit я обрабатывал ее нажатие так:

    If (!isset($Название кнопки)){
    какое-то действие
    }


    И сейчас надо так же… Такую задачу можно как-нибудь решить? И если да, то как.
  • adw0rd

    Сообщения: 22905 Репутация: N Группа: в ухо

    Spritz 19 января 2010 г. 5:31, спустя 12 минут 23 секунды

    никогда так не делайте:
    <a href="javascript: submitform()">


    надо так:
    <a href="#" onclick="submitform();return false;">


    а еще лучше вешать onclick в коде, типа:
    $('#button').click(submitform)

    <a id="button" href="#">


    Спустя 66 сек.
    <SCRIPT language="JavaScript"> 
    вы откуда копируете это гамно?

    надо так
    <script type="text/javascript"> 
    Спустя 141 сек.
    привидите форму, в кратком виде, без всякой лишней верстки
    adw/0
  • smv

    Сообщения: 236 Репутация: N Группа: Кто попало

    Spritz 19 января 2010 г. 5:52, спустя 20 минут 55 секунд



    <script type="text/javascript">
    function submitform(){
    document.form.submit();
    }
    </SCRIPT>

    <form action="" name="form">
    <a href="#" name="add" id="add" onclick="submitform();return false;"><img src="img/add_cart.jpg" width="164" height="28" border="0"/></a>

              <?  // Так как обрабатывал нажатие кнопки выше указанным образом, тут решил проверить будет ли какая то реакция на все это

    if (isset($add)){
    echo 'yes';
    }
    ?>
    </form>


    Ну вот так вот не получается
  • adw0rd

    Сообщения: 22905 Репутация: N Группа: в ухо

    Spritz 19 января 2010 г. 6:19, спустя 27 минут 14 секунд

    привидите форму, в кратком виде, без всякой лишней верстки
    Спустя 14 сек.
    мне нужны ваши инпуты
    Спустя 171 сек.



    <script type="text/javascript">
    function submitform(){
    document.form.submit();
    }
    </script>

    <form action="" name="form">
       <input name="test" />
       <a href="#" name="add" id="add" onclick="submitform();return false;"><img src="img/add_cart.jpg" width="164" height="28" border="0"/></a>
    </form>

    <?php
       var_dump($_GET);
    ?>

    работает прекрасно!
    adw/0
  • smv

    Сообщения: 236 Репутация: N Группа: Кто попало

    Spritz 19 января 2010 г. 6:46, спустя 26 минут 46 секунд

    Да ! Это работает.
    Но мне нужно немножко другое. Мне нужно не значение инпута.

    Смысл такой … Когда мы жмем кнопку Submit появляется переменная с именем кнопки. т.е. нажатие кнопки было.

    Вот если написать так

    <form action="" name="form">
    <input type="submit" name="add" value="Submit" />
    </form>

    <?php
    if (isset($add)){
    echo 'yes';
    }
    ?>


    То это работает… Т.е. после нажатия на кнопку - существует переменная add.

    А как подобное сделать используя JS?
  • adw0rd

    Сообщения: 22905 Репутация: N Группа: в ухо

    Spritz 19 января 2010 г. 7:14, спустя 28 минут 6 секунд

    Я вас нифига не понимаю. Но попробую предугадать:

    А как подобное сделать используя JS?



    function submitform(){
    alert('Кнопка была нажата!!!!1111');
    document.form.submit();
    }


    Не то?
    adw/0
  • smv

    Сообщения: 236 Репутация: N Группа: Кто попало

    Spritz 19 января 2010 г. 7:19, спустя 5 минут 42 секунды

    <form action="" name="form">
    <input type="submit" name="add" value="Submit" />
    </form>

    <?php
    if (isset($add)){
    echo 'yes';
    }
    ?>


    Вот пример. Тут у нас есть форма. Есть кнопка. Делая простую проверку на существование переменной (название кнопки) на экран выводим надпись. А переменная существовать начинает только после того как нажата кнопка.

    А нужно сделать все тоже самое, только вместо кнопки должен быть рисунок (ну т.е. грубо просто ссылка)
  • smv

    Сообщения: 236 Репутация: N Группа: Кто попало

    Spritz 19 января 2010 г. 7:26, спустя 6 минут 13 секунд

    <script type="text/javascript">
    function submitform(){
    document.form.submit();
    }
    </script>

    <form name="form">
    <input name="test" type="hidden" value="<? echo $add; ?>"/>
    <a href="" name="add" id="add" onclick="submitform();return false;"><img src="img/add_cart.jpg" width="164" height="28" border="0"/></a>
    <label></label>
    </form>

    <?php
    if (isset($test)){
    echo 'yes';
    }
    ?>


    Придумал сделать то что мне надо используя скрытые поля… Насколько это правильно?
  • adw0rd

    Сообщения: 22905 Репутация: N Группа: в ухо

    Spritz 19 января 2010 г. 7:29, спустя 2 минуты 55 секунд

    smv, скрытые поля для вас самое то. Но вообще, можно и без него:


    <?php
    if($_POST) {
    echo 'success';
    }
    ?>
    <form name="form" method="POST" action="">
    <a href="" name="add" id="add" onclick="submitform();return false;"><img src="img/add_cart.jpg" width="164" height="28" border="0"/></a>
    </form>
    adw/0
  • smv

    Сообщения: 236 Репутация: N Группа: Кто попало

    Spritz 19 января 2010 г. 7:34, спустя 5 минут 9 секунд

    спасибо
  • smv

    Сообщения: 236 Репутация: N Группа: Кто попало

    Spritz 19 января 2010 г. 8:55, спустя 1 час 21 минуту 23 секунды

    Возникла еще одна проблемка.
    Используя вот такой вот код

    <script type="text/javascript">
    function submitform(){
    document.form.submit();
    }
    </script>

    <form name="form">
    <input name="test" type="hidden" value="<? echo $add; ?>"/>
    <a href="" name="add" id="add" onclick="submitform();return false;"><img src="img/add_cart.jpg" width="164" height="28" border="0"/></a>
    <label></label>
    </form>

    <?php
    if (isset($test)){
    echo 'yes';
    }
    ?>


    все работает.

    При добавлении аналогичным образом еще одной кнопки. Она не работает. Есть мысли о том что в одной форме дветакие функции выполнить нельзя. Поэтому наверное код

    <script type="text/javascript">
    function submitform(){
    document.form.submit();
    }
    </script>

    Нужно немного модифицировать.

    А модифицировать надо строку document.form.submit();. Так?

    Если так то возникает вопрос. Как? Я так понимаю надо сконкретизировать необходимый элемент. т.е. вот так document.form.Какой то элемент.submit();

    Я правильно думаю?
  • adw0rd

    Сообщения: 22905 Репутация: N Группа: в ухо

    Spritz 19 января 2010 г. 9:28, спустя 33 минуты 14 секунд

    При добавлении аналогичным образом еще одной кнопки.
    код в студию
    adw/0
  • smv

    Сообщения: 236 Репутация: N Группа: Кто попало

    Spritz 19 января 2010 г. 9:36, спустя 7 минут 10 секунд

    <script type="text/javascript">
    function submitform(){
    document.form.submit();
    }
    </script>

    <form name="form">

    <input name="test" type="hidden" value="<? echo $add; ?>"/>
    <a href="" name="add" id="add" onclick="submitform();return false;"><img src="img/add_cart.jpg" width="164" height="28" border="0"/></a>

    <input name="test2" type="hidden" value="<? echo $select; ?>"/>
    <a href="" name="select" id="select" onclick="submitform();return false;"><img src="img/select_all.jpg" width="123" height="28" border="0"/></a>

    </form>
  • adw0rd

    Сообщения: 22905 Репутация: N Группа: в ухо

    Spritz 19 января 2010 г. 9:44, спустя 8 минут 33 секунды

    function submitform(val) {
    document.getElementById('mybutton').value = val;
    document.form.submit();
    }



    <form name="form">
    <input id="mybutton" name="test" type="hidden" />
    <a href="" name="add" id="add" onclick="submitform('<? echo $add; ?>'); return false;"><img src="img/add_cart.jpg" width="164" height="28" border="0"/></a>
    <a href="" name="select" id="select" onclick="submitform('<? echo $select; ?>'); return false;"><img src="img/select_all.jpg" width="123" height="28" border="0"/></a>
    </form>
    adw/0
  • smv

    Сообщения: 236 Репутация: N Группа: Кто попало

    Spritz 20 января 2010 г. 3:15, спустя 17 часов 31 минуту 23 секунды

    <script type="text/javascript">
    function submitform(val) {
    document.getElementById("mybutton").value = val;
    document.form1.submit();
    }
    </script>


    <input id="mybutton" name="test" type="hidden"/>
    <a href="" name="add" id="add" onclick="submitform(<? echo $add_cart ?>); return false;"><img src="img/add_cart.jpg" width="164" height="28" border="0"/></a>
    <a href="" name="selectall" id="selectall" onclick="submitform(<? echo $selectall ?>); return false;"><img src="img/select_all.jpg" width="123" height="28" border="0"/></a>


    Код рабочий, но есть одно но. Загвоздка вот в этой строке:
    <input id="mybutton" name="test" type="hidden"/>
    Название элемента test. Следовательно при обработке формы значение (т.е. нажатие кнопки) получает переменная test. B все операции надо проводить именно с этой переменной. А мне нужны переменные add и selectall. Т.е. когда название скрытого поля либо add либо selectall все работает великолепно… Но вместе их использовать не получается. Потому что надо что б значение (т.е. нажатие кнопки) получала не переменная test, а переменная add либо selectall. в зависимости какая кнопка нажимается
    Спустя 203 сек.
    ошибочка вышла… вот такой вот код

    <input id="mybutton" name="test" type="hidden"/>
    <a href="" name="add" id="add" onclick="submitform(<? echo $add ?>); return false;"><img src="img/add_cart.jpg" width="164" height="28" border="0"/></a>
    <a href="" name="selectall" id="selectall" onclick="submitform(<? echo $selectall ?>); return false;"><img src="img/select_all.jpg" width="123" height="28" border="0"/></a>

Пожалуйста, авторизуйтесь, чтобы написать комментарий!